What's new
  • When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Help Fancier Tabs

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!

  • Welcome
    "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."

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:

weldherwings

:𝘭𝘦 𝘤𝘭𝘰𝘸𝘯:
hi love! As far as I’m aware, you can’t change the colour of the tabs. However, what I’ve been doing is creating a border tag that covers the tags and acts as an image map if that makes sense? I’m away for the weekend but feel to message me any questions and I’ll try to help as much as possible!
 

Nevelynn

Straight as a circle.
weldherwings weldherwings
I think I have a vague idea of what you mean, if it is what you mean, kind of what I did with the scroll bar?
Then add different images, overlays or links and... and... *short-circuits*
In any case I would really appreciate the help if you can find the time.
You would be my forever hero!
 

Nevelynn

Straight as a circle.


HOME

INFO

RULES

APPLY

  • Welcome​
    ...
    [/bg]


weldherwings weldherwings
This is what I've managed so far, now to get the text and scroll in/on there x.x
 
Last edited:

Users Who Are Viewing This Thread (Users: 1, Guests: 1)

Top