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 picture on my widgets

View previous topic View next topic Go down

Solved How to add a picture on my widgets

Post by Rupture on December 24th 2014, 9:06 pm

Hello, I see yall added a christmas hat to all your widgets, whats the code to doing something like that? 

And if yall can tell me, how could I ALSO put a picture to the left of the widgets header? So to have 2 pictures on each widget.

Thank you!


Last edited by Rupture on January 18th 2015, 11:58 pm; edited 3 times 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 picture on my widgets

Post by Ange Tuteur on December 25th 2014, 3:49 am

Add to your CSS, for phpbb3. Wink
Code:
#left .module .h3, #right .module .h3, .portal .module .h3 {
  background:url(http://i59.servimg.com/u/f59/09/02/31/09/santa-10.png) no-repeat left center;
  padding:6px 0 6px 35px;
}

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to add a picture on my widgets

Post by Rupture on December 26th 2014, 2:46 am

Thank you Ange Very Happy

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 picture on my widgets

Post by Luffy on December 26th 2014, 1:51 pm

You can add an other nice effect with the hat like the image below:

to do that add the code below:
Code:
.module:before {
content: url(http://i39.servimg.com/u/f39/19/06/26/04/fgxmas10.png) no-repeat!important;
margin: -10px 0 0 -28px;
position: absolute;
}






Luffy
Manager
Manager

Male Posts : 4239
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: How to add a picture on my widgets

Post by Rupture on December 28th 2014, 12:11 pm

Thats actually kind of better lol
Thank you Luffy!

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 picture on my widgets

Post by Luffy on December 28th 2014, 12:52 pm

You 're welcome!
With this and by changing the margin command you can move it wherever you want!
For example if you move it and replace the margin command with this: margin: -5px 0 0 -30px; it will adjust the hat exactly to its right position. Wink






Luffy
Manager
Manager

Male Posts : 4239
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: How to add a picture on my widgets

Post by Rupture on January 3rd 2015, 10:58 am

hello, with this code you gave me, how do i send the picture to the background so it doesnt go on top of text? I changed my picture to one that is pretty big but on my phone and small monitors its too big and blocks the main header text of widget. is there a way to send it to the bg or make the text more important?

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 picture on my widgets

Post by sunshine_222 on January 5th 2015, 2:44 pm

Which is the script for phpBB2? I've tried to put it in CSS, but it doesn't work.
Please, help me!

sunshine_222
Forumember

Posts : 99
Reputation : 3
Language : english

http://thaimagic.forum2x2.eu

Back to top Go down

Solved Re: How to add a picture on my widgets

Post by _Twisted_Mods_ on January 5th 2015, 3:33 pm

Code:
#left td.catLeft .genmed{
background:url(http://i59.servimg.com/u/f59/09/02/31/09/santa-10.png) no-repeat left center;
padding:3px 0 6px 30px;
text-align: left
}

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: How to add a picture on my widgets

Post by sunshine_222 on January 5th 2015, 3:35 pm

Thank you very much!

sunshine_222
Forumember

Posts : 99
Reputation : 3
Language : english

http://thaimagic.forum2x2.eu

Back to top Go down

Solved Re: How to add a picture on my widgets

Post by Rupture on January 13th 2015, 12:03 am

Hello, 
I would still like the code to put 2 pictures on the widgets, one on each side. If possible, I will be very grateful! Very Happy

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 picture on my widgets

Post by _Twisted_Mods_ on January 13th 2015, 4:11 am

Code:
#left .module .h3, #right .module .h3, .portal .module .h3 {display:inline-flex;}
#left .module .h3, #right .module .h3:before, .portal .module .h3 {
   content:'';
   height:30px;
   display: inline-block;
  background:url(http://i59.servimg.com/u/f59/09/02/31/09/santa-10.png) no-repeat left center;
  padding:6px 0 6px 35px;
}
#left .module .h3, #right .module .h3:after, .portal .module .h3 {
   content:'';
   height:30px;
   display: inline-block;
  background:url(http://i59.servimg.com/u/f59/09/02/31/09/santa-10.png) no-repeat left center;
  padding:6px 0 6px 35px;
}

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: How to add a picture on my widgets

Post by Rupture on January 13th 2015, 11:48 pm

Hello @_Twisted_Mods_
No that does not work, I have this: 
Code:
/*Picture on widgets*/
.module:before {
content: url("https://www.filepicker.io/api/file/7QMldmdESPCVziNMNryA+skul3.png") no-repeat!important;
margin: 0px 0 0 0px;
position: absolute;
  margin-top: 1px;
}

I want the same but to add another pic on the left in addition to right. Thanks!

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 picture on my widgets

Post by _Twisted_Mods_ on January 14th 2015, 12:13 am

replace all your widget image code with the code i gave you and should work

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: How to add a picture on my widgets

Post by Rupture on January 14th 2015, 12:19 am

I removed it all and added yours but it did not work idk why
Whats the Content: '' for?

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 picture on my widgets

Post by _Twisted_Mods_ on January 14th 2015, 12:34 am

sorry didnt look and see u was on punbb not phpbb3

Code:
.module:before{
      content:'';
      height:30px;
float:left;
      background:url(http://i59.servimg.com/u/f59/09/02/31/09/santa-10.png) no-repeat left center;
      padding:6px 0 6px 35px;
    }
.module .h3:after{
          content:'';
   margin-top:-12px ;
      height:30px;
float:right;
      background:url(http://i59.servimg.com/u/f59/09/02/31/09/santa-10.png) no-repeat left center;
      padding:6px 0 6px 35px;
    }

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: How to add a picture on my widgets

Post by Rupture on January 14th 2015, 12:47 am

You are the best, thank you!!!!!

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 picture on my widgets

Post by Derri on January 19th 2015, 1:14 am

Topic solved and archived


Forum Rules : : Forumotion Staff : : Appeal A Warning : : FAQ : : Tips & Tricks : : Forgotten Password/Login Issues
You need one post to send a PM
When your topic has been solved, ensure you mark the topic solved
Never post your email in public


Derri
Administrator
Administrator

Male Posts : 8385
Reputation : 576
Language : English & Basic French
Location : Scotland, United Kingdom

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