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.

Widget Tricks

View previous topic View next topic Go down

Solved Widget Tricks

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

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

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 December 29th 2013, 10:04 am

Forum URL?

Sanket
ForumGuru

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

http://webartzforum.com

Back to top Go down

Solved Re: Widget Tricks

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

animecornerph.forumtl.com

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 December 30th 2013, 8:55 am

Seems like your forum is on maintenance.

Sanket
ForumGuru

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

http://webartzforum.com

Back to top Go down

Solved Re: Widget Tricks

Post by Ange Tuteur on 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
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Widget Tricks

Post by ultracheat45 on 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
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 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://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" />')

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Widget Tricks

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

Solved

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 January 13th 2014, 2:48 pm

Solved => Locked

Jophy
ForumGuru

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

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