Single post in A Somewhat Extensive Guide to BBCodes
Forum Index > PokéFarm > Guides > A Somewhat Extensive Guide to BBCodes >
You have a line in there that's giving you trouble.
.panel {
&>h3 {
border-radius: 5px 5px 0 0;
}
}
gives all boxes inside your accordion the same corners. Just remove the line. The first box has rounded corners by default and to round the last one you do this:
.panel {
&>h3:last-of-type {
border-radius: 0 0 5px 5px;
}
}
Here you go:
Code
[sc=thing][center][font=Times New Roman][size=10]TEXT!
[accordion]
[a-section][/a-section]
[a-section][/a-section]
[a-section][/a-section]
[/accordion]
Is there a way to change these boxes so that it doesn't have these awkward edges?
What I'm thinking is that I want it to be curved at the upper two corners of the top one, the lower two corners of the bottom panel, but the middle panels will remain with edges so that the entire accordion would look like one thing rather than sectioned-
If that made any sense
[/size][/font][/center][/sc]
[style]
.thing {
background: #5CACDA;
color: white;
padding: 20px 50px 20px 50px;
border: 10px solid #11608E;
border-radius: 20px;
}
a {
color: #0F374E;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
}
a:hover {
color: #2A7CAB;
}
.panel {
border: none;
background: none;
&>h3 {
background: #89CBF1;
color: #134A69;
a {
color: #134A69;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
}
a:hover {
color: #4383A9;
}
&:last-of-type {
border-radius: 0 0 5px 5px;
}
}
&>div {
background: #DDF3FF;
border-radius: 0px 0px 5px 5px;
border: none;
color: #11608E;
}
}
.panel>div {
background: #DDF3FF;
border-radius: 0px 0px 5px 5px;
border: none;
color: #11608E;
}
table {
border: 1px solid #11608E;
margin: 0px auto;
}
th {
background: #89CBF1;
color: #134A69;
text-align: center;
border: 1px solid #11608E;
}
td {
background: #DDF3FF;
color: #11608E;
text-align: center;
border: 1px solid #11608E;
}
[/style]
TEXT!
Is there a way to change these boxes so that it doesn't have these awkward edges?
What I'm thinking is that I want it to be curved at the upper two corners of the top one, the lower two corners of the bottom panel, but the middle panels will remain with edges so that the entire accordion would look like one thing rather than sectioned-
If that made any sense
Avatar by Kaelwolfur.
Sent from my PokéNav