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.

How to change the underlined colour from the Forumotion navbar & sticky navbar

View previous topic View next topic Go down

Solved How to change the underlined colour from the Forumotion navbar & sticky navbar

Post by Bigtuber on February 28th 2016, 9:44 pm

Technical Details


Forum version : #phpBB3
Position : Founder
Concerned browser(s) : Mozilla Firefox
Who the problem concerns : All members
When the problem appeared : Since I installed the Forumotion navbar & sticky navbar
Forum link : http://bigtuber5702.forumieren.com/

Description of problem

Hello!

I have already searched for this issue, but I haven't found my answer.

I use the forumotion navbar and the sticky navbar (see the CSS codes below)

Sticky navbar:
Code:
  /* sticky nav main */
        #fa_sticky_nav {
          font-size:0; /* hide whitespace */
          text-align:center;
          background:url('http://i84.servimg.com/u/f84/19/26/29/54/hgnavb11.png');
          border-bottom:1px solid #F7D081 !important;
          border-top:1px solid #F7D081 !important;
  height:30px;
          position:fixed;
          right:0;
          z-index:999;
          overflow:hidden;
          transition:top 200ms linear, width 600ms ease-in-out;
        }
       
        #fa_sticky_nav li { display:inline } /* navlist adjustment */
       
       
        /* sticky menu links */
        #fa_sticky_nav a.mainmenu {
          color:#F7D081;
          font-size:13px;
          font-weight:bold;
          font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
          background:url('http://i18.servimg.com/u/f18/18/45/41/65/nav10.png') repeat-x 0px 30px;
          display:inline-block;
          padding:0 10px;
          height:30px;
          line-height:30px;
          transition:200ms;
        }
       
        #fa_sticky_nav a.mainmenu:hover, #fa_sticky_nav a.mainmenu.fa_navactif {
          background-position:0 25px;
        }
       
       
        /* sticky nav toggler */
        #fa_sticky_toggle {
          background:url('http://i21.servimg.com/u/f21/18/21/41/30/omnibo10.png') no-repeat 0 0 #FAFAFA;
          border:1px solid #CCC;
          border-right:none;
          display:inline-block;
          height:29px;
          width:30px;
          position:fixed;
          right:0;
          z-index:999;
          transition:top 200ms linear;
        }
       
        #fa_sticky_toggle:hover {
  background-position:-30px 0
color:#ffa600
}
       
       
        /* make hidden toolbar similar to toggler */
        #fa_toolbar_hidden {
          border-radius:0 !important;
          border:1px solid #CCC;
          border-right:0;
          border-top:0;
        }
       
       
        /* post offset fix */
        .post div[style*="-30px;"] {
          top:-60px !important;
        }


Forumotion navbar:
Code:
#page-header .navbar { background:none }
        #page-header .navbar .linklist li { font-size:0 }
        #page-header .navbar .linklist {
          { background:url('http://i84.servimg.com/u/f84/19/26/29/54/hgnavb11.png') }
          border:none;
          margin:-9px -10px 0px -10px;
        }
       
        #page-header a.mainmenu {
          color:#F7D081;
          font-size:13px;
          font-weight:bold;
          font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
          background:url('http://i21.servimg.com/u/f21/18/21/41/30/nav10.png') repeat-x 0px 45px;
          display:inline-block;
          height:45px;
          line-height:45px;
          padding:0px 12px;
          transition:250ms;
        }
       
        #page-header a.mainmenu:hover { background-position:0 40px }

Now I want to chance the underline if you hover (see screenshots)





I have already tried to colour them with "color:#XXX" but that don't work. :o

Does anyone know the solution? Smile


Best regards


Last edited by Bigtuber57 on February 29th 2016, 5:56 pm; edited 5 times in total

Bigtuber
Forumember

Male Posts : 106
Reputation : 3
Language : German, English
Location : Germany

http://kingsroadforum.forumieren.com/

Back to top Go down

Solved Re: How to change the underlined colour from the Forumotion navbar & sticky navbar

Post by APE on February 28th 2016, 10:40 pm

Hello

yes the problem comes from this part of the code

Wink

Code:
/* sticky menu links */
        #fa_sticky_nav a.mainmenu {
          color:#F7D081;
          font-size:13px;
          font-weight:bold;
          font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
          background:url('http://i18.servimg.com/u/f18/18/45/41/65/nav10.png') repeat-x 0px 30px;
          display:inline-block;
          padding:0 10px;
          height:30px;
          line-height:30px;
          transition:200ms;
        }

