Change ICON background color

Hi,
I’m sorry of this is a silly question, but I really can’t figure out how to change the color of the ICON stack background, from white.
I have managed the header/logo space, no problem, but as you can see from the photo, the background remains white…

What is the solution? Many thanks!

Hi There,

To change that white background color, please add this custom CSS under Theme Options > CSS:

div#top {
    background: #c7b5b5;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

Thanks so much for your reply, and the supporting links… Its perfect!

On another note, I have an issue with the spacing on a pricing column… I need it to align visually, but I can’t make it happen. Could you please help me? Thanks!

Hello Charles,

Please edit your pricing table and make sure that first column has this information:

<h3 class="x-price">Offert !</h3><span class="x-interval">*nouveaux membres, résidants de Bordeaux </span>
<div></div>
<p>&nbsp;</p>
<a class="x-btn x-btn-square x-btn-small" href="https://studiobookingsonline.com/spinbreakstudio/signup" title="Page Login" data-options="thumbnail: ''">Créer&nbsp;votre compte</a>

The different is the <p>&nbsp;</p> .

Thanks so much for your fast reply!
I did as you suggested, but this made the gap too large… see attached…

Hello Charles,

The columns have the same contents now. The problem is that the subtitle were not of the same height. You will need to make sure that they have the same height by adding this custom css

span.x-interval {
    min-height: 40px;
}

And you will have something like this:

Thank you so much!! You guys rock…

You’re most welcome!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.