Nevelynn
Straight as a circle.
Hello, I'm relatively new to this coding thing and the past few days I've been racking my brain trying to find a code to get fancier tabs.
Now I've seen some interesting ones on the site, but I havent been able to find a way to make them to work for me.
I'm looking for tabs either with names or symbols, that fit the theme (black,white,gray) and intergrate better (fit in the box, above, below or next to it?) .
If there is anyone that can help me with this, I'd be forever grateful!
Now I've seen some interesting ones on the site, but I havent been able to find a way to make them to work for me.
I'm looking for tabs either with names or symbols, that fit the theme (black,white,gray) and intergrate better (fit in the box, above, below or next to it?) .
If there is anyone that can help me with this, I'd be forever grateful!
Code:
[tabs]
[Tab=I][bg=white; width: 500px; padding: 0px; overflow: hidden;][border=0px; bg=white; font-family: 'Playfair Display'; font-size: 35px; float: left; height: 35px; ]Welcome[/border][bg=transparent; background: url('https://i.imgur.com/1gahFiR.png'); overflow-y: scroll; overflow-x: hidden; position: relative; width: 505px; height: 400px;][size=3]"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio."
"Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio."
"Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
"Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio."
[/size][/bg][/bg][/tab]
[Tab=II][bg=white; width: 500px; padding: 0px; overflow: hidden;][border=0px; bg=white; font-family: 'Playfair Display'; font-size: 35px; float: left; height: 35px; ]Premise[/border][bg=transparent; background: url('https://i.imgur.com/1gahFiR.png'); overflow-y: scroll; overflow-x: hidden; position: relative; width: 505px; height: 400px;][size=3]
...
[/size][/bg][/bg][/tab]
[Tab=III][bg=white; width: 500px; padding: 0px; overflow: hidden;][border=0px; bg=white; font-family: 'Playfair Display'; font-size: 35px; float: left; height: 35px; ]Rules[/border][bg=transparent; background: url('https://i.imgur.com/1gahFiR.png'); overflow-y: scroll; overflow-x: hidden; position: relative; width: 505px; height: 400px;][size=3]
...
[/size][/bg][/bg][/tab]
[Tab=III][bg=white; width: 500px; padding: 0px; overflow: hidden;][border=0px; bg=white; font-family: 'Playfair Display'; font-size: 35px; float: left; height: 35px; ]Characters[/border][bg=transparent; background: url('https://i.imgur.com/1gahFiR.png'); overflow-y: scroll; overflow-x: hidden; position: relative; width: 505px; height: 400px;][size=3]
...
[/size][/bg][/bg][/tab]
[Tab=IV][bg=white; width: 500px; padding: 0px; overflow: hidden;][border=0px; bg=white; font-family: 'Playfair Display'; font-size: 35px; float: left; height: 35px; ]Other[/border][bg=transparent; background: url('https://i.imgur.com/1gahFiR.png'); overflow-y: scroll; overflow-x: hidden; position: relative; width: 505px; height: 400px;][size=3]
...
[/size][/bg][/bg][/tab]
[/tabs]
Code:
[bg=white; background: url('https://i.imgur.com/Hl1taUf.png'); overflow-x: hidden; position: absolute; z-index:2; margin: left; left: 0px; top: 175px; width: 480px; height: 430px;][/bg]
[border=0px; margin:left; left: 0px; width: 480px; height: 25px; background: gray; position: absolute; top: 85px; pointer-events: none; z-index: 2; display: flex; flex-wrap: no-wrap;]
[border=0px; width: 33px; height: 20px; position: relative; top: -8px; margin-left: 20px; font-size: 14px; color: black; text-align: center;][color=black][size=1]HOME[/size] [/color][/border]
[border=0px; width: 33px; height: 20px; position: relative; top: -8px; margin-left: 10px; font-size: 14px; color: black; text-align: center;][size=1]INFO[/size][/border]
[border=0px; width: 33px; height: 20px; position: relative; top: -8px; margin-left: 10px; font-size: 14px; color: black; text-align: center;][size=1]RULES[/size][/border]
[border=0px; width: 33px; height: 20px; position: relative; top: -8px; margin-left: 10px; font-size: 14px; color: black; text-align: center;][size=1]APPLY[/size][/border][/border]
[border=0px; width: 480px; height: 500px; overflow: hidden;] [tabs][tab=1] [border=0px; bg=white; background: white; position: absolute; margin: left; left: 0px; font-family: 'Playfair Display'; font-size: 35px; height: 35px; width: 480px; top: 120px;][color=gray][right]Welcome[/right][/color][/border]
...
[/bg][/tab]
[tab=2] [border=0px; bg=white; background: white; position: absolute; margin: left; left: 0px; font-family: 'Playfair Display'; font-size: 35px; height: 35px; width: 480px; top: 120px;][color=gray][right]Premise[/right][/color][/border]
...
[/bg][/tab]
[tab=2] [border=0px; bg=white; background: white; position: absolute; margin: left; left: 0px; font-family: 'Playfair Display'; font-size: 35px; height: 35px; width: 480px; top: 120px;][color=gray][right]Rules[/right][/color][/border]
...
[/bg][/tab]
[tab=2] [border=0px; bg=white; background: white; position: absolute; margin: left; left: 0px; font-family: 'Playfair Display'; font-size: 35px; height: 35px; width: 480px; top: 120px;][color=gray][right]Characters[/right][/color][/border]
...
[/bg][/tab]
[/tabs][/border]
Last edited:
