Mouseover Effects

[NativePages]

Question re:

Code Select Expand


#buttonstrip a:link, #buttonstrip a:visited {
background: url(static image's url);
}
#buttonstrip a:hover, #buttonstrip a:active {
background: url(mouseover image's url);
}


With all the buttons scattered throughout the various pages (especially if you've added mods like ignore user, doublepost, etc), does this code handle all of them, or just those buttons across the top of the page (home, help, search, admin, and so on... )?

If it doesn't, what could be done through CSS to handle any/all buttons you want set up with a mouseover option?

Thanks in advance,
NativePages
http://www.nativepages.com/tnindian

[xfollowthereaperx]

http://powerspike.ulmb.com/forums/

I got it to work, thanks everyone

[ooop]

NativePages - let me know if the following explaination helps you....

let's say you had source that looked like this:

<div>WOW!</div>
<div>Super!</div>
<div>Funny!</div>

now let's say you only wanted a specific background for the "Super!" DIV --- then you should modify the DIV that contains "Super!" like so...

<div>WOW!</div>
<div id="getsbg">Super!</div>
<div>Funny!</div>

so now your ready to access the "Super!" DIV and only the "Super!" DIV with the CSS - by adding...

#getsbg {
   background: url(pathtobackground.gif);
}

to the CSS.

if you wanted a background for every DIV that exists in your pages then your CSS would look like...

DIV {
   background: url(pathtobackground.gif);
}

that's really a bit too basic to really get you want you might want --- but this is really basic HTML and CSS stuff - so the above should point you the right direction (after all, the concept is there) - i strongly recommend checking this stuff out at http://www.w3schools.com/ OR http://www.htmlhelp.com/


NOTE: a rule of thumb is that "ID" is pretty much meant for items that only appear once on your page --- if you have many elements to treat the same way with CSS then CLASS is called for -- Also each html tag can have one CLASS and one ID > but you can NOT have two or more CLASS'es OR two or more ID's within one html tag...

[NativePages]

That made sense. I guess I'm used to straight html and static pages.

Thanks,
NativePages

[Peter Duggan]

NOTE: a rule of thumb is that "ID" is pretty much meant for items that only appear once on your page --- if you have many elements to treat the same way with CSS then CLASS is called for

It's more than a 'rule of thumb' (as I'm sure you're aware), which is why I said:

NB To avoid applying these to every link on the page, you should give your button strip an ID or class and apply them only to that

So, as ooop points out, you'd need to use the class for multiple instances within a page, but you should also note that:

• some of these are scattered about various files and not all neatly lined up in index.template.php.
• lower case tags are required for XHTML (so no CLASS, DIV or ID).

That made sense. I guess I'm used to straight html and static pages.

But this *is* straight HTML (with CSS, as it should be used) and static pages (its context within a dynamic PHP forum being irrelevant here).

[NativePages]

To Peter, Ooops, and all,

Thank you for trying to explain it to me. I know you are all busy. I imagine that I am like a lot of other people out there. Websites I design tend to consist of static html pages with no dynamic content to speak of. Use of any special coding or scripts is limited to what is available at sites like dynamicdrive.com. My webhosting company was started more out of frustration and to help my friends and causes I support out with free webspace than anything else. I have taken exactly two computer "classes" in my life - one way back when in college when Fortran IV was relatively new (I failed it miserably, but it was required for my major at the time and oh, by the way, I used to be able to sit down and punch mag cards), and one "workshop" on MS Excel from which I learned nothing new since I was already using it heavily. I, like a lot of people out here on the web, am basically self-taught.

I know that it's often frustrating to deal with people like me for those of you who are lightyears beyond in terms of skill levels, and I do appreciate it. It helps make muddling along on my own not quite as lonely or discouraging. Anyway, I think for now I'll have to shelve trying to insert the mouseover effects. I don't want to risk breaking what I've managed to get done in terms of customization. The graphics are ready. I'm just not secure enough in going in to try to add the right codes in the right places. Or maybe I'm just more secure in my ability to put the wrong codes in all the wrong places!

Thanks again,
NativePages
http://www.nativepages.com/tnindian

