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.

Forum appearance - navbar help.

View previous topic View next topic Go down

Solved Forum appearance - navbar help.

Post by FreeRiver on April 6th 2015, 7:12 pm

Ola. So me and my friends have been trying to make the skin of our forum to look like this (sorry if this is advertising). I've found similar template in hitskin and installed it on our forum. Now it looks like this. My problem is that i need to make the buttons on the navbar to look like the ones on that 1Game template, the original one, and i'm bad at CSS coding, so what i'm asking is if anyone can help me? Or give me any kind of direction on what i need to do, and i'll try to  fill the rest of the coding by myself!?


Last edited by FreeRiver on April 7th 2015, 3:48 pm; edited 1 time in total

FreeRiver
New Member

Posts : 9
Reputation : 1
Language : Bulgarian

Back to top Go down

Solved Re: Forum appearance - navbar help.

Post by FreeRiver on April 6th 2015, 10:35 pm

Ok, so i came up with this script

Code:
#i_icon_mini_index {
    -moz-box-shadow:inset 0px 1px 0px 0px #1f1f1f;
    -webkit-box-shadow:inset 0px 1px 0px 0px #1f1f1f;
    box-shadow:inset 0px 1px 0px 0px #1f1f1f;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #2c2c2c), color-stop(1, #222) );
    background:-moz-linear-gradient( center top, #2c2c2c 5%, #222 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2c2c2c', endColorstr='#222');
    background-color:#2f2f2f;
    -webkit-border-top-left-radius:0px;
    -moz-border-radius-topleft:0px;
    border-top-left-radius:0px;
    -webkit-border-top-right-radius:0px;
    -moz-border-radius-topright:0px;
    border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-radius-bottomright:0px;
    border-bottom-right-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    border-bottom-left-radius:0px;
    text-indent:0;
    border:1px solid #303030;
    display:inline-block;
    color:#eee;
    font-family:Trebuchet MS;
    font-size:13px;
    font-weight:bold;
    font-style:normal;
    height:30px;
    line-height:30px;
    width:120px;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #000;
}
#i_icon_mini_index:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #161616), color-stop(1, #232323) );
    background:-moz-linear-gradient( center top, #161616 5%, #232323 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#161616', endColorstr='#232323');
    background-color:#161616;
}.buttonix:active {
    position:relative;
    top:1px;
}

#i_icon_mini_portal{
    -moz-box-shadow:inset 0px 1px 0px 0px #1f1f1f;
    -webkit-box-shadow:inset 0px 1px 0px 0px #1f1f1f;
    box-shadow:inset 0px 1px 0px 0px #1f1f1f;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #2c2c2c), color-stop(1, #222) );
    background:-moz-linear-gradient( center top, #2c2c2c 5%, #222 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2c2c2c', endColorstr='#222');
    background-color:#2f2f2f;
    -webkit-border-top-left-radius:0px;
    -moz-border-radius-topleft:0px;
    border-top-left-radius:0px;
    -webkit-border-top-right-radius:0px;
    -moz-border-radius-topright:0px;
    border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-radius-bottomright:0px;
    border-bottom-right-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    border-bottom-left-radius:0px;
    text-indent:0;
    border:1px solid #303030;
    display:inline-block;
    color:#eee;
    font-family:Trebuchet MS;
    font-size:13px;
    font-weight:bold;
    font-style:normal;
    height:30px;
    line-height:30px;
    width:120px;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #000;
}
#i_icon_mini_portal:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #161616), color-stop(1, #232323) );
    background:-moz-linear-gradient( center top, #161616 5%, #232323 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#161616', endColorstr='#232323');
    background-color:#161616;
}.buttonix:active {
    position:relative;
    top:1px;
}

