When a picture is added to the sidebar, using Template -> Page Elements -> Add a Page Element -> Picture, there is an option at the bottom of the panel for you to have the picture “Shrink to fit”. Choose this option and the image will be automatically resized so as to fit your sidebar. Otherwise, it might appear to exceed the width of the sidebar. Once the picture is added, when you view the picture, it may appear to be on one side, either to the left or the right.
To adjust the position of the picture, you can insert a definition into the stylesheet. Under Template -> Edit HTML, scroll to any part of the segment. For easy reference, we inserted it here:-
/* Sidebar Boxes */
.sidebar img { margin-left:25px; border:5px solid #e8baba; } |
|---|
All you need is to insert the portion in blue to adjust the position of the image. You can change it to margin-right too. The attribute text-align:center; is tricky as it is not supported in some browsers.
The part in red is the styling that you can do. You don't need this unless you want the sidebar pictures to be different from the Blog Post pictures. In this example, we have set a border of 5px and assigned a color (#e8baba). You can have no border by putting the value as 0px or you can have a different color to the border.
The result is a picture in the sidebar that looks like this:-
@ Copyright 2012 Pradeep Lodhi (ethical hacker)
No comments:
Post a Comment