View previous topic :: View next topic |
Author |
Message |
john Site Admin
Joined: 16 Mar 2004 Posts: 3434
|
Posted: Tue Nov 07, 2006 8:32 am Post subject: |
|
|
I would first try using the exact code from that page... If you implement it and have any questions about it, feel free to ask. |
|
Back to top |
|
|
Aussie Dave
Joined: 09 Feb 2006 Posts: 17
|
Posted: Tue Nov 07, 2006 11:34 am Post subject: |
|
|
Hi John,
I tried with the exact code and it didn't work (I placed the css code in the style template, and the html in the component).
Please advise.
Regards,
David _________________ http://www.israellycool.com |
|
Back to top |
|
|
john Site Admin
Joined: 16 Mar 2004 Posts: 3434
|
Posted: Tue Nov 07, 2006 11:46 am Post subject: |
|
|
Is the code and the component still in place on your blog? Where can I see the example of your implementation? If you've removed it, I can't help... |
|
Back to top |
|
|
Aussie Dave
Joined: 09 Feb 2006 Posts: 17
|
Posted: Tue Nov 07, 2006 1:28 pm Post subject: |
|
|
Hi John,
Please see the Support my Blog component, and style template.
I am aiming for this to be in a blue box with rounded edges.
Thanks,
David _________________ http://www.israellycool.com |
|
Back to top |
|
|
john Site Admin
Joined: 16 Mar 2004 Posts: 3434
|
Posted: Tue Nov 07, 2006 4:49 pm Post subject: |
|
|
The technique described on the CSS Rounded Box Generator requires you to upload 5 images to your site, the images shown in the Corner Images section.
Save the images to your disk and upload them to your blog's File Manager, let's say to the images directory. Now use the following CSS, slightly modified from the code showed on the Rounded Box Generator to reflect the location of the images on your blog:
Code: | /* set millions of background images */
.rbroundbox { background: url(/images/nt.gif) repeat; }
.rbtop div { background: url(/images/tl.gif) no-repeat top left; }
.rbtop { background: url(/images/tr.gif) no-repeat top right; }
.rbbot div { background: url(/images/bl.gif) no-repeat bottom left; }
.rbbot { background: url(/images/br.gif) no-repeat bottom right; }
/* height and width stuff, width not really nessisary. */
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 7px;
font-size: 1px;
}
.rbcontent { margin: 0 7px; }
.rbroundbox { width: 50%; margin: 1em auto; } |
I think that should do it for you... Also, I would first try using this code without including any of the component or componentHead classes you've included; those are part of the standard sidebar component code. I would try without that code first to make sure I am seeing only the results of the Rounded Box Generator code, and then move forward from there. |
|
Back to top |
|
|
Aussie Dave
Joined: 09 Feb 2006 Posts: 17
|
Posted: Wed Nov 08, 2006 12:50 am Post subject: |
|
|
Hi John,
I did as you said. As you can see on my blog, the box looks too narrow, and the corners are not really rounded (because the images do not have the same white as my blog background color).
Please advise as to how I can make the box wider (like on the blogware blog). Also, I seem to have lost the heading ("Support this Blog"). What code do I use to make the heading look like the other component headings?
Regards,
David _________________ http://www.israellycool.com |
|
Back to top |
|
|
john Site Admin
Joined: 16 Mar 2004 Posts: 3434
|
Posted: Wed Nov 08, 2006 4:47 pm Post subject: |
|
|
the images do not have the same white as my blog background color
Take a look again at the CSS Rounded Box Generator, the top section Change colors is what sets the colors for the rounded corner images. If your sidebar color is white, or FFFFFF, you'll need to specify that color in the Background Color input area, then click the enviar button (it's a Spanish website). Now they will generate new Corner Images for you with a background color more to your liking. Download these new images and replace the ones you uploaded previously with these new versions.
Please advise as to how I can make the box wider
Looks like the default CSS from their generator specified the width of the overall box (specified in the rbroundbox class) as 50%, change that to 100%... So the CSS should look like this now:
Code: | /* set millions of background images */
.rbroundbox { background: url(/images/nt.gif) repeat; }
.rbtop div { background: url(/images/tl.gif) no-repeat top left; }
.rbtop { background: url(/images/tr.gif) no-repeat top right; }
.rbbot div { background: url(/images/bl.gif) no-repeat bottom left; }
.rbbot { background: url(/images/br.gif) no-repeat bottom right; }
/* height and width stuff, width not really nessisary. */
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 7px;
font-size: 1px;
}
.rbcontent { margin: 0 7px; }
.rbroundbox { width: 100%; margin: 1em auto; } |
Also, I seem to have lost the heading ("Support this Blog"). What code do I use to make the heading look like the other component headings?
I just now tested this code for a component and it seemed to work well:
Code: | <div class="component">
<div class="rbroundbox">
<div class="rbtop"><div></div></div>
<div class="rbcontent">
<div class="componentHead">Put a title here</div>
<div class="componentContent">
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Duis
ornare ultricies libero. Donec
fringilla, eros at dapibus fermentum,
tellus tellus auctor erat, vitae porta
magna libero sed libero. Mauris sed leo.
Aliquam aliquam. Maecenas vestibulum.
</div>
</div><!-- /rbcontent -->
<div class="rbbot"><div></div></div>
</div><!-- /rbroundbox -->
</div> |
This wraps the rounded corner code inside our standard component wrapper DIV, then puts the standard componentHead and componentContent DIVs inside the rounded corner content area. Seems to do the job... |
|
Back to top |
|
|
Aussie Dave
Joined: 09 Feb 2006 Posts: 17
|
Posted: Thu Nov 09, 2006 1:45 am Post subject: |
|
|
Thanks for that, John.
Now the only thing is I can't seem to find the blue color used on the Blogware blog (the color I currently have is too dark). Do you know the color code they used?
Regards,
David _________________ http://www.israellycool.com |
|
Back to top |
|
|
john Site Admin
Joined: 16 Mar 2004 Posts: 3434
|
Posted: Thu Nov 09, 2006 4:27 am Post subject: |
|
|
You should consider using some kind of color tool like Eye Dropper which will allow you to retrieve the hex value for any color on your screen. Macs come with a utility called DigitalColor Meter which performs this function, using it I see that the light blue color I think you are referring to is #D4E2D4. |
|
Back to top |
|
|
Search all BlogHarbor support resources.
|
View previous topic :: View next topic |
|