👍 0

Posted 17/Mar/2024 20:47:48 (1 month ago)

QUOTE originally posted by Mio Xenoblade

been playing around with this for ages and i can't seem to work it out! how do i make tabs go to the right? i know how to make them vertical, but they go to the left and i can't work out what i need to change to make them go to the right.

can you give an example of what you're trying to do?

Mochi ✪ 21 ✪ they/he/kit

Your local catboy hoarding quirky, bashful, and docile mons!

500/500

Odds and Ends - Orthrus' - My Guide

Type Race and Hunts!

Current Hunt: Orthworm! Most Recent Melan: Nincada!

Mio Xenoblade

👍 0

Posted 17/Mar/2024 21:03:30 (1 month ago)
Edited 17/Mar/2024 21:03:41 (1 month ago)

essentially i'm making a free-to-use shop theme modelled after the shops in undertale/deltarune.

official example, screenshotted from deltarune

i'm trying to make the tabs go to the right, like how the "buy/sell/talk/exit" panels are in the image. here's my tabbed interface code:

.tabbed_interface { background: none; border: none; box-shadow: none; display: grid; grid-template-columns: auto 1fr; >ul{background: none; display: flex; flex-flow: column; justify-content: right;} & > ul { background: none; border: 4px solid white; box-shadow: none; & > li { background: none; padding: 1%; margin: 3px; margin-bottom: 5px; border: none; box-shadow: none; color: @text; &.tab-active { background: none; } } & > li:hover { cursor: pointer; } } > .tab, > .tab-active { background: none; color: @text; padding: 1%; border: 4px solid white; box-shadow: none; } }

with what it looks like now alongside my other code:

i just want to make the tabs go from the left to the right before i play around with sizing and stuff!

juno
mio is fine too!
| adult | any pronouns | pfq's otter hoarder f2u code ♡ code shop ♡ trade shop ♡ journal

JustCallMeMochi

👍 0

Posted 18/Mar/2024 00:17:57 (1 month ago)

i'm so sorry-- something happened irl and i got busy and i don't have the energy to do it 😭 i promise i will absolutely try to get to this

Mio Xenoblade

👍 0

Posted 18/Mar/2024 00:20:13 (1 month ago)

QUOTE originally posted by JustCallMeMochi

i'm so sorry-- something happened irl and i got busy and i don't have the energy to do it 😭 i promise i will absolutely try to get to this

don't worry abt it don't stress ;w; i'm gonna keep playing around with it myself after i've slept to see if i can work it out with a fresh mind

NoxianGayce

👍 0

Posted 25/Mar/2024 21:39:46 (1 month ago)

Hello, I'm working on learning CSS (mostly using this guide which is wonderful btw) but I'm trying to figure out how to get rid of something with my tab interface, the little space header on the top so it is more even with the top border

what it looks like

code for Style

[style] //colors// @bkg1: #aace9c; @bkg2: #529873; @text: #dfeeeb; @accent1: #6dcb99; @accent2: #00524c; //Code// .template{ background: @bkg2; border: 2px dashed @accent2; border-radius: 5px; font-size: 10pt; color: @text; padding: 1%; b,u,i {color: @text;} hr {border: 0px; width: 100%;} a, a:visited { color: @accent1; letter-spacing: 1px; trasition: all 5s; } a:hover {color: @accent2; letter-spacing: 4px; transition: all 500ms;} } div.tooltip_content {background: @text ; color: @bkg2; border: 2px dotted @accent2;} .bbcode_tooltip {border-bottom: 0px;} .panel {background: @bkg2; border: 1px dotted @accent2; color: @bkg2; &> h3 { > a {color: @accent2;} border: 1px solid @accent2; background: @bkg1; color: @text;} &> div {color: @text;a:link, a:visited {color: @text;}}} table {border: 2px dashed @accent2;} th {border: 1px solid @bkg2; color: @text; background: @accent2; text-align: center;} td {border: 1px solid @accent2; background: @bkg1; color: @text; text-align: center} .tabbed_interface {background: @bkg2; border: none; & > ul{background: @bkg1; border: 1px solid @accent2; & > li{background: @bkg2; border: 1px solid @accent2; padding: 0%; border: 1px solid @accent2; color: @text; &.tab-active{background: @accent1}} & > li:hover{cursor: pointer;}} > .tab, > .tab-active{background: @accent2; color: @text; padding: 0%;}}[/style][

