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

Type: Discussion
Status: New
SpencerC
View Replies:
SpencerC replied on at Permalink Reply
SpencerC
I'm using Plain Yogurt, the default.
jb1 replied on at Permalink Reply
jb1
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
SpencerC replied on at Permalink Reply
SpencerC
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
jb1 replied on at Permalink Reply
jb1
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
Styves replied on at Permalink Reply
Styves
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.
jb1 replied on at Permalink Reply
jb1
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
jb1 replied on at Permalink Reply
jb1
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.
Styves replied on at Permalink Reply
Styves
Thanks greatly. Wow, you make my day. God bless you!
jb1 replied on at Permalink Reply
jb1
Happy to help :-) And thank you for the very kind reviews, they are greatly appreciated.
EIanetti replied on at Permalink Reply
EIanetti
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.
SpencerC replied on at Permalink Reply
SpencerC
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
jb1 replied on at Permalink Reply
jb1
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.

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You have not specified a license for this support ticket. You must have a valid license assigned to a support ticket to request a refund.