XF 2.1 node image background
- Thread starter interforo
- Start date
l3ta
Well-known member
Get [TH] NODES if you can. In the meantime, you can put the following code in
replace the node id number with your node id# and the image link with yours.
extra.less to put a bg image in your nodes:
Code:
.node--id2{background: url(https://i.imgur.com/XfyWq0p.png);}replace the node id number with your node id# and the image link with yours.
l3ta
Well-known member
It should work for many node ids. Make sure you get the proper node id# for each image.
interforo
Active member
I mean I need the same img for more ids, how does the code look like in that case?
Another question is: I don't want the image to show on mobile...
Thank you
l3ta
Well-known member
Oh, i thought you wanted a different image for each node. In that case, just use this code:
Code:
.node-body{background: url(https://i.imgur.com/XfyWq0p.png);}interforo
Active member
sorry for the confusion, I need the main category, not the node id and only certain categories.
interforo
Active member
I have found this
.block.block--category.block--category14,16 .block-container .block-header {
background-image: url('https://interfans.org/immagini/fascia.jpg');
background-repeat: no-repeat;
background-position: center;
}
but more ids don't work
.block.block--category.block--category14,16 .block-container .block-header {
background-image: url('https://interfans.org/immagini/fascia.jpg');
background-repeat: no-repeat;
background-position: center;
}
but more ids don't work
l3ta
Well-known member
Hmm... weird. Maybe someone knows how to do it without an addon.I have found this
.block.block--category.block--category14,16 .block-container .block-header {
background-image: url('https://interfans.org/immagini/fascia.jpg');
background-repeat: no-repeat;
background-position: center;
}
but more ids don't work
l3ta
Well-known member
Try this and see if it works:
@media(max-width: 499px){.block.block--category.block--category14,16 .block-container .block-header {background: none!important}}
interforo
Active member
ok it works the mobile thing, I need now to find a way to have it working with multiple categories
l3ta
Well-known member
A link to your forum would help like a lot lol.
l3ta
Well-known member
The only category header missing an image is category 18.Right
Interfans.org/forum
interforo
Active member
My extra.less is pretty busy now. I should find a wat to group the category ids
Code:
/* Forum read & unread icons */
.node--forum.node--read .node-icon i:before{content: url(https://www.interfans.org/immagini/icone-new2.png);}
.node--forum.node--unread .node-icon i:before{content: url(https://www.interfans.org/immagini/icone-new1.png);}
/* Subforum read & unread icons */
.subNodeLink:before{content: url(/immagini/) !important;}
.subNodeLink.subNodeLink--unread:before{content: url(/immagini/) !important;}
/**********/
/* Coloured Node Categories */
.block.block--category.block .block-header {
background-repeat: repeat-y;
background-color: #000000;
color: #ffffff;
border-bottom: 3px solid #A29161;
}
/**********/
/* Links in posts */
a.link
{
color: #0026FF;
font-weight: bold;
text-decoration: underline;
}
.message-cell.message-cell--user, .message-cell.message-cell--action
{
background: #EDEAEA;
}
/* fix smilies issue */
.smilie--sprite {
background-size: 22px !important;
}
/* link color */
.p-breadcrumbs a {
color: white;
}
/* sidebar block title */
.block-minorHeader {
color: #ffffff;
text-decoration: none;
background-color: black;
padding-left: 5px;
padding-right: 3px;
display: block;
border-bottom: 3px solid #173874;
}
#Skinxcpciu1 {
margin-top: 0px;
margin: 0px;
padding: 0px;
padding-top: 0px;
background-color: black;
line-height: 0.1;
}
#DSKInterstitialnoForumxcpciu18 {
margin-top: 0px;
margin: 0px;
padding: 0px;
padding-top: 0px;
background-color: black;
line-height: 0.1;
}
/* custom notice background */
.custom-notice
{background: #ffc060;
color:#000000}
.custom-notice a
{color:#111c4e; font-weight: bold;}
.qc-cmp-persistent-link{
visibility:hidden;
}
.p-nav {
color: #FFF;
background: #0a65aa;
}
.p-navEl a{
font-weight: bold;
}
.p-nav-list .p-navEl-link, .p-nav-list .p-navEl-splitTrigger {
padding-top: 15px;
padding-bottom: 15px;
}
.p-breadcrumbs a {
color: #131313;
font-weight: normal !important;
}
.node--depth2:nth-child(even) .node-body {
background-color: #F9F9F9;
}
.p-sectionLinks {
font-size: 13px;
color: #fafbfd;
background: #155691;
border-bottom: 1px solid #155691;
font-weight: normal;
}
.p-sectionLinks-list .p-navEl-link, .p-sectionLinks-list .p-navEl-splitTrigger {
font-weight: normal;
}
.p-nav-list .p-navEl.is-selected {
color: #ffffff;
background: #155691;
}
.p-pageWrapper {
background: #F6F6F6;
}
.p-title-value {
color: #000;
}
.block-header a {
color: #b89256;
text-transform: uppercase;
font-size:18px;
}
.block-container:not(.block-container--noStripRadius) > :first-child, .block-topRadiusContent, .block-container:not(.block-container--noStripRadius) > .block-body:first-child > .blockLink:first-child {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.block-header {
padding: 10px 15px;}
.node-title{
font-weight:bold
}
.block.block--category.block .block-header, .block-minorHeader, .block-header {
border-bottom: 4px solid #0a65aa;
}
.block-header, .block-tabHeader{
background:#000000;
}
.message-userBanner.userBanner {
background: #0a65aa;
padding: 5px;
border-radius: 5px;
color: #FFF;
border: solid 1px #0a65aa;
}
.tabs--standalone .tabs-tab.is-active {
color: #0a65aa;
border-color: #0a65aa;
}
.tabs--standalone{
color:#8a8a8a;
}
.message-cell.message-cell--user {
flex: 0 0 250px;
}
.custom-message-userExtras {
margin-top: 3px;
font-size: 12px;
color: #000;
background: #c0c0c0;
padding: 5px;
border: solid 1px #c0c0c0;
border-radius: 5px;
}
.pairs > dt{
color:#000;
}
.p-header-logo.p-header-logo--image img {
vertical-align: bottom;
max-width: 70%;
max-height: 200px;
}
.button, a.button {
border-radius: 3px;
line-height: 30px;
font-weight: 600;
padding: 5px 20px;
}
.block-minorHeader {
padding: 10px 15px;
font-weight: 600;
font-size: 18px;
color: #b89256 !important;
}
.p-footer a {
color: #9F9F9F;
font-weight: 400;
}
.footer_custom_link, .footer_web_links, .footer_contact{
width:20%;
float: left;
padding:0px 10px 0px 0px
}
.footer_wc{
width:40%;
float: left;
padding:0px 10px 0px 0px
}
.customSection {
width: 100%;
display: block;
float: left;
padding-bottom: 25px;
padding-top: 25px;
}
.customSection h3 {
color: #b89256;
font-size: 16px;
border-bottom: solid 1px #0a65aa;
padding-bottom: 20px;
position: relative;
margin-bottom: 20px;
}
.customSection h3:after {
position: absolute;
content: '';
background-color: #0a65aa;
height: 4px;
width: 50px;
left: 0px;
bottom: 0px;
}
.customSection p {
font-size: 15px;
line-height: 22px;
color: #a7a7a7;
}
.footer_custom_link ul, .footer_web_links ul, .footer_contact ul{
margin:0px;
padding:0px;
}
.footer_custom_link ul li, .footer_web_links ul li, .footer_contact ul li{
list-style: none;
line-height: 22px;
}
.footer_contact ul li i{
padding-right:10px;
}
.p-footer-linkList {
list-style: none;
margin: 0;
padding: 7px 10px;
background-color: #3c3c3c;
border-radius: 5px;
float: left;
}
.p-footer-row-opposite {
display: none;
}
.p-navgroup-link--logIn {
border-radius: 5px;
background-color: #b89256;
line-height: 26px;
padding: 8px 15px;
font-weight: 600;
}
.p-navgroup-link--search{
line-height: 26px;
font-weight: 600;
}
.p-nav-opposite {
margin-bottom: 4px;
}
.p-navgroup {
background: transparent;
}
.p-navgroup-link--register {
background-color: #000;
border-radius: 5px;
margin-left: 5px;
line-height: 26px;
padding: 8px 15px;
font-weight: 600;
}
.p-navgroup-link--search .p-navgroup-linkText{
display:none;
}
.p-footer a:hover { color:#B89256}
.template-thread_view .pairs, .template-conversation_view .pairs {
flex: 1;
margin: 4px;
background: #fff;
border-radius: 8px;
box-shadow: 0 0 9px 0 rgba(0,0,0,0.1);
padding: 4px;
text-align: center;
}
.p-body-sidebar .pairs {
background: transparent;
box-shadow: none;
color: #8c8c8c;
margin: 0px;
padding: 0px;
}
.p-body-sidebar .pairs > dt {
color: #000 !important;
font-size: 14px !important;
}
.template-thread_view .tabPanes .pairs, .template-conversation_view .tabPanes .pairs {
margin: 0px;
background: transparent;
border-radius: 0px;
box-shadow: none;
padding: 0px;
text-align: center;
}
.block-outer-opposite .button, a.button {
border-radius: 3px;
line-height: 30px;
font-weight: 600;
padding: 5px 10px;
}
.block-outer-opposite .button.button--link, a.button.button--link {
color: #0a65aa;
}
.message-userTitle {
color: #0a65aa !important
}
.p-footer-inner .pairs {
flex: 1;
margin: 0px;
background: transparent;
border-radius: 0px;
box-shadow: none;
padding: 0px;
text-align: center;
color:#FFF
}
.p-footer-inner .pairs > dt {
color: #FFF !important;
font-size: 14px !important;
}
.template-thread_view .tabPanes .pairs>dt, .template-conversation_view .tabPanes .pairs>dt {
color: #000;
font-size: 13px;
}
.template-thread_view .pairs>dt, .template-conversation_view .pairs>dt {
color: #082552;
font-size: 17px;
}
.template-thread_view .pairs>dt:after, .template-conversation_view .pairs>dt:after {
display:none
}
.template-thread_view .pairs.custom-pairs--justified>dt, .template-conversation_view .pairs.custom-pairs--justified>dt {
float: left;
max-width: 100%;
margin-right: 0px;
text-align: center;
width: 100%;
position: relative;
height: 20px;
}
.template-thread_view .pairs.custom-pairs--justified>dd, .template-conversation_view .pairs.custom-pairs--justified>dd {
float: left;
text-align: center;
max-width: 100%;
font-size: 14px;
width: 100%;
font-weight: 600;
}
.template-thread_view .custom-message-userExtras, .template-conversation_view .custom-message-userExtras {
display: flex;
margin: 10px auto;
max-width: 100%;
background: transparent;
padding: 0px;
border: 0px;
}
.custom-dl-pairs--justified{
margin-top: 0px;
float: left;
width: 46%;
}
.button.button--scroll, a.button.button--scroll {
background: rgb(10, 101, 170);
padding: 5px 8px;
box-shadow: 1px 2px 2px 0 rgba(0,0,0,0.25);
border:none;
}
.actionBar-action {
color: #0a65aa;
}
.block-outer-opposite .button.button--link:hover, a.button.button--link:hover {
color: #FFF;
}
.fauxBlockLink .fauxBlockLink-blockLink {
position: static;
color: #0a65aa;
}
/********* pFooter Stats ********/
.p-footer-stats {
background: #155591;
}
.p-footer-stats .pairs>dt:after{
display:none
}
.p-footer-stats .p-footer-stats-inner {
display: flex;
justify-content: space-between;
margin: 0 auto;
max-width: 1200px;
padding: 30px 0;
text-align: center;
}
.node--unread .node-title a{
font-weight: 700;
color: #0a65aa;
}
.node-extra-row .node-extra-title, .username {
color: #0a65aa;
}
.p-footer-stats .p-footer-stats-inner .pairs {
display: inline-flex;
align-items: center;
margin: 0 5px;
background-color: transparent;
border: 0px;
box-shadow: none;
}
.pairs.pairs--inline>dt, .pairs.pairs--inline>dd {
display: inline;
}
.p-footer-stats .fas, .p-footer-stats .fab {
color: #b89256;
font-size: 32px;
margin-right: 20px;
}
.social__icons{
padding-top: 10px;
padding-right: 10px;
padding-bottom: 6px;
padding-left: 10px;
margin: 0;
}
.social__icons li {
display: inline-block;
list-style: none;
}
.social__icons li a {
display: block;
width: 35px;
height: 35px;
line-height: 35px;
background: #228be6;
color: #fff;
text-align: center;
border-radius: 4px;
margin-right: 4px;
}
.social__icons li a i{
padding-right: 0px;
}
.social__icons li a.-facebook {
background: #484848;
}
.social__icons li a.-twitter {
background: #484848;
}
.social__icons li a.-instagram {
background: #484848;
}
.social__icons li a i{
font-size:20px;
margin-top: 8px;
}
.social__icons li a i:hover{
color:#FFF;
}
.button.button--primary {
color: #fff;
background: #155591;
min-width: 80px;
border-color: #155591 ;
}
.button:hover{
background: #155591 !important;
border-color: #155591 ;
}
.pairs.pairs--inline>dt, .pairs.pairs--inline>dd {
display: inline;
}
.p-footer-stats .p-footer-stats-inner .number {
color: #fff;
display: block;
font-size: 25px;
line-height: 1;
font-weight:bold;
}
.p-footer-stats .p-footer-stats-inner .username {
font-size:20px;
}
.p-footer-stats .p-footer-stats-inner .text {
color: #eaf6ff;
display: block;
font-size: 18px;
}
@media (max-width: 767px){
.p-footer-stats{
display:none
}
.p-footer-stats .p-footer-stats-inner {
align-items: center;
flex-flow: column;
justify-content: center;
}
.p-footer-stats .p-footer-stats-inner .pairs {
flex-flow: column;
margin: 10px 25px;
}
.p-footer-stats .fas, .p-footer-stats .fab {
margin-right: 0;
margin-bottom: 10px;
}
}
@media (max-width: 650px){
.has-js .p-nav-smallLogo {
display: inline-block;
background-color: #000;
max-width: 155px;
}
.p-header {
height: auto;
}
.footer_wc {
width: 100%;
}
.footer_custom_link, .footer_web_links, .footer_contact {
width: 33%;
float: left;
padding: 0px 10px 0px 0px;
}
}
@media (max-width: 480px){
.footer_custom_link, .footer_web_links, .footer_contact {
width: 100%;
}
.p-navgroup-link--logIn {
padding: 8px 6px;
}
.p-navgroup-link--register {
padding: 8px 7px;
}
}
a {
color: #0a65aa;
text-decoration: none;
}
@media (max-width: 410px){
.p-navgroup-link--logIn {
display:block;
}
.block-outer-opposite .button, a.button {
border-radius: 3px;
line-height: 30px;
font-weight: 600;
padding: 5px 6px;
font-size:12px;
}
.p-navgroup-link--register {
display:block
}
.p-nav-smallLogo img {
max-height: 48px;
}
}
// ########################### FULL SIZE LOGO ON MOBILE ########################
.p-nav-smallLogo {
display: none !important;
}
.p-header-logo {
max-width: none !important;
}
.has-js .p-header {
display: block;
}
// ########################### FULL SIZE LOGO ON MOBILE ########################
// ########################### remove footer sidebar ########################
.fw-branding
{
background: transparent !important;
color: #717171 !important;
text-shadow: white 1px 1px;
font-weight: bold;
display: none;
}
/*** Hide forum title on forum list ***/
[data-template="forum_list"]
{
.p-title-value {
display: none;
}
.p-title {
float: right;
}
}
/**********/
.privacy_privacybutton--1Gvii
{
display: none !important;
}
/****subforum****/
.node-subNodeFlatList {
>li {
display: inline-block;
margin-right: 0;
float: left;
width: 50%;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
}
}
/****subforum****/
/* Icons for Login and Register buttons */
.p-navgroup-link.p-navgroup-link--textual.p-navgroup-link--logIn:before {
.m-faBase();
.m-faContent(@fa-var-sign-in, 1em);
color: #000000;
}
.p-navgroup-link.p-navgroup-link--textual.p-navgroup-link--register:before {
.m-faBase();
.m-faContent(@fa-var-key, 1em);
color: #E6BB5C;
}
/**********/
/* Coloured Node Categories */
.block.block--category.block--category14 .block-container .block-header {
background-image: url('https://interfans.org/immagini/fascia.jpg');
background-repeat: no-repeat;
background-position: right;
}
.block.block--category.block--category15 .block-container .block-header {
background-image: url('https://interfans.org/immagini/fascia.jpg');
background-repeat: no-repeat;
background-position: right;
}
.block.block--category.block--category16 .block-container .block-header {
background-image: url('https://interfans.org/immagini/fascia.jpg');
background-repeat: no-repeat;
background-position: right;
}
@media(max-width: 499px){.block.block--category.block--category14 .block-container .block-header {background-repeat: repeat-y;
background-color: #000000;
color: #ffffff;
border-bottom: 3px solid #A29161;}}
@media(max-width: 499px){.block.block--category.block--category15 .block-container .block-header {background-repeat: repeat-y;
background-color: #000000;
color: #ffffff;
border-bottom: 3px solid #A29161;}}
@media(max-width: 499px){.block.block--category.block--category16 .block-container .block-header {background-repeat: repeat-y;
background-color: #000000;
color: #ffffff;
border-bottom: 3px solid #A29161;}}
/**********/
.p-nav
{
height: 50px;
}l3ta
Well-known member
Got it. Put this in extra.less and you will only need to use one image for all the categories:
Code:
.block.block--category.block--category .block-container .block-header {
background-image: url(https://interfans.org/immagini/fascia.jpg);
background-repeat: no-repeat;
background-position: right;
}interforo
Active member
In conflict with mobile now where I don't need the category img to show
l3ta
Well-known member
Cry no more. Leta is here to help you! put this in extra.less:
@media(max-width: 499px){.block.block--category.block--category .block-container .block-header{background: none!important}}
Similar threads
- Question
- Question
- Question
- Question
