Personalize the Hover color on your flexdashboard with a touch of custom CSS

I am currently working on building a dashboard with Flexdashboard and I want to customize the hover and active colors of the Flexdashboard pages named Capture and Results with specific colors that are unique to the client. I prefer not to use the default Flexdashboard themes for this customization. I have already managed to modify the background color of the navbar.

The image below shows the current appearance of the navbar after I made the color changes and the layout of the Flexdashboard pages where I would like to alter the hover color of the links: https://i.sstatic.net/qCdG4.png

Here is the R-Markdown code used to create the Flexdashboard pages:

Capture {data-icon="ion-document-text";}
=====================================

Results {data-icon="ion-stats-bars";}
=====================================

Also, below is the CSS code located in a separate file that I utilized to modify the background color of the navbar:

.navbar {
  background-color: #eb3868 !important;
}

My question is, how can I change the default blue hover and active colors to a different color of my choice?

cssrbootstrap-4r-markdownflexdashboard

Answer №1

Within this code snippet are three separate CSS calls defined, each with inline comments explaining their purpose.

  • Styling for the navbar background
  • Styling for the navbar active tab when selected, hovered over, or focused
  • Styling for the navbar inactive tab when hovered over or focused

It's worth mentioning that as you incorporate additional elements into your dashboard, you may encounter the original blue color scheme elsewhere. The CSS file contains more declarations that maintain the initial color palette.

<style>
.navbar-inverse {                
    background-color: #A8F79E;
    border-color: #A8F79E;
}
.navbar-inverse .navbar-nav>.active > a, .navbar-inverse .navbar-nav>.active > a:hover, .navbar-inverse .navbar-nav>.active > a:focus {
  color: #ffffff;
  background-color: #570861;     
}
.navbar-inverse .navbar-nav>li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
  color: #ffffff;
  background-color: #570861;     
}
</style>

https://i.sstatic.net/r9o1A.png

Shown in this image is a hover effect on the "Page 2" tab (though the mouse cursor is not visible).

https://i.sstatic.net/TkycN.png

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

ROracle package unable to install successfully

Although I have checked other related questions on this issue, none seem to match my system setup or the specific installation error I am encountering. Here are the details of my configuration: Operating system: Windows 7, 64-bit Installed software: Orac ...

rwindows-7-x64roraclertools

Achieving a seamless scrolling effect using CSS

I recently completed the design of a basic website that includes both mobile and desktop versions. However, I am looking to incorporate some animation into the site to enhance its appearance. One specific feature is a "go up" link at the bottom of the mob ...

htmlcss

Tips for adjusting the size of an HTML canvas to fit the screen while preserving the aspect ratio and ensuring the canvas remains fully visible

I'm working on a game project using HTML canvas and javascript. The canvas I am using has dimensions of 1280 x 720 px with a 16:9 aspect ratio. My goal is to have the game displayed at fullscreen, but with black bars shown if the screen ratio is not 1 ...

javascripthtmlcsscanvas

"Troubleshooting a dropdown navigation bar problem in CSS

I am currently working on creating a CSS navbar dropdown, but I am encountering some issues. I am not very experienced with CSS, so any assistance would be greatly appreciated. The text within the "Products" box is not changing color like it should, and yo ...

htmlcssdrop-down-menu

What are the steps to performing and graphing basic and dynamic linear regression with financial data in an xts object using R?

With 30-minute data samples available online, I have provided a notional dollar value of the spread between ES and 2 contracts of NQ (ES-2*NQ). The sample may be small, but it is sufficient for use in a demo. Below is the R code to fetch and utilize the da ...

rtime-seriesregressionxts

What could be the reason for Chrome breaking up this straightforward bootstrap header into two lines?

Why is it that the code below displays correctly in one line in both FF and IE, but Chrome for some reason is showing it on two lines as if both span and button elements had "display:block;"? Even though the button has a computed display of "inline-block," ...

htmlcssgoogle-chrometwitter-bootstrap

How can I update the style of my array-bars using componentDidMount()?

