last-child: how does it work

[bart]

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?

 

[Jake Bunce]

http://www.w3schools.com/cssref/sel_last-child.asp

last-child is in the context of the container element. p:last-child matches the last p tag inside of the parent.

What are you trying to do with it?

 

[bart]

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.

 

[bart]

And thanks again, your help is highly appreciated

 

[Jake Bunce]

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:

http://xenforo.com/community/threads/1-0-0-b1-how-to-identify-the-root-template-of-a-page.5591/

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:navigation>
	<xen:breadcrumb source="$nodeBreadCrumbs" />
</xen:navigation>

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:navigation>
	<xen:breadcrumb source="$nodeBreadCrumbs" />
	<xen:breadcrumb href="{xen:link full:posts, $post}">{xen:helper threadPrefix, $thread}{$thread.title}</xen:breadcrumb>
</xen:navigation>

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;
}

 

[bart]

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