treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Putting a span inside a widget title

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


    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.
  • Wanted an update. Any have any ideas?
  • 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.
  • 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/
  • Thank you. That was very helpful.
  • 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.