XF 1.2 How can I stop line breaks in navbar <li></li> ?

[Phases]

In the navbar <li>, the only way I can get an item to remain on the same line as everything else is if I put it inside the <a> tag. If I put it after, it drops down, if I put it before, the <a> block drops down.

How do I get around this?

For example, this is normal, navigation template code. :

<li><a href="{xen:link 'find-new/posts'}" rel="nofollow">{xen:if $visitor.user_id, {xen:phrase new_posts}, {xen:phrase recent_posts}}</a></li>

If I do this, though, the TEST will drop down a line:

<li><a href="{xen:link 'find-new/posts'}" rel="nofollow">{xen:if $visitor.user_id, {xen:phrase new_posts}, {xen:phrase recent_posts}}</a>TEST</li>

And if I do this, the "New Posts" link will drop down a line:

<li>TEST<a href="{xen:link 'find-new/posts'}" rel="nofollow">{xen:if $visitor.user_id, {xen:phrase new_posts}, {xen:phrase recent_posts}}</a></li>

I can't seem to figure this out. Can someone help?

 

[Paul B]

What are you trying to do?

 

[Phases]

Well, just trying to add content next to a sub-link that isn't actually part of the link, really. But I want it up against the link (so a different <li></li> block won't do). Like a tiny image.

 

[Phases]

No one? I thought for sure this would be an easy fix!

 

[Paul B]

I'm really not clear on what it is you're trying to do.
To add a new link to the sub nav bar you just use, for example:

<li><a href="{xen:link 'threads/featured'}">{xen:phrase cta_ft_featured_threads}</a></li>

 

[EQnoble]

Here is one way to go about it...

Find this:

<li><a href="{xen:link 'find-new/posts'}" rel="nofollow">{xen:if $visitor.user_id, {xen:phrase new_posts}, {xen:phrase recent_posts}}</a></li>

Replace with:

<li><span class="tlIco tlIcoNewPosts"><a href="{xen:link 'find-new/posts'}" rel="nofollow">{xen:if $visitor.user_id, {xen:phrase new_posts}, {xen:phrase recent_posts}}</a></span></li>

If you want to add icons to more than just one tab link just wrap the <a> tags with the <span> again and name the second class to suit, for example to add an icon to the search forum sub link you would edit this as well...

Find this:

<xen:if is="{$canSearch}"><li><a href="{xen:link search, '', 'type=post'}">{xen:phrase search_forums}</a></li></xen:if>

Replace with:

<xen:if is="{$canSearch}"><li><span class="tlIco tlIcoSearch"><a href="{xen:link search, '', 'type=post'}">{xen:phrase search_forums}</a></span></li></xen:if>

Notice that I wrapped the <a> tags with <span> tags and applied one common class and one unique class when compared to the first example



Then in Extra.css add one of the following (left or right):

With icons to the right:

.tlIco {
    display: block;
    padding-right: 20px;
}

.tlIcoNewPosts {
    /*change this "path/to/image" to suit your needs*/
    background: url("http://eqmandingo.com/20px.png") no-repeat scroll right 0;
}

.tlIcoSearch{
    /*change this "path/to/image" to suit your needs*/
    background: url("http://eqmandingo.com/20px.png") no-repeat scroll right 0;
}

With icons to the left

.tlIco {
    display: block;
    padding-left: 20px;
}

.tlIcoNewPosts {
    /*change this "path/to/image" to suit your needs*/
    background: url("http://eqmandingo.com/20px.png") no-repeat scroll left 0;
}

.tlIcoSearch{
    /*change this "path/to/image" to suit your needs*/
    background: url("http://eqmandingo.com/20px.png") no-repeat scroll left 0;
}

Then if you want to add icons to any other sub link you just wrap the <a> tags with the <span> tags just like the first replacement above ...

except now you would replace the second class in <span class="tlIco tlIcoNewPosts"> with something suitable to the tab you are placing an icon for like

<span class="tlIco tlIcoLinkNameHere">

and then make a corresponding css rule for it in extra.css by copying the last icon class you made and editing it like this

.tlIcoLinkNameHere{

/*change this "path/to/image" to suit your needs*/
background: url("http://eqmandingo.com/20px.png") no-repeat scroll right 0;​

}

then just replace the http://eqmandingo.com/20px.png to set proper image locations for the icons that you wish to use in each icon link class that you created


hopefully that gets you started

 

[Phases]

Thanks for your reply!! I think I've tried similar, but following your example I have done this:

Replace:

<li><a href="{xen:link 'find-new/posts'}" rel="nofollow">{xen:if $visitor.user_id, {xen:phrase new_posts}, {xen:phrase recent_posts}}</a></li>

With:

<li><span class="tlIco"><a href="{xen:link 'find-new/posts'}" rel="nofollow">{xen:if $visitor.user_id, {xen:phrase new_posts}, {xen:phrase recent_posts}}</a>test</span></li>

And added to extra.css:

.tlIco {
display: block;
padding-right: 20px;
}

The word "test" is still falling down to the next line and hiding behind the next content block. If I can get that word test to stay in line, I would be golden I think. Any thoughts?