CSS issues - Post ID 300773

User 3113476 Photo


Registered User
8 posts

I did a little research and found out that the tags nabber-light, and its corresponding nabber-dark should convert it to either white or black. However it does not respond. So I just deleted it and used a icon-link instead applied the menu to it and it worked.

Not sure why it is so hard to change the lines to white or other colors using the bootstrap tags.
User 122279 Photo


Senior Advisor
14,455 posts
Online Now

Looks good! :)
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 244626 Photo


Registered User
811 posts

Ryan Morrow wrote:
Also, yes I want to delete most of Bootstrap CSS as it is assigned. I have custom colors, sizes, and icons I need to set to buttons, and other elements. I have been working through the online documentation to understand how this is done. would you mind walking me through how to accomplish this. Say I would like to apply a teal primary color.

I normally would set up a custom CSS file, but I don't want to make huge changes. I just want to change the theme colors to the clients brand colors and apply them to primary, secondary, hover, click. etc.


You can turn off sections of the Bootstrap CSS (compiled SCSS) by going up to the top and choose Actions > Settings and there you can choose what Bootstrap Components you would like.

You may only want to use the grid, or grid and components....etc which allows you more freedom. You could then also use btn-primary and set the color, save to the color swatch, and update in the future if you wanted a shade lighter or darker.
Bootstrap 5 CSS Grid.
User 3113476 Photo


Registered User
8 posts

@Twinstream

The above is helpful! Thank you.

is there a way to review the CSS code before exporting?

Also, the more - none feature is just not responding correctly. I have a feeling it is due to tags associated with breakpoints.
User 379556 Photo


Registered User
1,535 posts

One way to view the CSS code in the main.css file is by right-clicking on the <body> element (I tend to use the very bottom left item in the program window) and selecting 'View Element Code'. The program doesn't have a facility to edit that code.

If the reference to the more - none feature is about Styles > Layout > Display > More > None, I don't recall seeing any previous mention of a problem with this, which just allows one to choose display:none. It is, however, important to become very familiar with the way that Site Designer works with breakpoints, especially that it works mobile-first for all the blank templates except the desktop-down version of Frameworkless.

Frank

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.