#i_icon_mini_profile {
    -moz-box-shadow:inset 0px 1px 0px 0px #1f1f1f;
    -webkit-box-shadow:inset 0px 1px 0px 0px #1f1f1f;
    box-shadow:inset 0px 1px 0px 0px #1f1f1f;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #2c2c2c), color-stop(1, #222) );
    background:-moz-linear-gradient( center top, #2c2c2c 5%, #222 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2c2c2c', endColorstr='#222');
    background-color:#2f2f2f;
    -webkit-border-top-left-radius:0px;
    -moz-border-radius-topleft:0px;
    border-top-left-radius:0px;
    -webkit-border-top-right-radius:0px;
    -moz-border-radius-topright:0px;
    border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-radius-bottomright:0px;
    border-bottom-right-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    border-bottom-left-radius:0px;
    text-indent:0;
    border:1px solid #303030;
    display:inline-block;
    color:#eee;
    font-family:Trebuchet MS;
    font-size:13px;
    font-weight:bold;
    font-style:normal;
    height:30px;
    line-height:30px;
    width:120px;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #000;
}
#i_icon_mini_profile:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #161616), color-stop(1, #232323) );
    background:-moz-linear-gradient( center top, #161616 5%, #232323 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#161616', endColorstr='#232323');
    background-color:#161616;
}.buttonix:active {
    position:relative;
    top:1px;
}

#i_icon_mini_calendar {
    -moz-box-shadow:inset 0px 1px 0px 0px #1f1f1f;
    -webkit-box-shadow:inset 0px 1px 0px 0px #1f1f1f;
    box-shadow:inset 0px 1px 0px 0px #1f1f1f;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #2c2c2c), color-stop(1, #222) );
    background:-moz-linear-gradient( center top, #2c2c2c 5%, #222 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2c2c2c', endColorstr='#222');
    background-color:#2f2f2f;
    -webkit-border-top-left-radius:0px;
    -moz-border-radius-topleft:0px;
    border-top-left-radius:0px;
    -webkit-border-top-right-radius:0px;
    -moz-border-radius-topright:0px;
    border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-radius-bottomright:0px;
    border-bottom-right-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    border-bottom-left-radius:0px;
    text-indent:0;
    border:1px solid #303030;
    display:inline-block;
    color:#eee;
    font-family:Trebuchet MS;
    font-size:13px;
    font-weight:bold;
    font-style:normal;
    height:30px;
    line-height:30px;
    width:120px;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #000;
}
#i_icon_mini_calendar:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #161616), color-stop(1, #232323) );
    background:-moz-linear-gradient( center top, #161616 5%, #232323 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#161616', endColorstr='#232323');
    background-color:#161616;
}.buttonix:active {
    position:relative;
    top:1px;
}

#i_icon_mini_gallery {
    -moz-box-shadow:inset 0px 1px 0px 0px #1f1f1f;
    -webkit-box-shadow:inset 0px 1px 0px 0px #1f1f1f;
    box-shadow:inset 0px 1px 0px 0px #1f1f1f;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #2c2c2c), color-stop(1, #222) );
    background:-moz-linear-gradient( center top, #2c2c2c 5%, #222 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2c2c2c', endColorstr='#222');
    background-color:#2f2f2f;
    -webkit-border-top-left-radius:0px;
    -moz-border-radius-topleft:0px;
    border-top-left-radius:0px;
    -webkit-border-top-right-radius:0px;
    -moz-border-radius-topright:0px;
    border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-radius-bottomright:0px;
    border-bottom-right-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    border-bottom-left-radius:0px;
    text-indent:0;
    border:1px solid #303030;
    display:inline-block;
    color:#eee;
    font-family:Trebuchet MS;
    font-size:13px;
    font-weight:bold;
    font-style:normal;
    height:30px;
    line-height:30px;
    width:120px;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #000;
}
#i_icon_mini_gallery:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #161616), color-stop(1, #232323) );
    background:-moz-linear-gradient( center top, #161616 5%, #232323 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#161616', endColorstr='#232323');
    background-color:#161616;
}.buttonix:active {
    position:relative;
    top:1px;
}

