Can't Edit Blog Page

Support
#1

Hi there,

when im trying to edit my blog page in cornerstone, it fails to load cornerstone and throws the message:
“A conflict on the front end of your site has prevented the preview from loading.”

However i would like to change the color of the navbar of my blog page. Is there a way around for this?

Thanks for the support.

Editing a post layout
#2

Hi there,

If you set a page to a blog page from Settings section of the Wordpress it is not possible to edit that page. Even if you do not use our theme the normal Editor of Wordpress will not be available for you on that specific page.

The options which you can change in the Blog page are available in X > Launch > Options > Blog.

Thank you.

#3

Hi,

so is there really no way to change the design of the blog page.
Isnt there any way to get to the css of the blog page?

Thanks

#4

Hi There,

You can use custom CSS rules and add it into your Customizer, Custom > Edit Global CSS area to style your blog page. You can target the Blog page using .blog CSS selector.

For example:

.blog .h-landmark {
    color: #ff0000;
}

Hope that helps.

#5

Thanks for the hint.

However I can’t get the css which changes the background-color of the blogs nav bar.

Could you please assist me with that?

Thanks for the support.

#6

Hello @iPerfect,

Thanks for writing in! If you’re using any modern browser (preferably Chrome or FireFox), you can inspect elements using the browser’s built-in developer tools to see what styles you need to overwrite. For example, in Chrome you could move your mouse up to the navbar and right-click on it. Notice the Inspect element in the dropdown that appears:

Clicking that will reveal the following:

We now see an HTML inspector on the left and a CSS inspector on the right. In the HTML inspector we can see what element is being inspected by the blue bar, and we also see it highlighted in the window above. Now, we will need to explore a bit and find the appropriate element with the background-color on it so we can change it:

Clicking up two levels we arrive at the x-navbar element, which as you can see on the right has background-color: #fff; applied to it. Now that we know what element we want to target, we can take that knowledge and implement our custom CSS. I have gone into great detail on how to do this in other posts, such as this one which you will find helpful:

This is helpful to know as it will empower you to be able to make minor adjustments as you need when working on your site without having to go through support every time. We are always happy to help when necessary, but also like to empower our users with knowledge so that they can easily attain any minor adjustments they need on their own without needing to invest time in waiting for a response for a simple adjustment.

For your particular case, you would simply apply some CSS like the following using the instructions from the article I linked to:

.x-navbar {
  background-color: #ffba00;
}

Hopefully this helps to point you in the right direction. Cheers!