text and color homepage tabs

[lenuit]

Hi,

thanks for creating this elegant and minimal template.
A very simple question: how can I change the color of the small tabs at the bottom of the front page (above the footer)? The tabs to control the background slider, to be clearer.
And, second doubt, how can I find the input field to write content between different homepage sliders, like in your Kabuki demo version? https://satoristudio.net/kabuki/

Thanks in advance for your answer.

[lenuit]

I found the way to write content which follows every background slide (I think I have to change the photo’s description), right?
But I need to change the tabs color. Please, help me.

[satori]

Hey lenuit,

first of all, thank you for the purchase!

To answer your question: I haven’t included a back-end option to change the background slider controls fill color so far, I will need to add this to the development list for Kabuki, thank you for bringing this up! In the meanwhile, you can change the fill color of the buttons (and captions) by adding a line of code at the bottom of the “style.css” files (should open by default when you go to “Appearance -> Editor”):
#slidecaption, #play-button, #prevslide, #nextslide { background-color: #000000 !important; }
replacing the #000000 with any other color on the hexadecimal scale.

If you also want to change the white arrows inside the buttons, you will have to replace the images in this folder with your own: /wp-content/themes/Kabuki/includes/supersized/img/. The arrow images are “back.png” and “forward.png”; the play buttons are “play.png” and “pause.png”.

Should you have more questions, do not hesitate to contact me!

Sincerely,
Andrew / Satori Studio

[lenuit]

thank you Andrew, very clear!

[lenuit]

Hi Andrew,

I added the code, as you suggested me, but the captions and buttons didn’t change color.
I don’t know the problem but I don’t guess to fail something because I’ve already added other lines to the style css file (to change measures of logo and also its position), consequently it ends up in this way:

#logo-wrap #logo a { width: 250px !important; }
#logo-wrap, #nav-primary { left: -250px !important; }
#slidecaption, #play-button, #prevslide, #nextslide { background-color: #034058 !important; }

Can you help me, please?
thank you.
C.

[lenuit]

Ok, I’ve done it! now it works!
thank you Andrew!

[satori]

Glad it works!

Should you have other questions/issues, do not hesitate to ask!

Best,
Andrew / Satori Studio

[Author]

Posts