XF 2.3 How to change the background color of specific buttons and checkboxes

[TestofTimeTwo]

Hello,

I need some guidance regarding specific buttons and checkboxes colors. How can I change the background color of:


The page navigation buttons:
Prev button
Go to page number button
Next button



The forum/threads checkbox and buttons:
Inline moderation checkbox
Mark read button
Watch button



Attachment management buttons and check box:
Insert multiple... button
Select all checkbox
Thumbnail button
Full image button
Delete button
Cancel button



If anyone could provide the ID for all these specific buttons, it would be greatly appreciated.


I searched the forum first, and found this post, but the code is specifc for the Attach files button ID only.

S

XF 2.0 Post in thread 'Changing colors in 'attach files' button'

Apr 18, 2018

extra.less template:

.button--link.js-attachmentUpload.button.button--icon.button--icon--attach {
   background: black;
    color: white;
    border-radius: 0px;
    border: none;
}

The other one needs some coding.

• S Thomas

• 

Thank you in advance.

 

[Deleted member 184953]

Go to your ACP >> Appearance >> Style properties >> Page numbers and Buttons

 

[TestofTimeTwo]

Go to your ACP >> Appearance >> Style properties >> Page numbers and Buttons

I've tried that before, but it shows no changes. Most prably because I modified elements of the default style to make my own color scheme. So it seems like I need to use the extra.less to target specific buttons and checkboxes.



The code from the post I linked in my OP works, but it's for the Attach files ID. I would love some help on how to find the ID for the others elements so I can target them with that code.

 

[CedricV]

I've tried that before, but it shows no changes. Most prably because I modified elements of the default style to make my own color scheme. So it seems like I need to use the extra.less to target specific buttons and checkboxes.
View attachment 316987


The code from the post I linked in my OP works, but it's for the Attach files ID. I would love some help on how to find the ID for the others elements so I can target them with that code.

If you have extra less code, it will overwrite whatever you have in place on style properties. I’m not on a computer at the moment, so can’t help you further atm.

 

[TestofTimeTwo]

If you have extra less code, it will overwrite whatever you have in place on style properties. I’m not on a computer at the moment, so can’t help you further atm.

I have/had nothing in extra.less when I tried to modify the Page Number style properties. It was because it didn't work that I turned to the extra.less option/alternative.

 

[TestofTimeTwo]

I ended figuring it out. Here they are:



In extra.less



Follow
Ignore
Report

Members

Change (pwrd & security)

Change (account details)
Your account (account details)
Edit Profile Banner (account details)

Mark read
Watch

Inline moderation checkbox

elipsis editing/moderation' more options

Edit (polls)

Edit (direct msg)
Star (direct msg)
Leave (direct msg)
Send Direct Message

First page (mobile only)
Prev page
Current page (desktop only)
Go to page number (mobile only)
Next page
Last page (mobile only)

Attach file
Insert multiple...
Select all
Thumbnail
Full image
Delete
Cancel



/* FIRST PAGE BUTTON */
/* WORKS ON MOBILE ONLY */
.pageNavSimple-el.pageNavSimple-el--first i:before {
background: @xf-buttonPrimaryBg;
}


/* LAST PAGE BUTTON */
/* WORKS ON MOBILE ONLY */
.pageNavSimple-el.pageNavSimple-el--last i:before {
background: @xf-buttonPrimaryBg;
}


/* CURRENT PAGE BUTTON */
/* WORKS ON MOBILE ONLY */
.pageNavSimple-el.pageNavSimple-el--current {
background: @xf-buttonPrimaryBg;
color: contrast(@xf-buttonPrimaryBg);
border: 1px solid transparent;
white-space: nowrap;
-webkit-transition: background-color .125s ease, border-color .125s ease, color .125s ease;
transition: background-color .125s ease, border-color .125s ease, color .125s ease;
font-size: 11px;
border-color: #4e2424 #2b1414 #2b1414 #4e2424;
border-radius: 4px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}


