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
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
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.
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.
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.
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.