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.

How to add a background to my widgets

View previous topic View next topic Go down

Solved How to add a background to my widgets

Post by Rupture on June 21st 2014, 3:30 pm

How do I add a background image ONLY TO THE TITLE to all my widgets? PHPB3 http://joinswl.forumotion.com

I just want to add a background image to the title section of all my widgets. What would the CSS be to do this?


Last edited by {LGO}*CF*Oscar on June 21st 2014, 9:37 pm; edited 1 time in total

Rupture
Forumember

Male Posts : 325
Reputation : 6
Language : English, Español, Deutsch, Catalá
Location : Earth

http://raptorgaming.forumotion.com

Back to top Go down

Solved Re: How to add a background to my widgets

Post by Ange Tuteur on June 21st 2014, 6:24 pm

Hello,

You can use the following CSS to add an image to Module Titles :
Code:
.module .h3 { background:url('/img.gif') }

Replace /img.gif by the URL of your image.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to add a background to my widgets

Post by Rupture on June 21st 2014, 7:28 pm

That's pretty good but it's too small, no way to increase the height is there?

Rupture
Forumember

Male Posts : 325
Reputation : 6
Language : English, Español, Deutsch, Catalá
Location : Earth

http://raptorgaming.forumotion.com

Back to top Go down

Solved Re: How to add a background to my widgets

Post by Sir Chivas™ on June 21st 2014, 9:03 pm

The height of the image or the module of the titles?

Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6756
Reputation : 428
Language : English, Spanish, and French
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: How to add a background to my widgets

Post by Ange Tuteur on June 21st 2014, 9:20 pm

The display of the image in the background is determined by the .h3 title height. You can either use padding, or the height property to adjust it.

Padding :

8px 0; adds 8 pixels of padding to the top and bottom of the title, adjust the value to your liking.
Code:
.module .h3 {
  background:url('/img.gif');
  padding:8px 0;
}

or Height :

20px; Adjusts the height of the title to, well, 20 pixels.
Code:
.module .h3 {
  background:url('/img.gif');
  height:20px;
}

Experiment and use whichever you like. Wink

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to add a background to my widgets

Post by Rupture on June 21st 2014, 9:34 pm

Great, thank you man, I'll get right down experimenting! lol

Rupture
Forumember

Male Posts : 325
Reputation : 6
Language : English, Español, Deutsch, Catalá
Location : Earth

http://raptorgaming.forumotion.com

Back to top Go down

Solved Re: How to add a background to my widgets

Post by Ange Tuteur on June 21st 2014, 9:40 pm

You're welcome :rose:

Topic archived

Have a good day Smile

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

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