[Peter Duggan]

Use of any special coding or scripts is limited to what is available at sites like dynamicdrive.com.

But what I was trying to explain in my last post is that there's no 'special coding or scripts' in (X)HTML + CSS...

I have taken exactly two computer "classes" in my life

And that, I think, is exactly two more than me!

I, like a lot of people out here on the web, am basically self-taught.

Which means you can guess how I slot in there?

I know that it's often frustrating to deal with people like me for those of you who are lightyears beyond in terms of skill levels, and I do appreciate it.

Must assure you now that I'm neither God's gift to coding (!) nor find it frustrating dealing with you when it's obvious you're looking to develop your skills rather than simply be handed the code on a plate. So please don't embarrass me by talking in terms of light years!

[NativePages]

If you go to http://www.nativepages.com/tnindian, you will see custom buttons. Right now, they have the same name and location as the original buttons that came with the "default" theme.  When I was creating them, I saved three copies of each one - 1 that you see, 1 that is named appropriatebuttonname_on.png and 1 identical to that but named _off.png. The originally named one and the _off.png buttons are identical. The _on.png are colored differently.

Since there are numerous buttons, each with a unique name, would I write the class code as follows, listing out the names of all possible buttons in a string ...

Code Select Expand



.buttonover a:link, a:visited {
            background: url(/images/appropriatefolder/*****_**.***, /images/appropriatefolder/*****_**.***,
/images/appropriatefolder/*****_**.***, /images/appropriatefolder/*****_**.***,
/images/appropriatefolder/*****_**.***, /images/appropriatefolder/*****_**.***,
/images/appropriatefolder/*****_**.***, /images/appropriatefolder/*****_**.***);
}
{
.buttonver a:hover, a:active {
background: url(/images/appropriatefolder/*****_**.***, /images/appropriatefolder/*****_**.***,
/images/appropriatefolder/*****_**.***, /images/appropriatefolder/*****_**.***,
/images/appropriatefolder/*****_**.***, /images/appropriatefolder/*****_**.***,
/images/appropriatefolder/*****_**.***, /images/appropriatefolder/*****_**.***);
}


OR ... could each one be listed could I just name them all the same thing, but house them in separate folder, then use /images/appropriatefolder/*.* ...

OR ... does each one have to be a separate listing?

This is where it's really confusing me and all those tutorials out there are not helping as they're either stuck on a simple background COLOR effect, or they're only dealing with one image.

NativePages

[Peter Duggan]

If you go to http://www.nativepages.com/tnindian, you will see custom buttons. Right now, they have the same name and location as the original buttons that came with the "default" theme.  When I was creating them, I saved three copies of each one - 1 that you see, 1 that is named appropriatebuttonname_on.png and 1 identical to that but named _off.png. The originally named one and the _off.png buttons are identical. The _on.png are colored differently.

So are we talking about 'New Posts' and 'No New Posts' (in which case I can only see the off.gifs as a guest but can guess the rest) or your 'Home', 'Help' etc. buttons (which I think you mean, but still aren't showing as .pngs)?

Since there are numerous buttons, each with a unique name, would I write the class code as follows, listing out the names of all possible buttons in a string ...

Nope. One URL only per style rule.

OR ... could each one be listed could I just name them all the same thing, but house them in separate folder, then use /images/appropriatefolder/*.* ...

Trying to get my head round this (it's 1.00am here)...

OR ... does each one have to be a separate listing?

Assuming your 'on' and 'off' basically mean 'active' (hover) and 'inactive' (static) state (in which case 'on' and 'off' might not be the best names because of that potential confusion with 'New' and 'No New' Posts?), you'd really have to do them one by one (a tedious process) *unless* you can do the text/icon as a unique transparent foreground image for each and the base colours (active and inactive) as CSS backgrounds (your 'simple background COLOR effect'?). So the latter is naturally preferable, and you'd be doing something like:

Code Select Expand

<a class="blah" href=""><img src="youruniquetransparentforeground" alt="" /></a>

(Some details omitted from example for clarity...)

With CSS like:

Code Select Expand

.blah a:link, .blah a:visited {
background: url(yourcommoninactivebackground);
}
.blah a:hover, .blah a:active {
background: url(yourcommonactivebackground);
}

Where 'youruniquetransparentforeground' supersedes your separate buttons as recommended above and 'yourcommoninactivebackground' and 'yourcommonactivebackground' provide the differentiation you appear to be looking for with your '_off' and '_on' versions respectively.

[NativePages]

No, not new vs old posts...

I'm talking about home, search, profile, calendar, gallery, login, logout, ... the list goes on....

[Peter Duggan]

I'm talking about home, search, profile, calendar, gallery, login, logout, ... the list goes on....

or your 'Home', 'Help' etc. buttons (which I think you mean, but still aren't showing as .pngs)?

So it's best to do it like this:

the text/icon as a unique transparent foreground image for each and the base colours (active and inactive) as CSS backgrounds (your 'simple background COLOR effect'?).

NB For 'base colours' read 'whole base button designs' (ie everything except their unique text and icons). The point being that, while you still specify the unique parts (which must then be transparent) as 'normal' buttons (img src etc.), you only need one set of style rules for the common backgrounds.

[NativePages]

Peter, ooop, et al ...

I customized my theme. I made a copy of default in a folder called npstandard, and most of my customization edits were done in there.  Within npstandard, though, I've only got index, index.template, style.css, and who.template, plus the plus the fonts, help, images, and languages folders. I left the rest of the template files over in default. I DID edit boardindex.template to give the news fader a static size (love the fader, but all that jumping up and down drove me nuts), so I'm "guessing" I need to move the modified copy over to npstandard and put a clean "pre-modification" copy back into default (yes, I made a copy before I messed with it).

My themes and layout settings are:

Allow member theme selection - NO
Allow member to select "Default" - NO
Overall forum default: npstandard

I think I maybe found a solution, but I need to ask a sort of naive (when it comes to how this all works) question.  IF I'm understanding how themes work, it will look in npstandard first, and if it doesn't find the template it wants in npstandard's folder, it will go over and look for it in default's folder, right?

Do I need to copy all the files in default over to npstandard? As near as I can tell, the only file that is involved in the menu buttons is boardindex.template. 

These mouseover button changes are the last steps I have left (near as I can tell) to a completed customization of this forum.  I so want to get them done!

NativePages

[Peter Duggan]

so I'm "guessing" I need to move the modified copy over to npstandard and put a clean "pre-modification" copy back into default (yes, I made a copy before I messed with it).

Yep, that's right.

IF I'm understanding how themes work, it will look in npstandard first, and if it doesn't find the template it wants in npstandard's folder, it will go over and look for it in default's folder, right?

Right.

Do I need to copy all the files in default over to npstandard? As near as I can tell, the only file that is involved in the menu buttons is boardindex.template.

Just what you've changed (eg BoardIndex.template.php).

[NativePages]

OK, I'll get that done and finish the changes to the graphics I need to make then come back (I'm sure) with the next question(s)! Thanks!

[NativePages]

I hate to do this to all of you, but I'm back for some assistance. I really am trying to figure this out on my own, but I'm stumped. 

I found a possible, strictly CSS fix for the mouseover images I want here -> http://wellstyled.com/css-nopreload-rollovers.html. It looks like this:

Code Select Expand


#menu a {
   background: url("button.gif") 0 0 no-repeat;
   ...
   }
#menu a:hover {
   background-position: -157px 0;
   ...
   }
#menu a:active {
   background-position: -314px 0;
   ...
   }


Here's my dilemna.  The code above makes the button image appear to change color. The button information that author is using, however, is NOT part of the image. It's text over the top of an image. In my case, my button images contain both text and an icon.  Mine are basically a vertically stacked set of an on button and an off button in one image with about 6 pixels of transparant space between them.

In my case, each button image is unique and there are 36 of them, SOOOO ... how do I alter that CSS entry and/or other templates to do what I need? I know there should be a way. I just can't figure it out.

Thanks  in advance for any assistance,
NativePages
http://www.nativepages.com/tnindian