❤️
⭐️
❤️

~Trade Shoppe~

TR

0

Forum Avatar

Greenbunny1998

👍 0

Posted 25/Mar/2024 23:41:09 (1 month ago)

QUOTE originally posted by NoxianGayce

Hello, I'm working on learning CSS (mostly using this guide which is wonderful btw) but I'm trying to figure out how to get rid of something with my tab interface, the little space header on the top so it is more even with the top border

what it looks like

code for Style

[style] //colors// @bkg1: #aace9c; @bkg2: #529873; @text: #dfeeeb; @accent1: #6dcb99; @accent2: #00524c; //Code// .template{ background: @bkg2; border: 2px dashed @accent2; border-radius: 5px; font-size: 10pt; color: @text; padding: 1%; b,u,i {color: @text;} hr {border: 0px; width: 100%;} a, a:visited { color: @accent1; letter-spacing: 1px; trasition: all 5s; } a:hover {color: @accent2; letter-spacing: 4px; transition: all 500ms;} } div.tooltip_content {background: @text ; color: @bkg2; border: 2px dotted @accent2;} .bbcode_tooltip {border-bottom: 0px;} .panel {background: @bkg2; border: 1px dotted @accent2; color: @bkg2; &> h3 { > a {color: @accent2;} border: 1px solid @accent2; background: @bkg1; color: @text;} &> div {color: @text;a:link, a:visited {color: @text;}}} table {border: 2px dashed @accent2;} th {border: 1px solid @bkg2; color: @text; background: @accent2; text-align: center;} td {border: 1px solid @accent2; background: @bkg1; color: @text; text-align: center} .tabbed_interface {background: @bkg2; border: none; & > ul{background: @bkg1; border: 1px solid @accent2; & > li{background: @bkg2; border: 1px solid @accent2; padding: 0%; border: 1px solid @accent2; color: @text; &.tab-active{background: @accent1}} & > li:hover{cursor: pointer;}} > .tab, > .tab-active{background: @accent2; color: @text; padding: 0%;}}[/style][

Might be because of spacing because when I tested Code without doing any changes with no spacing etc it pushed tab up a bit please say if this is what you was looking for:

First Tab
Second Tab
Third Tab

First Tab Text

Second Tab Text

Third Tab Text

If so here's the full code:

[sc=template][sc=tabbed_interface horizontal][ ][ul][ ][li]First Tab[/li][ ][li]Second Tab[/li][ ][li]Third Tab[/li][ ][/ul][ ][sc=tab-active]First Tab Text[/sc][ ][sc=tab]Second Tab Text[/sc][ ][sc=tab]Third Tab Text[/sc][ ][/sc] [/sc] [style] //colors// @bkg1: #aace9c; @bkg2: #529873; @text: #dfeeeb; @accent1: #6dcb99; @accent2: #00524c; //Code// .template{ background: @bkg2; border: 2px dashed @accent2; border-radius: 5px; font-size: 10pt; color: @text; padding: 1%; b,u,i {color: @text;} hr {border: 0px; width: 100%;} a, a:visited { color: @accent1; letter-spacing: 1px; trasition: all 5s; } a:hover {color: @accent2; letter-spacing: 4px; transition: all 500ms;} } div.tooltip_content {background: @text ; color: @bkg2; border: 2px dotted @accent2;} .bbcode_tooltip {border-bottom: 0px;} .panel {background: @bkg2; border: 1px dotted @accent2; color: @bkg2; &> h3 { > a {color: @accent2;} border: 1px solid @accent2; background: @bkg1; color: @text;} &> div {color: @text;a:link, a:visited {color: @text;}}} table {border: 2px dashed @accent2;} th {border: 1px solid @bkg2; color: @text; background: @accent2; text-align: center;} td {border: 1px solid @accent2; background: @bkg1; color: @text; text-align: center} .tabbed_interface {background: @bkg2; border: none; & > ul{background: @bkg1; border: 1px solid @accent2; & > li{background: @bkg2; border: 1px solid @accent2; padding: 0%; border: 1px solid @accent2; color: @text; &.tab-active{background: @accent1}} & > li:hover{cursor: pointer;}} > .tab, > .tab-active{background: @accent2; color: @text; padding: 0%;}}[/style]