/* CURRENT PAGE BUTTON */
/* HOVER, ACTIVE, FOCUS */
/* WORKS ON MOBILE ONLY */
.pageNavSimple-el.pageNavSimple-el--current:hover, .pageNavSimple-el.pageNavSimple-el--current:active, .pageNavSimple-el.pageNavSimple-el--current:focus {
background: @xf-paletteColor4;
color: contrast(@xf-buttonPrimaryBg);
border: 1px solid transparent;
white-space: nowrap;
-webkit-transition: background-color .125s ease, border-color .125s ease, color .125s ease;
transition: background-color .125s ease, border-color .125s ease, color .125s ease;
font-size: 11px;
border-color: #4e2424 #2b1414 #2b1414 #4e2424;
border-radius: 4px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}


/* BOTH PREV AND NEXT PAGE BUTTON */
/* WORKS ON MOBILE ONLY */
.pageNavSimple-el.pageNavSimple-el--prev, .pageNavSimple-el.pageNavSimple-el--next {
background: @xf-buttonPrimaryBg;
color: contrast(@xf-buttonPrimaryBg);
border: 1px solid transparent;
white-space: nowrap;
-webkit-transition: background-color .125s ease, border-color .125s ease, color .125s ease;
transition: background-color .125s ease, border-color .125s ease, color .125s ease;
font-size: 11px;
border-color: #4e2424 #2b1414 #2b1414 #4e2424;
border-radius: 4px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}


/* BOTH PREV AND NEXT PAGE BUTTON */
/* HOVER, ACTIVE, FOCUS */
/* WORKS ON MOBILE ONLY */
.pageNavSimple-el.pageNavSimple-el--prev:hover, .pageNavSimple-el.pageNavSimple-el--next:hover, .pageNavSimple-el.pageNavSimple-el--prev:active, .pageNavSimple-el.pageNavSimple-el--next:active, .pageNavSimple-el.pageNavSimple-el--prev:focus, .pageNavSimple-el.pageNavSimple-el--next:focus {
background: @xf-paletteColor4;
color: contrast(@xf-buttonPrimaryBg);
border: 1px solid transparent;
white-space: nowrap;
-webkit-transition: background-color .125s ease, border-color .125s ease, color .125s ease;
transition: background-color .125s ease, border-color .125s ease, color .125s ease;
font-size: 11px;
border-color: #4e2424 #2b1414 #2b1414 #4e2424;
border-radius: 4px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}


/* BOTH PREV AND NEXT PAGE BUTTONS */
/* WORKS ONLY ON DESKTOP SITE */
.pageNav-jump {
background: @xf-buttonPrimaryBg;
color: contrast(@xf-buttonPrimaryBg);
border: 1px solid transparent;
white-space: nowrap;
-webkit-transition: background-color .125s ease, border-color .125s ease, color .125s ease;
transition: background-color .125s ease, border-color .125s ease, color .125s ease;
font-size: 11px;
border-color: #4e2424 #2b1414 #2b1414 #4e2424;
border-radius: 4px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}


/* BOTH PREV AND NEXT PAGE BUTTONS */
/* HOVER, ACTIVE, FOCUS */
/* WORKS ONLY ON DESKTOP SITE */
.pageNav-jump:hover, .pageNav-jump:active, .pageNav-jump:focus {
background: @xf-paletteColor4;
color: contrast(@xf-buttonPrimaryBg);
border: 1px solid transparent;
white-space: nowrap;
-webkit-transition: background-color .125s ease, border-color .125s ease, color .125s ease;
transition: background-color .125s ease, border-color .125s ease, color .125s ease;
font-size: 11px;
border-color: #4e2424 #2b1414 #2b1414 #4e2424;
border-radius: 4px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}


/* FOR THE PAGE NUMBERS */
/* WORKS ONLY ON DESKTOP SITE */
.pageNav-page {
background: @xf-buttonPrimaryBg;
color: contrast(@xf-buttonPrimaryBg);
border: 1px solid #f2930d;
}


/* FOR THE PAGE NUMBERS */
/* HOVER, ACTIVE, FOCUS */
/* WORKS ONLY ON DESKTOP SITE */
.pageNav-page:hover, .pageNav-page:active, .pageNav-page:focus {
background: @xf-paletteColor4;
color: contrast(@xf-buttonPrimaryBg);
border: 1px solid #f2930d;
}


/* FOR THE CURRENTLY ACTIVE PAGE NUMBER */
/* WORKS ONLY ON DESKTOP SITE */
.pageNav-page.pageNav-page--current {
background: @xf-paletteAccent2;
color: white;
}


