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

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