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.

Text Navigation Bar hover phpbb3

View previous topic View next topic Go down

Text Navigation Bar hover phpbb3

Post by JAN2XONLINE on March 5th 2013, 7:00 am

I found this thread while searching. Can I do this in phpbb3 forum too?
http://www.simplebits.com/bits/minitabs.html

http://help.forumotion.com/t95279-navigation-bar-css

JAN2XONLINE
Forumember

Male Posts : 943
Reputation : 32
Language : Tagalog, English
Location : Alberta, Canada

http://animeph.4umer.com/

Back to top Go down

Re: Text Navigation Bar hover phpbb3

Post by Sanket on March 5th 2013, 7:09 am

Nera, provided the code for PunBB there. Can you provide your forum URL?

Edit: For Phpbb3,

Code:
a.mainmenu {
    border-bottom: 3px solid #ff0000 !important;
    opacity: 0.3 !important;
    text-decoration: none !important;
    font-weight: bold !important;
}
a.mainmenu:hover {
    color: #ff0000;
    opacity: 1 !important;
}

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Re: Text Navigation Bar hover phpbb3

Post by JAN2XONLINE on March 5th 2013, 7:47 am

Thanks, but all text navbars got underlined.



Is it possible to make it just like this?

http://www.simplebits.com/bits/minitabs.html

My forum: http://animeph.4umer.com/forum

JAN2XONLINE
Forumember

Male Posts : 943
Reputation : 32
Language : Tagalog, English
Location : Alberta, Canada

http://animeph.4umer.com/

Back to top Go down

Re: Text Navigation Bar hover phpbb3

Post by Sanket on March 5th 2013, 7:53 am

Just change the color codes to whatever you want.

For that specific thing, the font color is this
669966

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Re: Text Navigation Bar hover phpbb3

Post by Cassius Dio on March 5th 2013, 7:53 am

Try this one:
Code:
a.mainmenu {
    opacity: 0.3 !important;
    text-decoration: none !important;
    font-weight: bold !important;
}
a.mainmenu:hover {
    border-bottom: 3px solid #ff0000 !important;
    color: #ff0000;
    opacity: 1 !important;
}

Cassius Dio
Forumember

Male Posts : 581
Reputation : 79
Language : Romanian &English
Location : Yellow Submarine

http://beatles.forummo.com/

Back to top Go down

Re: Text Navigation Bar hover phpbb3

Post by JAN2XONLINE on March 5th 2013, 7:58 am

Wao, fast replies.

@Sanket I changed it. Thank you!

@SGSS It works!

But is it possible that for example, when I'm on forum tab, the underline stays there.

JAN2XONLINE
Forumember

Male Posts : 943
Reputation : 32
Language : Tagalog, English
Location : Alberta, Canada

http://animeph.4umer.com/

Back to top Go down

Re: Text Navigation Bar hover phpbb3

Post by Sanket on March 5th 2013, 8:00 am

With the code I provided, the underline should stay there.

Edit: Oh you mean after clicking on a certain link?

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Re: Text Navigation Bar hover phpbb3

Post by JAN2XONLINE on March 5th 2013, 8:02 am

Yes but all of them got underlined in your code sir. I just want only the selected navbar has underline.

JAN2XONLINE
Forumember

Male Posts : 943
Reputation : 32
Language : Tagalog, English
Location : Alberta, Canada

http://animeph.4umer.com/

Back to top Go down

Re: Text Navigation Bar hover phpbb3

Post by Cassius Dio on March 5th 2013, 8:06 am

It is possible with JavaScript. Add to JavaScript codes management:
Code:
$(document).ready(function(){
if(document.URL.indexOf('groups') != -1){
$('a.mainmenu[href="/groups"]').addClass('active-menu');
}
if(document.URL.indexOf('portal') != -1){
$('a.mainmenu[href="/portal"]').addClass('active-menu');
}
if(document.URL.indexOf('faq') != -1){
$('a.mainmenu[href="/faq"]').addClass('active-menu');
}
if(document.URL.indexOf('calendar') != -1){
$('a.mainmenu[href="/calendar"]').addClass('active-menu');
}
if(document.URL.indexOf('search') != -1){
$('a.mainmenu[href="/search"]').addClass('active-menu');
}
if(document.URL.indexOf('memberlist') != -1){
$('a.mainmenu[href="/memberlist"]').addClass('active-menu');
}
if(document.URL.indexOf('groups') != -1){
$('a.mainmenu[href="/groups"]').addClass('active-menu');
}
if(document.URL.indexOf('profile?mode=editprofile') != -1){
$('a.mainmenu[href="/profile?mode=editprofile"]').addClass('active-menu');
}
if(document.URL.indexOf('privmsg?folder=inbox') != -1){
$('a.mainmenu[href="/privmsg?folder=inbox"]').addClass('active-menu');
}
if(document.URL.indexOf('login?logout') != -1){
$('a.mainmenu[href^="/login?logout"]').addClass('active-menu');
}
if(document.URL.indexOf('login') != -1){
$('a.mainmenu[href="/login"]').addClass('active-menu');
}
if(document.URL.indexOf('register') != -1){
$('a.mainmenu[href="/register"]').addClass('active-menu');
}
});
});

Add to Generalities:
Code:
<script>
jQuery(document).ready(function(){
jQuery('a.mainmenu[href="/"]').addClass('active-menu');
});</script>

Add to CSS Stylesheet:
Code:
.active-menu{
border-bottom: 3px solid #ff0000 !important;
}

For users that use portal or a HTML page as starting page, this code will need some little modifications.

Cassius Dio
Forumember

Male Posts : 581
Reputation : 79
Language : Romanian &English
Location : Yellow Submarine

http://beatles.forummo.com/

Back to top Go down

Re: Text Navigation Bar hover phpbb3

Post by JAN2XONLINE on March 5th 2013, 8:09 am

It's not working. Confused

http://animeph.4umer.com/forum

That's my forum if you want to check it.

JAN2XONLINE
Forumember

Male Posts : 943
Reputation : 32
Language : Tagalog, English
Location : Alberta, Canada

http://animeph.4umer.com/

Back to top Go down

Re: Text Navigation Bar hover phpbb3

Post by Cassius Dio on March 5th 2013, 8:17 am

Have you checked "All pages" to "Placement" field?

Cassius Dio
Forumember

Male Posts : 581
Reputation : 79
Language : Romanian &English
Location : Yellow Submarine

http://beatles.forummo.com/

Back to top Go down

Re: Text Navigation Bar hover phpbb3

Post by JAN2XONLINE on March 5th 2013, 8:17 am

Yes I did sir. But my avacweb popup chat is gone so I removed it again.

JAN2XONLINE
Forumember

Male Posts : 943
Reputation : 32
Language : Tagalog, English
Location : Alberta, Canada

http://animeph.4umer.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