The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Text Navigation Bar hover phpbb3

3 posters

Go down

Text Navigation Bar hover phpbb3  Empty Text Navigation Bar hover phpbb3

Post by JAN2XONLINE 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

https://help.forumotion.com/t95279-navigation-bar-css
JAN2XONLINE
JAN2XONLINE
Forumember

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

http://animeph.4umer.com/

Back to top Go down

Text Navigation Bar hover phpbb3  Empty Re: Text Navigation Bar hover phpbb3

Post by Sanket 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
Sanket
ForumGuru

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

Back to top Go down

Text Navigation Bar hover phpbb3  Empty Re: Text Navigation Bar hover phpbb3

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

Thanks, but all text navbars got underlined.

Text Navigation Bar hover phpbb3  123lik10

Is it possible to make it just like this?

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

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

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

http://animeph.4umer.com/

Back to top Go down

Text Navigation Bar hover phpbb3  Empty Re: Text Navigation Bar hover phpbb3

Post by Sanket 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
Sanket
ForumGuru

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

Back to top Go down

Text Navigation Bar hover phpbb3  Empty Re: Text Navigation Bar hover phpbb3

Post by Cassius Dio 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
Cassius Dio
Forumember

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

http://beatles.forummo.com/

Back to top Go down

Text Navigation Bar hover phpbb3  Empty Re: Text Navigation Bar hover phpbb3

Post by JAN2XONLINE 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
JAN2XONLINE
Forumember

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

http://animeph.4umer.com/

Back to top Go down

Text Navigation Bar hover phpbb3  Empty Re: Text Navigation Bar hover phpbb3

Post by Sanket 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
Sanket
ForumGuru

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

Back to top Go down

Text Navigation Bar hover phpbb3  Empty Re: Text Navigation Bar hover phpbb3

Post by JAN2XONLINE 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
JAN2XONLINE
Forumember

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

http://animeph.4umer.com/

Back to top Go down

Text Navigation Bar hover phpbb3  Empty Re: Text Navigation Bar hover phpbb3

Post by Cassius Dio 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
Cassius Dio
Forumember

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

http://beatles.forummo.com/

Back to top Go down

Text Navigation Bar hover phpbb3  Empty Re: Text Navigation Bar hover phpbb3

Post by JAN2XONLINE 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
JAN2XONLINE
Forumember

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

http://animeph.4umer.com/

Back to top Go down

Text Navigation Bar hover phpbb3  Empty Re: Text Navigation Bar hover phpbb3

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

Have you checked "All pages" to "Placement" field?
Cassius Dio
Cassius Dio
Forumember

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

http://beatles.forummo.com/

Back to top Go down

Text Navigation Bar hover phpbb3  Empty Re: Text Navigation Bar hover phpbb3

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

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

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

http://animeph.4umer.com/

Back to top Go down

Back to top

- Similar topics

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