XF 2.1 Extra.less not taking

Rushster

Member
Hi

I have setup a forum on my local machine to test templates on my local machine and everything is working fine as far as the forum is concerned. However, as soon as I add some custom css to the Extra.less template, none the css changes are showing at all. Any ideas?

Thanks in advance.
 

sbj

Well-known member
Are you making sure that you are using the correct style? Each style has its own extra.less template.

1576783901073.png

So, if you are applying customization on the default style extra.less but on the forum side you are using another style, you won't see the changes.
 

Brogan

XenForo moderator
Staff member
Difficult to say what the issue is without seeing the site first hand.

It's possible the CSS is invalid or is being overridden by the core CSS.

Try it on a demo and link to the demo here.
 

Rushster

Member
When I check the source and click the link...

<link rel="stylesheet" href="/wordpress/forums/css.php?css=public%3Anode_list.less%2Cpublic%3Ashare_controls.less%2Cpublic%3Aextra.less&amp;s=2&amp;l=1&amp;d=1576783116&amp;k=b05daa783826eef971bb737ac19714740693ecd0" />

and check where the extra.less is being called. Others seem to come up like so...

/********* public:node_list.less ********/
.node+.node{border-top:1px solid #280001}.node-body{display:table;table-layout:fixed;width:100%}.node-icon{display:table-cell;vertical-align:middle;text-align:center;width:46px;padding:10px 0 10px 10px}.node-icon i{display:block;line-height:1.125;font-size:32px}.node-icon i:before{font-family:'Font Awesome 5 Pro';font-size:inherit;font-style:normal;font-weight:400;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#610103}.node--unread .node-icon i:before{opacity:1;color:#ab0003}.node--forum .node-icon i:before,.node--category .node-icon i:before{content:"\f086"}.node--page .node-icon i:before{content:"\f15c"}.node--link .node-icon i:before{content:"\f0c1"}.node-main{display:table-cell;vertical-align:middle;padding:10px}.node-stats{display:table-cell;width:140px;vertical-align:middle;text-align:center;padding:10px 0}.node-stats>dl.pairs.pairs--rows{width:50%;float:left;margin:0;padding:0 3px}.node-stats>dl.pairs.pairs--rows:first-child{padding-left:0}.node-stats>dl.pairs.pairs--rows:last-child{padding-right:0}.node-stats.node-stats--single{width:100px}.node-stats.node-stats--single>dl.pairs.pairs--rows{width:100%;float:none}.node-stats.node-stats--triple{width:240px}.node-stats.node-stats--triple>dl.pairs.pairs--rows{width:33.333%}@media (max-width:1000px){.node-stats{display:none}}.node-extra{display:table-cell;vertical-align:middle;width:280px;padding:10px;font-size:13px}.node-extra-row{overflow:hidden;white-space:nowrap;word-wrap:normal;text-overflow:ellipsis;color:#bebebe}.node-extra-icon{padding-right:10px;float:left}.node-extra-icon .avatar{width:36px;height:36px;font-size:22px}.node-extra-placeholder{font-style:italic}.node-title{margin:0;padding:0;font-size:17px;font-weight:400}.node--unread .node-title{font-weight:700}.node-description{font-size:13px;color:#dfdfdf}.has-js:not(.has-touchevents) .node-description.node-description--tooltip{display:none}.node-meta{font-size:13px}.node-statsMeta{display:none}@media (max-width:1000px){.node-statsMeta{display:inline}}.node-bonus{font-size:13px;color:#bebebe;text-align:right}.node-subNodesFlat{font-size:13px;margin-top:.3em}.node-subNodesFlat .node-subNodesLabel{display:none}.node-subNodeMenu{display:inline}.node-subNodeMenu .menuTrigger{color:#bebebe}@media (max-width:650px){.node-main{display:block;width:auto}.node--link .node-main,.node--page .node-main{display:table-cell}.node-extra{display:block;width:auto;margin-top:-4px;padding-top:0}.node-extra-row{display:inline-block;vertical-align:top;max-width:100%}.node-extra-icon{display:none}.node-description,.node-stats,.node-subNodesFlat{display:none}}@media (max-width:480px){.node-subNodeMenu{display:none}}.subNodeLink:before{display:inline-block;font-family:'Font Awesome 5 Pro';font-size:inherit;font-style:normal;font-weight:400;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:1em;padding-right:.3em;text-decoration:none;color:#610103}.subNodeLink:hover:before{text-decoration:none}.subNodeLink.subNodeLink--unread{font-weight:700}.subNodeLink.subNodeLink--unread:before{color:#ab0003}.subNodeLink.subNodeLink--forum:before,.subNodeLink.subNodeLink--category:before{content:"\f086"}.subNodeLink.subNodeLink--page:before{content:"\f15c"}.subNodeLink.subNodeLink--link:before{content:"\f0c1"}.node-subNodeFlatList{list-style:none;margin:0;padding:0}.node-subNodeFlatList:before,.node-subNodeFlatList:after{content:" ";display:table}.node-subNodeFlatList:after{clear:both}.node-subNodeFlatList>li{display:inline-block;margin-right:1em}.node-subNodeFlatList>li:last-child{margin-right:0}.node-subNodeFlatList ol,.node-subNodeFlatList ul,.node-subNodeFlatList .node-subNodes{display:none}.subNodeMenu{list-style:none;margin:0;padding:0}.subNodeMenu ol,.subNodeMenu ul{list-style:none;margin:0;padding:0}.subNodeMenu .subNodeLink{display:block;padding:6px 10px;text-decoration:none;cursor:pointer}.subNodeMenu .subNodeLink:hover{text-decoration:none;background:#490001}.subNodeMenu li li .subNodeLink{padding-left:1.5em}.subNodeMenu li li li .subNodeLink{padding-left:3em}.subNodeMenu li li li li .subNodeLink{padding-left:4.5em}.subNodeMenu li li li li li .subNodeLink{padding-left:6em}.subNodeMenu li li li li li li .subNodeLink{padding-left:7.5em}

/********* public:share_controls.less ********/
.shareButtons:before,.shareButtons:after{content:" ";display:table}.shareButtons:after{clear:both}.shareButtons--iconic .shareButtons-buttons{display:grid;grid-template-columns:repeat(auto-fill, minmax(35px, 1fr))}.shareButtons-label{float:left;margin-right:3px;color:#bebebe;min-height:35px;line-height:35px}.shareButtons-button{float:left;margin-right:3px;padding:6px;color:#bebebe;font-size:20px;line-height:20px;white-space:nowrap;min-width:35px;border-radius:2px;background-color:transparent;-webkit-transition: all .25s ease;transition: all .25s ease}.shareButtons-button:last-of-type{margin-right:0}.shareButtons-button:hover{text-decoration:none;color:white}.shareButtons-button>i{display:inline-block;vertical-align:middle;font-family:'Font Awesome 5 Pro';font-size:inherit;font-style:normal;font-weight:400;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shareButtons-button.shareButtons-button--brand>i{font-family:'Font Awesome 5 Brands';font-size:inherit;font-style:normal;font-weight:400;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shareButtons-button>span{font-weight:400;font-size:15px}.shareButtons--iconic .shareButtons-button{text-align:center}.shareButtons--iconic .shareButtons-button>i{min-width:20px}.shareButtons--iconic .shareButtons-button>span{position:absolute;height:1px;width:1px;margin:-1px;padding:0;border:0;clip:rect(0 0 0 0);overflow:hidden}.shareButtons-button.shareButtons-button--facebook:hover{background-color:#3B5998}.shareButtons-button.shareButtons-button--facebook>i:before{content:"\f39e"}.shareButtons-button.shareButtons-button--twitter:hover{background-color:#1DA1F3}.shareButtons-button.shareButtons-button--twitter>i:before{content:"\f099"}.shareButtons-button.shareButtons-button--pinterest:hover{background-color:#bd081c}.shareButtons-button.shareButtons-button--pinterest>i:before{content:"\f231"}.shareButtons-button.shareButtons-button--tumblr:hover{background-color:#35465c}.shareButtons-button.shareButtons-button--tumblr>i:before{content:"\f173"}.shareButtons-button.shareButtons-button--reddit:hover{background-color:#FF4500}.shareButtons-button.shareButtons-button--reddit>i:before{content:"\f281"}.shareButtons-button.shareButtons-button--whatsApp:hover{background-color:#25D366}.shareButtons-button.shareButtons-button--whatsApp>i:before{content:"\f232"}.shareButtons-button.shareButtons-button--email:hover{background-color:#1289ff}.shareButtons-button.shareButtons-button--email>i:before{content:"\f0e0"}.shareButtons-button.shareButtons-button--link{cursor:pointer}.shareButtons-button.shareButtons-button--link:hover{background-color:#787878}.shareButtons-button.shareButtons-button--link>i:before{content:"\f0c1"}.shareButtons-button.is-hidden{display:none}.shareInput{margin-bottom:5px}.shareInput:last-child{margin-bottom:0}.shareInput-label{font-size:13px}.shareInput-label:after{content:":"}.shareInput-label.is-sentence:after{content:""}.shareInput-button{color:#e64006;cursor:pointer}.shareInput-button>i{display:inline-block;vertical-align:middle;font-family:'Font Awesome 5 Pro';font-size:inherit;font-style:normal;font-weight:400;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shareInput-button>i:before{content:"\f0c5"}.shareInput-button.is-hidden{display:none}.shareInput-input{font-size:13px}@media (max-width:568px){.shareInput-input{font-size:16px}}.shareInput-button.is-hidden+.shareInput-input{border-radius:4px}

But there is no extra.css heading there.
 
Top