Change Jumbotron Button Colours

Hey guys, nice theme I really like it!

Just curious is it possible to change the colour of the buttons in Jumbotron default (white transparent & yellow) any help would be great thanks.

Hi @hayeseo,

it’s not possible directly from the theme Customizer, but it is possible via some custom CSS tweaks. Let me know if you’re comfortable writing some code, and I’ll try my best to provide it here :slight_smile:

Thanks,
Colorlib Support.

Thanks for the reply. If you could provide the code it would be great!

Hi,



#header .bottom-header .header-button-one { 
background-color: rgba(255, 255, 255, .5); // this is a HEX color converted to RGBA 
border: 3px solid #your_hex_code_here;
}

#header .bottom-header .header-button-two {
background: #your_hex_color_code_here;
}


Thanks,
Colorlib Support.

Hey,

Thank you for this code, it was usefull to change the button color and background.
Could you provide the code to change the font color in the description and the buttons and the middle-circle of Jumbotron?

I tried to tweak around a bit, but I failed…

Justin.

Hello @justpwd

This is the code to change the header paragraph color:

.bottom-header p{
color: black !important;
}

This is for the header bullets:

#header .bottom-header span.span-dot {
    color: #ffde00;
}

Regards

Thank you very much.

Regards,

Hi,

These code modifications are still not working for me. I have tried doing a find and replace of the yellow code for ‘red’ in main.css, custom.css, main.min.css and custom.main.css in the source files but when I re-upload it is still showing as yellow.

I have also tried adding the code above to the bottom of the styles.css in the WordPress editor - this too does change the colour of the dots to yellow.

Please, can you advise what I am doing wrong?

I’m new to CSS and CSS editing so anything you can dumb down would be great.

Hello @benraven,

If you can provide me the website link I can have a live preview of the issue and track it down for you.

Let me know if this is possible.

Otherwise, the CSS in use is the one from main.min.css, so there you should do the changes.

If nothing works, you can try to duplicate the code in a plugin like simple custom CSS and see if this get you forward with the design.

Regards

Hi,

The site is www.suitthecase.com

I want to change all of the yellow to red. I have started off with the header dots but these won’t change.

I have tried a variety of plugins too and these won’t change the colour either… Very strange.

I really want to use this theme because it looks fantastic. Would be very grateful of any help you can provide me.

Ben

Hi,

I ended up paying for a theme editor which seems to have done the trick. Is there any CSS code you are able to provide for the colour when buttons and text are hovered over?

Many thanks,

Ben

Hello,

Glad to hear that you got forward with the setup.

Additionally for the hover states you should use this CSS:

.widget ul li a:hover,
a:hover,
#header .bottom-header .header-button-two:hover{
color: red !important;
}

Let me know if this is working alright for you.

Regards

Hi,

Illdy Theme is great! Wondering how to set up the buttons on the Jumbotron to link down to a section of the one page site layout…

This is a super urgent project – hoping to hear from you soon!

Thanks!

Hello,

First, you should have a look on the demo page:
https://colorlib.com/illdy/

If you hover over the link menu you will see the section anchors:

https://colorlib.com/illdy/#about
https://colorlib.com/illdy/#projects
https://colorlib.com/illdy/#testimonials
etc.

In conclusion, you need to set up the jumbotron buttons to match those setion IDs

I hope this is clear enough.

Regards