Change Fancy heading Color Separate for each Fancy Heading on 1 page

edited March 2016 in BeBuilder
Dear Muffin Group,
I'm trying to change the colour of my TOP fancy heading to white (#ffffff) because the background image is dark (see: http://massagehellevoet.nl/klachtverlichtende-massage)

The fancy heading at the bottom of the page should stay the same (because the background is white)

In Google inspect item I see this:

h1, h1 a, h1 a:hover, .text-logo #logo {

        color: #444444;

}

and when i change the color to #ffffff the fancy Heading title color becomes white, but I don't know what code to insert in the "Custom CSS Item Classes Names in the Fancy Heading options. Should I even do this in the "Custom CSS Item Classes Names in the Fancy Heading options?

I'm new to CSS so can you please provide me a step by step workaround (for dummies) how to make each separate Fancy Heading a different color (I know colors like #****** but that's about it!)

Thanx so much in advance!

Comments

  • Hi,

    we did checked your site but we see only 1 fancy heading which is located in the bottom. There is no headings in the top of site. However, if you want to change colors per individual items, you need to play with custom css. For the item, you must set individual class name and then under Theme options > Custom CSS & JS > Custom CSS, you must create custom css for that item.
  • edited March 2016
    Dear Muffin support,
    First of...Thank you for your quick reply!

    If you take a good look at this page: http://massagehellevoet.nl/massages you see a fancy header that say's: "massages" (over the shells in the header under the main menu). All pages start with a fancy header Btw. But because the font color is grey you don't see it clearly so it should be White (#ffffff) on all pages!

    so my question is as follows:

    1. How and where do I set individual class name and what should it look like?

    2. And how do I create custom CSS for that item in Theme options > Custom CSS & JS > Custom CSS and what should it look like?

    Can you please provide me a step by step example of how to do this? I' am quite new to this!

    Thank you so much in advance!

    Arnie
  • Ok, we see what you mean now. So what you need to do first is go to Fancy Heading item settings and set class name for Custom | Classes field like: fancy-heading-red - if you set this class, let us know so we can have a look on it and give you the right css.


  • edited March 2016
    Ok in the Custom Classes field on the top fancy header (Klachtverlichtende-massage) on this page: http://massagehellevoet.nl/klachtverlichtende-massage

    I filled in:  fancy-heading-white

    is that what you mean?

    Thank you in advance!

    Arnie
  • Ok. So now, you can use the following css under Theme options > Custom CSS & JS > Custom CSS section:
    .fancy-heading-white .fancy_heading h1 { color: #FFF !important; }
  • Wow it works...

    Thank you so much....:)

    You guys Rock!
Sign In or Register to comment.