宗像タウン情報 キラリ

お問い合わせ

 

  ホーム >> RSSセンター >> Tutorial: add a nice frame around your pictures

RSSセンター

  メイン  |  簡易ヘッドライン  

link XOOPS.org XOOPS.org (2024/11/23 0:32:12)

feed Tutorial: add a nice frame around your pictures (2013/7/11 6:20:00)
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.

Original Image look at the result here before ! ======> After !Original 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 :
<i mg src=" http://www.mysite.fr/my_picture.png" class_="img-frame" />

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.


execution time : 0.019 sec

↑ PAGE TOP