Rounding background elements
Permalink Browser Info Environment
Hi,
I'm not digging into the CSS or PHP files much at all b/c I am not super experienced. Without doing that can you tell me how to round the corners using your tool on any block that has a colored background?
Thanks
Spence
I'm not digging into the CSS or PHP files much at all b/c I am not super experienced. Without doing that can you tell me how to round the corners using your tool on any block that has a colored background?
Thanks
Spence
Type: | Discussion |
---|---|
Status: | New |
I'm using Plain Yogurt, the default.
Yes, I'd suggest using the "Inspector" tool for Google Chrome or use Firebug so you can see some of the source code easily within your browser.
This link shows how to access the Inspector:
http://www.threetipsaday.com/2008/12/debug-inspect-google-chrome-in...
Just look for the "ID" or "class" of the DIV tag you wish to edit. For example, if the coloured background code looks like this: <div id="myname">something</div>
Then the selector you place into the rounded corners block is "#myname".
If your code looks like this:
<div class="myname">something</div>
Then use the following selector in the rounded corners block: ".myname".
Take a look at the following page on how to give a block a "class" or "ID" using the "block design" feature within C5:
http://www.concrete5.org/documentation/general-topics/how-a-page-lo...
Hope this helps.
JB
This link shows how to access the Inspector:
http://www.threetipsaday.com/2008/12/debug-inspect-google-chrome-in...
Just look for the "ID" or "class" of the DIV tag you wish to edit. For example, if the coloured background code looks like this: <div id="myname">something</div>
Then the selector you place into the rounded corners block is "#myname".
If your code looks like this:
<div class="myname">something</div>
Then use the following selector in the rounded corners block: ".myname".
Take a look at the following page on how to give a block a "class" or "ID" using the "block design" feature within C5:
http://www.concrete5.org/documentation/general-topics/how-a-page-lo...
Hope this helps.
JB
I sifted through the HTML and found what I thought would work. Tried #fbackground, but that did not work. Sort of at a loss. There must be others out there that just want to take a block to which a colored background via Design and put rounded corners on it. Should be the same for everyone using C5. Or is it not?
Thanks
Spencer
Thanks
Spencer
If you look at the source code on this example, it may help shed some light:
http://c5extras.com/add-ons/round-corners/...
Otherwise, if you're still stuck simply PM me the direct link and dashboard login details and I'll help you out.
JB
http://c5extras.com/add-ons/round-corners/...
Otherwise, if you're still stuck simply PM me the direct link and dashboard login details and I'll help you out.
JB
A similar question.
If I have this:
<div id=content-page-title>
<h1>Title</h1>
</div>
How can I impact "<h1>" ?
I try all these and none of them works:
#content-page-title
#content-page-title.h1
#content-page-title .h1
Thanks in advance for your help.
If I have this:
<div id=content-page-title>
<h1>Title</h1>
</div>
How can I impact "<h1>" ?
I try all these and none of them works:
#content-page-title
#content-page-title.h1
#content-page-title .h1
Thanks in advance for your help.
Easy one :-)
#content-page-title h1
No "." in front of the "h1" - you only add a "." if selecting a "class". the "#" is used to select an "ID". If selecting a built-in HTML element such as "h1", "h2", "span", "div", etc then no dot or hash is needed.
JB
#content-page-title h1
No "." in front of the "h1" - you only add a "." if selecting a "class". the "#" is used to select an "ID". If selecting a built-in HTML element such as "h1", "h2", "span", "div", etc then no dot or hash is needed.
JB
PS. A "h1" element should be a "block" element by default in HTML, but if the rounding doesn't work, your template may be forcing the H1 to use "inline" display instead. If that occurs, just check your template's CSS file.
Thanks greatly. Wow, you make my day. God bless you!
Happy to help :-) And thank you for the very kind reviews, they are greatly appreciated.
I would like to make rounded corners on the Link List Block
Before I buy Rounded Corners . . .
I checked the code as described in the posts above and this seems to be the div id code for the list link block:
<div id="link-list-wrap-3006" class="link-list-wrap">
So, am I correct that I place:
#link-list-wrap-3006 in the rounded Corners Block? Thanks in advance.
Before I buy Rounded Corners . . .
I checked the code as described in the posts above and this seems to be the div id code for the list link block:
<div id="link-list-wrap-3006" class="link-list-wrap">
So, am I correct that I place:
#link-list-wrap-3006 in the rounded Corners Block? Thanks in advance.
For that one block can't you just add some CSS like this:
background: #669999; border:2px; border-radius: 10px; -moz-border-radius: 10px;
-Spencer
background: #669999; border:2px; border-radius: 10px; -moz-border-radius: 10px;
-Spencer
Yes, that is the correct CSS selector to use. You can apply any formatting you wish to that selector in your site's CSS file.