I created a visualization tool for sorting algorithms that displays vertical bars with varying heights and sorts them. The "Generate new Array" button triggers a function to generate a new array each time it's clicked, which is also used in the compon ...

javascripthtmlcssreactjs

Automatically fading in a div with jQuery and fading out upon scrolling

I am relatively new to working with JQuery and currently attempting to implement a feature where a div at the bottom of the page fades in upon loading, and then fades out as the user starts to scroll down. The div should reappear when scrolling back to the ...

jquerycss

html - displaying a new page within the content of the current page

I have a question about basic HTML knowledge that I find embarrassing Is it possible to open or load a second page within my first page? I want a menu button that will load the second page. <li class="current"><a href="first.html" target = "myC ...

htmlcss

The challenge of removing an event listener

There are three Div elements with a box appearance. When the user clicks on any div, a copy of that div will be added to the end. The original clicked div will no longer be clickable, but the new div will be. This process can repeat indefinitely. I attemp ...

javascripthtmlcss

What is the best way to make a selected link stand out with a highlight?

I'm having an issue with the code below that is supposed to keep the selected link highlighted, but it only flashes the green color on click. Can someone help me figure out what's going wrong here? #sidebarContent a:active{ background-colo ...

javascriptjqueryhtmlcss

Images in assets folder are not showing up in Vue Bootstrap

I'm attempting to showcase an image similar to the example provided in this guide Below is the code I am using: <template> <b-container fluid class="p-4 bg-dark"> <b-row> <b-col> <b-img rounded="ci ...

imagecssvue.jsbootstrap-4

Angular application with Material Design integration

I've been struggling to implement material design into my angular app, but I'm facing some challenges. After installing material design and adding all the necessary modules to the app.moduel.ts file, the components are not displaying correctly. ...

htmlcssangularjs

What is causing my Bootstrap Controls to malfunction?

I'm trying to create a Bootstrap carousel that shows 3 items at once and includes controls to switch between them. The carousel I've made does display the three items, but for some reason, the controls are not responding when clicked. I'm un ...

javascripthtmlcsstwitter-bootstrapbootstrap-carousel

Jupyter QtConsole: Customize default CSS by selecting from built-in options in the configuration settings

I am currently using Jupyter on a Windows platform and I am looking to customize the coloring of the QT console. Is there a way to set a default CSS style through a configuration file without having to manually specify it every time? Instead of passing t ...

cssjupyter-console

Personalizing the arrow positioning of the Angular8 date picker (both top and bottom arrow)

I am interested in enhancing the design of the Angular 8 date picker by adding top and bottom arrows instead of the default left and right arrows. Can someone guide me on how to customize it? Check out the Angular 8 date picker here ...

javascripthtmlcssangular

Stopping autoplay in Swiper as soon as you hover over it

My swiper is set to autoplay, but I want it to stop immediately when hovered over instead of waiting for the transition to finish. Is there a way to interrupt the transition and stop it at the exact point where the cursor hovers? Here is my Swiper config ...

javascriptcssvue.jsswiper.jsautoplay

Creating a Radial/Pie Menu using CSS3: A Step-by-Step Guide

I am interested in creating a radial menu using CSS3 transforms animations, similar to the example shown on this Wikipedia page or the flash version demonstrated on this website. Although there is a jQuery implementation available using canvas called Radme ...

jquerycsscontextmenuradial

iPhone 3GS and 4 not expanding DIVs by 100%

I've been encountering a significant issue with a div that's set to 100%. It displays properly on desktop screens, but on iPhones, there appears to be a gap on the right side. I've attempted to use the following CSS: body { min-width:980p ...

jqueryhtmlioscsswidth

Implementing nested CSS styles with jQuery - a step-by-step guide!

In my stylesheet.css file, I have the following code: .vertical-navigation .navbar-default .navbar-nav > li > a:hover { background-image: url(../images/sticcky_nav_hover.png) } .vertical-navigation .navbar-default .navbar-nav > li > a.navf ...

javascriptjqueryhtmlcss