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.

Image on Widget Title

View previous topic View next topic Go down

Image on Widget Title

Post by angel_of_night on October 31st 2013, 5:15 pm

Hello.
How can I make every Widget title have a different image for each one of them?
Like in this forum: http://hellokitty.forumsmotion.com/

My Forum URL: http://www.namelesscraft.org/

Thank you. Smile
avatar
angel_of_night
Forumember

Female Posts : 565
Reputation : 10
Language : portuguese

Back to top Go down

Re: Image on Widget Title

Post by SLGray on October 31st 2013, 6:29 pm

I believe the image is for the background, and the titles are the normal titles.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 39639
Reputation : 2666
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Re: Image on Widget Title

Post by angel_of_night on October 31st 2013, 6:32 pm

No they are not.




avatar
angel_of_night
Forumember

Female Posts : 565
Reputation : 10
Language : portuguese

Back to top Go down

Re: Image on Widget Title

Post by Ange Tuteur on October 31st 2013, 7:48 pm

Hello angel_of_night,

It looks like the images are applied through HTML DOM editing. Most likely, applied by a script to replace the content in #widget_location > .module > .h3 with new HTML elements.

I'll have a look to see if I can find anything.
avatar
Ange Tuteur
Forumaster

Male Posts : 13174
Reputation : 2872
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Re: Image on Widget Title

Post by angel_of_night on October 31st 2013, 8:10 pm

Thank you!!!
Now I feel so bad that you are helping me so much. Embarassed
avatar
angel_of_night
Forumember

Female Posts : 565
Reputation : 10
Language : portuguese

Back to top Go down

Re: Image on Widget Title

Post by Ange Tuteur on October 31st 2013, 8:49 pm

You're welcome,

Don't feel bad, I am here to help with whatever I can. ^^

This is the javascript to use:
Make sure to tick 'in all pages'
Code:
$(document).ready(function(){$('#right .module .h3:contains("WIDGET TITLE")').css('font-size','0px').css('border','none').prepend('<img src="http://i56.servimg.com/u/f56/18/21/60/73/img10.png" />');});
I'll go over the parts that need editing.

First the selectors,

The only part you need to edit is #right. i.e. the side the widget is on. If the widget is on the left you change the selector to #left and vice versa.
Code:
#right .module .h3
Next is the content we are prepending the image to, we're using the title text as a hook.

For the image to be prepended to the widget title text we need to type the title text exactly as it was typed. The drawback of this is that phpbb3 displays all titles in capital letters, but don't worry this tuto should help you to see how the titles were typed.

Code:
("WIDGET TITLE")
Lastly is our image

You can place any image source you want in there. The default image I've applied is

Code:
('<img src="http://i56.servimg.com/u/f56/18/21/60/73/img10.png" />')
That should be it, oh and if you want to add it to multiple widgets, it will look like this:
Code:
$(document).ready(function(){$('#right .module .h3:contains("Latest topics")').css('font-size','0px').css('border','none').prepend('<img src="http://i56.servimg.com/u/f56/18/21/60/73/img10.png" />');$('#right .module .h3:contains("Control Panel")').css('font-size','0px').css('border','none').prepend('<img src="http://i56.servimg.com/u/f56/18/21/60/73/img10.png" />');});
Result:
avatar
Ange Tuteur
Forumaster

Male Posts : 13174
Reputation : 2872
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Re: Image on Widget Title

Post by angel_of_night on November 1st 2013, 4:01 pm

Thank you very much!

And I tested it, and didn't work.
I did this as a test, I copy pasted the CSS code on the link you provided and put this in the javascript:
Code:
$(document).ready(function(){$('#right .module .h3:contains("Donate")').css('font-size','0px').css('border','none').prepend('<img src="http://i56.servimg.com/u/f56/18/21/60/73/img10.png" />');});
Am I doing something wrong?

EDIT: Oh wait, I realized it's working everywhere else but the index, and I ticked All Pages.
avatar
angel_of_night
Forumember

Female Posts : 565
Reputation : 10
Language : portuguese

Back to top Go down

Re: Image on Widget Title

Post by Ange Tuteur on November 1st 2013, 5:18 pm

Works everywhere, but the index?

The nivo slider might be conflicting with the code, have you tried temporarily disabling it to see if the script works?
avatar
Ange Tuteur
Forumaster

Male Posts : 13174
Reputation : 2872
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Re: Image on Widget Title

Post by Sanket on November 1st 2013, 7:42 pm

avatar
Sanket
ForumGuru

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

http://webartzforum.com

Back to top Go down

Re: Image on Widget Title

Post by angel_of_night on November 1st 2013, 8:04 pm

Tried this and didn't help me. My forum is phpbb3, his phpbb2.

SethC1995, nope, tried to disable nivo slider and still doesn't show in the index.
And also, it's not working on the pre-existing widgets, only the Personal ones. At least I tested with "Recent topics" and "Latest topics" and none of them worked. Even tried "Recent Topics" (Case Sensitve) and still didn't work for that widget.
avatar
angel_of_night
Forumember

Female Posts : 565
Reputation : 10
Language : portuguese

Back to top Go down

Re: Image on Widget Title

Post by Ange Tuteur on November 1st 2013, 8:15 pm

Hmm..

Try with just .module .h3, I also removed some style.
Code:
$(document).ready(function(){$('.module .h3:contains("Donate")').css('font-size','0px').prepend('<img src="http://i56.servimg.com/u/f56/18/21/60/73/img10.png">');});
avatar
Ange Tuteur
Forumaster

Male Posts : 13174
Reputation : 2872
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Re: Image on Widget Title

Post by angel_of_night on November 1st 2013, 8:25 pm

No, not working.. Sad
avatar
angel_of_night
Forumember

Female Posts : 565
Reputation : 10
Language : portuguese

Back to top Go down

Re: Image on Widget Title

Post by Ange Tuteur on November 1st 2013, 8:44 pm

I did a quick test with the scratch pad and it worked however, everything on the document is loaded when I did that. Do you have any other scripts running which modify the forum, specifically the modules?
avatar
Ange Tuteur
Forumaster

Male Posts : 13174
Reputation : 2872
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Re: Image on Widget Title

Post by angel_of_night on November 1st 2013, 8:48 pm

Hmmm, I have that avatar in index script. Not the one you gave me, the one I had before, just because it centeres everything.

I also have notification scripts.

Oh and I didnt remember to disable the Nivo Slider script, might be it?
avatar
angel_of_night
Forumember

Female Posts : 565
Reputation : 10
Language : portuguese

Back to top Go down

Re: Image on Widget Title

Post by Ange Tuteur on November 1st 2013, 8:50 pm

Try temporarily disabling any scripts that you think could be conflicting with the one I gave you. Do that one by one checking, that way it'll be easier to find out which one could be conflicting with it.
avatar
Ange Tuteur
Forumaster

Male Posts : 13174
Reputation : 2872
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Re: Image on Widget Title

Post by angel_of_night on November 2nd 2013, 10:03 pm

Now it works for some reason.
But still doesn't work for pre-existing widgets, just custom ones.
avatar
angel_of_night
Forumember

Female Posts : 565
Reputation : 10
Language : portuguese

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