change the title of the widget to image graphics

Viewing 3 replies - 1 through 3 (of 3 total)

  • For background color, or repeatable background pattern, you could target the widget title selector and apply the property.

    In case of real image, since theme is responsive and widget title’s height is fixed to line height of text, background image of widget title will not easily scale to proportion.

    It’s easier to use real image put in a text widget above the real content widget with no title or with title displayed none via CSS.

    For example, try putting this in a text widget.

    <img src="https://dummyimage.com/600x80/ff0000/ffffff.png" />

    In CSS, adjust margin-bottom, and display none widget title that we don’t need.

    Thread Starter diannadk

    (@diannadk)

    In the text widget i’ve change the title of the widget to the image graphics, but how i do it with widget “category”?
    Yuou can see my blog HERE

    Use 1 text widget as its title and display none the real title.

    So we have this pattern.

    • [A] = text widget without title, and with image in its content functioning as title for the following widget.
    • [B] = any widget that has [A] as a title.

    In your site right now, drag 1 text widget and place it above the categories widget. In that text widget, put this in.

    <img class="aligncenter" src="https://www.dianna.dk/category-title.jpg" alt="Category Title">

    Notice the aligncenter class, it’s helpful for small screen. You need this class because your image is small, it needs to align center to look good in small screen. But if you use a bigger image like 600×80, you might not need this class.

    In CSS put this in to hide the real title and adjust some margin.

    #categories-2 .widget-title {
	margin-bottom: -48px;
	text-indent: -9999px;
}

    Edit: I just saw there is Custom CSS code in <head>, so you already have Custom CSS plugin.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘change the title of the widget to image graphics’ is closed to new replies.