Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Applying styles in Breadcrumb NavXT for WP

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 34 total)
  • Author
    Posts
  • #35225
    tobeeornot
    Member

    I’m having trouble getting the Breadcrumb NavXT plugin to apply all my styles.

    I am pointing the php code to the right class but it is only picking some of the styles up (i.e., the position of the breadcrumb):



    Here is the full list of css styles. I am wondering if there is a conflict between the classes in my css to those set in the plugin’s admin file that is causing the problem.

    #90909
    tobeeornot
    Member

    Nope, can’t see a problem in the admin code.

    #90932
    TheDoc
    Member

    haha we’ve got over this a lot, my friend, what is the HTML being outputted? This is what you always needs to be looking at.

    The function itself doesn’t matter, what matters is what the HTML looks like.

    #90936
    tobeeornot
    Member

    Hehe…yea, we have.

    Ok, I gotta work this one out, don’t I. I guess because this is my first WP site, I am not absorbing as quickly as I would like. I’ll keep you posted.

    #90938
    TheDoc
    Member

    Just remember that your WordPress ‘templates’ (the files in your theme’s folder) shouldn’t have content on them – that’s what WordPress is for.

    When you are navigating around your WordPress site, you should be doing it in your browser. If you are working locally, you can set up virtual domains like ‘mytestsite.com’ and it’ll function just like it would if it were on a live server.

    #91029
    tobeeornot
    Member

    Hey Doc,

    Thanks for the advice. I am starting to get a much better understanding of the relationship between the templates and the pages that WP creates. It is quite handy, for instance, that I can create as many pages as I like with one template.

    Back to the breadcrumb problem. I have done what you have suggested and looked at the source html but I have not managed to work out why my styles are not applying. Be great if you could give me a hand.

    Here is the html that WP is outputting:




    Here are the styles I created in CSS.Your text to link…

    I used the ul class=”breadcrumb” in my test html doc so I’m not quite sure what is wrong here.

    Also, I deliberately chose this page as the breadcrumb is indicating it is an “uncategorised” when all it is is a post. Not sure what is wrong. I would also rather the breadcrumb is excluded from the homepage.

    #91030
    TheDoc
    Member

    Right, so! You have a < ul > but Breadcrumb NavXT isn’t outputting any list items.

    So you’ll have to change your CSS to accommodate that. I would change the ul with the class of ‘breadcrumb’ to a div and go from there!

    #91032
    tobeeornot
    Member

    Unfortunately nope. I deleted all the classes starting with ul so it only left the .breadcrumb. I also looked at what WP is outputting and it is now div class=”breadcrumb”.

    #91036
    TheDoc
    Member

    In the CSS you linked to me, I don’t see anything with a class of breadcrumb.

    #91037
    tobeeornot
    Member

    That’s because I ever so cleverly gave you the styles to my drop-down menu.

    Here are the styles for the breadcrumb.

    #91038
    TheDoc
    Member

    So, in your styles you are trying to target an li. But like I mentioned, the plugin is not outputting an list items.

    #91039
    tobeeornot
    Member

    Cool – I am making some progress. So I deleted the li from all of the styles and it has applied some but not all of the previous ones. The text indicating the page I’m on, for instance, is being covered up partially by the breadcrumb behind it. The color states from the first breadcrumb are also not working. I’m guessing it is not picking up the nth-child selectors.

    #91042
    TheDoc
    Member

    No, you’d have to apply the nth-child to the anchor tags.

    #91043
    tobeeornot
    Member

    Sorry to be dumb but do you mean just adding an a to the existing nth-childs?

    #91045
    TheDoc
    Member

    So, you had this:

    .breadcrumb li:nth-child(2) a{background: #768c72}

    And you’ll need to convert it to something like this:

    .breadcrumb a:nth-child(2) { background: #768c72 }
Viewing 15 posts - 1 through 15 (of 34 total)
  • The forum ‘CSS’ is closed to new topics and replies.