How to make something like that ?

[Niro]

Hi,

I would like to know how can I make something like this :

And when I am creating a new block, I got something like that on the left :

How can I remove this ?

Thanks!

 

[Niro]

How can I also change the size of the font awesome icons for nodes using this code :

.node.node--id1 .node-icon i:before { content: "\f015";}

Thank you!

 

[Russ]

Hi,

I would like to know how can I make something like this :

View attachment 8084

And when I am creating a new block, I got something like that on the left :

View attachment 8085

How can I remove this ?

Thanks!

I'll need a little more details on this, so far:

<ul class="custom-buttons">
<li class="custom-buttons--selected">Main</li>
<li>General</li>
<li>Marketplace</li>
</ul>

And some CSS would do that, but again the screenshot is vague.


For Font Awesome Node icons size:

Style properties -> Node/forum list -> Node icon (Font Awesome main)

Will change them all by adjusting the font-size. If you need to change a single node like your CSS above:

.node.node--id1 .node-icon i:before { content: "\f015"; font-size: 14px; }

 

[Niro]

I'll need a little more details on this, so far:

<ul class="custom-buttons">
<li class="custom-buttons--selected">Main</li>
<li>General</li>
<li>Marketplace</li>
</ul>

And some CSS would do that, but again the screenshot is vague.


For Font Awesome Node icons size:

Style properties -> Node/forum list -> Node icon (Font Awesome main)

Will change them all by adjusting the font-size. If you need to change a single node like your CSS above:

.node.node--id1 .node-icon i:before { content: "\f015"; font-size: 14px; }

For example, if you click on the Main Button, it will only display the Main Category

Thanks @Russ !

 

[Russ]

There was an add-on for XF1: https://xenforo.com/community/resources/th-forum-list-tabs.1476/ It was Waindigo's that was taken over.

I don't think there's anything for XF2.

You can do a slight manual setup if you enable:

Setup -> Options -> Node & forum list -> Create pages for categories

Use the built-in ad manager, place the buttons in the position: Forum overview: Top and they'll show up.

HTML In that ad position:

<ul class="custom-buttons">
<li><a href="#">Main</a></li>
<li><a href="#">General</a></li>
<li><a href="#">Marketplace</a></li>
</ul>

CSS inside extra.less

.custom-buttons
{
    .m-listPlain();
    .m-clearFix();
    margin-bottom: 10px;
    li { display: inline-block; margin-right: 5px;}
  
    a { display: block; padding: 5px 10px; background-color: #000; color: #FFF; border-radius: 5px;}
}

Result:

 

[Niro]

There was an add-on for XF1: https://xenforo.com/community/resources/th-forum-list-tabs.1476/ It was Waindigo's that was taken over.

I don't think there's anything for XF2.

You can do a slight manual setup if you enable:

Setup -> Options -> Node & forum list -> Create pages for categories

Use the built-in ad manager, place the buttons in the position: Forum overview: Top and they'll show up.

HTML In that ad position:

<ul class="custom-buttons">
<li><a href="#">Main</a></li>
<li><a href="#">General</a></li>
<li><a href="#">Marketplace</a></li>
</ul>

CSS inside extra.less

.custom-buttons
{
    .m-listPlain();
    .m-clearFix();
    margin-bottom: 10px;
    li { display: inline-block; margin-right: 5px;}
 
    a { display: block; padding: 5px 10px; background-color: #000; color: #FFF; border-radius: 5px;}
}

Result:
View attachment 8091

Thank you, but please where sould I go to use the built-in ad manager ?

Another question, how can I change the color of the text on the button there :

Thanks Russ

 

[Russ]

We need to make some adjustments on those buttons, XF doesn't use the default button styling for them.

Extra.less for now:

.XenBase .button.button--link { color: #FFF; }