MyBB Support

Tabbed menu help?

Submitted by Maedrys, , Thread ID: 20204

Thread Closed
Maedrys
Junior Member
Level:
0
Reputation:
6
Posts:
57
Likes:
2
Credits:
39
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?

Faded
User Icon
Legend
Level:
21
Reputation:
215
Posts:
10.2K
Likes:
1.12K
Credits:
15K
03-04-2016, 10:31 PM
#2
Edit CSS?..
[Image: InZ3hGx.png]

RE: Tabbed menu help?

Maedrys
Junior Member
Level:
0
Reputation:
6
Posts:
57
Likes:
2
Credits:
39
OP
03-04-2016, 10:32 PM
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?

D4NK
NulledBB
Supreme
Level:
0
Reputation:
25
Posts:
124
Likes:
13
Credits:
156
03-04-2016, 10:34 PM
#4
Try following this Tutorial. Tongue

RE: Tabbed menu help?

Maedrys
Junior Member
Level:
0
Reputation:
6
Posts:
57
Likes:
2
Credits:
39
OP
03-04-2016, 10:37 PM
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?

Elysian
hey
Level:
0
Reputation:
34
Posts:
467
Likes:
22
Credits:
44
06-04-2016, 01:04 PM
#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?

Maedrys
Junior Member
Level:
0
Reputation:
6
Posts:
57
Likes:
2
Credits:
39
OP
06-04-2016, 01:07 PM
#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?

Tom
Tom yum soup <3
Prime
Level:
0
Reputation:
45
Posts:
1.51K
Likes:
97
Credits:
1.62K
06-04-2016, 02:05 PM
#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?

Skryptec
User Icon
Senior Member
Level:
0
Reputation:
60
Posts:
717
Likes:
27
Credits:
852
06-04-2016, 02:30 PM
#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?

devil
Not Human Anymore
Level:
0
Reputation:
72
Posts:
1.92K
Likes:
143
Credits:
1
06-04-2016, 04:03 PM
#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)