Image Post Designs

[sireesanwar.livejournal.com]

Account Status: All
Actions: Image Styling
Theme: Working in Flexible Squares but likely works with all.

Ever been to a journal where their images are all fancy with border or rounded corners. Let's show you how this works.

1. Let's say you want a border around your image.


The way we do this is simple. In your Custom CSS section you want to add the below coding to your Custom Stylesheet. After the body section is great.
img.special { border: 10px solid #eeeeee; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -khtml-border-radius: 15px; }
This is the coding you'd want in your post
<img src="image.jpg" class="special">


Use this coding while the "class" function isn't working on LJ
i img { border: 10px solid #eeeeee; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -khtml-border-radius: 15px; }

<i><img src="image.jpg" class="special"></i>

2. But lets say you want it to just have rounded corners and no border.


Then we are going to want to change that coding to this.
img.special { border: 0px solid #eeeeee; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -khtml-border-radius: 15px; }
This is the coding you'd want in your post
<img src="image.jpg" class="special">


Use this coding while the "class" function isn't working on LJ
i img { border: 0px solid #eeeeee; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -khtml-border-radius: 15px; }

<i><img src="image.jpg" class="special"></i>

Thank you to fueschgast at s2flexisquares for helping with this. Genius!