Shape 5

Joomla Templates => Hexicon Gamer - Club => : 0mni December 03, 2011, 11:09:15 PM


: hasTip CSS
: 0mni December 03, 2011, 11:09:15 PM
I am trying to add a black background with a round border, very simple, nothing stylish.  But I can't seem to figure out how.

This is the only thing I can find in relation to how they are created, but not about adding the effect.  Right now its pretty much impossible to reach 90% of all the tips.

:
<script type="text/javascript">

		window.addEvent('domready', function() {
			$$('.hasTip').each(function(el) {
				var title = el.get('title');
				if (title) {
					var parts = title.split('::', 2);
					el.store('tip:title', parts[0]);
					el.store('tip:text', parts[1]);
				}
			});
			var JTooltips = new Tips($$('.hasTip'), { maxTitleChars: 50, fixed: false});
		});
function keepAlive() {	var myAjax = new Request({method: "get", url: "index.php"}).send();} window.addEvent("domready", function(){ keepAlive.periodical(840000); });
  </script>

: Re: hasTip CSS
: mikek December 05, 2011, 08:59:33 AM
Hello,

I'm not familiar with hasTip, you would be best to post to their support for modifications.

Have you tried the built in tooltips:

http://www.shape5.com/demo/hexicon_gamer/index.php?option=com_content&view=article&id=37&Itemid=97

: Re: hasTip CSS
: 0mni December 10, 2011, 03:57:50 PM
This is your own template right ?  This is not an aftermarket modification, this is built right into Hexicon.

: Re: hasTip CSS
: 0mni December 10, 2011, 04:15:23 PM
So I found where your CSS is for the hasTip

:
.tool-tip {
	float: left;
	background: #CCCCCC;
	border: 1px solid #333333;
	padding: 5px;
	color:#000000;
	max-width: 200px;}

.tool-title {
	padding: 0;
	margin: 0;
	font-weight: bold;
	margin-top: -15px;
	padding-top: 15px;
	padding-bottom: 5px;
	color:#000000;}

.tool-text {
	color:#000000;
	margin: 0;}

But it does not seem to be working, the tip just appears as floating text, with no background for contrast.

: Re: hasTip CSS
: 0mni December 10, 2011, 04:19:45 PM
You need to update the template to change the following:

:
.tip {
   float: left;
   background: #CCCCCC;
   border: 1px solid #333333;
   padding: 5px;
   color:#000000;
   max-width: 200px;
}
 
.tip-title {
   padding: 0;
   margin: 0;
   font-weight: bold;
   margin-top: -15px;
   padding-top: 15px;
   padding-bottom: 5px;
   color:#000000;
}
 
.tip-text {
   color:#000000;
   margin: 0;
}

The CSS names have changed from Joomla 1.5 to 1.6+

: Re: hasTip CSS
: 0mni December 10, 2011, 04:32:08 PM
Turning on Notify replies, odd I can click a button to watch/notify topic.

: Re: hasTip CSS
: mikek December 11, 2011, 09:35:11 AM
Hello,

I'm sorry I don't understand your question then. Your original question was about how to stylize hasTip tooltips on your site. Our template does not come with hasTip. The link I provided you is a tooltip that's built into our templates. The css you've posted above is for tooltips that are built into joomla itself, usually in the admin areas.

: Re: hasTip CSS
: 0mni December 11, 2011, 11:04:00 AM
The reason I was asking to style them, is because they were just floating text.  It turns out, they were already styalized, but they have different css names compared to Joomla 1.5.  When you modified the theme to work for Joomla 1.6+, you must have forgot to change them to the 1.6 css names.