Colour Customization in Homepage Widgets

Shapely
#1

Hi,

thanks for a great theme!

I’d like to change the colour of Button 2 in the “parallax section” homepage widget.
In my first parallax section it looks fine, because I have a background image.
But in my second parallax section I’ve positioned the image to the right, and then you almost can’t see Button 2, because it has white border and text on almost white background.

  1. Is it possible to customize button colour so that it’s different colours in different parallax sections?
    (If so, I’d like Button 2 transparent as it is, but I’d like border and text to be in the same purple as Button 1. How do I achieve that?)

  2. If it’s not possible to customize button colour in different parallax sections, how do I change the background colour of the parallax sections? I like the default colour, but I need it darker, so the white button 2 is clearly visible

I guess I need to write some code in the Custom CSS area of the theme, but I’m really new at this and have no clue as to how that code is written… Could you please advise?

Kind regards,

Per Wilkenson

#2

Hi Per Wilkenson,

I hope you are well today and thank you for your questions.

1) Is it possible to customize button colour so that it’s different colours in different parallax sections?

Yes

(If so, I’d like Button 2 transparent as it is, but I’d like border and text to be in the same purple as Button 1. How do I achieve that?)

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other

#shapely_home_parallax-2 a.btn.btn-lg.btn-white {
    color: #745CF9;
    border-color: #745CF9;
}
2) If it’s not possible to customize button colour in different parallax sections, how do I change the background colour of the parallax sections? I like the default colour, but I need it darker, so the white button 2 is clearly visible

You can change the background colour of the parallax sections by using the below CSS code.

#shapely_home_parallax-2 .bg-secondary {
    background: #000;
}

Please change the color value in the above code to whatever you want to use by referring the following pages.

http://www.w3schools.com/html/html_colors.asp
http://www.w3schools.com/html/html_colorvalues.asp
http://www.w3schools.com/tags/ref_colorpicker.asp

Best Regards,
Movin

#3

Thank you for quick support! Now my web site looks just as I want it to :slight_smile:

Regards,
Per

#4

You are most welcome here :slight_smile: