Grow your CSS skills. Land your dream job.

Putting a span inside a widget title

  • # March 8, 2010 at 6:52 pm

    I want to change a widget title from instead of just one solid color, to the first word one color, and the rest of the text a second color by using a span. My css is like this.

    Code:
    h2 { color:#000;}
    h2 span { color:#B8530C;}

    I want to go from:

    Widget Title

    to

    Widget Title

    or

    Widget Title is Here

    Is there a way to do this? hopefully dynamically. If not, how would I go about this.

    # August 11, 2010 at 11:08 pm

    Wanted an update. Any have any ideas?

    # August 12, 2010 at 11:40 am

    I can’t think of any way of stopping the WP filter from removing your html from widget titles without changing the wordpress source files.

    I think the best bet is to leave the title blank and add the h2 / h2 span in the template file above where the widget is being called.

    # August 12, 2010 at 10:48 pm

    I’ve done this with jQuery. I used the example here as a starting point last time I wanted to do it. Let me know if you need more help than that.

    http://css-tricks.com/preventing-widows-in-post-titles/

    # August 13, 2010 at 12:51 am

    Thank you. That was very helpful.

    # August 13, 2010 at 10:29 am

    Smart!

    # January 3, 2013 at 1:26 pm

    I had this problem, too. The jQuery solution seems the way to go, but in my case I also experimented with using a pseudo :after element, which I could style differently. This only worked in my case because the :after element was not integral to the Widget Title; it was simply a graphic embellishment.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".