Change of sidebar layout WordPress
- SOLVED
Hi,
I want to change the two sidebars on http://www.just-justinbieber.com/
to look like the attached image -
round corners and a drop shadow
The size of the sidebar shall be in proportion with it´s content, so not this size!
I also the want the layout like this for every single widget post.
Thanks
Charlotte
Answers (2)
Francisco Javier Carazo Gil answers:
Hi Charlotte,
You can use CSS3 and the property border-radius:
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
Then to create the shadow you can use the next one (see how the parameters are set in [[LINK href="http://www.css3.info/wp-content/uploads/2010/08/spread-blur4.png"]]this link[[/LINK]]):
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
If you cannot make it compatible with all IE versiones, you will have to implement this one with sprites. It is not clear nor smart, but it runs in IE. I could explain all the process, but it's better with pics.
[[LINK href="http://cssglobe.com/post/3714/css-sprites-rounded-corners"]]This tutorial[[/LINK]] is really clear.
To edit images use free software (free of freedom, in addition to, no price), for example, [[LINK href="http://www.gimp.org/"]]The Gimp[[/LINK]].
Charlotte Raboff comments:
Ok... but where do I put your code? In which file?
Francisco Javier Carazo Gil comments:
The code should be placed in: http://www.just-justinbieber.com/wp-content/themes/thesis_182/style.css.
The element refered are:
* By id: #sidebar1 and #sidebar2
* By class: .sidebar
Charlotte Raboff comments:
Sorry, I don´t understand what you mean by id. Shall I replace something?
As my knowledge is not so good when it comes to things like this, it´s better if I just <strong>get a clear instruction</strong> like
paste this code:........ in the style.ccs in the bottom or replace line ......with this code......
Francisco Javier Carazo Gil comments:
In style.css you have to find:
/*---:[ sidebar styles ]:---*/
And copy below:
.sidebar{
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}
Change the parameters to adjust the result.
Charlotte Raboff comments:
Great, thanks!
How do I move the sidebars to the right a little bit and with some more space between?
I also have to move the headline down a bit.
Charlotte Raboff comments:
one more thing....I wanted a new "sidebar" for every new widget post