Border-radius placement in css for right sidebar with rounded corners?
Permalink
Hi,
I'm a novice. I'm modifying a copy of Greek Yogurt. I'd like to have my right sidebar display with rounded corners. I've read that I need to use a specification like this in the main.css file:
border-radius: 15px;
with added lines for mozilla & webkit.
However, I'm not sure where to add that. I've tried placing it here:
Can someone clue me in about where to specify the border radius? Thanks.
I'm a novice. I'm modifying a copy of Greek Yogurt. I'd like to have my right sidebar display with rounded corners. I've read that I need to use a specification like this in the main.css file:
border-radius: 15px;
with added lines for mozilla & webkit.
However, I'm not sure where to add that. I've tried placing it here:
/* right-sidebar */ div#right-sidebar-container { -moz-border-radius: 15px; //for mozilla support -webkit-border-radius: 15px; //for chrome support border-radius: 15px; }
Can someone clue me in about where to specify the border radius? Thanks.
you dont want to mess with the main.css file directly though, as it will be overwritten with future updates. Make sure to copy the greek yogurt theme to ROOT/themes and make your modifications there if you choose to modify any code directly!! If it becomes messed up, it can be removed and a fresh copy put in it's place EASILY this way...
Thanks. I am doing the copy-to-root-themes method and working on a separate (& renamed) instance of the theme.
The Design-CSS tab way sounds good. What would I put in the fields with these labels?
CSS ID:
CSS Class Name(s):
The Design-CSS tab way sounds good. What would I put in the fields with these labels?
CSS ID:
CSS Class Name(s):
the easiest way to do this is, AFTER you've copied the theme to the /themes folder, open up main.css. Find the lines:
and change them to:
Should do the trick!! You can change the color of the background if you'd like by changing the rgba color.
div#right-sidebar-container { }
and change them to:
div#right-sidebar-container { background: rgba(0, 0, 0, 1.0); border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; }
Should do the trick!! You can change the color of the background if you'd like by changing the rgba color.
Thanks. That did change the sidebar correctly.
What it also did was clue me in that what I wanted to round *wasn't* the sidebar itself, but a content block placed within it. In the attached file, it's the "The Next Steps" block that I'd like to have rounded. I'd been thinking of it as the sidebar since it was the only thing over there, but I was specifying it wrong. Sorry for the mistake, but your answer has helped me learn more here.
What would be the best way to apply rounded corners to that block? The Design/CSS approach, with the correct values for CSS ID & Class Name?
What it also did was clue me in that what I wanted to round *wasn't* the sidebar itself, but a content block placed within it. In the attached file, it's the "The Next Steps" block that I'd like to have rounded. I'd been thinking of it as the sidebar since it was the only thing over there, but I was specifying it wrong. Sorry for the mistake, but your answer has helped me learn more here.
What would be the best way to apply rounded corners to that block? The Design/CSS approach, with the correct values for CSS ID & Class Name?
I have a solution for you that is currently in marketplace review! I've PM'd you...
EDIT:
The add on has been approved and is available here:
http://www.concrete5.org/marketplace/addons/enlil-transparent-conte...
EDIT:
The add on has been approved and is available here:
http://www.concrete5.org/marketplace/addons/enlil-transparent-conte...
originally I thought you WANTED to round the corners of the areas inside the sidebar. I was confused and now I'm not again :D
you can also do this from the front end if you'd like. just click on the "add to right sidebar" and click "design". Click the css tab and add the css!