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

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.


SLGray
Administrator
Administrator

Male Posts : 36648
Reputation : 2443
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 October 31st 2013, 6:32 pm

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 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.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
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 October 31st 2013, 8:10 pm

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 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:

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
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 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.

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?

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Re: Image on Widget Title

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


Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
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.

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

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
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 November 1st 2013, 8:25 pm

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 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?

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
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 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?

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.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
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 November 2nd 2013, 10:03 pm

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