Button Formatting disappearing after rereshing page

Support
#1

Hello
For some reason I am getting stuck on things that should be straight-forward. I must be missing something. I apologize but I can’t figure it out.

My website is onestopwebsite.website. It is on the web and not on localhost. My password is the same as contained in my last secure note.

I added several buttons at the bottom of my “Choose A Website” page. I created these by dragging the button element to my webpage using Cornerstone. I would like these buttons to look like the other buttons on the website.

I tried adding css to the css menu item on the left side of the Cornerstone menu. The documentation says all the regular css is not needed, just the command. I could not get this to work. Some pages in the documentation show a place to enter class or ID on the Cornerstone menu but I do not see it.

I tried inserting a content area and putting the code in there which created a good button but I could not manage the space between the button and the border of the content area. This resulted in poor spacing on my webpage.

I then inspected the button. I inserted “x-btn button” in the class description of the code. That gave me exactly the look I wanted. However, my changes were wiped out when I refreshed the page. I thought I could always edit this code when I do Inspect. Could you please tell me if I am doing something wrong here?

I would appreciate if you could point me in the right direction to get these buttons to look like the others on the site.

Also, I have read a lot of documentation on how to use the css on the cornerstone menu but I am missing something.

Do you know of another source of documentation that I could look at to learn how to use this Cornerstone CSS area or somewhere where they show examples?

Thank you

Bill

#2

Hi @Billr,

Thanks for writing in.

First, I believe that what you meant is Choose a Theme Page.

I have added a Class to your setup and it is working.

After you add a Class or a CSS your must save your page.

This link below is a great documentation on how to use Custom CSS with X theme:

https://xthemetips.com/where-in-the-world-do-i-put-my-custom-css/182/

Hope it helps.

Let us know how it goes.

Thanks.

#3

Hello Nico
Thank you for the quick response.
I am sorry. I must have mis-communicated. The site looks exactly as it did before.
What I am trying to do is make the links on the Choose A Theme page look like the default Integrity #3 links i.e. I would like them to look like:
i.e. pill shaped(medium), 3d, black border.

I would really appreciate if you could help me with this.

Also , thank you for the documentation link. I did not see that before. I ha ve not had a chance to read it yet but it looks great.

Thank you
Bill

#4

Hello Nico
I am continuing to look at this.
Could you please tell me how you got to the page that is showing in your post. The page with Setup, ID, Class and CSS.
This is the page I have been looking for but cannot find it

Thank you
Bill

#5

Hi Bill,

Please try using Classic Buttons instead.

You should be able to see those options when you click on the customize option of the Sections, Row, Column, and elements.

Hope this helps.

#6

Are you saying that the 3d, pill-shaped button that is the default in Integrity #3 cannot be used?

what did the x-btn that you put in the class do?

Thanks
Bill

#7

Hi Bill,

Sorry for the confusion, let me clarify this first, Cornerstone has actually 2 types of button element, the Classic Button element and the V2 Button element.

This is a Classic Button element, Classic button element has less configuration option, its styling depends on Theme Options > Buttons, this is where the pill styling of your Classic button coming from. All of the demos are built-in classic elements. So don’t be confused if you see those elements that have less configuration option.

While these are V2 Button element

As you can see this button element has its own configuration options, this button does not depend on Theme Options > Buttons for styling, you can style this button as you want it.

If you go to this V2 Button element path then I advise that you style one button as you like it to be. After you finished designing your button, save that button as Preset and just apply it to your other V2 Button element afterwards.

You don’t actually need a custom CSS for your issue, but if you want to learn more custom CSS, you can inspect your site using Chrome’s developer tools to see the styling that is applied to an element and then using custom CSS to override it. You can find more info on how to check for CSS selectors here. Then information about writing your custom CSS here.

Hope this shed some lights,
Cheers!

#8

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