My format has crashed

After few years, I tried to refresh my website and I went to tinker with the global font, background colors etc. Unwittingly, I must have changed certain options, resulting in images and contents becoming bloated, esp in the bigger port views. I can re-do each webpage using Slider Rev, and creating a “blank template”. But I’m stuck in the product pages of Woocommerce, and ‘forms’ and ‘add to cart’ pages.

Can you guide me how to set up the sizing for each of the portviews: desktop, laptop, tablet and mobile phone?

Also, where do I go to edit the format & color of the masthead, footer, sidebars?
Look forward to learning from you soon.

Hi @iamwithU,

Thanks for reaching out.
We are not sure what exact problem you are having, can you please specify the problems so we can guide you on that? If you have any problem with the Font or you want to add a new font to use globally, please go through the following documentation link.

If you have any problem with setting the Header and Footer, you need to check the Theme Options in our online documentation in the following link.

You can also find some video tutorials on our Youtube channel at the following link.

If you need any further help, please let us know about that.

Thank you @tristup for your prompt response.
To let you see what the problems are, I enclose some screenshots:

  • The images were removed by staff

The word “Navigation” has mysteriously appeared. So has the phrases “Assign a Menu”.

I deleted the menu, but the burger icon of 3 (and more) bars are appearing. Likewise the footer was deleted, because the icons and position of the elements have gone awry. But it seems the footer items are still appearing, Or are these widget items?

For the 3rd screenshot, it is a form that should be decently sized on a laptop view, but it has shrunken as if it is on a mobile screen.

The above problems are seen on the webpages for “cart”, “check out” and individual product.

Lastly, I have already changed the background in the theme options to white, but I don’t see it reflected - please see the screenshots. What is the problem?

How do I place menu and footer only at webpages I specify - where do I specify this?

Your guidance is much appreciated.

Hello @iamwithU,

Thanks for updating in! I have investigated your issue and I found out that it seems that the theme’s stack styles were not loaded. When I view it on my browser, it is non-existent in your server. I would recommend that you reinstall the Pro theme.

See the secure note below.

I would also recommend that you go to Cornerstone > Theme Options > Stacks and make sure that you have selected the “Design”.

I would also recommend that you do the following:

Kindly let us know how it goes.

How do I place menu and footer only at certain webpages. Where do I specify this?

Hello @iamwithU,

You will have to go to Appearance > Menus and create a menu. You will then have to assign the menu whether as Primary Menu or Footer Menu.

If you want to have a custom footer for specific pages, you still need to go to Cornerstone > Footer Builder and create a custom footer. You will have to assign it to the pages that you want it to display. If you are not familiar with the Assignments and Conditions, please check out this documentation:

Hope this helps.

Thank you @ruenel, for your prompt responses. I’ll go read up and try it out.

As per @ruenel’s advice, I re-installed Pro theme. (by deleting the theme and then re-downloading again). But the above problem persists. Those funny entries like
“Navigation” , “Assign a Menu” are still appearing. Even layouts in the mobile port view have shrunken.

My guess is that over last few days, I had changed a few options in the Cornerstone editing panel. I’m confused - I thought I have Pro theme but “Cornerstone” editing panels are appearing when I go to each page from the Wordpress Dashboard.

Can someone please help and advise?

I am not sure what I did but now those funny entries have gone. Despite my changing the background option to white and font to black, the words in my product pages are now hidden. Can point me in the right direction?

Hey @iamwithU,

You have lots of areas you posted in this one thread and we’re confused too. Please kindly highlight 1 issue before we solve another. It’s also strongly recommended to post 1 issue per area per thread and not 1 general issue encompassing different areas in the website.

I’ll only cover your latest concern which is hidden text in your product pages. By hidden, I believe you’re referring to white text. The style of the text is coming from a custom CSS in Theme Options > CSS. I think all of your issues are coming from the custom CSS so if you’re not sure what your CSS is doing, please remove or clear all CSS in Theme Option > CSS a.k.a the Global CSS.

If that is not what you mean, please post a screenshot of the area where we can find the hidden text. If you can’t provide a screenshot, please provide a detailed description where we can find the hidden text.


Thank you @christian . I see where the problem is now. Thank you for pointing me in the right direction.

I will do as you suggest, but I’m afraid I may mess up my existing webpages because I’m not trained in CSS and I can’t decipher the implication of some of these CSS, which were inserted over the years by several other persons helping me.

I’m in the midst of revamping the website personally. I want to clean up the CSS, esp those that are not needed. All my webpages are re-designed independently of theme options, except Forms and Woocommerce related pages. I would like theme options to apply only to Woocommerce pages and forms. Is it thus safe to remove CSS entries that do not have the .woocommerce prefix?

Hi @iamwithU,

I would suggest you before you change anything in the CSS, please take a backup of your website so anything happens you can restore it. Also, I would suggest you please copy your live site to a staging server and modify it according to your need and if everything goes fine in your staging you can migrate the staging server to live.


Thanks @tristup. Perhaps I can ask what is the rough purpose of this entry in my global CSS:

#x-section-7 .x-container .x-column.x-1-3 .x-face-content{
padding:.5% !important;

Hey @iamwithU,

We do not provide custom code guidance as part of our theme support. Once you work with custom CSS, it is expected that you know CSS. If not, you need to learn CSS.

Since it looks like you just knew that, I’ll answer the CSS question for now. and that’s to add space around the elements inside the Classic Card element.

Hope that helps and thank you for understanding.

Thanks Christian, for the very prompt response.
I see it is related to the Classic Card element. Appreciate your throwing some light on this.

Hey @iamwithU,

You’re welcome and we’re glad that my colleague was able to help you with your issue! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.

Hi @marc_a, I’ve done what your colleague said:

I searched and googled but don’t seem to come across anything so far about codes beginning with “.x” Is that a selector for classes related to X Theme?

Appreciate a little education here so I can decipher what has been entered into my global CSS. Some of these entries were suggested by support staff in years past.

Hello @iamwithU,

Yes, class which start with “.x” it is related to our theme, please note you need to learn CSS to leran more about how write class in to your style when you cutomize the default theme layout since custom CSS code only require if you need to customization in the default theme layout. You need to learn CSS and learn how to use the browser’s element inspector or you subscribe to One where customization questions are answered.

Hope it helps.

Thank you, wonderful @prakash_s.
Just one last question before I close off this train of issues here. Why can’t I find the CSS in relation to the font for my footer ? I read in the forum that it is controlled separately by an entry into the global CSS.

The body & content font in Theme Options is Raleway. But my footer font is Times and capitalized. Where is the place for specifying the font of the footer so I can go and change it? Is it found somewhere among the CSS entries?

Hey @iamwithU,

You don’t need CSS for that. The reason why your footer font is using Times New Roman is because it’s inheriting it from your computer because you’ve set the Body and Heading fonts in Theme Options > Typography to Inherit. change the Font Family to use your Font Manager setup. You can learn more about the Font Manger here: