Guide to CSS: Beginner to Expert
Forum Index > PokéFarm > Guides >
QUOTE originally posted by sammie.qt
I'm working on styling a set of tabs but I've run into a strange issue. I'm still new to the tab code so I'm just modifying the style code for tabbed_interface that's provided in the guide; but the box-shadow property isn't being recognized. Did it change names at some point?
Ideally, I just want to remove the box shadow from the tab box entirely. But I'm not able to do this if it's not recognized. :/
What I mean by recognized (just in case): properties in the editor appear periwinkle when they've been recognized, and all properties do this in my editor except box-shadow, which stays black.
Current Hunt
at 0
67/600
6663/50000
QUOTE originally posted by Astrala
previous reply
QUOTE originally posted by sammie.qt
I'm working on styling a set of tabs but I've run into a strange issue. I'm still new to the tab code so I'm just modifying the style code for tabbed_interface that's provided in the guide; but the box-shadow property isn't being recognized. Did it change names at some point?
Ideally, I just want to remove the box shadow from the tab box entirely. But I'm not able to do this if it's not recognized. :/
What I mean by recognized (just in case): properties in the editor appear periwinkle when they've been recognized, and all properties do this in my editor except box-shadow, which stays black.
Code
.tabbed_interface
{
background: #EEEBE0;
border: none;
box-shadow: none;
& > ul
{
background: #EEEBE0;
border: none;
& > li
{
background: #D5CBA7;
border: none;
padding: 0.5%;
color: black;
&.tab-active
{
background: #EEEBE0;
color: #464026;
}
}
& > li:hover
{
cursor: pointer;
}
}
> .tab, > .tab-active
{
background: #EEEBE0;
color: #464026;
padding: 2.5%;
}
}
Scoured Delights, my trade shop!
By default, there is a bottom border on ".tabbed_interface > div", which is .tab/.tab-active. So if you add border color code, or unset the border to that section of your code, it should help.
> .tab, > .tab-active
{
background: #EEEBE0;
color: #464026;
padding: 2.5%;
/* change border color */
border-color: red;
/* remove border */
border: none;
}
QUOTE originally posted by Mirzam
By default, there is a bottom border on ".tabbed_interface > div", which is .tab/.tab-active. So if you add border color code, or unset the border to that section of your code, it should help.
> .tab, > .tab-active
{
background: #EEEBE0;
color: #464026;
padding: 2.5%;
/* change border color */
border-color: red;
/* remove border */
border: none;
}
Can you post a link to the post with the code, or post the code in its active form here? I'd like to be able to inspect the tabs with the dev tools.
Edit: Oooops just saw your edit, going to look brb
QUOTE originally posted by Mirzam
Can you post a link to the post with the code, or post the code in its active form here? I'd like to be able to inspect the tabs with the dev tools.
I used your code on my test tabs, adding "box-shadow: none;" under "> .tab, > .tab-active" and it works fine for me to remove the shadow.
- Title 1
- Title 2
- Title 3
contents 1
contents 2
contents 3
Box-Shadow: none
.tabbed_interface
{
background: #EEEBE0;
border: none;
& > ul
{
background: #EEEBE0;
border: none;
& > li
{
background: #D5CBA7;
border: none;
padding: 0.5%;
color: black;
&.tab-active
{
background: #EEEBE0;
color: #464026;
}
}
& > li:hover
{
cursor: pointer;
}
}
> .tab, > .tab-active
{
background: #EEEBE0;
color: #464026;
padding: 2.5%;
box-shadow: none;
}
}
Ok, in the screenshot it looked just like the border to me - but it looks like you need to remove both, the border and the box shadow.
Removing the border will cause some of the contents to shift up 1px, since the border is 1px big. If, for some reason, you didn't want that, the easy solution is to change the border color to match the background color, or set it to "transparent". (probably doesn't matter much here, but can in other contexts)
> .tab, > .tab-active
{
background: #EEEBE0;
color: #464026;
padding: 2.5%;
border: none;
box-shadow: none;
}
quotes
QUOTE originally posted by Astrala
I used your code on my test tabs, adding "box-shadow: none;" under "> .tab, > .tab-active" and it works fine for me to remove the shadow.
- Title 1
- Title 2
- Title 3
contents 1
contents 2
contents 3
Box-Shadow: none
.tabbed_interface
{
background: #EEEBE0;
border: none;
& > ul
{
background: #EEEBE0;
border: none;
& > li
{
background: #D5CBA7;
border: none;
padding: 0.5%;
color: black;
&.tab-active
{
background: #EEEBE0;
color: #464026;
}
}
& > li:hover
{
cursor: pointer;
}
}
> .tab, > .tab-active
{
background: #EEEBE0;
color: #464026;
padding: 2.5%;
box-shadow: none;
}
}
QUOTE originally posted by Mirzam
Ok, in the screenshot it looked just like the border to me - but it looks like you need to remove both, the border and the box shadow.
Removing the border will cause some of the contents to shift up 1px, since the border is 1px big. If, for some reason, you didn't want that, the easy solution is to change the border color to match the background color, or set it to "transparent". (probably doesn't matter much here, but can in other contexts)
> .tab, > .tab-active
{
background: #EEEBE0;
color: #464026;
padding: 2.5%;
border: none;
box-shadow: none;
}
No problem! The tabs took a bit for me to figure out, too, because it feels like the active tab window should be modified by the sections above rather than needing that bottom one.
Cannot post: Please log in to post