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.

Navigation Bar Change

View previous topic View next topic Go down

Solved Navigation Bar Change

Post by gamamulya on July 8th 2011, 8:51 am

1. what is the css code for deleting the navbar background ?, and could i add something beside the search box, or move the searchbox up beside the navigation bar ? have a look at these Wink



2. how to make a navigation button change when we hover the cursor on it ? like this navigation :
http://help.forumotion.com/t89991-navigation-buttons-shine-hover

I already check at FAQ : http://help.forumotion.com/t35094-the-navigation-bar
but not written there.

3. how to make the forum`s banner and navigation bar centered ? , I already open Administartion panel - display - headers & navigation and change the logo positioning and menu positioning to the center, but it doesnt make a change , the navigation bar and logo doesnt centered.

gamamulya
Forumember

Male Posts : 192
Reputation : 25
Language : English, Indonesian, Deutsch ( Germany ), Japanesse
Location : Everywhere Everyplaces

http://experience.forum.st

Back to top Go down

Solved Re: Navigation Bar Change

Post by Nera. on July 8th 2011, 11:17 am

Hello,

1. CSS for nav background.
Find this in your CSS and make sure your background is transparent.
Code:
.navbar {
    background-color: transparent;
    clear: both;
    padding: 0 10px;
}

2. Add something beside searchbar
Find what you want to add than I can tell you is it possible. Wink

3. Navigation hover
It's been answered many times. Are you searching for something like this http://help.forumotion.com/t92156-navigation-bar-effect

4. Navbar align
Find this in your CSS and change the aligment to center important.
Code:
ul.navlinks {
    text-align: center !important;
}



Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Navigation Bar Change

Post by gamamulya on July 8th 2011, 5:24 pm

1. already do it, and it works Smile ( Done )

2. i want to add a text : " language " then with flags beside it, when we click the flag, it direct us to google translator.., could i use IMG tag and URL tag for it ? , and how to add it there ?

3. already add it with these :
#i_icon_mini_index {
background-image: url('http://i40.servimg.com/u/f40/16/50/98/84/home10.png');
width: 97px;
height: 43px;
}
#i_icon_mini_index:hover {
background-image: url('http://i40.servimg.com/u/f40/16/50/98/84/home110.png');
width: 97px;
height: 43px;
}
#i_icon_mini_portal {
background-image: url('http://i40.servimg.com/u/f40/16/50/98/84/portal11.png');
width: 80px;
height: 43px;
}
#i_icon_mini_portal:hover {
background-image: url('http://i40.servimg.com/u/f40/16/50/98/84/portal12.png');
width: 80px;
height: 43px;
}
#i_icon_mini_profile {
background-image: url('http://i40.servimg.com/u/f40/16/50/98/84/profil11.png');
width: 80px;
height: 43px;
}
#i_icon_mini_profile:hover {
background-image: url('http://i40.servimg.com/u/f40/16/50/98/84/profil10.png');
width: 80px;
height: 43px;
}
#i_icon_mini_calendar {
background-image: url('http://i40.servimg.com/u/f40/16/50/98/84/calend10.png');
width: 80px;
height: 43px;
}
#i_icon_mini_calendar:hover {
background-image: url('http://i40.servimg.com/u/f40/16/50/98/84/caland10.png');
width: 80px;
height: 43px;
}
#i_icon_mini_gallery {
background-image: url('http://i40.servimg.com/u/f40/16/50/98/84/featur11.png');
width: 80px;
height: 43px;
}
#i_icon_mini_gallery:hover {
background-image: url('http://i40.servimg.com/u/f40/16/50/98/84/featur10.png');
width: 80px;
height: 43px;
}
#i_icon_mini_message {
background-image: url('http://i40.servimg.com/u/f40/16/50/98/84/messag11.png');
width: 80px;
height: 43px;
}
#i_icon_mini_message:hover {
background-image: url('http://i40.servimg.com/u/f40/16/50/98/84/messag10.png');
width: 80px;
height: 43px;
}
#i_icon_mini_new_message {
background-image: url('http://i40.servimg.com/u/f40/16/50/98/84/new_me11.png');
width: 80px;
height: 43px;
}
#i_icon_mini_new_message:hover {
background-image: url('http://i40.servimg.com/u/f40/16/50/98/84/new_me10.png');
width: 80px;
height: 43px;
}
#i_icon_mini_register {
background-image: url('http://i40.servimg.com/u/f40/16/50/98/84/regist10.png');
width: 80px;
height: 43px;
}
#i_icon_mini_login {
background-image: url('http://i40.servimg.com/u/f40/16/50/98/84/login10.png');
width: 80px;
height: 43px;
}
#i_icon_mini_login:hover {
background-image: url('http://i40.servimg.com/u/f40/16/50/98/84/login110.png');
width: 80px;
height: 43px;
}
#i_icon_min_logout {
background-image: url('http://i40.servimg.com/u/f40/16/50/98/84/logout11.png');
width: 97px;
height: 43px;
}
#i_icon_mini_logout:hover {
background-image: url('http://i40.servimg.com/u/f40/16/50/98/84/logout10.png');
width: 97px;
height: 43px;
}
#i_icon_min_search {
background-image: url('http://i40.servimg.com/u/f40/16/50/98/84/search11.png');
width: 80px;
height: 43px;
}
#i_icon_mini_search:hover {
background-image: url('http://i40.servimg.com/u/f40/16/50/98/84/search10.png');
width: 80px;
height: 43px;
}
#i_icon_min_faq {
background-image: url('http://i40.servimg.com/u/f40/16/50/98/84/faq10.png');
width: 80px;
height: 43px;
}
#i_icon_mini_faq:hover {
background-image: url('http://i40.servimg.com/u/f40/16/50/98/84/faq110.png');
width: 80px;
height: 43px;
}

but not all the navigation button appeared, try a look at experience.forum.st

4. it works ^^, how about the forum logo ( banner ) ?, how to put it to the center too ?

gamamulya
Forumember

Male Posts : 192
Reputation : 25
Language : English, Indonesian, Deutsch ( Germany ), Japanesse
Location : Everywhere Everyplaces

http://experience.forum.st

Back to top Go down

Solved Re: Navigation Bar Change

Post by gamamulya on July 9th 2011, 3:30 pm

up, i believe this already 28 hours since the last post i made ^^
could someone help it ?, or should I wait for Nera ? Smile

gamamulya
Forumember

Male Posts : 192
Reputation : 25
Language : English, Indonesian, Deutsch ( Germany ), Japanesse
Location : Everywhere Everyplaces

http://experience.forum.st

Back to top Go down

Solved Re: Navigation Bar Change

Post by Nera. on July 9th 2011, 3:38 pm

Hi,

Im sorry. I'm a bit tired today. Have you noticed that you have spelling errors in CSS. Search and faq icons, log out also (min = mini). I haven't got the permission to see them all but I'll assume those one are not appearing cause of it.

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Navigation Bar Change

Post by gamamulya on July 9th 2011, 4:10 pm

Hi Nera, sorry, what a shame for me, wrong spelling on css -_-
ok already done,but I dont know why there`s a little space between 'search' and 'profile' bar, I thought I`m sure i change X and Y to the right size.

then remains number 2 and 4 ,

2. i want to add a text : " language " then with flags beside it, when we click the flag, it direct us to google translator.., could i use IMG tag and URL tag for it ? , and how to add it there ?

4. how to put the image centered like the navbar ?

bytheway, I`m so sorry, i dont know if you`re a bit tired today. silent
if you want, you can answer this later if you already feel better Nera.

gamamulya
Forumember

Male Posts : 192
Reputation : 25
Language : English, Indonesian, Deutsch ( Germany ), Japanesse
Location : Everywhere Everyplaces

http://experience.forum.st

Back to top Go down

Solved Re: Navigation Bar Change

Post by Nera. on July 9th 2011, 4:25 pm

For the space add this to CSS
Code:
#i_icon_mini_members {
    display: none;
}
#i_icon_mini_groups {
    display: none;
}
That will hide the space. If you decide you can also add that buttons.

Can you show me your settings for logo in a srceen shot from headers and navigation?

For those buttons do you mean something like this http://help.forumotion.com/t92113-multi-buttons-header ? You could move them down.

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Navigation Bar Change

Post by gamamulya on July 9th 2011, 5:05 pm

Sure, here it is :



For the buttons, i already follow what adam`s said,

