Icy Phoenix

     
 


Post new topic  Reply to topic 
Page 1 of 3
Goto page 1, 2, 3  Next
 
Reply with quote Download Post 
Post Creating Simple Transparent Tabs In IP 
 
Easy way  
This was harder than i think  

First i want made some explenations :
Tabs - i tryed to create tabs with <sripts> .js  or similar thing ..but affter few hours i leaved all and stared to create only with simple html and css.. (almost all MG alredy made)
reason i chosed this is simple : sometimes this tabs with .js or <scripts> are a bit slow , also here on mg_winter sometimes i get "not rounded" tabs or i see different colors ... thats all lets start

now see this two pics :
First one is on icyphoenix style without CMS ADV ....

 tabs1

and second is on different template (Chaotic site) with CMS ADV

 tabs2

as you can see tabs are on banner image ...and thrue tabs you can see background .... and they are rounded  

download attachment (there are only few pics inside) unpack it and upload in your templatesmg_themesimagesice   overtiere existing pics if ask

open your templatesmg_themesstyle_ice.css
Note:this change will cheange your nav menu in header but dont worry

find
Spoiler: [ Show ]


replace it with
Spoiler: [ Show ]



find
Spoiler: [ Show ]


replace with
Spoiler: [ Show ]


open your templatesmg_themesoverall_header.tpl

find
Spoiler: [ Show ]

delete it

find
Spoiler: [ Show ]


affter add
Spoiler: [ Show ]


thats all  

backup before you start your style_ice.css and overall_header.tpl


with > CMS ADV

open templatesmg_themesoverall_header.tpl

find
Spoiler: [ Show ]


replace with
Spoiler: [ Show ]


open templatesmg_themesnav_header.tpl

delete
Spoiler: [ Show ]


i think its all  


for ca_aphrodite

 aprhodite

upload images from attachment in templatesca_aphroditeimages

open templatesca_aphroditestyle_blue.css or other green ,cyan
find
Spoiler: [ Show ]


replace with
Spoiler: [ Show ]


find (this are last lines in .css)
Spoiler: [ Show ]


affter add
Spoiler: [ Show ]


open open templatesca_aphroditeoverall_header.tpl
find
Spoiler: [ Show ]


replace with
Spoiler: [ Show ]


find
Spoiler: [ Show ]


affter add
Spoiler: [ Show ]


find
Spoiler: [ Show ]


delete it !!!

Note: if problem occours with this add (streching or oversized) create smaler tabs or place tabs to the top of header
PS. i hope i added all changes ,   gearhead will confirm it  


off topic wrote: 
!! now i need some help!!
if you look in last spoiler you will see in red margin-top:126px , this is how i placed tabs on bottom of header ., so any better idea is welcome


DEMO: http://www.macommunity.net

Thanks  

tabs2.rar
Description: Updated 16.12 
Download
Filename: tabs2.rar
Filesize: 19.37 KB
Downloaded: 170 Time(s)

 




____________
We are the phpBBorg. Lower your Crackers. Your phpological and forumological distinctivness will be added to our own. Resistance if futile!
 
Edited by Limun, Mon 15 Dec, 2008 00:48: forghet to add attachment
LimunSend private messageVisit poster's website  
Back to topPage bottom
Icy Phoenix is an open source project, you can show your appreciation and support future development by donating to the project.

Support us
 
Reply with quote Download Post 
Post Re: Creating Simple Transparent Tabs In IP 
 
Awesome work yet again Limun!
 




____________
| Icy Phoenix ColorizeIt! |
Bipolar Disorder - Not good for you and definitely not good for everyone else.
 
ChaoticSend private messageVisit poster's website  
Back to topPage bottom
Reply with quote Download Post 
Post Re: Creating Simple Transparent Tabs In IP 
 
Very good work! I really like it, and will incorporate it into a few of my themes. Very, very nice.

One should note that you can alter the colors to match that of your theme......

As far as answering your questions, that would be a hover issue, I can play with it and let you know, once I get the code onto my test forum!

The great .css editor, Limun!

     
 




____________
My main IP 1.3 site
My IP 1.3 styles test site
 
gearheadSend private messageVisit poster's website  
Back to topPage bottom
Reply with quote Download Post 
Post Re: Creating Simple Transparent Tabs In IP 
 
If it's any use to you, These MUST be in this order for whatever purpose you use them for.


