The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

New Button hover nav bar

View previous topic View next topic Go down

New Button hover nav bar

Post by EEYEN3 on April 22nd 2014, 4:14 pm

OK I've copied the code from one of the galleries on here for hovering nav bars... Is there anyway to create a new source?

Like... You have _index, _portal, _gallery etc..

I want to have a custom button on the navbar and I'd like it to also hover. Is there a special code for this? Am I missing something?

EEYEN3
Forumember

Posts : 80
Reputation : 1
Language : English

Back to top Go down

Re: New Button hover nav bar

Post by Pizza Boi on April 22nd 2014, 4:20 pm

Hi Very Happy

Hmm... well, you can definitely do that and I'll give you the easiest solution possible:

#1 Go to AP < Display < Homepage < Generalities < Paste this code before saving:

Code:
<a class="customlink" href="URL to where you want the link to be redirected">Name of the link</a>

^ Change the ones I put indications on. Now, we're going to style it to position it properly in the forum as step #2.

#2 Go to Display < Colors < Stylesheet < Paste the code below < Save:

Code:
.customlink {
 position: absolute;
 top: #px;
 left: #px;
 font-size: #px;
 color: #Color;
}
.customlink:hover {
 color: #Color;
}

Change #px and #Color values to the appropriate ones. Lastly, you can add additional styles to it as you please.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Re: New Button hover nav bar

Post by EEYEN3 on April 26th 2014, 7:24 pm

I think you were confused as to what I wanted... Or I'm confused as to what you meant... or both.

http://imgur.com/P47izZQ

I can add the 'index' button, but I don't know how to edit the CSS to move it like with the pre-set navbar buttons.

The code I have for that is (in example):
Code:
#i_icon_mini_portal{width:80px; height:44px; background:url(http://www.thomasbenacci.co.uk/files/Silver_Nav/Portal.png) no-repeat 0 0;}
#i_icon_mini_portal:hover{background:url(http://www.thomasbenacci.co.uk/files/Silver_Nav/Portal.png) no-repeat  0 -44px;}

But how do I that for a navbar button I add via headers & generalities

(I have no experience in HTML)

EEYEN3
Forumember

Posts : 80
Reputation : 1
Language : English

Back to top Go down

Re: New Button hover nav bar

Post by Pizza Boi on April 26th 2014, 8:14 pm

Hi Very Happy

So you want to position them properly? IF so, please link to your site.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Re: New Button hover nav bar

Post by EEYEN3 on April 26th 2014, 8:48 pm

Yeah... That and the hover thing, which I still don't understand.

http://www.xwa-universe.com/forum

I took the index button down but I can put it back up.

EEYEN3
Forumember

Posts : 80
Reputation : 1
Language : English

Back to top Go down

Re: New Button hover nav bar

Post by Pizza Boi on April 26th 2014, 8:56 pm

Hi Very Happy

Can you please put them back up again? And also, just add :hover after the selectors you'll use.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Re: New Button hover nav bar

Post by EEYEN3 on April 26th 2014, 9:46 pm

Ok, I put it back up. I don't understand where you want me to put the :hover though.

EEYEN3
Forumember

Posts : 80
Reputation : 1
Language : English

Back to top Go down

Re: New Button hover nav bar

Post by EEYEN3 on April 26th 2014, 10:29 pm

I think it'll be easier for you to answer this... When you add a navbar link through Headers & Navigation, how do you style it in the CSS?

I showed the code I found for the hover

Code:
#i_icon_mini_portal{width:80px; height:44px; background:url(http://www.thomasbenacci.co.uk/files/Silver_Nav/Portal.png) no-repeat 0 0;}[color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace][/font][/color]
#i_icon_mini_portal:hover{background:url(http://www.thomasbenacci.co.uk/files/Silver_Nav/Portal.png) no-repeat 0 -44px;}

but what is the equivalent for an added link in the navbar?

EEYEN3
Forumember

Posts : 80
Reputation : 1
Language : English

Back to top Go down

Re: New Button hover nav bar

Post by Pizza Boi on April 27th 2014, 2:34 am

Hi Very Happy

To align it, use this:

Code:
a[href="/h1-test"] {
position: relative;
bottom: 7.5px;
left: 3px;
}

I'm not sure about the whole if you add a link thing as I cannot understand.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Re: New Button hover nav bar

Post by EEYEN3 on April 27th 2014, 3:36 pm

Alright, I've got them lined up, now I'm having an issue with the hover.

I don't know where to put the img link for the hover image for the custom link.
Code:
a[href="/h1-test"] {
position: relative;
bottom: 7px;
left: 3px;
}

a[href="/h1-test"]:hover {
position: relative;
bottom: 7px;
left: 3px;
}



Also, this code doesn't work...

Code:
#i_icon_mini_index{width:79px; height:38px; background:url(http://i.imgur.com/Y3bCbb0.png) no-repeat 0 0;}
#i_icon_mini_index:hover{background:url(http://i.imgur.com/xgnOwSz.png) no-repeat 0 -38px;}

but this one does...

Code:
#i_icon_mini_portal{width:79px; height:44px; background:url(http://www.thomasbenacci.co.uk/files/Silver_Nav/Portal.png) no-repeat 0 0;}
#i_icon_mini_portal:hover{background:url(http://www.thomasbenacci.co.uk/files/Silver_Nav/Portal.png) no-repeat  0 -44px;}

EEYEN3
Forumember

Posts : 80
Reputation : 1
Language : English

Back to top Go down

Re: New Button hover nav bar

Post by Pizza Boi on April 27th 2014, 6:18 pm

Hi Very Happy

For this:

Code:
#i_icon_mini_index{width:79px; height:38px; background:url(http://i.imgur.com/Y3bCbb0.png) no-repeat 0 0;}
#i_icon_mini_index:hover{background:url(http://i.imgur.com/xgnOwSz.png) no-repeat 0 -38px;}

The name is home, not index Smile .

Also, for the hover, you should input it as something like:

Code:
a[href="/h1-test"]:hover {
position: relative;
bottom: 7px;
left: 3px;
background-image:url(IMG LINK);
}

By the way, there's a possibility that your background-image won't appear because it is an image so try using z-index: 999; as well, if not, the only thing you can do is just add padding to make spaces for the edges.

Regards,
Pizza Boi


Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum