Abstract Theme

[Jonathan]

Hello everyone!

Just put together this abstract theme!


Features:
Mouse over images - When you hover over items in the menu it will light up

Professional photoshopped background

A menu to make the hover over / menu items look good


You CANNOT install this theme from the administrator control panel!

-How-to install-
1. Go to /themes in your THT installation directory
2. Upload the zip called "Abstract - JonathanT.zip"
3. Extract the ZIP file to a directory called "/abstract/"
4.Go to your administrator control panel
5. Click on "Look and Feel"
6. In the selection menu select "abstract" then press APPLY.
7. Done!

Notes:
The mouseover image cannot stretch to how long your menu item name is, So use this special character to make MORE spaces or decrease your character count as much as possible for it to work.
This character: "　" It's not just a SPACE made by the space bar, It is a BLANK character that still counts!

Want to remove the mouseover images because you're unable to adjust?

Open up style.css in >Themes > Abstract then search for "active" remove the line below it saying:

"background:url(<IMG>mouseover2.png) no-repeat;"



-Screenshot-
http://www.upffs.com/files/744_screenshot.png

Download:

Download is attached to this post.

-Credits-
Whoever made Reloaded2 ( I took a bit of CSS code (Hope you don't mind )
Mouseover / BG image - Jonathan
Jonny - For making THT!

[Kevin]

Very nice!

[macaws]

That background gives me De Ja Vu... I swear I've seen it... Anyways, nice. nice.

[Nick]

hmm, for a workaround to the mouseover images in FF3 and Safari, you can make the mouseover background a single pixel wide bar the height of your current mouseover image and then use:

background: #CCC url(Images/top_bg.png) repeat-x;

replcaing the image there with your single pixel image. Then just use:

-moz-border-radius: 10px;
-webkit-border-radius: 10px;

replacing the 10px with the radius of your border curves. all of this code goes where your current mouseover css is.

Nice theme, nonetheless.

[Jonathan]

Thanks alot guys,

@Nick, Wouldn't that kill off the rounded edges?

I know the method of making a 5x5 image for a background/button using a gradient, etc. However it's hard to use edges on buttons w/ repeating.

[Nick]

no, thats what the border-radiuses do. however, that method will only work in FF3 and Safari, because IE doesn't support CSS3. because of this, you might want to leave the current method in an IE conditional comment for the IE users.

[Jonathan]

Hmm!

Maybe add a system on CSS e.g <----IF IE---> Show StyleIE.css, maybe...

[Kevin]

(11-24-2009 10:52 PM)Nick Wrote:  no, thats what the border-radiuses do. however, that method will only work in FF3 and Safari, because IE doesn't support CSS3. because of this, you might want to leave the current method in an IE conditional comment for the IE users.

It should also work in Chrome because it's webkit based.

[Jimmie]

Well, if you want an exhaustive list,

Gecko (-moz): Firefox (Nightly builds like Namoroka, Shiretoko, Minefield also), Epiphany Gecko, Flock
WebKit (-webkit): Google Chrome Frame, Google Chrome, Chromium, Safari, Midori, WebKitLauncher