It’s how to blend the CSS with the specific anchor.
Tell me if I’m in the right direction
#<div> .title {
background: #FFFFFF
}
Nope not quite. Here is the HTML generated by this plug in:
<!-- this is for the loading image -->
<div style="position: absolute; display: none;" id="cluetip-waitimage"></div>
<!-- outer wrap -->
<div class="" style="display: none; position: absolute; width: 275px; left: 81px; z-index: 97; top: 2px;" id="cluetip">
<!-- I am guessing this is for the shadow -->
<div style="z-index: 96; opacity: 0.1; top: 1px; left: 1px; position: absolute; background-color: rgb(0, 0, 0); display: block; height: 131px; width: 275px;"></div>
<div style="z-index: 96; opacity: 0.1; top: 2px; left: 2px; position: absolute; background-color: rgb(0, 0, 0); display: block; height: 131px; width: 275px;"></div>
<div style="z-index: 96; opacity: 0.1; top: 3px; left: 3px; position: absolute; background-color: rgb(0, 0, 0); display: block; height: 131px; width: 275px;"></div>
<div style="z-index: 96; opacity: 0.1; top: 4px; left: 4px; position: absolute; background-color: rgb(0, 0, 0); display: block; height: 131px; width: 275px;"></div>
<div style="z-index: 96; opacity: 0.1; top: 5px; left: 5px; position: absolute; background-color: rgb(0, 0, 0); display: block; height: 131px; width: 275px;"></div>
<div style="z-index: 96; opacity: 0.1; top: 6px; left: 6px; position: absolute; background-color: rgb(0, 0, 0); display: block; height: 131px; width: 275px;"></div>
<!-- this is the actual content title/description -->
<div style="position: relative; z-index: 97; overflow: visible; height: auto;" id="cluetip-outer">
<h3 id="cluetip-title">This is the title</h3>
<div id="cluetip-inner">The first set of contents comes after the first delimiter in the title. In this case, the delimiter is a pipe</div>
</div>
<!-- not sure what this is for but I think it is the rounded corner option -->
<div id="cluetip-extra"></div>
<!-- this is for the arrow(s) -->
<div style="z-index: 98; display: none;" id="cluetip-arrows" class="cluetip-arrows"></div>
</div>
You can find an example of the necessary .css selectors in the jquery.cluetip.css file in the cluetip folder.
system
March 28, 2010, 8:52pm
22
/***************************************
=cluetipClass: 'default'
-------------------------------------- */
.cluetip-default {
background-color: #d9d9c2;
}
.cluetip-default #cluetip-outer {
position: relative;
margin: 0;
background-color: #d9d9c2;
}
.cluetip-default h3#cluetip-title {
margin: 0 0 5px;
padding: 8px 10px 4px;
font-size: 1.1em;
font-weight: normal;
background-color: #87876a;
color: #fff;
}
.cluetip-default #cluetip-title a {
color: #d9d9c2;
font-size: 0.95em;
}
.cluetip-default #cluetip-inner {
padding: 10px;
}
.cluetip-default div#cluetip-close {
text-align: right;
margin: 0 5px 5px;
color: #900;
}
That is what I was going by… can’t be where I have to put all that HTML into my code
Doesn’t this give you a hint?
.cluetip-default h3#cluetip-title {
margin: 0 0 5px;
padding: 8px 10px 4px;
font-size: 1.1em;
font-weight: normal;
background-color: #87876a; /* HINT */
color: #fff;
}
system
March 28, 2010, 9:55pm
24
<div id="masterhome><a class="title" href="#" title="blah blah blah"></a></div>
for the CSS
.cluetip-default a .title {
margin: 0 0 5px;
padding: 8px 10px 4px;
font-size: 1.1em;
font-weight: normal;
background-color: #87876a; /* HINT */
color: #fff;
}
Just copy that .css file into your css directory and then link to it from the <head> with:
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.cluetip.css" />.
Then alter the already existing values to what you want. What features of this thing do you want to use? This will determine what parts of the css are required and need to be edited, but to just change the colors and the text you can edit these 2:
Starts on line 38 of jquery.cluetip.css
.cluetip-default #cluetip-outer {
position: relative;
margin: 0;
background-color: #d9d9c2;
}
.cluetip-default h3#cluetip-title {
margin: 0 0 5px;
padding: 8px 10px 4px;
font-size: 1.1em;
font-weight: normal;
background-color: #87876a;
color: #fff;
}
system
March 28, 2010, 10:40pm
26
Alright I’ll try that, once I fix this other problem <sigh>
What is the other problem?