**OK…**borrowed some bootstrap template ideas I’ve received from forum members here (& everywhere)…& am now well on my way…very happy…this is what I have, thus far:
http://www.moonjams.net/BurlCoNA-IV.html
I’ll be back w/ more questions later…but for now…on my background image (sky & clouds)…the small rounded corners show white (at those corners). How do I eliminate the rounded corners on my background image?
thanx (& thanx to everyone here who helped…very much appreciated)
mark4man
The rounded corners are part of the default Bootstrap styling for the Jumbotron component. The simplest way to eliminate the rounded corner is to remove the rule, but altering the bootstrap.css stylesheet is frowned upon. The right way would be to either use an inline CSS rule to style that specific jumbotron element, or even better, use the style.css stylesheet to create a CSS rule to style it.
With the jumbotron component selected in the tree, go into the visual editor, then go to the border section and enter a value of zero (0) into the border radius, and click the little button below with the curve and two lines in it. This will apply the value of zero to all four corners simultaneously.
You will see a new CSS rule is automatically created in the Style Panel that will read - Style Attribute, and below it, border-radius: 0. This creates an inline style within the page’s HTML that eliminates the rounded border on the jumbotron element. But using inlines styles is mostly frowned upon in web design except in specific cases, so from here, you should go to the Style Panel and save the inline style rule to your custom CSS stylesheet (which Pinegrow names style.css by default.) You do this by clicking the light blue box with the “plus” sign that has appeared next to the words “Style Attribute.”
This will open a window where you can choose the selector (in this case .jumbotron) and the stylesheet from the dropdown menu below (style.css). Then click create and you should see the inline style vanish from your HTML, and the new CSS rule appear in your style.css stylesheet.
Sorry if this seems overly complicated. It’s really very simple, but to write it all out step by step, makes it seem harder than it is. Ultimately, what all this does is add the following lines of text to the style.css stylesheet.
.jumbotron {
border-radius: 0;
}
Another thing to note… this change will affect any .jumbotron element added to the site, since the rule now overrides the default .jumbotron style in bootstrap.css. If you want to ONLY change this particular jumbotron element, you would either leave it as an inline style, or give it a unique ID.
Printninja…
Thanx!..worked like a charm (I wasn’t able to enter in any values in the border section of the visual editor for some reason…so I just entered ‘border-radius: 0’ in the existing css snippet for the jumbotron element).
Thanx again.
mark4man
Very Nice explanation @Printninja, cheers for taking the time to explain something so well to us other users 