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 (CSS)

View previous topic View next topic Go down

Solved Navigation Bar (CSS)

Post by Light Elf on August 17th 2011, 3:53 pm

I dont want navigation bar used by Images, I want it be maden from codes which are CSS. May I have this kind of Navigation on forumotion:
http://www.simplebits.com/bits/minitabs.html

Light Elf
Forumember

Posts : 144
Reputation : 11
Language : English

Back to top Go down

Solved Re: Navigation Bar (CSS)

Post by Nera. on August 17th 2011, 5:11 pm

Pozdrav elf,

You can have that on FM. It's a simple border bottom and opacity hover effect.

Please provide your forum URL for appearance problems.

Nera.
Energetic

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

http://webartzforum.com

Back to top Go down

Solved Re: Navigation Bar (CSS)

Post by Light Elf on August 17th 2011, 5:13 pm

Oh sry Nera, there is a rule to post URL of our forums and I always manage to forget Very Happy
http://about-u.serbianforum.info/

Light Elf
Forumember

Posts : 144
Reputation : 11
Language : English

Back to top Go down

Solved Re: Navigation Bar (CSS)

Post by Nera. on August 17th 2011, 5:16 pm

It's OK. You already have a dashed hover with images, just to be clear, you want only text navigation + opacity + solid border bottom hover?

IF YES.


Than do this.

First set it in AP > Homepage > Headers and navigation > Display only images in the navbar: NO

Than go to AP > Display > Pictures managment > Advanced and remove the pictures of your navigations from there.

Than add this to CSS
Code:
#pun-navlinks a:active, #pun-navlinks a:focus, #pun-navlinks a:hover {
    border-bottom: 3px solid black !important;
    opacity: 0.3 !important;
}

Nera.
Energetic

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

http://webartzforum.com

Back to top Go down

Solved Re: Navigation Bar (CSS)

Post by Light Elf on August 17th 2011, 5:36 pm

Did as U told me, but its not as I wanted. Whats the problem?

Light Elf
Forumember

Posts : 144
Reputation : 11
Language : English

Back to top Go down

Solved Re: Navigation Bar (CSS)

Post by Nera. on August 17th 2011, 5:40 pm

Replace the CSS I gave you with this one

Code:
#pun-head #pun-navlinks a:active, #pun-navlinks a:focus, #pun-navlinks a:hover {
    border-bottom: 3px solid black !important;
    opacity: 0.3 !important;
    text-decoration: none !important;
    font-weight: bold !important;
}

And add this too
Code:

#pun-head #pun-navlinks {
    font-weight: bold !important;
}

You can change the colors too.

Nera.
Energetic

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

http://webartzforum.com

Back to top Go down

Solved Re: Navigation Bar (CSS)

Post by Light Elf on August 17th 2011, 5:45 pm

How can I change color of those links?

Light Elf
Forumember

Posts : 144
Reputation : 11
Language : English

Back to top Go down

Solved Re: Navigation Bar (CSS)

Post by Nera. on August 17th 2011, 5:46 pm

What color do you want them to be?

Nera.
Energetic

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

http://webartzforum.com

Back to top Go down

Solved Re: Navigation Bar (CSS)

Post by Light Elf on August 17th 2011, 5:51 pm

Black. With and without hover. Only thing I want in hover is border down. And + I dont want to see everything of navigation. How to hide Groups, Member list and other I want.

Light Elf
Forumember

Posts : 144
Reputation : 11
Language : English

Back to top Go down

Solved Re: Navigation Bar (CSS)

Post by Nera. on August 17th 2011, 5:54 pm

Replace those two codes with this one.

Code:
#pun-head #pun-navlinks a:active, #pun-navlinks a:focus, #pun-navlinks a:hover {
    border-bottom: 3px solid black !important;
    opacity: 0.3 !important;
    text-decoration: none !important;
    font-weight: bold !important;
    color: black !important;
}
#pun-head #pun-navlinks {
    font-weight: bold !important;
    color: black !important;
}

Grups hide
Code:
a[href="/groups"]{
display: none;
}

Member list
Code:
a[href="/memberlist"]{
display: none;
}

Nera.
Energetic

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

http://webartzforum.com

Back to top Go down

Solved Re: Navigation Bar (CSS)

Post by Light Elf on August 17th 2011, 6:00 pm

Take a look Nera, they are not black at all + nothing have changed. I tryed also with color but its not working, dont know why.

Light Elf
Forumember

Posts : 144
Reputation : 11
Language : English

Back to top Go down

Solved Re: Navigation Bar (CSS)

Post by Nera. on August 17th 2011, 6:02 pm

Sorry did not pay attention.
Add this one

Code:
.mainmenu {
    color: black !important;
}

Nera.
Energetic

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

http://webartzforum.com

Back to top Go down

Solved Re: Navigation Bar (CSS)

Post by Light Elf on August 17th 2011, 6:06 pm

Thats good, just one more thing. On hover I want black color also but only border down. Thats all.

Upate: I did it alone Very Happy

Light Elf
Forumember

Posts : 144
Reputation : 11
Language : English

Back to top Go down

Solved Re: Navigation Bar (CSS)

Post by Nera. on August 17th 2011, 6:26 pm

You did, but something different Razz

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