BlogHarbor Home Page
FAQFAQ  SearchSearch  MemberlistMemberlist  UsergroupsUsergroups  UsergroupsRSS   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
Rounded Corners
Goto page Previous  1, 2 
Post new topic   Reply to topic    BlogHarbor Community Forum Index -> Tips and Tricks
View previous topic :: View next topic  
Author Message
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Tue Nov 07, 2006 8:32 am    Post subject: Reply with quote

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
View user's profile Send private message Send e-mail Visit poster's website
Aussie Dave



Joined: 09 Feb 2006
Posts: 17

PostPosted: Tue Nov 07, 2006 11:34 am    Post subject: Reply with quote

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
View user's profile Send private message Send e-mail
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Tue Nov 07, 2006 11:46 am    Post subject: Reply with quote

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
View user's profile Send private message Send e-mail Visit poster's website
Aussie Dave



Joined: 09 Feb 2006
Posts: 17

PostPosted: Tue Nov 07, 2006 1:28 pm    Post subject: Reply with quote

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
View user's profile Send private message Send e-mail
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Tue Nov 07, 2006 4:49 pm    Post subject: Reply with quote

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
View user's profile Send private message Send e-mail Visit poster's website
Aussie Dave



Joined: 09 Feb 2006
Posts: 17

PostPosted: Wed Nov 08, 2006 12:50 am    Post subject: Reply with quote

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
View user's profile Send private message Send e-mail
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Wed Nov 08, 2006 4:47 pm    Post subject: Reply with quote

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
View user's profile Send private message Send e-mail Visit poster's website
Aussie Dave



Joined: 09 Feb 2006
Posts: 17

PostPosted: Thu Nov 09, 2006 1:45 am    Post subject: Reply with quote

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
View user's profile Send private message Send e-mail
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Thu Nov 09, 2006 4:27 am    Post subject: Reply with quote

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
View user's profile Send private message Send e-mail Visit poster's website
Search all BlogHarbor support resources.
View previous topic :: View next topic  
Display posts from previous:   
Post new topic   Reply to topic    BlogHarbor Community Forum Index -> Tips and Tricks All times are GMT - 5 Hours
Goto page Previous  1, 2
Page 2 of 2

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum