1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

last-child: how does it work

Discussion in 'XenForo Questions and Support' started by bart, Mar 25, 2013.

  1. bart

    bart Active Member

    I'm playing with the breadcrumb and am trying to make my own. All works well, except that i can't get the "last-child" (css-setting) to work. What makes a breadcrumb-bit the last child and how can i prevent a not-so-last-child becoming the last-child?
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

  3. bart

    bart Active Member

    You do always know the answer... Great!

    I am messing things up. I want to have the page where you are as the last tab in the breadcrumb. So in this case the breadcrumb would end with "last-child: how does it work" instand of "XenForo Questions and Support".

    Furthermore I want to take out the "forums"-tab and fgo straight to the categoru.

    Like so:

    Home > XenForo Community Support >XenForo Questions and Support > last-child: how does it work

    And pages need to do something similar.
  4. bart

    bart Active Member

    And thanks again, your help is highly appreciated
  5. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Some points...

    1) The first breadcrumb is always "Home" unless you have removed the "Home Page URL" in the options:

    Admin CP -> Home -> Options -> Basic Board Information -> Home Page URL

    2) The second breadcrumb is always the name of the parent nav tab. For example, inside of this thread the second breadcrumb is "Forums" because that is the nav tab that is selected. Changing this isn't so easy without getting into the code.

    3) Beyond that, the rest of the breadcrumbs are defined in the content template. Find the content template:


    Edit that template in the Admin CP. For example:

    Admin CP -> Appearance -> Templates -> thread_view

    You will see this code which defines the breadcrumbs inside of threads:

    	<xen:breadcrumb source="$nodeBreadCrumbs" />
    Additional breadcrumbs can be defined by using more xen:breadcrumb calls. For example:

    Admin CP -> Appearance -> Templates -> post_edit

    You can see that the full post edit page appends the name of the thread to the breadcrumbs:

    	<xen:breadcrumb source="$nodeBreadCrumbs" />
    	<xen:breadcrumb href="{xen:link full:posts, $post}">{xen:helper threadPrefix, $thread}{$thread.title}</xen:breadcrumb>
    That is how all of the breadcrumbs are defined. The last-child CSS pseudo class can be used to style the last breadcrumb in the list:

    Admin CP -> Appearance -> Templates -> EXTRA.css

    For example:

    .crumbs span:last-child .crumb
    	background: red;
  6. bart

    bart Active Member

    wow, thanks. I'm afraid I'm going to have to do a lot again. But it's worth it!

Share This Page