Here is the screenshot, it appear on the top right of the page..



I need it to be a "row" beside search bar, not on a "column" on the right top of the page.

gamamulya
Forumember

Male Posts : 192
Reputation : 25
Language : English, Indonesian, Deutsch ( Germany ), Japanesse
Location : Everywhere Everyplaces

http://experience.forum.st

Back to top Go down

Solved Re: Navigation Bar Change

Post by Nera. on July 9th 2011, 6:33 pm

Than delete the codes and you can add them as extra navigations through admin panel >> Display >> Headers and navigation >> Add a customized menu
The'll be in a row with navigations next to log out if that is what you wanted?

Has the code fixed the space?

For the logo aligment you will find this in CSS

Code:
#logo {
    float: left;
    padding: 5px;
}

Delete the float left.

And here also delete the text aligment left
Code:
#logo-desc {
    margin: 0;
    padding: 0;
    text-align: left;
}

http://i.imm.io/7hHb.png

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Navigation Bar Change

Post by gamamulya on July 9th 2011, 7:30 pm

1. Yes the code fixed the navigation space.
2. Thats not what i mean, i want it on the left side of search box, not search on the navigation bar, i want it under the navigation bar, 1 row below the navigation bar, the left side of search box.
3. Already give the screenshot about the forum`s logo, could help it ?

gamamulya
Forumember

Male Posts : 192
Reputation : 25
Language : English, Indonesian, Deutsch ( Germany ), Japanesse
Location : Everywhere Everyplaces

http://experience.forum.st

Back to top Go down

Solved Re: Navigation Bar Change

Post by Nera. on July 9th 2011, 7:34 pm

I'm not sure did you get me correctly. Did you do what I said here for the logo?
@Nera. wrote:

For the logo aligment you will find this in CSS

Code:
#logo {
    float: left;
    padding: 5px;
}

Delete the float left.

And here also delete the text aligment left
Code:
#logo-desc {
    margin: 0;
    padding: 0;
    text-align: left;
}

This will be your reusalt later http://i.imm.io/7hHb.png

For the buttons
Try with this in your homebox
Code:
<span class=dugmici>
<a href="http://www.facebook.com"><img src="http://tinyurl.com/68637su" border="0" width="40px" /></a>
<a href="http://www.twitter.com"><img src="http://tinyurl.com/5wb6q7y" border="0" width="40px" /></a>
<a href="http://www.youtube.com"><img src="http://tinyurl.com/6x49z5e" border="0" width="40px" /></a>
</span>
This in CSS
Code:
.dugmici {
    position: absolute;
    right: 100px;
    margin-top: -20px;
}
Move them around with margins if you want.

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Navigation Bar Change

Post by gamamulya on July 9th 2011, 8:27 pm

owh, sorry Nera i dont see the post before about centering logo, cz its about 2.00 AM right here, my eyes was shading Very Happy

oke, welldone about centering the logo.

but about the codes u given for icon on left-side of search box ( under navigation bar ) , I already do both of it, but the result :



gamamulya
Forumember

Male Posts : 192
Reputation : 25
Language : English, Indonesian, Deutsch ( Germany ), Japanesse
Location : Everywhere Everyplaces

http://experience.forum.st

Back to top Go down

Solved Re: Navigation Bar Change

Post by Nera. on July 9th 2011, 8:32 pm

Have you added the CSS too? To admin panel >> Display >> CSS

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Navigation Bar Change

Post by gamamulya on July 9th 2011, 8:49 pm

ya, i know how to change the css, i already add it too to the CSS stylesheet
*******************Extra Custom CSS*************************
.dugmici {
position: absolute;
right: 100px;
margin-top: -20px;
}
but that`s the result.


