Tutorials: Tutorial: add a nice frame around your pictures

Posted by: alain01On 2013/7/9 22:20:00 8160 reads
The summer is here and it's time to publish news with your holidays pictures in your web sites...
Here find a new tutorial for improve your design, more modern, more pro.
i Hope you will like it...

In fact, we would add a white frame aroud your pictures with an shade effect.

Resized Imagelook at the result here before ! ======> After !Resized Image



























OK, let'ssss go for this tutorial :


1) Add a new style in the css files

Open and edit your style.css file in your theme,
located in /themes/my_theme/css ou /themes/my_theme
and add, at the end this code :

img.img-frame { 
/* Couleur ombre de la photo */ 
    box-shadow: 5px 5px 20px #404040;  
/*    Effet cadre vielli, pour photo noir et blanc style ancien */ 
/*    border-color: #f5eac7; */ 
    border-color: #ffffff; 
    border-style: solid; 
    border-width: 20px; 
    display: block; 
    margin-l; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 10px; 
    margin-bottom: 10px; 
}


then save it and upload in your web site.
You have just done the harder work in this tutorial. Yesss !!!


2) Erase cache of your browser

Just to do for the 1st time.


3) Use this new class with a picture

3a) Basic Editor (Textarea)
See 3b)

3b) XOOPS Editor (DHTMLTextarea)
In bbcode, it doen't work. We can't add a class in a bbcode.
If you work a custom block; choose Content Type : "HTML".
Then insert you picture like that :


3c) TinyMCE (v3)
- Click on the button "insert picture",
- Type something in the fields "URL", "Description" and "Title",
- Click on the tab named "Apparence" and choose for the field "class", in tke list, "img-frame" then ok


So, Easy, no ?
Don't hesitate to test yourself !!!

To continue to work deeper :

- Modify the color of the frame (here white), by a "old yellow" for black and white old style for pictures,
- Modify the color of shade,
- Modify the direction of the shade,
- Modify the width of the shade,
- Finally, we could add dynamic effects (zoom in for exmple on hover) but be carreful, not too effect, please...

If you like our tutorial, tell it us.

PS : Kris said (in frxoops.org) that we could use a an existant class in xoops.css :
class="pad10 boxshadow" but the effect is not the same, but so easy to use, no need to change the css style.