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 Thu 31 Oct - 18:15

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

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 Thu 31 Oct - 19:29

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.


SLGray
Administrator
Administrator

Male Posts : 37630
Reputation : 2531
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Re: Image on Widget Title

Post by angel_of_night on Thu 31 Oct - 19:32

No they are not.





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 Thu 31 Oct - 20:48

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.

Ange Tuteur
Forumaster

Male Posts : 13038
Reputation : 2718
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Re: Image on Widget Title

Post by angel_of_night on Thu 31 Oct - 21:10

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

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 Thu 31 Oct - 21:49

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:

Ange Tuteur
Forumaster

Male Posts : 13038
Reputation : 2718
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Re: Image on Widget Title

Post by angel_of_night on Fri 1 Nov - 17:01

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.

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 Fri 1 Nov - 18:18

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?

Ange Tuteur
Forumaster

Male Posts : 13038
Reputation : 2718
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Re: Image on Widget Title

Post by Sanket on Fri 1 Nov - 20:42


Sanket
ForumGuru

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

http://webartzforum.com

Back to top Go down

Re: Image on Widget Title

Post by angel_of_night on Fri 1 Nov - 21:04

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.

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 Fri 1 Nov - 21:15

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">');});

Ange Tuteur
Forumaster

Male Posts : 13038
Reputation : 2718
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Re: Image on Widget Title

Post by angel_of_night on Fri 1 Nov - 21:25

No, not working.. Sad 

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 Fri 1 Nov - 21:44

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?

Ange Tuteur
Forumaster

Male Posts : 13038
Reputation : 2718
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Re: Image on Widget Title

Post by angel_of_night on Fri 1 Nov - 21:48

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?

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 Fri 1 Nov - 21:50

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.

Ange Tuteur
Forumaster

Male Posts : 13038
Reputation : 2718
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Re: Image on Widget Title

Post by angel_of_night on Sat 2 Nov - 23:03

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

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