#i_icon_mini_message {
    -moz-box-shadow:inset 0px 1px 0px 0px #1f1f1f;
    -webkit-box-shadow:inset 0px 1px 0px 0px #1f1f1f;
    box-shadow:inset 0px 1px 0px 0px #1f1f1f;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #2c2c2c), color-stop(1, #222) );
    background:-moz-linear-gradient( center top, #2c2c2c 5%, #222 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2c2c2c', endColorstr='#222');
    background-color:#2f2f2f;
    -webkit-border-top-left-radius:0px;
    -moz-border-radius-topleft:0px;
    border-top-left-radius:0px;
    -webkit-border-top-right-radius:0px;
    -moz-border-radius-topright:0px;
    border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-radius-bottomright:0px;
    border-bottom-right-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    border-bottom-left-radius:0px;
    text-indent:0;
    border:1px solid #303030;
    display:inline-block;
    color:#eee;
    font-family:Trebuchet MS;
    font-size:13px;
    font-weight:bold;
    font-style:normal;
    height:30px;
    line-height:30px;
    width:120px;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #000;
}
#i_icon_mini_message:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #161616), color-stop(1, #232323) );
    background:-moz-linear-gradient( center top, #161616 5%, #232323 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#161616', endColorstr='#232323');
    background-color:#161616;
}.buttonix:active {
    position:relative;
    top:1px;
}

#i_icon_mini_new_message {
    -moz-box-shadow:inset 0px 1px 0px 0px #1f1f1f;
    -webkit-box-shadow:inset 0px 1px 0px 0px #1f1f1f;
    box-shadow:inset 0px 1px 0px 0px #1f1f1f;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #2c2c2c), color-stop(1, #222) );
    background:-moz-linear-gradient( center top, #2c2c2c 5%, #222 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2c2c2c', endColorstr='#222');
    background-color:#2f2f2f;
    -webkit-border-top-left-radius:0px;
    -moz-border-radius-topleft:0px;
    border-top-left-radius:0px;
    -webkit-border-top-right-radius:0px;
    -moz-border-radius-topright:0px;
    border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-radius-bottomright:0px;
    border-bottom-right-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    border-bottom-left-radius:0px;
    text-indent:0;
    border:1px solid #303030;
    display:inline-block;
    color:#eee;
    font-family:Trebuchet MS;
    font-size:13px;
    font-weight:bold;
    font-style:normal;
    height:30px;
    line-height:30px;
    width:120px;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #000;
}
#i_icon_mini_new_message:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #161616), color-stop(1, #232323) );
    background:-moz-linear-gradient( center top, #161616 5%, #232323 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#161616', endColorstr='#232323');
    background-color:#161616;
}.buttonix:active {
    position:relative;
    top:1px;
}

#i_icon_mini_register {
    -moz-box-shadow:inset 0px 1px 0px 0px #1f1f1f;
    -webkit-box-shadow:inset 0px 1px 0px 0px #1f1f1f;
    box-shadow:inset 0px 1px 0px 0px #1f1f1f;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #2c2c2c), color-stop(1, #222) );
    background:-moz-linear-gradient( center top, #2c2c2c 5%, #222 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2c2c2c', endColorstr='#222');
    background-color:#2f2f2f;
    -webkit-border-top-left-radius:0px;
    -moz-border-radius-topleft:0px;
    border-top-left-radius:0px;
    -webkit-border-top-right-radius:0px;
    -moz-border-radius-topright:0px;
    border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-radius-bottomright:0px;
    border-bottom-right-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    border-bottom-left-radius:0px;
    text-indent:0;
    border:1px solid #303030;
    display:inline-block;
    color:#eee;
    font-family:Trebuchet MS;
    font-size:13px;
    font-weight:bold;
    font-style:normal;
    height:30px;
    line-height:30px;
    width:120px;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #000;
}
#i_icon_mini_register:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #161616), color-stop(1, #232323) );
    background:-moz-linear-gradient( center top, #161616 5%, #232323 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#161616', endColorstr='#232323');
    background-color:#161616;
}.buttonix:active {
    position:relative;
    top:1px;
}