The line is made by a image
Code:
background:url('http://i18.servimg.com/u/f18/18/45/41/65/nav10.png') repeat-x 0px 30px;

You need to make a new image to put in its Place

This is the one you have in your toolbar now
Code:
http://i21.servimg.com/u/f21/18/21/41/30/nav10.png





APE
Manager
Manager

Male Posts : 8336
Reputation : 718
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: How to change the underlined colour from the Forumotion navbar & sticky navbar

Post by Bigtuber on February 29th 2016, 7:09 am

Wow, it works perfectly now. Smile

Thank you very much, Ape!


Edit:

Ah, you also may know the code for this? :




How to code the underline to appear if you are on this site? Smile

Bigtuber
Forumember

Male Posts : 106
Reputation : 3
Language : German, English
Location : Germany

http://kingsroadforum.forumieren.com/

Back to top Go down

Solved Re: How to change the underlined colour from the Forumotion navbar & sticky navbar

Post by APE on February 29th 2016, 12:42 pm

Not sure if it will do all your tabs on profile as i can not see them as i am not a member Think


Code:
#tabs a:hover span {
background-position: 100% -70px;
color: #F7D081;
font-size: 13px;
font-weight: bold;
font-family: "Trebuchet MS", Arial, Verdana, Sans-serif;
background: url('http://i84.servimg.com/u/f84/19/42/91/58/navbar11.png') repeat-x 0px 30px;
display: inline-block;
padding: 0 20px;
height: 33px;
line-height: 30px;
transition: 200ms;
}


#tabs a span {
background: none no-repeat 100% -35px;
color: #000;
display: block;
float: left;
padding: 6px 10px 6px 5px;
white-space: nowrap;
height: 20px;
}



Also Find:
Code:
#tabs .activetab a span {
background-position: 100% 0;
color: #333;
padding-bottom: 7px;
}



And remove the bottom line:
Code:
padding-bottom: 7px;





APE
Manager
Manager

Male Posts : 8336
Reputation : 718
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: How to change the underlined colour from the Forumotion navbar & sticky navbar

Post by Bigtuber on February 29th 2016, 4:11 pm

Hello Ape,

I am sorry for my bad explanation.

I mean, if you are for example on the portal, the underlined colour is there under the portal (and u don't need to hover). So it shows you, where you are, like here on forumotion.


But also thank you for your code regarding the same feature with the profile settings.
I just saw that now..And I would like to have this too like here Smile
See my result with your codes:




Would like to have this:





Best regards




Bigtuber
Forumember

Male Posts : 106
Reputation : 3
Language : German, English
Location : Germany

http://kingsroadforum.forumieren.com/

Back to top Go down

Solved Re: How to change the underlined colour from the Forumotion navbar & sticky navbar

Post by APE on February 29th 2016, 4:18 pm

Sad I'm sorry I Do not know the code for that one Sad





APE
Manager
Manager

Male Posts : 8336
Reputation : 718
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: How to change the underlined colour from the Forumotion navbar & sticky navbar

Post by Bigtuber on February 29th 2016, 4:19 pm

@APE wrote:Sad I'm sorry I Do not know the code for that one Sad

Anyway, thank you Smile

Maybe Ange Tuteur know's the code? Very Happy

Bigtuber
Forumember

Male Posts : 106
Reputation : 3
Language : German, English
Location : Germany

http://kingsroadforum.forumieren.com/

Back to top Go down

Solved Re: How to change the underlined colour from the Forumotion navbar & sticky navbar

Post by APE on February 29th 2016, 4:20 pm

LOL i am 100% sure he does





APE
Manager
Manager

Male Posts : 8336
Reputation : 718
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: How to change the underlined colour from the Forumotion navbar & sticky navbar

Post by Ange Tuteur on February 29th 2016, 4:29 pm

Hey,

Add this script to JS codes management :
Code:
// Adds a class to the currently active page in the navigation
$(function() {
  var head = document.getElementById('page-header');
 
  if (head) {
    for (var cleanURI = window.location.href.replace(/\?.*|#.*/, ''), a = head.getElementsByTagName('A'), i = 0, j = a.length; i < j; i++) {
      if (/mainmenu/.test(a[i].className) && cleanURI == a[i].href.replace(/\?.*|#.*/, '')) {
        a[i].className += ' fa_navactif';
        break;
      }
    }
  }
});
Ensure the placement is in all the pages.

After that you just need to add this selector set to your hover CSS rule :
Code:
#page-header a.mainmenu.fa_navactif

making this :
Code:
#page-header a.mainmenu.fa_navactif { background-position:0 40px }

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to change the underlined colour from the Forumotion navbar & sticky navbar

Post by Bigtuber on February 29th 2016, 4:37 pm

This is amazing, thank you very much, Ange Tuteur!

And the same for the profile settings? Very Happy






Bigtuber
Forumember

Male Posts : 106
Reputation : 3
Language : German, English
Location : Germany

http://kingsroadforum.forumieren.com/

Back to top Go down

Solved Re: How to change the underlined colour from the Forumotion navbar & sticky navbar

Post by Ange Tuteur on February 29th 2016, 4:39 pm

This CSS should work for that :
Code:
#tabs {
  background:#FFF;
  border:1px solid #DDD;
  border-bottom:none;
  border-radius:3px 3px 0 0;
  margin:20px 10px 0px 7px;
  overflow:hidden;
}

#tabs a span {
  color:#333;
  padding:0;
}

#tabs a {
  background:url('http://i18.servimg.com/u/f18/18/45/41/65/nav10.png') repeat-x 0 28px transparent;
  border-right:1px solid #DDD;
  padding:0px 12px;
  line-height:28px;
  height:28px;
  margin:0;
  transition:200ms;
}

