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.

Widget Tricks

4 posters

Go down

Solved Widget Tricks

Post by ultracheat45 December 29th 2013, 1:43 am

How Do I Fully Customize The Widgets? (e.x TITLE(font), Height) 
ultracheat45
ultracheat45
Forumember

Male Posts : 55
Reputation : 1
Language : English

http://animecornerph.forumtl.com/

Back to top Go down

Solved Re: Widget Tricks

Post by Sanket December 29th 2013, 10:04 am

Forum URL?
Sanket
Sanket
ForumGuru

Male Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai

Back to top Go down

Solved Re: Widget Tricks

Post by ultracheat45 December 29th 2013, 1:54 pm

animecornerph.forumtl.com
ultracheat45
ultracheat45
Forumember

Male Posts : 55
Reputation : 1
Language : English

http://animecornerph.forumtl.com/

Back to top Go down

Solved Re: Widget Tricks

Post by Sanket December 30th 2013, 8:55 am

Seems like your forum is on maintenance.
Sanket
Sanket
ForumGuru

Male Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai

Back to top Go down

Solved Re: Widget Tricks

Post by Ange Tuteur December 30th 2013, 12:05 pm

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. Wink
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Widget Tricks

Post by ultracheat45 January 9th 2014, 4:11 pm

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.
ultracheat45
ultracheat45
Forumember

Male Posts : 55
Reputation : 1
Language : English

http://animecornerph.forumtl.com/

Back to top Go down

Solved Re: Widget Tricks

Post by Ange Tuteur January 9th 2014, 5:38 pm

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" />')
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Widget Tricks

Post by ultracheat45 January 13th 2014, 1:34 pm

Solved
ultracheat45
ultracheat45
Forumember

Male Posts : 55
Reputation : 1
Language : English

http://animecornerph.forumtl.com/

Back to top Go down

Solved Re: Widget Tricks

Post by Jophy January 13th 2014, 2:48 pm

Solved => Locked
Jophy
Jophy
ForumGuru

Male Posts : 17924
Reputation : 836
Language : English
Location : Somewhere

Back to top Go down

Back to top


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