5 replies [Last post]
magenta1211
magenta1211's picture
Offline
newbie
Last seen: 6 years 36 weeks ago
Timezone: GMT+1
Joined: 2015-01-13
Posts: 3
Points: 4

Hi, I am just beginning with wordpress + css, and I am stuck with my sidebars. I would like each of the widgets in the sidebar to apply this code:

.content-box{
background: #FFF;
width: 200px;
margin: auto;
padding: 20px;
box-shadow: 0px 0px 7px rgba(0,0,0,.4);
border-radius: 3px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}

But I have no idea where to place it! Can anyone help me with this?
Thank you

jackR
jackR's picture
Offline
Regular
Denver
Last seen: 6 years 9 weeks ago
Denver
Timezone: GMT-6
Joined: 2009-04-13
Posts: 44
Points: 46

theme?

Are you Using a theme?

You are most likely using a them and if you are, you should find the theme css at the following location:

/wp-content/themes/theNameOfTheThemeYouHaveChoosen/style.css

Hope that helps

magenta1211
magenta1211's picture
Offline
newbie
Last seen: 6 years 36 weeks ago
Timezone: GMT+1
Joined: 2015-01-13
Posts: 3
Points: 4

Thanks - I have added my code

Thanks - I have added my code there, but how can I call it from the widgets in the sidebar? Right now it only affects the elements which I can call it from.

jackR
jackR's picture
Offline
Regular
Denver
Last seen: 6 years 9 weeks ago
Denver
Timezone: GMT-6
Joined: 2009-04-13
Posts: 44
Points: 46

You should need too since the

You should need too since the code you added is on the global style sheet which should apply it's styles to the document. If your changes are not working, use firebug to inspect the element and see if their is other CSS on the page that is overwriting your new styling.

magenta1211
magenta1211's picture
Offline
newbie
Last seen: 6 years 36 weeks ago
Timezone: GMT+1
Joined: 2015-01-13
Posts: 3
Points: 4

Not sure if I already replied

Not sure if I already replied to this - sorry if I am duplicating the message!

I have applied that code to a css plugin that overrides style.css, but how do I call that specific class from the sidebar or the widgets? Currently all the text boxes in my site have that code, except for the sidebar.

Thanks for your patience.

jackR
jackR's picture
Offline
Regular
Denver
Last seen: 6 years 9 weeks ago
Denver
Timezone: GMT-6
Joined: 2009-04-13
Posts: 44
Points: 46

If I understand your

If I understand your question, you are asking how to apply your new styles to just the widget in your side bar and it sounds like your new styling is affecting other elements on the page that you done't want affected.

If this is correct, you are probably no specific enough in your CSS code and need it to be more specific.

For example, below is a very generic and non specific style:

p {
    font-size: 10px;
}

This code will of course effect all the p tag elements on your page. If I wanted to only affect p tags in a parent container with an ID of parent, I would code as follows to avoid effecting the other p tags on my web document:

#parent p {
  font-size: 20px;
}

Now this new style will only effect the p tags nested in the parent element with the id of parent.

I assume that his is what you are trying to do when you refer to calling the class from the side bar.

Hope that helps.