Can someone direct me to a tutorial or instructions on how to style the navbar and its tabs:
1.) how to change the hover color and remain when active
2.) how to have the tabs change color when rolled over
3.) how to add a tab to an existing navbar (using the UI and not the code)
4.) how to add or convert a tab to a dropdown with sub menus
5.) how to make a navbar’s dropdowns properly display on mobile devices
Any help is greatly appreciated.
Randyrie,
This all basically comes down to knowing your way around CSS. I would recommend you do some basic CSS tutorials to learn how classes and pseudo classes work.
https://www.w3schools.com/bootstrap4/
Trying to build a site in Pinegrow without a reasonably good grasp of how CSS works is going to be frustrating.
Assuming you’re using Bootstrap, you can take a look at this site for customizing the navbar.
https://work.smarchal.com/twbscolor/css/e74c3cc0392becf0f1ffbbbc0
I’ve been looking, searching and googling for tutorials and instructions how to change the background color or the text color of my tabs when hovered over or clicked on and made active. I’ve tried locating in the bootstrap CSS for the rules to control tab behavior but found nothing that makes sense to me since I’m new to how PineGrow interfaces with bootstrap’s CSS. I’ve found several CSS style suggestions to control tab behavior but when I include the code to the style.css file and apply it to the page, nothing happens - - so the styles.css does not override bootstrap’s?
I’ve asked about this before and really would like some help directing me how to use Pinegrow’s UI tools to setup tabs to behave the way I want. Is this possible using a UI within PineGrow? If so, could you show via a screen grab or vid where/how to modify my tabs?
I’ve not found any PineGrow instructions or tutorials that detail how to do this…
Just click the tab/button in question, go to the visual editor panel, scroll to the BACKGROUND section and click on color. Doing it this way, however, is only going to style that single element. What you need to do is add the Style attribute to the existing CSS rule, which is going to be in the bootstrap.css file. The thing is, you don’t want to change bootstrap.css, you want to copy the rule to a custom stylesheet and then change it there.
I’ve been trying to do this but cannot get things to work… doing something wrong for sure. Could you step me through how I go from adding the background color (know how to do this) as a style attribute and then add the attribute to the custom.css file?
Maybe @randyrie has a lot to learn, he is trying to learn and understand.
We all started somewhere, everyone has his own skill level and learning speed!
That was beyond rude on your part.
You singed up to be part of the forum today and this was your very first post here. So the thing you felt was most important, was to sign up with the sole purpose and desire of belittling someone? You may wish to consider what that says about your own character regardless of whether you think you’re a ‘master’ of anything. Perhaps you can instead use your own brilliance to accurately answer all his questions and edify him and the community.
Interesting question. So let’s try to find some possible answers on it.
EDIT: Finding answers is not required - all is/was against a member of the community.
Cheers
Thomas
@webmaster please respect the constructive spirit of Pinegrow community. If you can’t help @randyrie with a helpful answer to his question or add something meaningful to the discussion about styling Navbars, why post anything at all? And on top of that, to discourage someone with a genuine need and, as you yourself mentioned, a keen interest to learn?
I’m not sure if we have a code of conduct written down somewhere. It’s kind of weird that adults would need ideas like “Don’t be a bully” written down at all. “Oh, sorry, I insulted someone because the code of conduct didn’t tell me I should be nice.” I have two wild young boys at home and they don’t need basic stuff like this written down.
Anyway, I’m very proud of our friendly community and we’ll not tolerate abuse of any kind here.
I’m thinking about deleting @webmaster comments to keep abusive and distracting content off the forum. What do you think? Is there any value or purpose in keeping these comments?
EDIT: Decided to delete since they are directly targeting a member of our community.
EDIT: Cleaned up my language.
Just like to agree, matjaz!
Thanks Printninja for the screen shot… it showed me where to look and it did help me to learn how to change the tabs to the way I want them.
And a big shout out to all you fellow PG users who threw in your support to keep this forum a friendly and helpful – not hateful – community. BTW, I tend to totally ignore folks like @webmaster… serves no purpose to pay any attention to what they write.
Again thanks for the screen shot you provided earlier. While I’m now able to style by trial & error my tabs the way I want them (example: https://faithcentre.info/donations.html), I am still confused when & why to use the “Background” UI shown on the bottom right vs. using the "background-color: … " in the CSS panel shown in the middle right and how to use and apply the “:active | :hover | :focus | :visited” buttons at the top to assign a style to each state. Do you know of a tutorial that explains this detail in PineGrow?
The “background” property is a grouped property that can contain multiple properties/values in one declaration.
The background property is a shorthand property for:
- background-color
- background-image
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
- background-attachment
It does not matter if one of the property values is missing, as long as the other ones are in this order.
CSS Syntax:
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
Example combined
div {
background: #ffffff url(“img_tree.png”) no-repeat right top;
}
Example separated
div {
background-color: #fffff;
background-image: url(“img_tree.png”);
background-repeat: no-repeat;
background-position: right top;
}
See this for more info:
https://www.w3schools.com/cssref/css3_pr_background.asp
Pseudo States
“:active | :hover | :focus | :visited" are pseudo states of an HTML element.
See this Pinegrow documentation “Styling with CSS”, for explanation how this is working in Pinegrow:
See section 2 - Active rules
See section 4 - Creating new CSS rules
Good luck and have fun!
Randyrie,
Marf’s answer above covers it pretty good. I would only offer the following general advice…
Don’t learn website design the way I did (backwards, trial and error, messing things up and spending hours trying to figure out what I did wrong.)
Two or three hours spent doing a step-by-step tutorial on basic HTML and CSS will save you countless hours down the road.
Hi guys. I have to admit, @Printninja and @Marf are doing pretty sterling service helping out on this forum now for some time.
I’ve been pretty slack with other stuff blowing up in the real world, but still here quite a bit 
But, I don’t have to scrape together some two bit answers to assist, as you guys have got it covered!
Nice one guys, keep up the pleasant helpful service.
I will be back to scribble more sometime soonish I hope
'till then…
WOW! Thanks for all the info, @Marf. I’ll study these and hopefully get a better handle on how all this is supposed to work in PineGrow.
You’re tops!
Thanks @Printninja…
I usually prefer starting with tutorials and docs, if I can find them. I come to this forum only if I cannot comprehend what I’ve found or cannot find any documentation at all (and, of course, the friendly nudges I get from you folks).
