You are viewing our Forum Archives. To view or take place in current topics click here.
[ MyBB ] Tabbed Menu Custom Tabs CSS Request
Posted:

[ MyBB ] Tabbed Menu Custom Tabs CSS RequestPosted:

Gnu
  • Christmas!
Status: Offline
Joined: Feb 19, 201311Year Member
Posts: 3,991
Reputation Power: 253
Status: Offline
Joined: Feb 19, 201311Year Member
Posts: 3,991
Reputation Power: 253
Can someone write up a css code so I can get my tabs like these?

for the MyBB Tabbed Menu 2.2 plugin

[ Register or Signin to view external links. ]

I appreciate it <3


+rep
#2. Posted:
Deftones
  • Summer 2023
Status: Offline
Joined: May 16, 201310Year Member
Posts: 8,519
Reputation Power: 1554
Status: Offline
Joined: May 16, 201310Year Member
Posts: 8,519
Reputation Power: 1554
So when the tab is selected it changes colour or when you're on that webpage the tab is defined to?
#3. Posted:
Gnu
  • V5 Launch
Status: Offline
Joined: Feb 19, 201311Year Member
Posts: 3,991
Reputation Power: 253
Status: Offline
Joined: Feb 19, 201311Year Member
Posts: 3,991
Reputation Power: 253
ZTG wrote So when the tab is selected it changes colour or when you're on that webpage the tab is defined to?


Yes

and I want the buttons in that shape and color
#4. Posted:
tortuga
  • Fairy Master
Status: Offline
Joined: Dec 25, 200914Year Member
Posts: 2,314
Reputation Power: 1686
Status: Offline
Joined: Dec 25, 200914Year Member
Posts: 2,314
Reputation Power: 1686
You haven't even provided the markup. We're not going to guess the selectors you're using.

You'll also be really lucky to find someone who is willing to do free work. Free help? Not a problem, but you have to do your part and actually show an attempt.
#5. Posted:
Gnu
  • TTG Contender
Status: Offline
Joined: Feb 19, 201311Year Member
Posts: 3,991
Reputation Power: 253
Status: Offline
Joined: Feb 19, 201311Year Member
Posts: 3,991
Reputation Power: 253
tortuga wrote You haven't even provided the markup. We're not going to guess the selectors you're using.

You'll also be really lucky to find someone who is willing to do free work. Free help? Not a problem, but you have to do your part and actually show an attempt.


huh? its just some simple css work from a plugin...
#6. Posted:
Sys
  • TTG Senior
Status: Offline
Joined: Dec 30, 201310Year Member
Posts: 1,331
Reputation Power: 69
Status: Offline
Joined: Dec 30, 201310Year Member
Posts: 1,331
Reputation Power: 69
You need to provide some html or whatever so we can style it. Every navigation is different
#7. Posted:
ProJimmyRustler
  • Summer 2018
Status: Offline
Joined: Jul 14, 20149Year Member
Posts: 1,720
Reputation Power: 71
Status: Offline
Joined: Jul 14, 20149Year Member
Posts: 1,720
Reputation Power: 71
Gnu wrote
tortuga wrote You haven't even provided the markup. We're not going to guess the selectors you're using.

You'll also be really lucky to find someone who is willing to do free work. Free help? Not a problem, but you have to do your part and actually show an attempt.


huh? its just some simple css work from a plugin...

It is simple CSS work, however we need to have some HTML to work with. As stated, we don't know what selectors you are using for the HTML.

If you want to give it a go, then you could check out the w3school's website for some CSS help.
for the cover you would just use a hover selector and have have the color change to what you want:


a:hover {
    color: red;
}

source: https://www.w3schools.com/cssref/sel_hover.asp


This CSS rule would change a hyperlink red when you hover over it with the mouse.

I mocked up a little menu that I think does what you want it to do.

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    border-radius: 0;
    margin: 5px;
    padding: 0px;
    overflow: hidden;
    background-color: #202020;
}

li {
    float: left;
}

li a {
    display: block;
    border-style: solid;
    border-color: #141414;
    border-width: 2px;
    border-radius: 5px;
    margin: 5px;
    color: white;
    text-align: center;
    padding: 12px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #B73B3D;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">General</a></li>
  <li><a href="#news">Technology</a></li>
  <li><a href="#contact">Coding & Design</a></li>
  <li><a href="#about">Entertainment</a></li>
  <li><a href="#about">Market</a></li>
  <li><a href="#about">Groups</a></li>
</ul>

</body>
</html>


Just copy the above code into this link:
[ Register or Signin to view external links. ]

Just mess with the CSS until you get what you want. It should look like this:

[ Register or Signin to view external links. ]
#8. Posted:
CriticaI
  • Supporter
Status: Offline
Joined: Nov 05, 201310Year Member
Posts: 2,737
Reputation Power: 448
Status: Offline
Joined: Nov 05, 201310Year Member
Posts: 2,737
Reputation Power: 448
This isn't usually done with just css.
Usually javascript or PHP is involved to determine which tab is associated with which page.
#9. Posted:
Cyimking
  • TTG Senior
Status: Offline
Joined: May 02, 201211Year Member
Posts: 1,129
Reputation Power: 34
Status: Offline
Joined: May 02, 201211Year Member
Posts: 1,129
Reputation Power: 34
Very easy to do... Of course, this is pseudo code. You will most likely have to add in a css class for :hover, :active, and :focus

Tabs are in a list so ...

1. Style the tabs

.navtabs li {
border: 1px solid black;
border-radius: 5px;
padding: 5px 8px;  // You will want to use rem instead of px
}


2. Style the active tab

.navtabs li.active{
background: red !important;
}


3. Style the link

.navtabs a {
color: grey;
}
Jump to:
You are viewing our Forum Archives. To view or take place in current topics click here.