Need help? Check out our Support site, then


Change header for categories and archives widgets

  1. Hi I'm wondering if there is a way to change the "categories" and "archives" titles in the Twenty Twelve theme. I'd like to remove the text and upload a title image so they would match the other ones on my page?

    CSS newbie here! Thanks!

    The blog I need help with is ponytailsdesigns.com.

  2. I have been seriously contemplating purchasing Custom Designs to access the CSS because it allows a lot of options that would be extremely useful for me. This was something that I wondered as well. If I could remove the entire header where it says: Category Archives: (category)

  3. I got the Headers to not show at all by doing
    <br /> .page-header {<br /> display: none;<br /> }<br />

    I am not sure how to change add an image within there but it gives you the starting base.

  4. Hmmm.. it didn't work for me. Thanks for trying to help!

  5. I just checked on the twenty twelve theme and it should be this:
    .archive-title {
    display: none;
    }

  6. That didn't work either, the titles are still showing. Thanks again!

  7. sleepingoffcoffee
    Member

    Are you trying to change the titles of the "categories" and "archives" widgets on your sidebar?

  8. Yes. I'm trying to remove the text altogether and replace it with an image that I created so that it will match the other titles in my sidebar.

  9. sleepingoffcoffee
    Member

    That's what I thought, I just wanted to double-check. Because all of the widget titles are linked under the same HTML tags, to my knowledge it isn't possible to change one without changing all of them (you would have to alter the HTML code to do that, which WordPress.com themes don't allow). However, your blog seems to be currently using only two widgets that have titles (it looks like the rest are all "Image" widgets), so removing those titles should only affect the widgets you want to change. Insert the following command into the CSS Stylesheet Editor and then preview or save it to see if it worked:

    .widget-title {
    display: none;
    }

    That should remove the "Archives'" and "Categories'" title text. This command will affect any widgets you add to your sidebar, so in the future, if you want widget titles to appear you will have to remove this from the CSS Stylesheet Editor.

    Adding unique images to replace individual widget titles is, likewise, impossible without altering the HTML code because all of the widget titles are linked under the same HTML tags (only a single image would show up for all of the widgets, opposed to a unique image for each widget). However, what you could do to insert your unique images is simply add two more "Image" widgets to your sidebar (your "Categories" image directly above the "Categories" widget, and your "Archives" image directly above the "Archives" widget and directly below the "Categories" widget). While these images wouldn't technically be the titles of your "Archives" and "Categories" widgets, they would at least appear to be the titles for anyone visiting your blog.

    I hope this helps, and let me know if it doesn't or if you have any more questions.

  10. None of these worked so I contacted support directly. In the end Carolyn gave me the following code to use and it worked brilliantly.

    You can use an image replacement like this:

    #categories-2 .widget-title {
    background: url(http://s.wordpress.org/about/images/logos/wordpress-logo-32-blue.png) 15px 0 no-repeat;
    display: block;
    width: 36px;
    height: 36px;
    text-alignment: left;
    text-indent: -9999px;
    border: 0;
    }

    Note that you need to look in the page source code to see which selectors to use. In this example, "#categories-2" refers to the categories widget in your sidebar. Each widget gets a unique ID after it is added. You will need to use the same code for the archives widget.

    I used a WordPress logo as an example image. To use a different image, replace the url() value with an image from your media library and adjust the width and height to the exact size as your image.

  11. sleepingoffcoffee
    Member

    That's great! I had no idea that was possible, thank you for sharing their response. And sorry I couldn't be more help, I'm still learning CSS myself.

  12. I appreciate you trying! And believe me, you sound like a whiz compared to my scant knowledge! lol

  13. sleepingoffcoffee
    Member

    Haha, thanks. If nothing else I'm glad I can at least make myself sound like I know what I'm doing.

Topic Closed

This topic has been closed to new replies.

About this Topic