The pagination styles in Bootstrap are refusing to be overwritten by custom CSS variables

Incorporating Bootstrap version 5.3.3, I have implemented a customized WordPress theme where I have specified a range of color overrides.

The custom WordPress theme stylesheet is loaded last, following the Bootstrap stylesheet.

At the beginning of my theme stylesheet, I have defined the following color variables:

/* Colours */
:root {
    
    --mk-gold:#ab9460;
    --mk-gold-rgb:171,148,96;
    --mk-dark-gold:#615338;
    --mk-dark-gold-rgb:97,83,56;
    --mk-light-gold:#c4bc9a;
    --mk-light-gold-rgb:196,188,154;

    --bs-primary:var(--mk-gold);
    --bs-primary-rgb:var(--mk-gold-rgb);

    --bs-link-color:var(--mk-gold);
    --bs-link-hover-color:var(--mk-dark-gold);
    --bs-link-color-rgb:var(--mk-gold-rgb);
    --bs-link-hover-color-rgb:var(--mk-dark-gold-rgb);

    --bs-pagination-active-bg:var(--mk-gold);
    --bs-pagination-active-border-color:var(--mk-dark-gold);

}
/* End Colours */

Most of the overrides function correctly, except for the pagination styling. Strangely, the rules related to pagination are not taking precedence over the default Bootstrap values, unlike the primary and link colors which successfully apply the override values when using classes such as text-primary etc.

Could someone provide insight into why this behavior occurs, particularly in the context of pagination styling?

csswordpressbootstrap-5css-variables

Answer №1

It just hit me that I overlooked a crucial step in this process. I need to first create CSS declarations for the class I intend to override before providing the overrides.

After some more digging in my theme stylesheet, I added the following code (and removed the last two lines from the :root section) to successfully override the Bootstrap pagination colors.

