Set color for multiple elements at once with the same category like link in Nav

Probably is possible, but I can’t find option yet. I want visually add elements. After that using menu Appearance setup color for all category of items. Fx. I add navbar > nav > link. How style all links at once? When I do it I see only override style for one selected element.

Now when I setup style as I like I finish with changed only one item not all of fx. if I style link in nav I change only one link, not all links. How deal with it?

This is not BSS help you need here, please post in the Webdesign Help Forum. This is also a basic CSS situation. I would highly suggest you work on getting more knowledge about how CSS works so you can follow the flow of how it is applied in BSS.

Actually @jo-r , this can be done through the Bootstrap Studio visual interface. It’s simply not explained in any of the tutorials, videos (or that bleeding-edge Bootstrap Studio User Guide that gets updated with every new program update/version release :roll_eyes: [yes, that was intense sarcasm - not towards you, but towards the ongoing lack of a BSS User Guide])

@andee

  1. After you’ve dragged your Navbar component to the page, go to the Overview Tab, right click the Navbar and from the menu select Expand / Collapse > Expand All
  2. Click the first Link in the the first Nav Item, and then with the alt key held down (Windows) select each Link inside the other Nav Items with the left mouse button. As you do this, you should see each Link will be highlighted in blue
  3. Go to the Options Tab in the upper right panel, expand the Decorations section, and change the background color from Default to one of the other optional Bootstrap colors.

This is the simplest, most straightforward way to apply what are called Bootstrap Utility or “helper” classes to pre-built components. These classes are pre-made snippets of CSS rules that save time, so you don’t have to know CSS and write specific rules, HOWEVER, they are considerably more limited than what you can do if you know how to write CSS, so there is merit in Jo’s advice. You can only do so much through the program’s visual interface because it is limited to applying the built-in Bootstrap Utility Classes.

To do anything more complicated would require learning how to identify the CSS classes that are responsible for the navigation buttons, copying those particular classes to a custom CSS stylesheet (like the one called styles.css that is already premade in every new BSS project,) and then writing new rules to change the colors to whatever you want in both the unselected, hovered, focused and active button states.

If you truly wish to get the most out of this program, and build anything but the most basic, template based, “Bootstrap-ish” looking websites, you need to learn how to change the default styling of the Bootstrap CSS, and that means learning CSS. I would start by watching all the Videos, reading the tutorials, and then doing the Bootstrap 4 course on W3Schools
https://www.w3schools.com/bootstrap4/

And if you still need help after that, DO post in the correct WebDesign Help category.

Dear @printninja and @jo-r, thank you for your suggestion.

I know basic CSS3 nad HTML5. My problem is create first looks of skeleton to use inside my python (Flask) oriented solutions. My target is not create all stuf inside Bootstrap but when I change one category of item I would not style inline, but put in styles.css or changed bootstrap.min.css.

For example I choose some style for .nav-link and button by coding myself after sketch desing in Bootstrap Studio:

    .nav-link, button{
        color: #00f2f2;
        border-radius: 8px;
        border-top-left-radius: 4px;
        border-bottom-right-radius: 1px;
        border-top-right-radius: 4px;
        border-top-style: solid;
        border-right: 3px solid var(--light);
        border-left-style: solid;
        box-shadow: 2px 3px 12px 3px;
        margin: 0px;
        padding: 6px;
    }

If I set one element of type like navlink and I have something like:

<li class="nav-item text-secondary border-success shadow" style="width: 0px;border-top-style: dashed;border-radius: 3px;margin: 18px;padding: 56px;">
<a class="nav-link text-secondary border-success shadow" href="#" style="width: 0px;border-top-style: dashed;border-radius: 3px;margin: 18px;padding: 56px;">Third Item</a></li>

As you can see each element has inline style. It is not problem as with styles.css I can override it. I would simply sketch visually where is what in my design. Set start vision - where is something placed and add as start point some look. For some effects is easier click and WYSIWIG like borders, shadows etc.

For me option choose what I setup for only selected element or for all of them (like all Navlink) it was what I was look for. Programically I will be add some class like active and change other stuff after adding template language on exported HTML.

I want fx - OK I setup this bunch of details and I can get in seperated file style for all .navlinks. After that I can start override as I need it. Currently I copy this manually and put inside style.css or copy from developer tool of browser.

For me missed too is changing name of “assets” folder for something else or even put in target folder what is level down (level which you can see when you open assets). I simply prefer structure not in like:

|
|assets
|
___ boostrap
|_____css

but
|_____ boostrap
|_____css

too and I can find this option in menu too.

I’m sorry but (I presume) English is not your first language, and I’m having a bit of a difficult time following your post, and what you’re trying to explain.

In BSS, when you use the visual tools to adjust the styling of elements like Nav links, buttons, etc, you need to first indicate in the drop down menu in the Options panel which stylesheet you want your changes to go. If you don’t do this, the program will, by default, create inline styles in the HTML (which you don’t want.)

If you know basic CSS then the simplest thing to do is to click on the element whose style you want to change, locate the appropriate class in the Styles panel responsible for that element’s style, and then click the three vertical buttons to the right and copy that style to your custom stylesheet. Then change the CSS there.

This is the method I suspect most experienced BSS users tend to opt for when building their pages. I do very little styling via the programs visual UI. I mainly use the visual tools for adding/removing Bootstrap utility classes.

Also to touch on the structural setup of the files, they are specifically set up as Bootstrap is set up. Since this is a tool that works primarily with Bootstrap framework, I don’t foresee any changes happening there so you will either need to utilize the structure as is or you will need to alter hundreds of pathways after export. Hope that helps explain why it is setup for file export the way it is.

I’m sorry for my language. Very very thank you for following my question and answer.

It is exactly what I was looking for!

As I can see in styles.css it add rule. What I can see it is needed to add all created style manually each time, not used last style from default what at the end is not big deal.

I want remove assets from paths. I can write script for that, but I think that it can be simply adjusted. REqson for fo that that in framework I setup static folder what is equivalent for assets. When I export directly to coding files I have to each time when I add / change something cut files, paste one level up in folder dir tree. If I don’t do it I will be have strange structure:

[static]\assets\css\styles.css

where better is:
css\styles.css

It is detail, but it is anoying,

I do understand that it is annoying. It took me a while to get used to, but I don’t “need” my files in any particular file structure so I was able to adapt. For you, you will need to do an export script because I am very sure that this will not be changed in the app. As long as Bootstrap uses that structure, this app will use that structure. Best get used to doing it yourself.

OK. So I’ll be live with export script after all.

Just remember to make sure all links to any pages, images, files etc. are changed to the new paths if you are changing your file structure. Good Luck on it! :slight_smile:

1 Like