The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Personalize forum widgets with CSS

2 posters

Go down

Tutorial Personalize forum widgets with CSS

Post by Ange Tuteur Fri 12 Dec 2014 - 8:17

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


left - Personalize forum widgets with CSS 09615110 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


left - Personalize forum widgets with CSS 09615110 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) }


left - Personalize forum widgets with CSS 09615110 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
left - Personalize forum widgets with CSS Captur68
Self service 1:

Self service 2
left - Personalize forum widgets with CSS Captur69
Self service 2:


Self service 3
left - Personalize forum widgets with CSS Captu249
phpbb3 only, thanks to Rhino.Freak
Self service 3:

Want to propose another widget design for self service ? Do not hesitate to send it to us by PM ! left - Personalize forum widgets with CSS 1852325475





Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13244
Reputation : 2990
Language : English & 日本語
Location : Pennsylvania

View user profile https://fmdesign.forumotion.com

Back to top Go down

Tutorial Re: Personalize forum widgets with CSS

Post by skouliki Sun 9 Feb 2020 - 9:33

This code was updated to fit in with the new HTTPS address

updated 09.02.2020 by skouliki
skouliki
skouliki
Manager
Manager

Female Posts : 12488
Reputation : 1530
Language : English,Greek
Location : Greece

View user profile http://iconskouliki.forumgreek.com

Back to top Go down

Back to top

- Similar topics

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