This tutorial will help you understand the different CSS selectors to style the widgets on your Forumotion forum.
All codes should go in :
Administration Panel > Display > Pictures and Colors > Colors > CSS stylesheet
 Widget selectors
The selectors below are intended for use for those who have experience with CSS. Remember to use the selectors that correspond to the version of your forum !
PhpBB2 | | #right .forumline, #left .forumline | Entire widget | | #right td.catHead .genmed, #left td.catHead .genmed, #right td.catLeft .genmed, #left td.catLeft .genmed | Title text | | #right td.catHead, #left td.catHead, #right td.catLeft, #left td.catLeft | Title background | | #right .forumline .row1, #left .forumline .row1 | Widget cell 1 | | #right .forumline .row2, #left .forumline .row2 | Widget cell 2 | | #right .forumline .row3, #left .forumline .row3 | Widget cell 3 | PhpBB3 | | .module | Entire widget | | .module .h3 | Widget title | | .module .inner | Widget content | PunBB | | .module | Entire widget | | .module .main-head | Widget title | | .module .main-content | Widget content | Invision | | .module.borderwrap | Entire widget | | .module .maintitle | Widget title | | .module .box-content | Widget content | PhpBB3, PunBB, Invision | | .module .row1 | Widget cell 1 | | .module .row2 | Widget cell 2 | | .module .row3 | Widget cell 3 |
Tricks
Display the title text as it was typed on PhpBB3 :
( From UPPERCASE to Normal )
- Code:
.module .h3 { text-transform:none }
Add a shadow to your widgets :
- Code:
#right .forumline, #left .forumline, .module { box-shadow:2px 2px 2px rgba(0,0,0,0.4) }
Self service
Copy / paste any of the following codes to install the widget design of your choice on your forum :
Administration Panel > Display > Pictures and Colors > Colors > CSS stylesheet
Self service 1
- Self service 1:
PhpBB2 :- Code:
#right td.catHead, #left td.catHead, #right td.catLeft, #left td.catLeft {
background:#EEE; /* background color */
box-shadow:0 5px 6px rgba(255,255,255,0.5) inset, 0 -5px 6px rgba(0,0,0,0.1) inset; /* inset shadows used for a gradient */
border-radius:6px 6px 0 0; /* rounds the borders */
border-bottom:1px solid #CCC; /* border size and color */
}
#right td.catHead .genmed, #left td.catHead .genmed, #right td.catLeft .genmed, #left td.catLeft .genmed {
color:#666; /* color of the title font */
font-size:12px; /* size of the title font */
padding:6px; /* Inner padding */
}
#right .forumline, #left .forumline {
background:#EEE; /* background color */
border:1px solid #CCC; /* border size and color */
border-radius:6px; /* rounds the borders */
}
#right .forumline .row1, #left .forumline .row1, #right .forumline .row2, #left .forumline .row2, #right .forumline .row3, #left .forumline .row3 { background:none /* removes the background color on the rows */ }
PhpBB3 :- Code:
.module .h3 {
color:#666; /* color of the title font */
font-size:10px; /* size of the title font */
text-transform:none; /* Changes the text transformation from uppercase */
background:#EEE; /* background color */
box-shadow:0 5px 6px rgba(255,255,255,0.5) inset, 0 -5px 6px rgba(0,0,0,0.1) inset; /* inset shadows used for a gradient */
border-bottom:1px solid #CCC; /* border size and color */
border-radius:6px 6px 0 0; /* rounds the borders */
margin:-5px -10px 5px -10px; /* spacing around the title | top left bottom right */
padding:6px; /* Inner padding */
}
.module {
background:#EEE; /* background color */
border:1px solid #CCC; /* border size and color */
border-radius:6px; /* rounds the borders */
}
.module .row1, .module .row2, .module .row3 { background:none /* removes the background color on the rows */ }
PunBB :- Code:
.module .main-head {
color:#666; /* color of the title font */
font-size:11px; /* size of the title font */
font-weight:700; /* boldness of the title */
background:#EEE; /* background color */
box-shadow:0 5px 6px rgba(255,255,255,0.5) inset, 0 -5px 6px rgba(0,0,0,0.1) inset; /* inset shadows used for a gradient */
border-bottom:1px solid #CCC; /* border size and color */
border-radius:6px 6px 0 0; /* rounds the borders */
padding:6px; /* Inner padding */
}
.module .main-content { background:#EEE; /* background color */ }
.module {
border:1px solid #CCC; /* border size and color */
border-radius:6px; /* rounds the borders */
}
.module .row1, .module .row2, .module .row3 { background:none /* removes the background color on the rows */ }
Invision :- Code:
.module .maintitle {
color:#666; /* color of the title font */
background:#EEE; /* background color */
box-shadow:0 5px 6px rgba(255,255,255,0.5) inset, 0 -5px 6px rgba(0,0,0,0.1) inset; /* inset shadows used for a gradient */
border-bottom:1px solid #CCC; /* border size and color */
border-radius:6px 6px 0 0; /* rounds the borders */
padding:6px; /* Inner padding */
}
.module .box-content { background:none /* removes background color */ }
.module.borderwrap {
background:#EEE; /* background color */
border:1px solid #CCC; /* border size and color */
border-radius:6px; /* rounds the borders */
}
.module .row1, .module .row2, .module .row3 { background:none /* removes the background color on the rows */ }
Self service 2
- Self service 2:
PhpBB2 :- Code:
#right td.catHead, #left td.catHead, #right td.catLeft, #left td.catLeft {
background:#19E; /* background color */
box-shadow:0 5px 6px rgba(255,255,255,0.5) inset, 0 -5px 6px rgba(0,0,0,0.1) inset; /* inset shadows used for a gradient */
border-radius:12px 3px 0 0; /* rounds the borders */
border-bottom:1px solid #39C; /* border size and color */
}
#right td.catHead .genmed, #left td.catHead .genmed, #right td.catLeft .genmed, #left td.catLeft .genmed {
color:#FFF; /* color of the title font */
font-size:12px; /* size of the title font */
padding:6px; /* Inner padding */
}
#right .forumline, #left .forumline {
background:#DEF; /* background color */
border:1px solid #39C; /* border size and color */
border-radius:12px 3PX; /* rounds the borders */
}
#right .forumline .row1, #left .forumline .row1, #right .forumline .row2, #left .forumline .row2, #right .forumline .row3, #left .forumline .row3 { background:none /* removes the background color on the rows */ }
PhpBB3 :- Code:
.module .h3 {
color:#FFF; /* color of the title font */
font-size:10px; /* size of the title font */
text-transform:none; /* Changes the text transformation from uppercase */
background:#19E; /* background color */
box-shadow:0 5px 6px rgba(255,255,255,0.5) inset, 0 -5px 6px rgba(0,0,0,0.1) inset; /* inset shadows used for a gradient */
border-bottom:1px solid #39C; /* border size and color */
margin:-5px -10px 5px -10px; /* spacing around the title | top left bottom right */
padding:6px; /* Inner padding */
}
.module {
background:#DEF; /* background color */
border:1px solid #39C; /* border size and color */
border-radius:12px 3px; /* rounds the borders */
}
.module .row1, .module .row2, .module .row3 { background:none /* removes the background color on the rows */ }
PunBB :- Code:
.module .main-head {
color:#FFF; /* color of the title font */
font-size:11px; /* size of the title font */
font-weight:700; /* boldness of the title */
background:#19E; /* background color */
box-shadow:0 5px 6px rgba(255,255,255,0.5) inset, 0 -5px 6px rgba(0,0,0,0.1) inset; /* inset shadows used for a gradient */
border-bottom:1px solid #39C; /* border size and color */
padding:6px; /* Inner padding */
}
.module .main-content { background:#DEF; /* background color */ }
.module {
border:1px solid #39C; /* border size and color */
border-radius:12px 3px; /* rounds the borders */
}
.module .row1, .module .row2, .module .row3 { background:none /* removes the background color on the rows */ }
Invision :- Code:
.module .maintitle {
color:#FFF; /* color of the title font */
background:#19E; /* background color */
box-shadow:0 5px 6px rgba(255,255,255,0.5) inset, 0 -5px 6px rgba(0,0,0,0.1) inset; /* inset shadows used for a gradient */
border-bottom:1px solid #39C; /* border size and color */
border-radius:12px 3px 0 0; /* rounds the borders */
padding:6px; /* Inner padding */
}
.module .box-content { background:none /* removes background color */ }
.module.borderwrap {
background:#DEF; /* background color */
border:1px solid #39C; /* border size and color */
border-radius:12px 3px; /* rounds the borders */
}
.module .row1, .module .row2, .module .row3 { background:none /* removes the background color on the rows */ }
Self service 3
phpbb3 only, thanks to Rhino.Freak
- Self service 3:
- Code:
.module .h3 {
margin-top: 8px;
text-align: center;
margin-bottom: 10px;
color: red !important; /*Change to whatever suits your forum style*/
border-bottom-color:red;
}
.module .row1, .module .row2 { background:none }
.module {
margin-left: 10px;
background-image: url('https://i57.servimg.com/u/f57/18/80/95/58/module11.png');
border: 1px solid #444;
background-position: center bottom;
background-repeat: repeat-x;
box-shadow: inset 0px 15px 5px #1B1B1B, 2px 2px 5px #000;
color:#CCC !important;
border-radius: 4px;
background-color:#0F0F0F;
color: #536482;
margin-bottom: 4px;
border: 1px dashed #444;
margin-top: 15px;
}
Want to propose another widget design for self service ? Do not hesitate to send it to us by PM ! 
|
|
Home
Personalize forum widgets with CSS
by Ange Tuteur December 12th 2014, 8:17 am
Posts : 13207
Posts : 15391
Similar topics
Facebook
Twitter
Pinterest
Youtube
