WordPress.org

Ready to get started?Download WordPress

Forums

[Plugin: Yoast Breadcrumbs] How to get the black background, nice fonts and blue (4 posts)

  1. wardwelfare
    Member
    Posted 4 years ago #

    On the page
    http://yoast.com/wordpress/breadcrumbs/
    the navigation breadcrumb has a nice black background, nice font and colors.
    How do I get my breadcrum nav to have those attributes?

  2. WP Voyager
    Member
    Posted 4 years ago #

    You will have to modify the CSS. The CSS for any plugin (or website for that matter) is what contains most of the styling information. The PHP generates the XHTML, the XHTML describes the fundamental page structure, and the CSS stretches a styled skin over the whole framework.

    I do not actually have this particular plugin installed myself, so...
    There may be a function in the admin preferences that allows you to change the style, like some other plugins I've seen. I would guess that this is the case, since the style that you want shows up in an official example. This said, you might not have to edit the CSS to get a different look, but you could edit that CSS file (or make a new one) to customize your look.

    Hope this helps!

  3. continuouslyimprovingyou
    Member
    Posted 4 years ago #

    Actually, the "nice" background that you are seeing isn't the actual breadcrumb on his page. It's an image he made up specifically for clarification purposes of what a breadcrumb is. Hover over the "nice" one and you will see that it doesn't do a thing. You'll also see that the nice one says "You are here: Home >> Blog >> WordPress >> WordPress plugin search" which isn't really where you are. If you right click on it you will see it is just an image he's using in his post to give everyone an example. The actual bread crumb is "You are here: Home » WordPress Plugins » Yoast Breadcrumbs" and that is exactly where you are. You can hover over it, use the links, and even copy and paste the text which you can't do with the "nice" image one. The actual breadcrumb for the page is just above the title "Yoast Breadcrumbs", and is in a very simple format in gray font.

  4. w3visi
    Member
    Posted 3 years ago #

    I don't know if you're still around, but if anyone else is interested:

    Try putting the following code in your styles.css file. You can do this under the "Appearance" palette if you choose "Edit"

    #breadcrumbs {
    background:#0b2e4a;
    padding:5px;
    color:white;
    }
    
    #breadcrumbs a {color:#a1defe;}

    You may have to style the font and width of the background but that's the basic css for it.

Topic Closed

This topic has been closed to new replies.

About this Topic