Tooltip design change - how to get rounded corners

Hi there.

I am in the process of setting up a CB site with lots of functions and CB plugins. It is very fascinating and fun - thank you all for great work!

I want to style the Tooltip windows! Now they are very boxy and feel hard so I want to put rounded corners on them. I have managed to change the border and background colors and can also change the font colors etc but I do not know how to make the borders have rounded edges. I also would like to have some more room around the text inside the frames - please give me some tips.

I have tried to use a plugin called Tooltip Customizer from www.software4joomla.com but that seem to not work as it should.


Best Regards
Johan Niklasson

For rounded corners you would need to use "CSS3 rounded corners" (Google that for more info and e.g. to find this nice tool: www.cssportal.com/css3-rounded-corner/

Btw what is not working with the Tooltip Customizer from www.software4joomla.com ?

Thanks - I will look at that site.

The Tooltip Customizer only partially changed the tooltips - I could for instance change the border thickness but not the background colors etc. I instead did this in the CSS file.


Best Regards
Johan Niklasson

Hi Beat

I fixed this by editing the template.css file. I made the following changes:

/* For tool-tips: */

.cb-tips-font {font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; color: #000000;padding: 10px;}
.cb-tips-capfont {font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 12px; font-weight: bold; text-align: center; color: #FFFFFF;}
.cb-tips-closefont {font-family: Arial,sans-serif; font-size: 12px; font-weight: bold; color: #FFFFFF; text-align: right;}
.cb-tips-closefont a:link, .cb-tips-closefont a:visited {color: #FFFFFF;}
.cb-tips-closefont a:hover {color: #00CCFF;}
.cb-tips-fg {background-color: #F3F4F4;border-top-left-radius: 6px;border-top-right-radius: 6px;-moz-border-radius-topright: 6px;-moz-border-radius-topleft: 6px;border-bottom-left-radius: 6px;border-bottom-right-radius: 6px;-moz-border-radius-bottomright: 6px;-moz-border-radius-bottomleft: 6px;}
.cb-tips-bg {background-color: #B9BABB;border-top-left-radius: 6px;border-top-right-radius: 6px;-moz-border-radius-topright: 6px;-moz-border-radius-topleft: 6px;border-bottom-left-radius: 6px;border-bottom-right-radius: 6px;-moz-border-radius-bottomright: 6px;-moz-border-radius-bottomleft: 6px;}
.cb-tips-button, .cb-tips-button:link, .cb-tips-button:visited, .cb-tips-hover {
margin: 0px 0.5em 0.5em 0; padding: 50; white-space: nowrap; text-align: center; display: block; width: 8em;
background: #CCC;
font: bold 12px Menu,Arial,Verdana,sans-serif;
border: 2px solid #999;
color: #404040;
text-decoration: none;
padding: 2px;

}
.cb-tips-button:hover , .cb-tips-hover:hover {
background: #EEEEEE;
color: #000040;
text-decoration: none;
}


Now it looks like this:





I like this much better.


Best Regards
Johan Niklasson

Nice design.
Thanks for sharing.