Niro

Customer
Hi,

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

upload_2018-6-20_1-34-11.png


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

upload_2018-6-20_1-35-48.png


How can I remove this ?

Thanks!
 

Niro

Customer
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

Pixel Exit Staff
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:

Code:
<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:


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

Niro

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

Code:
<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:


Code:
.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

Pixel Exit Staff
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:
Code:
<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
Code:
.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:
Screenshot_11.png
 
Last edited:

Niro

Customer
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:
Code:
<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
Code:
.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 :

upload_2018-6-26_6-7-36.png


Thanks Russ :)
 

Russ

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

Extra.less for now:

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

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.