Guide to CSS: Beginner to Expert
Forum Index > PokéFarm > Guides >
Oh ok that makes it much easier! You would put height/width and padding on the & > li block to match your icons. I'm on mobile now, but sometime later today (probably after reset) I can come back and be more specific or write demo code if you'd like. If you put your icons in your sample code I'd be able to be more specific then :)
I realized that squares didn't really look good on the current template and adjusted it so it looked better - thanks for your help anyway ^^
(Now all I have to do is shrink the spacing between the tabs-)
- ★
- ★
- ★
- ★
- ★
Star | She/Her | Psychopath
BORED TO DEATH!!
Collecting
x 500
x 500
Sells a variety of things!
The clickable tabs are using flex by default, which can be a bit overwhelming at first but very powerful once you learn it. I've applied a couple flex rules to your demo code as an example, if you quote-preview they're the lines that aren't indented before and after the &>li (I had to remove a couple lines as well from the changed blocks)
The two most important ones in this case imo:
flex-grow: 0;
Prevents the tabs from growing to fit the available area. With this set to 0, the tabs will fit their own content by default, or obey the width property if set
justify-content
Tells the tab container how to align the tabs since they don't just grow to fit anymore. There's many options, I picked center then put small spacing between the tabs.
Full flex guide. Note that the guide is divided in two parts: rules for the container, and rules for the child elements (in this case, the clickable tabs) https://css-tricks.com/snippets/css/a-guide-to-flexbox/
If you have questions about flex I'm happy to talk about it here or in PMs, but depending on when I can be on desktop/mobile, some more technical questions may take me a while to answer.
Code demo
- #1
- #2
- #3
contents 1
contents 2
contents 3
Hello, sorry to bother again T-T
Is there a css code for pits instead of tooltips? A code I'm writing requires for me to use pits instead of tooltips.
It uses the same CSS to modify!
Buying:
BSDs 20 ZC
Prisms 70 ZC
BSDs 20 ZC
Prisms 70 ZC
by Kaede
So I've ran into a problem that bothers me. I'm wanting to use tooltips in a table, but the tooltip is only the same width as the cell in the table, but works perfectly in the rest of the template. Is there a way to define tooltips in tables with css?
Here is the what I'm talking about. The size is close to what the template makes it at, so I'm not concerned about that part.
I did test it in a table that had longer text just for testing vertical alginment and it was larger for larger cells.
Also, is there something I should be using that isn't "width: fit-content;" for the tool tip? It doesn't seem to like that code so I belive it just defaults to auto.
| Member | Pairs Available |
|---|---|
| Orchid Available for race, can add items for IV/Nature breeding only |  98%  97% |
| --- |  |
| --- | |
| --- | |
| testing | testing 2 |
|---|---|
| ---- | ---- |
| ---- | putting a lot of text Available for race, can add items for IV/Nature breeding only here |
Tool Tip CSS
.tooltip_content {border: 1px solid @border1;
background: @bkg4;
min-width:1%;
width: fit-content;
color: @text;
font-size: 11pt;
padding: 5px;
font-weight:normal;}
Table CSS
.bbcode_table {background: transparent;
border: 1px solid hidden;}
table {border: 4px solid @bkg2;
padding: 4px;
border-collapse: separate;
th, td {text-align: center;
padding: 5px;
border-radius: 8px;
border: 2px dotted @border3;
color: @text5;
vertical-align: middle;}
th {background-color: @bkg4;
color: @text4;
font-weight: bold;
text-transform: title;}
td {background-color: @bkg5;}}
table{margin: 0 auto;}
0 
26 / 
1806 / 
0
Tooltips are... a bit odd. Because they're set to absolute position, they take their width from the first parent element that meets certain criteria, such as having relative positioning set. You can use this to your advantage, to control their sizing without getting into riskier position/size attributes that could cause them to behave in unexpected ways.
I'd not noticed before, but it looks like table cells are all set to relative position by default, which constrains the tooltips? I'm not sure if removing that setting will have any unwanted side-effects, but removing it does do what I think you're wanting here. (I probably need to play more with tooltips, I'm just always spooked about making them illegible somehow orz)
Demo 1, allow to escape table:
.bbcode_table td {
position: unset !important;
}
Demo 2, constrain to table, but escape cell:
.bbcode_table {
position: relative;
}
.bbcode_table td {
position: unset !important;
}
Edit: I didn't see your edit at first. You should probably avoid setting the width for tooltips at all if at all possible. So tbh I'd just remove that code entirely.
Edit 2: In case you're interested, I talked some more about controlling where tips appear in this post. Just keep in mind my comments there about legibility on differently sized devices.
| Member | Pairs Available |
|---|---|
| Orchid Available for race, can add items for IV/Nature breeding only | 98% 97% |
| --- | |
| --- | |
| --- | |
| Member | Pairs Available |
|---|---|
| Orchid Available for race, can add items for IV/Nature breeding only | 98% 97% |
| --- | |
| --- | |
| --- | |
Ah, perfect! Thank you! That is super helpful. I'll figure out which of the two I want to use but that is exactly what I was looking for.
I generally only play with tooltips enought to change colors, generally to match the rest of the template because yeah. I don't want to break legibility issues.
Hello! I only recently starting playing around with CSS and I've been working on making myself a signature. I'm sure there's plenty of mistakes, but I'm fairly pleased with how it turned out.
However, there's one issue I cann't seem to resolve: there's a border underneath the flower tabs that just won't go away. I have all borders and backgrounds set as 'none'. On my screen, the border is green (because of my site skin??). I'm really at a loss on why it's here and what to do about it. Any help would be appreciated!
image
code
[sc=signature][sc=bkg][sc=box][
][sc=tabbed_interface horizontal]
[ul]
[li][img]https://pokefarm.com/upload/:fNC/flower-1151970_1280.png[/img][/li]
[li][img]https://pokefarm.com/upload/:fNC/flower-1151970_1280.png[/img][/li]
[li][img]https://pokefarm.com/upload/:fNC/flower-1151970_1280.png[/img][/li]
[li][img]https://pokefarm.com/upload/:fNC/flower-1151970_1280.png[/img][/li]
[li][img]https://pokefarm.com/upload/:fNC/flower-1151970_1280.png[/img][/li]
[/ul][
][sc=tab-active]
tab 1
[/sc][
][sc=tab]
tab 2
[/sc][
][sc=tab]
tab 3
[/sc][
][sc=tab]
tab 4
[/sc][
][sc=tab]
PFP -> official artwork from Pokemon Emerald
Signature background -> free to use from [url=https://publicdomainvectors.org/en/free-clipart/Prismatic-floral-design-pattern-vector-image/77895.html]here[/url]
Flowers -> free to use from [url=https://pixabay.com/vectors/flower-spring-fresh-purple-pink-1151970/]here[/url]
Signature code -> [tip=my first coding attempt, please forgive any mistakes <3]me :)[/tip]
[/sc]
[/sc]
[/sc][/sc][/sc]
[style]
.signature
{
.bkg
{
background-image:url("https://pokefarm.com/upload/:fNC/floral-3223570_1280.png");
background-size: 100% auto;
background-repeat:repeat;
height:150px;
padding:5%;
}
.box
{
background: rgba(255, 255, 230, 95%);
max-height:150px;
overflow:hidden;
border: 5px solid black;
border-radius: 20px;
color: black;
font-size:10pt;
& > .tabbed_interface > ul > li > img
{
height: 30px;
width: auto;
}
}
.tabbed_interface
{
background: none;
border: none;
position: relative;
bottom: 20px;
& > ul
{
background: none;
border: none;
display: flex;
flex-wrap: nowrap;
justify-content: space-evenly;
align-items: center;
gap: 10%;
& > li
{
background: none;
border: none;
padding: 2%;
&:hover
{
cursor: pointer;
filter: drop-shadow(0 0 3px gray);
transform: scale(1.5);
}
&.tab-active
{
background: none;
border: none;
}
}
}
> .tab, > .tab-active
{
background: none;
border: none;
min-height: 150px;
}
}
a, a:visited
{
color: orange;
}
div.tooltip_content
{
background: #d9d9d9;
color: black;
border: 1px solid black;
font-size: 10pt;
}
.bbcode_tooltip
{
border-bottom: 1px solid black;
}
}
[/style]
🌸
🌺
🌸
GrapeJelly
Grape ~ she/her ~ PhD student ~ local time 08:10
Your local ground type enjoyer
on a journey to hatch ground type melans
Ground melans so far: 23
Current hunt: 
1/1 
0/1Credits
PFP: official artwork from Fire Red/Leaf Green
Signature code: me
Background: free to use (full credits in about me)
QUOTE originally posted by GrapeJelly
Hello! I only recently starting playing around with CSS and I've been working on making myself a signature. I'm sure there's plenty of mistakes, but I'm fairly pleased with how it turned out.
However, there's one issue I cann't seem to resolve: there's a border underneath the flower tabs that just won't go away. I have all borders and backgrounds set as 'none'. On my screen, the border is green (because of my site skin??). I'm really at a loss on why it's here and what to do about it. Any help would be appreciated!
Cannot post: Please log in to post