/* FOR THE CURRENTLY ACTIVE PAGE NUMBER */
/* HOVER, ACTIVE, FOCUS */
/* WORKS ONLY ON DESKTOP SITE */
.pageNav-page.pageNav-page--current:hover, .pageNav-page.pageNav-page--current:active, .pageNav-page.pageNav-page--current:focus {
background: #cb7b0b;
color: white;
}


/* colors of 'inline moderation' button */
.button--link.js-inlineModTrigger.button {
background: @xf-buttonPrimaryBg;
color: contrast(@xf-buttonPrimaryBg);
}


/* colors of 'inline moderation' button */
/* HOVER, ACTIVE, FOCUS */
.button--link.js-inlineModTrigger.button:hover, .button--link.js-inlineModTrigger.button:active, .button--link.js-inlineModTrigger.button:focus {
background: @xf-paletteColor4;
color: contrast(@xf-buttonPrimaryBg);
}


/* REQUIRED to fix a problem with Xenforo inline mod count not accounting for the checkmark icon */
.inlineModButton.is-mod-active .inlineModButton-count {
display: none;
}


/* colors of 'elipsis editing/moderation' more options button */
.button--link.menuTrigger.button {
background: @xf-buttonPrimaryBg;
color: contrast(@xf-buttonPrimaryBg);
}


/* colors of 'elipsis editing/moderation' more options button */
/* HOVER, ACTIVE, FOCUS */
.button--link.menuTrigger.button:hover, .button--link.menuTrigger.button:active, .button--link.menuTrigger.button:focus {
background: @xf-paletteColor4;
color: contrast(@xf-buttonPrimaryBg);
}


/* colors of 'attach files' SelectAll checkbox */
.attachmentUploads-selectActions .selectAll .iconic input+i {
color: white;
}


/* colors of 'attach files' button */
.button--link.js-attachmentUpload.button.button--icon.button--icon--attach {
background: @xf-paletteAccent2;
color: white;
}


/* colors of 'attach files' button */
/* HOVER, ACTIVE, FOCUS */
.button--link.js-attachmentUpload.button.button--icon.button--icon--attach:hover, .button--link.js-attachmentUpload.button.button--icon.button--icon--attach:active, .button--link.js-attachmentUpload.button.button--icon.button--icon--attach:focus {
background: #cb7b0b;
color: white;
}


/* COLORS FOR ALL THE BUTTONS LISTED ABOVE EXCEPT FOR PAGE NAV AND ATTACH FILES */
.button.button--link,a.button.button--link {
background: @xf-buttonPrimaryBg;
color: contrast(@xf-buttonPrimaryBg);
}


/* COLORS FOR ALL THE BUTTONS LISTED ABOVE EXCEPT FOR PAGE NAV AND ATTACH FILES */
/* HOVER, ACTIVE, FOCUS */
.button.button--link:hover,a.button.button--link:hover,.button.button--link:active,a.button.button--link:active,.button.button--link:focus,a.button.button--link:focus {
background: @xf-paletteColor4;
color: contrast(@xf-buttonPrimaryBg);
}

 

[Deleted member 184953]

Something wrong somewhere in your ACP settings, you don’t need all this code to only stylish buttons and navigation…

 

[TestofTimeTwo]

Not sure what exactly is wrong. I have not touched any settings. This was a blank/fresh style / style properties and the only thing I had modified were the basic color settings, but once it came to buttons, nothing I modified showed any changes.

So, oh well, at least I figured out something that fixes it.

And I'm certainly not the only person having this type of issue:

XF 2.3 Thread 'Page numbers on thread - colour.'

Aug 7, 2024

Hello all,

Can you advise where to change the background colour on the page numbers (current page being viewed) on the threads.

It is currently grey but wish to make it stand out more.

• PNE-Online
• Replies: 9
• Forum: Styling and customization questions

 

[Deleted member 184953]

I see. You changed the basic colours to get a general style coloured to your liking, didn't you? Why didn't you change the colour palette instead? It seems more appropriate to me in your case.

 

[TestofTimeTwo]

All of the original color palettes fit what I wanted for my site, so I had nothing to change.