.pagination {
    --bs-pagination-border-radius:0;
    --bs-pagination-border-color:transparent;
    --bs-pagination-active-bg:var(--mk-gold);
    --bs-pagination-active-border-color:var(--mk-gold);
    --bs-pagination-hover-bg:var(--mk-light-gold);
    --bs-pagination-hover-border-color:transparent;
    --bs-pagination-hover-color:var(--bs-white);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Printing pages with Bootstrap without disrupting cards

My goal is to print a basic bootstrap page using window.print(). Here is what the page looks like (with multiple div.col-md-12 & cards) : <div class="overview"> <!-- Takes up entire screen width --> <div class="row"> <div ...

htmlcssprintingbootstrap-4

How can you modify the color of a FontAwesome icon?

I am currently utilizing BigCommerce and my code looks like this: .icon-cart { color: #4ca3c0 !important; } .icon-cart a{ color: #4ca3c0 !important; } Despite the above, it seems that the icon's color remains unchanged. Any suggestions or i ...

htmlcssbigcommerce

Is the order of elements in a CSS file important?

In my situation, I am dealing with a nested list and enclosing div that was created by Drupal's menu system, so I am unable to modify it. My goal is to replicate the menu from a hardcoded website (link removed). How can I include the sub-items (ul l ...

cssmenunested-lists

Having issues with the functionality of the Previous/Next button in my table

I am facing a challenge with my table as I am trying to include previous/next button for users to navigate through it. However, the interaction doesn't seem to be functioning properly, and I suspect that I need to establish a connection between the bu ...

javascripthtmlcss

How to toggle between two background colors in a webpage with the click of a button using JavaScript

I need help with a unique website feature. I want to implement a button that cycles between two different background colors (white and black) as well as changes the font color from black to white, and vice versa. My goal is to create a negative version of ...

javascripthtmlcsscolorsbackground

Tips for displaying a dropdown on top of a modal with the help of Tailwind CSS

I am currently utilizing Tailwind CSS and I am struggling to display the white dropdown over my modal. Despite attempting to use the z-index, I have been unsuccessful in getting it to work. Do you have any suggestions or insights on how to resolve this is ...

htmlcssvue.jstailwind-cssheadless-ui

What is the method for configuring automatic text color in CKEditor?

https://i.sstatic.net/yEM3p.png Is there a way to change the default text color of CKEditor from #333333 to #000000? I have attempted to modify the contents.css in the plugin folder: body { /* Font */ font-family: sans-serif, Arial, Verdana, "Tr ...

javascripthtmlcssckeditoreditor

Issues with passing text variables through Wordpress ajax

I've encountered an issue with my ajax code on a WordPress site. When sending numbers, everything works fine, but when I try to send a text variable, it doesn't go through. If I replace the text with numbers, the data is successfully stored in t ...

ajaxwordpressvariablestextsend

Ensure the webpage is set to have a minimum width of 1024 pixels

Is it possible to make a webpage that utilizes bootstrap, Angular 2x, and Scss stop being responsive once the screen width reaches 1024px? I would like the layout to stay fixed at this size and enable horizontal scrolling for users who resize their browser ...

htmlcsssass

Looking for assistance on how to automatically close the sidebar or pull navigation menu after clicking on a menu item

My website is designed to be responsive and includes a navigation slider that is hidden off-screen by default. The slider features a vertical push/pull bar that remains visible for users to access the menu. The entire navigation slider is fixed on the page ...

javascriptjqueryhtmlcss

Steps to create an iframe that opens in a new window

I'm facing an issue with the iframe sourced from flickr. My website includes an embedded flickr iframe to showcase a gallery without the hassle of creating a slider, resizing images, and extracting thumbnails. Given that this site belongs to a frien ...

javascriptjqueryhtmlcssiframe

AngularJS Bootstrap CSS implementation for Hand Cursor Grab

Is there a way to ensure the cursor is always a hand / grab for sortable containers in AngularJS & Bootstrap? What specific HTML modification would achieve this change? <div ui-sortable="sortableOptions" ng-model="responses" class="container-f ...

cssangularjstwitter-bootstrapcursor

Disappearance of CSS borders when using jQuery scroll function

After implementing a fixed table header for an HTML table on my website, I encountered a minor issue. When scrolling down, the table header remains at the top as intended, but the CSS styling for borders within each <th> element disappears. The font ...

jquerycss

Creating CSS animation for the most recent element that has been dynamically inserted using JavaScript and Vue.js

After adding a new div with Vue, I noticed that the opacity effect is being applied to the previous element instead of the newly added one. I want the effect to always appear on the latest element added at index 0. What could be causing this issue? Here i ...

javascriptcssvue.js

What is the best way to position my logo on top of the stunning space background?

Click here to check out the code on CodePen Please take a look at my code on codepen.io. I am new to Stack Overflow so please be patient with me if I make any mistakes. ;-; I currently have my logo (https://i.stack.imgur.com/W0nWc.png) included in the co ...

javascripthtmlcsslayer

Flexbox margins (exceeding 100% total width)

Currently collaborating with @c4rlosls and we are facing 2 issues: https://i.sstatic.net/44WcI.jpg If the parent container with class container-fluid has a px-0, it extends beyond 100% width. Additionally, the elements with classes .cont2 a and .cont3 a do ...

htmlcssflexboxbootstrap-4

What could be the reason that my submenus are not appearing as expected?

I'm currently working on refining the navigation bar design for a website, but I've encountered a problem with the submenu functionality. It appears that only one submenu is visible while the others remain hidden. For example, when navigating to ...

htmlcsssubmenu

What steps can be taken to avoid the div sidebar overlapping with the content on the

I am currently facing an issue with my website where the div sidebar scrolls with the page and overlaps the page content whenever the window is resized. To see a demonstration of the problem, you can visit this link: Below is the CSS code for the menubar ...

csshtmlsidebaroverlapping

Personalized hover effect using CSS on Caldera Forms

Struggling to customize the CSS style of my Caldera forms on a WordPress site. My goal is to add a hover effect to the radio checklist fields. Currently, I've only managed to style the bullets and need help adding a hover effect to the fields themselv ...

csswordpress

How can I locate a div element using multiple class names?

<div class="value test" /> I am trying to locate this specific element on the web page which has two classes assigned to it. Since className does not accept space-separated values, I am exploring alternative ways to achieve this. Any suggestions? ...

javacssseleniumselenium-webdriver