Author Topic: [Tip&Trick] Make Table Hover Effects with image  (Read 2483 times)

0 Members and 1 Guest are viewing this topic.

Offline babjusi

  • Full Member
  • *
  • Posts: 174
  • Karma: 28
  • Feja e shqiptarit eshte shqiptaria
  • SMF Version: 1.1.5
[Tip&Trick] Make Table Hover Effects with image
« on: July 30, 2008, 11:57:56 AM »
This simple tip will allow you to add those cool table hover effects on your board and topics index, just like in this very forum. But with a little extra thing, like adding an image as well to it.

Add the following code to the css file of your theme, all the way to the bottom:

:
.windowbg:hover {
background: #C0C0C0 url(images/name of image) no-repeat right;
}

.windowbg2:hover {
background: #C0C0C0 url(images/name of image) no-repeat right;
}

Upload your image to the /images/ folder of your theme and replace the name of the image with the correct name of your image at the code above. If you don''t want to display an image, but only the table hover effects, then take out the url part at the above code. You can also change the color to whatever color you want.

That was it.


 
My  small and modest collection of Themes and Mods

Offline brianjw

  • Guru
  • *
  • Posts: 2346
  • Karma: 1408
  • Gender: Male
  • What?!?! You mean they're sold out!
Re: [Tip&Trick] Make Table Hover Effects with image
« Reply #1 on: July 30, 2008, 12:48:56 PM »
+1 again. Also thank you :)

Offline Smoky

  • who, me?
  • Guru
  • *
  • Posts: 3980
  • Karma: 1450
  • Gender: Female
  • It's all in your HEAD!
    • HangOutSpot
  • SMF Version: 2.0 ??
Re: [Tip&Trick] Make Table Hover Effects with image
« Reply #2 on: July 30, 2008, 01:42:31 PM »
+1 too here.. good tip babjusi ;)
Oh wow, guess who dropped by! Im still on secondlife.. but will respond to im's *waves

Offline Mother Goose

  • V.I.P.
  • *
  • Posts: 650
  • Karma: 510
  • Gender: Female
    • Homestead Exchange Network
  • SMF Version: 1.1.5
Re: [Tip&Trick] Make Table Hover Effects with image
« Reply #3 on: July 30, 2008, 07:12:00 PM »
That is just sooo cool!!  Thank you!

Offline butchas

  • Elite Member
  • *
  • Posts: 631
  • Karma: 398
  • Illustrious key typer
    • East Coast Rolling Thunder car club
  • SMF Version: 2.0 RC5
Re: [Tip&Trick] Make Table Hover Effects with image
« Reply #4 on: July 30, 2008, 09:15:02 PM »
Nice tip...  I tried that at first and found issues with some popular browsers.

You can do the same with the boardhover mod.  For example:

windowbg2_hover:hover,.windowbg2_hoverHover
{
background: #AB72AC url(./images/windowbg_hoverHover.jpg); /* purple */
}

I put it in the readme a while back.   :ntme  I have been using both images and color on my board for a while.  Some browsers will accept the images others will only use the colors.  I usually put a dot before the word "image".
My mod, My site

Offline antechinus

  • Hero Member
  • *
  • Posts: 445
  • Karma: 65
Re: [Tip&Trick] Make Table Hover Effects with image
« Reply #5 on: August 01, 2008, 08:11:07 PM »
Good tip. I've been using it myself for a while but I hadn't thought of posting about it as I assumed it was common knowledge. I find it works best if the colour change is subtle rather than glaring. It just needs to be enough to alert people, which doesn't require much. A slightly lighter or darker tone (usually lighter) of the windowbg colour works best IMO.

Offline butchas

  • Elite Member
  • *
  • Posts: 631
  • Karma: 398
  • Illustrious key typer
    • East Coast Rolling Thunder car club
  • SMF Version: 2.0 RC5
Re: [Tip&Trick] Make Table Hover Effects with image
« Reply #6 on: August 02, 2008, 02:05:44 PM »
One thing I found out is that if you are using jpg images the images must be in "jpg" format to work with the newer browsers.  For example, a file saved as ".jpg" with jif compression will not be displayed in the browser.  You will need to convert it to it's old school version...  :)
My mod, My site

Offline Letti

  • New Member
  • *
  • Posts: 8
  • Karma: 6
  • Gender: Female
    • Hurtopia
  • SMF Version: 1.1.6
Re: [Tip&Trick] Make Table Hover Effects with image
« Reply #7 on: September 12, 2008, 08:47:09 PM »
Thank you very much. I'm not very good writing in english, but I just wanna say thanks, I was looking for a tip like this.
I became a member of this forum because I couldnīt leave without saying something.

Again I'm sorry for my english, but I hope you can understand me.

 :)

Offline bigguy

  • Site Owner
  • Administrator
  • *
  • Posts: 13215
  • Karma: 269
  • Gender: Male
  • Get'r Done
    • P.C. Tweakr
  • SMF Version: 2.0 Gold
Re: [Tip&Trick] Make Table Hover Effects with image
« Reply #8 on: September 12, 2008, 09:04:09 PM »
Your english is fine and if I haven't said it yet ....welcome to the forum. We're glad to have you here. :)

Offline Letti

  • New Member
  • *
  • Posts: 8
  • Karma: 6
  • Gender: Female
    • Hurtopia
  • SMF Version: 1.1.6
Re: [Tip&Trick] Make Table Hover Effects with image
« Reply #9 on: September 12, 2008, 10:01:18 PM »
Thanks Bigguy, I am like a kid with a candy, I love css and now I love this forum.
Ps. If you need translation of anything to spanish (or anyone here) just let me know and I'll be glad to do it.
I read english very well  :) and I have translate all my forum by myself including a couple of themes, so I will love to help in any way I can.

Offline Smoky

  • who, me?
  • Guru
  • *
  • Posts: 3980
  • Karma: 1450
  • Gender: Female
  • It's all in your HEAD!
    • HangOutSpot
  • SMF Version: 2.0 ??
Re: [Tip&Trick] Make Table Hover Effects with image
« Reply #10 on: September 13, 2008, 12:59:34 AM »
ahhh!! amigo!! lol yes you are just fine and we welcome all translators.. glad to meet you letti ;)


:dnc bienvenida :vic
Oh wow, guess who dropped by! Im still on secondlife.. but will respond to im's *waves

Offline 7pixel

  • New Member
  • *
  • Posts: 1
  • Karma: 0
  • Gender: Male
    • -
  • SMF Version: 1.1.7
Re: [Tip&Trick] Make Table Hover Effects with image
« Reply #11 on: December 13, 2008, 06:49:37 AM »
Thanks  :)