Widget Tricks

Forum URL?

animecornerph.forumtl.com

Seems like your forum is on maintenance.

Hello ultracheat45 ,

The main class for the widgets of phpbb3 is 'module' :

Code:

.module { background:yellow; }
.module .h3 { color:red; }

.module is the parent of all the content within the widget, so you can use any other selector to select the element you want to modify. a for anchors ( links ), div for all div elements, b / strong for all bold elements ect..

.module .h3 can be used to style the module title.

Additionally if you want to keep it to only the widgets of the forum use the column ID before the module class.

#right .module for the widgets in the right column
#left .module for the widgets in the left column

This can also allow you to make the design of the widgets for each column different.

Example :

Code:

#left .module { background:red; }
#right .module { background:blue; }

Then just choose the CSS properties you want to use to style your widgets and that's that.

last question before i make this solved. how do i replace the header bar with an image? i've search some methods they just don't work.

If you wanted to change the h3 title of a widget to an image you would have to use javascript :

Placement : In all the pages

Code:

jQuery(document).ready(function() {
jQuery('.module .h3:contains(Latest topics)').html('<img src="http://2img.net/i/fa/fdf_en3/nouvea19.png" />');
});

You have to use the exact spelling of the title

Code:

:contains(Latest topics)

to overwrite it with a image :

Code:

.html('<img src="http://2img.net/i/fa/fdf_en3/nouvea19.png" />')

Solved