#i_icon_mini_login {
    -moz-box-shadow:inset 0px 1px 0px 0px #1f1f1f;
    -webkit-box-shadow:inset 0px 1px 0px 0px #1f1f1f;
    box-shadow:inset 0px 1px 0px 0px #1f1f1f;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #2c2c2c), color-stop(1, #222) );
    background:-moz-linear-gradient( center top, #2c2c2c 5%, #222 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2c2c2c', endColorstr='#222');
    background-color:#2f2f2f;
    -webkit-border-top-left-radius:0px;
    -moz-border-radius-topleft:0px;
    border-top-left-radius:0px;
    -webkit-border-top-right-radius:0px;
    -moz-border-radius-topright:0px;
    border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-radius-bottomright:0px;
    border-bottom-right-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    border-bottom-left-radius:0px;
    text-indent:0;
    border:1px solid #303030;
    display:inline-block;
    color:#eee;
    font-family:Trebuchet MS;
    font-size:13px;
    font-weight:bold;
    font-style:normal;
    height:30px;
    line-height:30px;
    width:120px;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #000;
}
#i_icon_mini_login:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #161616), color-stop(1, #232323) );
    background:-moz-linear-gradient( center top, #161616 5%, #232323 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#161616', endColorstr='#232323');
    background-color:#161616;
}.buttonix:active {
    position:relative;
    top:1px;
}

#i_icon_mini_logout {
    -moz-box-shadow:inset 0px 1px 0px 0px #1f1f1f;
    -webkit-box-shadow:inset 0px 1px 0px 0px #1f1f1f;
    box-shadow:inset 0px 1px 0px 0px #1f1f1f;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #2c2c2c), color-stop(1, #222) );
    background:-moz-linear-gradient( center top, #2c2c2c 5%, #222 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2c2c2c', endColorstr='#222');
    background-color:#2f2f2f;
    -webkit-border-top-left-radius:0px;
    -moz-border-radius-topleft:0px;
    border-top-left-radius:0px;
    -webkit-border-top-right-radius:0px;
    -moz-border-radius-topright:0px;
    border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-radius-bottomright:0px;
    border-bottom-right-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    border-bottom-left-radius:0px;
    text-indent:0;
    border:1px solid #303030;
    display:inline-block;
    color:#eee;
    font-family:Trebuchet MS;
    font-size:13px;
    font-weight:bold;
    font-style:normal;
    height:30px;
    line-height:30px;
    width:120px;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #000;
}
#i_icon_mini_logout:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #161616), color-stop(1, #232323) );
    background:-moz-linear-gradient( center top, #161616 5%, #232323 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#161616', endColorstr='#232323');
    background-color:#161616;
}.buttonix:active {
    position:relative;
    top:1px;
    }
   
    #i_icon_mini_search {
    -moz-box-shadow:inset 0px 1px 0px 0px #1f1f1f;
    -webkit-box-shadow:inset 0px 1px 0px 0px #1f1f1f;
    box-shadow:inset 0px 1px 0px 0px #1f1f1f;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #2c2c2c), color-stop(1, #222) );
    background:-moz-linear-gradient( center top, #2c2c2c 5%, #222 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2c2c2c', endColorstr='#222');
    background-color:#2f2f2f;
    -webkit-border-top-left-radius:0px;
    -moz-border-radius-topleft:0px;
    border-top-left-radius:0px;
    -webkit-border-top-right-radius:0px;
    -moz-border-radius-topright:0px;
    border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-radius-bottomright:0px;
    border-bottom-right-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    border-bottom-left-radius:0px;
    text-indent:0;
    border:1px solid #303030;
    display:inline-block;
    color:#eee;
    font-family:Trebuchet MS;
    font-size:13px;
    font-weight:bold;
    font-style:normal;
    height:30px;
    line-height:30px;
    width:120px;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #000;
}
#i_icon_mini_search:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #161616), color-stop(1, #232323) );
    background:-moz-linear-gradient( center top, #161616 5%, #232323 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#161616', endColorstr='#232323');
    background-color:#161616;
}.buttonix:active {
    position:relative;
    top:1px;
}

But when i put it, the buttons appear blank, and i need to set the text for each one, how's the code for that?

FreeRiver
New Member

Posts : 9
Reputation : 1
Language : Bulgarian

Back to top Go down

Solved Re: Forum appearance - navbar help.

Post by Ange Tuteur on April 6th 2015, 10:44 pm

Hi @FreeRiver,

Add the following rules to your stylesheet :
Display > Colors > CSS stylesheet
Code:
a.mainmenu img { display:none }
a.mainmenu {
  color:#FFF;
  font-size:12px;
  font-weight:bold;
  font-family: "Open Sans",sans-serif;
  text-transform:uppercase;
  display:inline-block;
  padding:10px 12px;
  margin:3px 0;
  position:relative;

}
a.mainmenu:hover { color:#CCC }
a.mainmenu:before, a.mainmenu::before {
  content:".";
  font-size:0;
  background:#666;
  position:absolute;
  bottom:0;
  left:0;
  right:100%;
  height:3px;
  -webkit-transition:300ms;
          transition:300ms;
}
a.mainmenu:hover:before, a.mainmenu:hover::before { right:0 }
a.mainmenu:after, a.mainmenu::after {
  content:".";
  font-size:0;
  display:block;
  height:5px;
  width:5px;
  background:#999;
  position:absolute;
  top:15px;
  left:-10px;
}

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Forum appearance - navbar help.

Post by FreeRiver on April 6th 2015, 11:05 pm

Thanks, man, that really helped. But i just need to ask, can i force these changes to remain only on the navbar, because when i go to profile, the menus "preferences, signature, etc." are changed, too.

FreeRiver
New Member

Posts : 9
Reputation : 1
Language : Bulgarian

Back to top Go down

Solved Re: Forum appearance - navbar help.

Post by Ange Tuteur on April 7th 2015, 1:02 am

phpbb2 has a bad selector set, so you'll need to make modifications to the templates. Go to Administration Panel > Display > Templates > General > open the template overall_header Edit

Find :
Code:
<td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>

Replace by :
Code:
<td id="navbar" align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>

Save and publish. Add

Note that you must be logged into the founder account to make this modification. Once done, replace the CSS with this :
Code:
#navbar a.mainmenu img { display:none }
#navbar a.mainmenu {
  color:#FFF;
  font-size:12px;
  font-weight:bold;
  font-family: "Open Sans",sans-serif;
  text-transform:uppercase;
  display:inline-block;
  padding:10px 12px;
  margin:3px 0;
  position:relative;

}
#navbar a.mainmenu:hover { color:#CCC }
#navbar a.mainmenu:before, #navbar a.mainmenu::before {
  content:".";
  font-size:0;
  background:#666;
  position:absolute;
  bottom:0;
  left:0;
  right:100%;
  height:3px;
  -webkit-transition:300ms;
          transition:300ms;
}
#navbar a.mainmenu:hover:before, #navbar a.mainmenu:hover::before { right:0 }
#navbar a.mainmenu:after, #navbar a.mainmenu::after {
  content:".";
  font-size:0;
  display:block;
  height:5px;
  width:5px;
  background:#999;
  position:absolute;
  top:15px;
  left:-10px;
}

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Forum appearance - navbar help.

Post by FreeRiver on April 7th 2015, 2:23 am

Ok, i've done this and it all works. Last but not least, i wanna hide the gallery button and the groups button, i had a code wich helped me, but what should I change after i've done this?

FreeRiver
New Member

Posts : 9
Reputation : 1
Language : Bulgarian

Back to top Go down

Solved Re: Forum appearance - navbar help.

Post by Ange Tuteur on April 7th 2015, 5:41 am

Add this to your CSS stylesheet :
Code:
#navbar a.mainmenu[href="/groups"], #navbar a.mainmenu[href^="/gallery"] { display:none }

That should hide both links.

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Forum appearance - navbar help.

Post by Ange Tuteur on April 13th 2015, 7:43 am

Topic marked solved ; Archived.

Ange Tuteur
Forumaster

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

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