Guide to CSS: Beginner to Expert
Forum Index > PokéFarm > Guides >
Hi im currently trying to make a set of tabs and running into some issues, does anyone have a simple 3-tab forum signature code that I can use as a reference? (I like figuring things out myself)
- Sprites
- TR
- Click
Score: 728
made by LycanKai
Team Fire
Aspear Berry
Aspear Berry (SOUR)
Cheri BerryCheri Berry (SPICY)
Chesto BerryChesto Berry (DRY)
Pecha BerryPecha Berry (SWEET)
Rawst BerryRawst Berry (BITTER)
Likes:
Sweet food
27%Naïve nature
I have a very simple snippet of code saved that just colors tabs, but you can use it to get a feel for how the tabs are structured. I also recommend learning to use your browser's dev tool element inspector for more advanced elements like tabs, so you can figure out what each part is called and how to target it with CSS.
(I thiiiink I wrote this myself, starting with the code in the wiki, to serve as a color template helper like the ones in Cele's legibility guidelines, but I can't remember for sure and I didn't write it down orz)
Code
[sc=tabbed_interface horizontal][ul][
][li]Title 1[/li][
][li]Title 2[/li][
][li]Title 3[/li][
][/ul][
][sc=tab-active]Example text, with [url=https://pokefarm.com]example link[/url][/sc][
][sc=tab]Example text, tab 2[/sc][
][sc=tab]Example text the third [pkmn=Porygon-Z][/sc][
][/sc]
[style]
.tabbed_interface {
>ul {
&,>li.tab-active {
/* active tab background color/text color */
background: #333;
color: white;
}
>li {
/* other tabs background color/text color, */
/* plus all tabs border color and padding */
background: #555;
color: white;
border-color: #0f0;
padding: 5px;
}
}
>div {
/* tab body background, text, border, padding */
background: #333;
color: white;
border-color: #0f0;
padding: 10px;
box-shadow: none;
>a {
/* link color (don't forget!) */
color: #0d0;
}
}
}
[/style]
so helpful, thank you!
heya, i'm trying to add a gradient to my tab borders here using the sample code but it seems i can't get rid of the black at the sides. is there a way to fix this or is this just a quirk with the tabs?
(also note that the colors are temporary until i actually finish the rest of the template-)
relevant code snippet
.tabbed_interface
{
box-shadow: black;
margin: 0;
position: relative;
top: 80px;
& > ul
{
& > li
{
display: inline-block;
border-radius: 0;
left: 30px;
margin: 3px;
padding: 5px;
text-align: center;
width: 90px;
height: auto;
border-top: 2px solid @gradient1;
border-bottom: 2px solid @gradient2;
background-position: 0 0, 100% 0;
background-repeat: no-repeat;
background-size: 2px 100%;
background-color: @bg;
color: @text;
background-image: linear-gradient(to bottom, @gradient1 0%, @gradient2 100%), linear-gradient(to bottom, @gradient1 0%, @gradient2 100%);
&.tab-active
blah blah blah
/* colors */
@bg: rgba(255, 255, 255, 0.5);
@gradient1: white;
@gradient2: #6B6D5B;
@text: black;
shira//any pronouns//-4 server time
hunt journal
Collecting Teal Masks for future Ogerpon hunt! (1 so far)pfp source | sprites from kirby super star
I don't see any code for border left/right there, have you tried setting (or unsetting) those? Tbh if you want the gradient to go right to the edges, I probably just would remove the border entirely, including the top/bottom, and just let the background do the work. If that causes sizing problems, there's ways to correct that, through padding or box-sizing.
QUOTE originally posted by Mirzam
I don't see any code for border left/right there, have you tried setting (or unsetting) those? Tbh if you want the gradient to go right to the edges, I probably just would remove the border entirely, including the top/bottom, and just let the background do the work. If that causes sizing problems, there's ways to correct that, through padding or box-sizing.
hopefully this hasn't been asked already and i'm really tired so i could just be having a brain fart but basically, i'm just now trying to style lists in my journal template but the tabbed interface list is getting in the way and when i try to add "&>" in front of the stuff like i see some codes doing it messes up the tabbed interface. here's my code:
it basically combines both and makes all the lists look like the tabbed interface plus the bullet points im trying to add in the list specific css. and when i add "&>" in front of the stuff between ".tabbed_interface {" and "}" it just gets rid of the padding and margins for everything?? halp
css
//lists
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
padding: 0;
margin: 0;
}
li::before {
content: "☆.┊";
padding-right: 5px;
color: @link;
}
//lists end
//tabbed interface
.tabbed_interface {
width: auto;
height: auto;
margin-top: auto;
margin-bottom: auto;
margin-left: 20px;
margin-right: 20px;
color: white;
background-color: transparent;
ul {
background-color: transparent;
border:none;
min-height: 10px;
flex-wrap: 1 1 auto;
margin-bottom: 10px;
}
li {
background-color: rgba(0, 0, 0, 0.9);;
padding:1%;
font-family: "courier new";
font-size: 12pt;
text-align: center;
color: white;
border: 1px solid white;
min-height: 10px;
text-align: center;
margin-left: 10px;
margin-top: 10px;
}
li:hover {
color: #7FFF00;
background-color: black;
cursor: pointer;
transition: 0.5s all;
}
.tab {
color: white;
border: none;
}
.tab-active {
font-family: "courier new";
font-size: 12pt;
color: white;
background-color: rgba(0, 0, 0, 0.9);
border: 1px solid white;
box-shadow: none;
}
}
//tabbed interface end
What you could do is apply a different tag to what you want to use on your actual bullet points and then wrap those parts of your post in their own styleclass tags.
So for this you'd wrap the portion of your post with your list in a styleclass tag that's labeled as list. I'm assuming your list is inside a tab so that's probably why it's pulling your tab coding rather than what you've set for it.
So something like this:
boop
//lists
.list{ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
padding: 0;
margin: 0;
}
li::before {
content: "☆.┊";
padding-right: 5px;
color: @link;
}}
//lists end
//tabbed interface
.tabbed_interface {
width: auto;
height: auto;
margin-top: auto;
margin-bottom: auto;
margin-left: 20px;
margin-right: 20px;
color: white;
background-color: transparent;
ul {
background-color: transparent;
border:none;
min-height: 10px;
flex-wrap: 1 1 auto;
margin-bottom: 10px;
}
li {
background-color: rgba(0, 0, 0, 0.9);;
padding:1%;
font-family: "courier new";
font-size: 12pt;
text-align: center;
color: white;
border: 1px solid white;
min-height: 10px;
text-align: center;
margin-left: 10px;
margin-top: 10px;
}
li:hover {
color: #7FFF00;
background-color: black;
cursor: pointer;
transition: 0.5s all;
}
.tab {
color: white;
border: none;
}
.tab-active {
font-family: "courier new";
font-size: 12pt;
color: white;
background-color: rgba(0, 0, 0, 0.9);
border: 1px solid white;
box-shadow: none;
}
}
//tabbed interface end
"There's not a cup of tea big enough or a book long enough to suit me." - C.S. Lewis
| Avatar credits | ©
signature by emberlynn; official 1D fragrance commercial gifs
(A little slow but I wrote it all so...)
Can you post an entire example, including the BBCode portions? I'm on mobile so my answer is a little limited, I'll come back on desktop if someone else doesn't, but here's a run down on how I'd approach this issue.
Basically, the root problem is that the tabs are list elements, so you need to be able to distinguish the content tabs and the list tabs. If all of your lists will be inside the tabbed interface, you can move your actual list codes to be inside the tabbed interface content area, so it won't affect the tab headers. Then, all that's left is separating out the headers themselves - you were on the right track with the >s, but you need to move the li block to be inside the ul block if you do that
So the basic structure is:
If your custom list needs to affect things both inside and outside the tab interface, then you'll still need that format for the tabs, but you'd take out your custom list and wrap it in a styleclass, and then you'd wrap each of your BBCodeb lists in an sc tag to match.
If I've not explained something right, or you want to know more about the & and > symbols, let me know and I'll talk more and/or link resources when I'm on desktop tomorrow.
Code
.tabbed_interface {
// codes for general interface
> ul {
// codes for tab header area bg etc
> li {
// codes for tabs themselves
&:hover {
// hovered tab code
}
&.tab-active {
// currently selected tab (if desired)
}
}
}
> div {
// code for tab contents: you can likely combine your tab and tab-active blocks here, since only active tab contents are visible. unless I've misunderstood your code.
// your custom list styling with the star here - will only affect lists inside the tab contents
ul {
> li {
&::before {
}
}
}
}
}
Code
.tabbed_interface {
// codes for general interface
> ul {
// codes for tab header area bg etc
> li {
// codes for tabs themselves
&:hover {
// hovered tab code
}
&.tab-active {
// currently selected tab (if desired)
}
}
}
> div {
// code for tab contents: you can likely combine your tab and tab-active blocks here, since only active tab contents are visible. unless I've misunderstood your code.
}
}
// your custom list styling with the star here - will only affect lists with the given styleclass
.custom-list ul {
> li {
&::before {
}
}
}
In your BBCode section:
[sc=custom-list][ul]
[li] item 1 [/li]
[li] item 2 [/li]
[/ul][/sc]
QUOTE originally posted by Emberlynn
What you could do is apply a different tag to what you want to use on your actual bullet points and then wrap those parts of your post in their own styleclass tags.
So for this you'd wrap the portion of your post with your list in a styleclass tag that's labeled as list. I'm assuming your list is inside a tab so that's probably why it's pulling your tab coding rather than what you've set for it.
So something like this:
boop
//lists
.list{ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
padding: 0;
margin: 0;
}
li::before {
content: "☆.┊";
padding-right: 5px;
color: @link;
}}
//lists end
//tabbed interface
.tabbed_interface {
width: auto;
height: auto;
margin-top: auto;
margin-bottom: auto;
margin-left: 20px;
margin-right: 20px;
color: white;
background-color: transparent;
ul {
background-color: transparent;
border:none;
min-height: 10px;
flex-wrap: 1 1 auto;
margin-bottom: 10px;
}
li {
background-color: rgba(0, 0, 0, 0.9);;
padding:1%;
font-family: "courier new";
font-size: 12pt;
text-align: center;
color: white;
border: 1px solid white;
min-height: 10px;
text-align: center;
margin-left: 10px;
margin-top: 10px;
}
li:hover {
color: #7FFF00;
background-color: black;
cursor: pointer;
transition: 0.5s all;
}
.tab {
color: white;
border: none;
}
.tab-active {
font-family: "courier new";
font-size: 12pt;
color: white;
background-color: rgba(0, 0, 0, 0.9);
border: 1px solid white;
box-shadow: none;
}
}
//tabbed interface end
QUOTE originally posted by Mirzam
(A little slow but I wrote it all so...)
Can you post an entire example, including the BBCode portions? I'm on mobile so my answer is a little limited, I'll come back on desktop if someone else doesn't, but here's a run down on how I'd approach this issue.
Basically, the root problem is that the tabs are list elements, so you need to be able to distinguish the content tabs and the list tabs. If all of your lists will be inside the tabbed interface, you can move your actual list codes to be inside the tabbed interface content area, so it won't affect the tab headers. Then, all that's left is separating out the headers themselves - you were on the right track with the >s, but you need to move the li block to be inside the ul block if you do that
So the basic structure is:
If your custom list needs to affect things both inside and outside the tab interface, then you'll still need that format for the tabs, but you'd take out your custom list and wrap it in a styleclass, and then you'd wrap each of your BBCodeb lists in an sc tag to match.
If I've not explained something right, or you want to know more about the & and > symbols, let me know and I'll talk more and/or link resources when I'm on desktop tomorrow.
Code
.tabbed_interface {
// codes for general interface
> ul {
// codes for tab header area bg etc
> li {
// codes for tabs themselves
&:hover {
// hovered tab code
}
&.tab-active {
// currently selected tab (if desired)
}
}
}
> div {
// code for tab contents: you can likely combine your tab and tab-active blocks here, since only active tab contents are visible. unless I've misunderstood your code.
// your custom list styling with the star here - will only affect lists inside the tab contents
ul {
> li {
&::before {
}
}
}
}
}
Code
.tabbed_interface {
// codes for general interface
> ul {
// codes for tab header area bg etc
> li {
// codes for tabs themselves
&:hover {
// hovered tab code
}
&.tab-active {
// currently selected tab (if desired)
}
}
}
> div {
// code for tab contents: you can likely combine your tab and tab-active blocks here, since only active tab contents are visible. unless I've misunderstood your code.
}
}
// your custom list styling with the star here - will only affect lists inside the tab contents
.custom-list ul {
> li {
&::before {
}
}
}
In your BBCode section:
[sc=custom-list][ul]
[li] item 1 [/li]
[li] item 2 [/li]
[/ul][/sc]
Cannot post: Please log in to post