The forum of the forums
Welcome to the Official Support Forum of Forumotion!

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've not yet.



Create a free forum like this one.

Personalize forum widgets with CSS

View previous topic View next topic Go down

Personalize forum widgets with CSS

Post by Ange Tuteur on December 12th 2014, 8:17 am

Personalize forum widgets with CSS



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 .forumlineEntire widget
#right td.catHead .genmed, #left td.catHead .genmed, #right td.catLeft .genmed, #left td.catLeft .genmedTitle text
#right td.catHead, #left td.catHead, #right td.catLeft, #left td.catLeftTitle background
#right .forumline .row1, #left .forumline .row1Widget cell 1
#right .forumline .row2, #left .forumline .row2Widget cell 2
#right .forumline .row3, #left .forumline .row3Widget cell 3
PhpBB3
.moduleEntire widget
.module .h3Widget title
.module .innerWidget content
PunBB
.moduleEntire widget
.module .main-headWidget title
.module .main-contentWidget content
Invision
.module.borderwrapEntire widget
.module .maintitleWidget title
.module .box-contentWidget content
PhpBB3, PunBB, Invision
.module .row1Widget cell 1
.module .row2Widget cell 2
.module .row3Widget 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('http://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 !






Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

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