Docs

[daveshu1234]

Hello,
my client has an odd request.

One one page only she wants to have different colors to the rest of the site for:

1) a different coloured logo (it’s an image);
2) different colored breadcrumbs;
3) And for the colored line that appears over the menu when you hover over an item, to be a different color.

How do I do this?

I assume I need to use the custom css, but I can’t work out for the life of me how to do it.

Thanks

[Rahul]

Hey there,

#1 :

You can do it by adding some script on Appearance> Customize > Custom > JavaScript

jQuery(".page-id .x-brand img,.single-post .x-brand img").attr("src","http://www.mysite.com/uploads/logo.jpg");

You have to replace .page-id with your desired page’s class name and change http://www.mysite.com/uploads/logo.jpg with the logo url that you want to display on that page.

To find the page ID right click on that page and click Inspect Element and then look at the body class like below –

http://i.imgur.com/hwk20So.png

You will see a class like page-id-56 which is the page ID of your page.

#2

.page-id-888 .x-breadcrumbs .current {
   color: #ddd; 
}

Replace ID 888 with your page id.

#3.

To change the colors of that little lines in the menu items, please add the following css code in the customizer, Appearance > Customize > Custom > CSS or insert this code in your child theme’s style.css (if you are using a child theme)

.x-navbar .desktop .x-nav > li > a, 
.x-navbar .desktop .x-nav > .x-active > a{
  box-shadow: inset 0 4px 0 0 #ff0000;
  margin-right: 3px; /* added this to create gaps between the lines */
}

/* On Hover */
.x-navbar .desktop .x-nav > li > a:hover, 
.x-navbar .desktop .x-nav > .x-active > a, 
.x-navbar .desktop .x-nav > .current-menu-item > a {
  box-shadow: inset 0 4px 0 0 #2ecc71;
}

Feel free to change the colors and increase the gap between the lines. Let us know if this works for you.

Hope that will help. Let me know how it goes.

Cheers!

[daveshu1234]

First of all let me say thankyou for such a speedy answer, all of that worked perfectly!

Thank you!

There is one more thing I might need to change the color of on that page if you can help please, and that is in one of the sections I have used the “prompt” element.

The headline and button colour for the prompt on that page also probably needs changing – what would I need to do for that please?

Thanks again,
Dave

[Christopher]

Hi there,

We are glad that we could help you.

Since you want these changes on specific page, add following code under cornerstone settings tab/custom css :

h2.h-prompt {
    color: red;
}
.x-prompt a.x-btn.x-btn-block {
    color: red;
    background: #000;
    border-color: #efefef;
    box-shadow: 0 0.25em 0 0 #a71000,0 4px 9px rgba(0,0,0,0.75);
}

Hope it helps.

[daveshu1234]

Thanks,
that’s great.

Cheers.

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts