MyBB Support

Tabbed menu help?

Submitted by Maedrys, , Thread ID: 20204

Thread Closed
03-04-2016, 10:29 PM
#1
Hi guys,

I'm not sure if it's a bug or if it's because I'm using an outdated version of forum themes/tabbed menu (I'm using mybb1.8.7).

But, the tabbed menu isn't showing as I want it too, compared to how they show on other sites. Can anyone quickly provide assistance to a fix?

https://i.imgur.com/Z6qbZFC.png

https://i.imgur.com/Twb1N0o.png

Regards
Maedrys

RE: Tabbed menu help?

#2
Edit CSS?..
[Image: InZ3hGx.png]

RE: Tabbed menu help?

OP
This post was last modified: 03-04-2016, 10:33 PM by Maedrys
#3
Ive tried, but cannot find the right CSS details to get the same as the icyforums picture. :/

PS: Im a new coder. Smile

RE: Tabbed menu help?

#4
Try following this Tutorial. Tongue

RE: Tabbed menu help?

OP
This post was last modified: 04-04-2016, 07:14 PM by Maedrys
#5
03-04-2016, 10:34 PM
D4NK Wrote:
Try following this Tutorial. Tongue

Thanks bud, but thats a bit to much im not that good to go through that. Smile

Plugins are the best for me right now. Smile

Anyone that have time to help me make the Tabbed menu just like icyforums ? Smile

Thanks

RE: Tabbed menu help?

#6
I'd be willing to help, i'm a plugin developer myself.
It should be a simple css fix, message me.

RE: Tabbed menu help?

OP
#7
06-04-2016, 01:04 PM
Ataraxy Wrote:
I'd be willing to help, i'm a plugin developer myself.
It should be a simple css fix, message me.

I have sent you a message, thanks for your help. Smile

RE: Tabbed menu help?

#8
Just edit the CSS of the buttons. If you want the same just inspect element > sources and find the source of it.
I owe @A 267 credits
i owe akihisa 250 credits

RE: Tabbed menu help?

#9
Are you using MyTabs, because it looks like it...

If you are using Tabbed Menu, you can edit the tabs.css.
Code:
.shadetabs{
padding:3px 0;
margin-left:0;
margin-top:1px;
margin-bottom:15px;
list-style-type:none;
text-align:left;
font-family:Roboto,Arial,Sans-Serif
}

.shadetabs a:hover{
background-color:#404040;
-webkit-transition:background-color 50ms linear,color 50ms linear;
-moz-transition:background-color 50ms linear,color 50ms linear;
-o-transition:background-color 50ms linear,color 50ms linear;
-ms-transition:background-color 50ms linear,color 50ms linear;
transition:background-color 50ms linear,color 50ms linear
}

.shadetabs li a.selected{
position:relative;
background:#446599;
color:#fff
}

.shadetabs a.selected{
position:relative;
background:#FF5A63;
color:#fff
}

.shadetabs a{
display:inline-block;
margin:2px 0;
background-color:#303030;
position:relative;
z-index:1;
padding:8px;
margin-right:5px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
cursor:pointer;
text-decoration:none;
color:#bbb
}

.shadetabs li{
display:inline;
margin:0
}

.shadetabs a:hover{
color:#fff;
text-decoration:none;
}

.shadetabs li a{
display:inline-block;
margin:2px 0;
background-color:#303030;
position:relative;
z-index:1;padding:8px;
margin-right:5px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
cursor:pointer;
text-decoration:none;
color:#bbb
}

.shadetabs li a:hover{
color:#fff;
text-decoration:none;
background-color:#404040;
-webkit-transition:background-color 50ms linear,color 50ms linear;
-moz-transition:background-color 50ms linear,color 50ms linear;
-o-transition:background-color 50ms linear,color 50ms linear;
-ms-transition:background-color 50ms linear,color 50ms linear;
transition:background-color 50ms linear,color 50ms linear
}

.shadetabs li a.selected{
position:relative;
background:#446599;
color:#fff
}

.shadetabs li a.selected:hover{
text-decoration:none
}

.tabcontent{
display:none
}

@media print{

.tabcontent{
display:block !important
}
}
[Image: oAqtc2l.png]

RE: Tabbed menu help?

#10
06-04-2016, 02:30 PM
SQL Wrote:
Are you using MyTabs, because it looks like it...

If you are using Tabbed Menu, you can edit the tabs.css.
Code:
.shadetabs{
padding:3px 0;
margin-left:0;
margin-top:1px;
margin-bottom:15px;
list-style-type:none;
text-align:left;
font-family:Roboto,Arial,Sans-Serif
}

.shadetabs a:hover{
background-color:#404040;
-webkit-transition:background-color 50ms linear,color 50ms linear;
-moz-transition:background-color 50ms linear,color 50ms linear;
-o-transition:background-color 50ms linear,color 50ms linear;
-ms-transition:background-color 50ms linear,color 50ms linear;
transition:background-color 50ms linear,color 50ms linear
}

.shadetabs li a.selected{
position:relative;
background:#446599;
color:#fff
}

.shadetabs a.selected{
position:relative;
background:#FF5A63;
color:#fff
}

.shadetabs a{
display:inline-block;
margin:2px 0;
background-color:#303030;
position:relative;
z-index:1;
padding:8px;
margin-right:5px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
cursor:pointer;
text-decoration:none;
color:#bbb
}

.shadetabs li{
display:inline;
margin:0
}

.shadetabs a:hover{
color:#fff;
text-decoration:none;
}

.shadetabs li a{
display:inline-block;
margin:2px 0;
background-color:#303030;
position:relative;
z-index:1;padding:8px;
margin-right:5px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
cursor:pointer;
text-decoration:none;
color:#bbb
}

.shadetabs li a:hover{
color:#fff;
text-decoration:none;
background-color:#404040;
-webkit-transition:background-color 50ms linear,color 50ms linear;
-moz-transition:background-color 50ms linear,color 50ms linear;
-o-transition:background-color 50ms linear,color 50ms linear;
-ms-transition:background-color 50ms linear,color 50ms linear;
transition:background-color 50ms linear,color 50ms linear
}

.shadetabs li a.selected{
position:relative;
background:#446599;
color:#fff
}

.shadetabs li a.selected:hover{
text-decoration:none
}

.tabcontent{
display:none
}

@media print{

.tabcontent{
display:block !important
}
}

he is using tabbed menu and yes that CSS will work.

Users browsing this thread: 6 Guest(s)