Last edited by gamamulya on July 9th 2011, 8:52 pm; edited 1 time in total

gamamulya
Forumember

Male Posts : 192
Reputation : 25
Language : English, Indonesian, Deutsch ( Germany ), Japanesse
Location : Everywhere Everyplaces

http://experience.forum.st

Back to top Go down

Solved Re: Navigation Bar Change

Post by Nera. on July 9th 2011, 8:52 pm

I can't see it in your CSS. It's not there What the fuck ?!?

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Navigation Bar Change

Post by gamamulya on July 9th 2011, 8:58 pm



see it on the top of mine


*******************Gama Extra Custom CSS*************************
.dugmici {
position: absolute;
right: 100px;
margin-top: -20px;

gamamulya
Forumember

Male Posts : 192
Reputation : 25
Language : English, Indonesian, Deutsch ( Germany ), Japanesse
Location : Everywhere Everyplaces

http://experience.forum.st

Back to top Go down

Solved Re: Navigation Bar Change

Post by Nera. on July 9th 2011, 11:22 pm

Remove this completely and save.
*******************Gama Extra Custom CSS*************************

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Navigation Bar Change

Post by gamamulya on July 10th 2011, 5:59 am

already remove it completely



but the result :



it appears below the ads space.

gamamulya
Forumember

Male Posts : 192
Reputation : 25
Language : English, Indonesian, Deutsch ( Germany ), Japanesse
Location : Everywhere Everyplaces

http://experience.forum.st

Back to top Go down

Solved Re: Navigation Bar Change

Post by Nera. on July 10th 2011, 10:50 am

Now simply change the margin top for example -100px to move it up and so on utill it fits.

You can also move it right or left by changing pixels of the property right.

And of course change the links in HTML to whatever you want to be found there.

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Navigation Bar Change

Post by gamamulya on July 10th 2011, 12:31 pm

Ok, I think all is done with Nera
Thank you Nera
Topic "Solved"

gamamulya
Forumember

Male Posts : 192
Reputation : 25
Language : English, Indonesian, Deutsch ( Germany ), Japanesse
Location : Everywhere Everyplaces

http://experience.forum.st

Back to top Go down

Solved Re: Navigation Bar Change

Post by Nera. on July 10th 2011, 12:35 pm

You welcome.

Solved ~ Locked

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.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