The forum of the forums
Welcome on the Forumotion Support Forum.

To take full advantage of everything offered by our forum, please log in if you are already a member or join our community if you're not yet....



Create a free forum like this one.

Customize attachments frame

View previous topic View next topic Go down

Customize attachments frame

Post by Leeloo on March 30th 2010, 1:53 am

Customize attachments frame


Following the update last week, Forumotion provides this trick so you can customize the attachments:

Note


The effect only appears
for members using
browsers:

  • Firefox
  • Safari
  • Google Chrome


CSS addition

Admin panel Display Colors CSS Stylesheet


Add this code :

Code:
.attachbox{
background-color: #191919;
background-image: url('http://i65.servimg.com/u/f65/11/95/30/70/fond12.jpg');
border: 1px solid #888888;
-moz-border-radius-topleft: 15px;
-webkit-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-radius-topright: 15px;
-moz-border-radius-bottomright: 0px;
-webkit-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius-bottomleft: 0px;
color:#ffffff;
}
 
.attachbox dl.file{
background-color: #212121;
margin-top: 8px;
padding: 5px;
border: 1px solid #fff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}




Summary of CSS properties:



.attachbox
>> Part A
background-color: #191919; >> Background color
background-image:
url('http:image.address');
>> Background image
border: 1px solid #888888; >> Part A border
-moz-border-radius-topleft: 15px;
-webkit-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-radius-topright: 15px;
-moz-border-radius-bottomright: 0px;
-webkit-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius-bottomleft: 0px;
>> The 4 corners
color:#ffffff; >> Part A text color
.attachbox dl.file
>> Part B
background-color: #212121; >> Background color
margin-top: 8px; >> the outer margin high (top)
(See image B)
padding: 5px; >> The inner margin
(See image B)
border: 1px solid #fff; >> Border color
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
>> The 4 corners



Image B


This tutorial has been made by the French staff

No reproduction possible without our agreement, pursuant to Article L122-1 of the ICC.


Last edited by Typlo on April 1st 2010, 1:30 am; edited 2 times in total

Leeloo
Administrator
Administrator

Female
Posts: 3519
Language: French, English
Points: 3984
Join date: 2007-09-04

Back to top Go down

View previous topic View next topic Back to top


Permissions in this forum:
You cannot reply to topics in this forum