ZCA Bootstrap 4 Template [Support Thread]

[lat9]

I understand a multilevel dropdown (with flyout submenus) is not a standard feature of Bootstrap, so there seem to be a lot of third party alternatives.
Any recommendations?

A link to an example of what you're looking for would be appreciated.

[torvista]

E.g.

[swguy]

How would I change a color to a gradient?

This might help. I wanted to do this for the sidebox and centerbox headers as well as the top nav, so I edited includes/templates/bootstrap/css/site_specific_styles.php and added:

.leftBoxHeading, .centerBoxHeading, #navMain > nav {
color: black;
background-image: linear-gradient(my parameters);
}

As @dbltoe noted, only hex color codes may be entered in the Admin tool.

[dbltoe]

gradiants and colors are different. A background color is coded differently than a plain background which can be an image, gradiant or other entity.

You can use rgba and other forms of opacity in the bootstrap colors.

It's not limited to just hex.

Right-clicking will show many things you can do with the color listing. RGB, RGBa, Hexadecimal, and HSL

Still, color is a singular product show you will need to use the site-specific CSS for gradients.

[swguy]

Yes - "limited to color codes" would have been better. Fixed.

[g2ktcf]

This might help. I wanted to do this for the sidebox and centerbox headers as well as the top nav, so I edited includes/templates/bootstrap/css/site_specific_styles.php and added:

.leftBoxHeading, .centerBoxHeading, #navMain > nav {
color: black;
background-image: linear-gradient(my parameters);
}

As @dbltoe noted, only hex color codes may be entered in the Admin tool.

Yep, I did that a while back. I really like the site specific styling page. I can sit and make all kinds of tweaks all in one place. I just park the chrome developer console off the sided and play!

[dbltoe]

With bootstrap, it's always a good idea to see what is already out there when wanting to do something like this. Bootstrap has a lot of features that can easily be used.

https://higuma.github.io/bootstrap-4...nt+shadow.html is an example of what can be done with existing gradients in bootstrap 4 and the bg-gradient-xxxxxx class. It gets deep but is a thorough cover of the topic.


You could create a rule in the site-specific something like

.myGradient {color: #721c24;
    background: #f8d7da linear-gradient(180deg,#f9dde0,#f8d7da) repeat-x;
    border-color: #f5c6cb;
}

Then add it to the items that you want to have that gradient.

It might be easier to use several different div's and classes instead of the .myGradient.

.leftBoxHeading, .centerBoxHeading, #navMain {    color: #721c24;
    background: #f8d7da linear-gradient(180deg,#f9dde0,#f8d7da) repeat-x;
    border-color: #f5c6cb;
}

This saves having to tooch a bunch of core files.

Still there is the option of having several gradients and just adding the class/div to a particular item.

[swguy]

Yep, I did that a while back. I really like the site specific styling page. I can sit and make all kinds of tweaks all in one place. I just park the chrome developer console off the sided and play!

Glad to hear you are having success!