#tabs a:hover span { color:#39C }
#tabs a:hover {
  background-color:transparent;
  background-position:0 25px;
}

#tabs .activetab a span {
  color:#39C;
  padding:0;
}

#tabs .activetab a {
  background-color:transparent;
  background-position:0 25px;
  cursor:default;
}
 
#tabs .activetab a { background-position:0 25px !important }
#tabs .activetab a:hover span { color:#39C }
 
#profile-advanced-layout #tabs #new-message-link { top:-35px }
#profile-advanced-layout #tabs #new-message-link a {
  border:none;
  padding:0;
}

#profile-tab-field-profil dl dt, #profile-tab-field-profil dl dt span, #ucp fieldset dl dt label, #ucp fieldset dt, #ucp fieldset dt span {
  color:#39C !important;
  font-weight:bold;
}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to change the underlined colour from the Forumotion navbar & sticky navbar

Post by Bigtuber on February 29th 2016, 4:41 pm

Ha, you are a pro!

It works, I just have to edit the colours Smile




Thanks! Problem done.


Edit:

One moment!
And for the sticky navbar? (Underlined colour shows you where you are)
Do you have a code for this too? Very Happy


Bigtuber
Forumember

Male Posts : 106
Reputation : 3
Language : German, English
Location : Germany

http://kingsroadforum.forumieren.com/

Back to top Go down

Solved Re: How to change the underlined colour from the Forumotion navbar & sticky navbar

Post by Ange Tuteur on February 29th 2016, 5:26 pm

Should need to do a similar thing. Here the CSS :
Code:
#fa_sticky_nav a.mainmenu.fa_navactif {
  background-position:0 25px;
}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to change the underlined colour from the Forumotion navbar & sticky navbar

Post by Ange Tuteur on February 29th 2016, 5:26 pm

@Ange Tuteur wrote:Should need to do a similar thing. Here's the CSS :
Code:
#fa_sticky_nav a.mainmenu.fa_navactif {
  background-position:0 25px;
}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to change the underlined colour from the Forumotion navbar & sticky navbar

Post by Bigtuber on February 29th 2016, 5:37 pm

Hi Ange Tuteur,

unfortunalety that CSS code does not work. Sad

Bigtuber
Forumember

Male Posts : 106
Reputation : 3
Language : German, English
Location : Germany

http://kingsroadforum.forumieren.com/

Back to top Go down

Solved Re: How to change the underlined colour from the Forumotion navbar & sticky navbar

Post by Ange Tuteur on February 29th 2016, 5:45 pm

Hmm.. then try editing the sticky nav script and place this at the very beginning :
Code:
$(function() {

and this at the vary end :
Code:
});

That should change the order of execution.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to change the underlined colour from the Forumotion navbar & sticky navbar

Post by Bigtuber on February 29th 2016, 5:55 pm

Works perfectly, thank you! Smile

Bigtuber
Forumember

Male Posts : 106
Reputation : 3
Language : German, English
Location : Germany

http://kingsroadforum.forumieren.com/

Back to top Go down

Solved Re: How to change the underlined colour from the Forumotion navbar & sticky navbar

Post by SLGray on February 29th 2016, 6:48 pm

Topic solved and archived


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35669
Reputation : 2375
Language : English
Location : United States

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