Ho do I change Widget text to image?


#1

Hi, I upgraded to the latest rtPanel and I was wondering how to change the widget text tile to an image? I tried using a img tag and a div tag but I'm unable to change the widget title to an image. Is there something I need to do to make this happen? Unfortunately I can't post the site up because you wont be able to view it remotely. I was hoping that it would be a simple change but it appears not :( Any help is appreciated. Thanks


#2

Hi UptownGirl27, You are trying to apply an image for the widget title right? If so, you can do that using css. e.g. widget title has a class "widgettitle". You can try this css:

.widgettitle { background: url('./img/image-name.png') no-repeat; }  

Let me know if this helps.


#3

Hi Sagar, Thanks :) it worked adding the image in the .widgettitle class like you mentioned. But how do I remove the text from there? Should I use a z-index to put the text beneath the image? I also wanted a separate widget graphic but it wouldn't show up when I added a DIV tag. The only way it worked was by inserting a DIV tag in the php dynamic sidebar area where the other widget info appears. I'm not sure why it works this way. Is there any way to add DIV images outside of the sidebar? The framework doesn't appear to identify images outside of the sidebar area unless they are img tags.


#4

Hello UptownGirl27, To remove the text from title you need to add following lines of code in ".widgettitle" class.

.widgettitle { text-indent: -9999px; text-transform: uppercase; }  

Can you attach a screenshot what you want exactly?


#5

Hi Sagar,

I've attached the problem that I'm having it's showing the text "Archives" on top of the image. Thanks

Attachment Link(s):

http://rtcamp.com/wp-content/uploads/rtMedia/topics/37583/2013/05/example_archives.jpg


#6

I was also trying to have it so the different categories would have different images for each category and the number of posts appears over the image like in the attachment. Is it possible to have the number of post appear above the category image? Thanks :)

Attachment Link(s):

http://rtcamp.com/wp-content/uploads/rtMedia/topics/37583/2013/05/category_-number.jpg


#7

Hi UptownGirl27, About “Archives” on top of the image: you need to add following lines

.widgettitle { text-indent: -9999px; text-transform: uppercase; }  

About different categories with different images: Yes you can do that. Use "rtPanel Categories" widget. There are some useful options. You can set "Show post counts" option as well :)

Let me know if this helps.


#8

Ok I'll try this. Thank you!


#9