Widget Tricks

Go down

Solved Widget Tricks

Post by ultracheat45 on 29/12/2013, 01:43

How Do I Fully Customize The Widgets? (e.x TITLE(font), Height) 
avatar
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 on 29/12/2013, 10:04

Forum URL?
avatar
Sanket
ForumGuru

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

http://webartzforum.com

Back to top Go down

Solved Re: Widget Tricks

Post by ultracheat45 on 29/12/2013, 13:54

animecornerph.forumtl.com
avatar
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 on 30/12/2013, 08:55

Seems like your forum is on maintenance.
avatar
Sanket
ForumGuru

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

http://webartzforum.com

Back to top Go down

Solved Re: Widget Tricks

Post by Ange Tuteur on 30/12/2013, 12:05

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
avatar
Ange Tuteur
Forumaster

Male Posts : 13195
Reputation : 2910
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: Widget Tricks

Post by ultracheat45 on 9/1/2014, 16:11

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.
avatar
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 on 9/1/2014, 17:38

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://illiweb.com/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://illiweb.com/fa/fdf_en3/nouvea19.png" />')
avatar
Ange Tuteur
Forumaster

Male Posts : 13195
Reputation : 2910
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: Widget Tricks

Post by ultracheat45 on 13/1/2014, 13:34

Solved
avatar
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 on 13/1/2014, 14:48

Solved => Locked
avatar
Jophy
ForumGuru

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

Back to top Go down

Back to top


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