a:link {color: #FF0000}     /* unvisited link */
a:visited {color: #00FF00}  /* visited link */
a:hover {color: #FF00FF}   /* mouse over link */
a:active {color: #0000FF}   /* selected link */

These below are useless markup and have no effect, as you don't have anything to qualify them in the .css changes you propose.

<li id="home
<li id="forum
<li id="new_posts

etc,
etc,
etc.

All you've done is add images to the a: anchors in much the same way as the "Sparkle" .css works in the background.

What you could do is examine phpBB3 markup and .css and see how it's done, because it's not quite as simple as what you propose - particularly if you are trying to achieve the same results as phpBB3 nav bar using three images that don't actually "Lock Up" but change with each mouse gesture.
 
 
 
Back to topPage bottom
Reply with quote Download Post 
Post Re: Creating Simple Transparent Tabs In IP 
 
Looks like you done what set out to do Limun nice job...

   
 




____________
Mods and themes for Icy Phoenix 1.3

IcyPhoenix UK is off-line permanently due to lack of time to update mods.
if anyone is interested in my templates I will upgrade them to Icy 2.0.
 
DWhoSend private messageVisit poster's website  
Back to topPage bottom
Reply with quote Download Post 
Post Re: Creating Simple Transparent Tabs In IP 
 
Updated and solved problem with active tabs

 activetabs

still didnt updated on demo site because owner is sleep all day UPDATED
 




____________
We are the phpBBorg. Lower your Crackers. Your phpological and forumological distinctivness will be added to our own. Resistance if futile!
 
Last edited by Limun on Sat 20 Dec, 2008 11:50; edited 1 time in total 
LimunSend private messageVisit poster's website  
Back to topPage bottom
Reply with quote Download Post 
Post Re: Creating Simple Transparent Tabs In IP 
 
Looking good!
 




____________
| Icy Phoenix ColorizeIt! |
Bipolar Disorder - Not good for you and definitely not good for everyone else.
 
ChaoticSend private messageVisit poster's website  
Back to topPage bottom
Reply with quote Download Post 
Post Re: Creating Simple Transparent Tabs In IP 
 
I have a question:

Are you trying to get the "Yellow" tabs to show you where you are - rather than where you've been?

Because "Visited" images will keep the tabs yellow until you clear your browser history.
 
 
 
Back to topPage bottom
Reply with quote Download Post 
Post Re: Creating Simple Transparent Tabs In IP 
 
Looks nice... thanks for sharing it.  
 




____________
TheSteffen
Often SEARCH is the quickest way to get support.
IcyPhoenix German Support
 
TheSteffenSend private message  
Back to topPage bottom
Reply with quote Download Post 
Post Re: Creating Simple Transparent Tabs In IP 
 
Note to Limun:

Unless I did something wrong, the tab png images only work in IE.

I use Firefox more, but just wanted to check.

Also, look at MG Autumn. There are also some changes needed in the common.css and grey.css.

 
 




____________
My main IP 1.3 site
My IP 1.3 styles test site
 
gearheadSend private messageVisit poster's website  
Back to topPage bottom
Reply with quote Download Post 
Post Re: Creating Simple Transparent Tabs In IP 
 
gearhead wrote: [View Post]
Note to Limun:

Unless I did something wrong, the tab png images only work in IE.

I use Firefox more, but just wanted to check.

Also, look at MG Autumn. There are also some changes needed in the common.css and grey.css.

 


for me they are working in ff and opera

firefox
 ff

opera
 op

also Chaotic use Firefox and for him are working...so must be that you did something wrong ...or is something with your bronswer  
 




____________
We are the phpBBorg. Lower your Crackers. Your phpological and forumological distinctivness will be added to our own. Resistance if futile!
 
LimunSend private messageVisit poster's website  
Back to topPage bottom
Reply with quote Download Post 
Post Re: Creating Simple Transparent Tabs In IP 
 
Ok, I'll try again.

See what MG Autumn looks like with tabs in both browsers.

thx.

 
 




____________
My main IP 1.3 site
My IP 1.3 styles test site
 
gearheadSend private messageVisit poster's website  
Back to topPage bottom
Reply with quote Download Post 
Post Re: Creating Simple Transparent Tabs In IP 
 
Are you talking about MG Autumn or MG Winter?

MG Winter has the tabs.  
 




____________
| Icy Phoenix ColorizeIt! |
Bipolar Disorder - Not good for you and definitely not good for everyone else.
 
ChaoticSend private messageVisit poster's website  
Back to topPage bottom
Reply with quote Download Post 
Post Re: Creating Simple Transparent Tabs In IP 
 
No, the old template style "MG Autumn". A lot of people don't have that one installed.

No matter. There is a problem with more than one template due to a spacing issue.

It probably only occurs if you have your monitor resolution set to: 1027x768

There is just a slight clearance problem in the header height. I can increase it which would be easier than reducing the size of the tab pngs.

Here's what I'm getting. I can see a interference overall height problem, and my login logout tab set wraps around to the bottom......

LOGGED IN:

 tab_width_issue

LOGGED OUT:

 tab_width_issue2

See, when logged in, the above mentioned tab "wraps" around to the bottom!

There's nothing wrong with the code changes you provided, Limun, just a small sizing issue!

 
 




____________
My main IP 1.3 site
My IP 1.3 styles test site
 
gearheadSend private messageVisit poster's website  
Back to topPage bottom
Reply with quote Download Post 
Post Re: Creating Simple Transparent Tabs In IP 
 
I see now!

I think if I ever ran into that problem, I'd remove the Search and FAQ tabs.  It's what I did on my site because they aren't really cool enough to be tabs.  I just left the links to Search and FAQ in my menu.

You gotta be cool to be a tab!
 




____________
| Icy Phoenix ColorizeIt! |
Bipolar Disorder - Not good for you and definitely not good for everyone else.
 
ChaoticSend private messageVisit poster's website  
Back to topPage bottom
Post new topic  Reply to topic  Page 1 of 3
Goto page 1, 2, 3  Next


Display posts from previous:    

HideWas this topic useful?

Link this topic
URL
BBCode
HTML




 
Permissions List
You cannot post new topics
You cannot reply to topics
You cannot edit your posts
You cannot delete your posts
You cannot vote in polls
You cannot attach files
You can download files
You cannot post calendar events