👍 1

Posted 26/Jul/2022 04:06:19 (1 year ago)

As long as either they are not used in the template at all OR are unaffected by the code you have created, then no, you don't have to style it as well. Oftentimes though, links will show the same colour as what you have set to the template which will change the colour but not the background of the pkmnpanel and that would make it illegible on some skins as a result, so just be careful and test it to make sure they are not affected. I can update this post tomorrow with a way to make it not updated for links but am on mobile atm about to rest.

he/she Joint Shoppe ☆ PKMN Shoppe Templates/Graphics Shoppe ☆ F2U Templates/Graphics

Buying:

BSDs 20 ZC

Prisms 70 ZC

by Kaede

naïve

👍 0

Posted 02/Aug/2022 16:03:03 (1 year ago)
Edited 02/Aug/2022 16:03:12 (1 year ago)

I used the following code for tables being too wide; table { display: flex; width: 100%; overflow-x: auto; } but it does this to my tables? is there any way to fix that? or are my thicc tables perpetually grossly spaced/aligned?

Type Race Score: 0

[ journal Buying

@ 15zc | Buying

@ 17zc

c

Mirzam

👍 0

Posted 02/Aug/2022 18:09:51 (1 year ago)

The problem is the flex display. Tables have unique display properties that you're overriding with that line. The rest is correct, so just remove that line. Note: While scrolling is allowed on tables when necessary, if there's any way to reformat your data to not require such wide tables, you may want to do that.

Torchiiko

👍 0

Posted 22/Aug/2022 01:50:30 (1 year ago)

so admittedly im brand new to css but how exactly do i do the @ import? how does it work, where does it go if youre trying to use it in a post? im definitely missing something but to be fair im skipping a lot of steps. ill read through some more in depth beginner guides later so i know the basics better but for now: how do i get the import to work?? also, im not sure where to put the style code to hide box shadows for tabs? i cant get it to work for tabs at all :/

☆torch's bait+ shop☆ | ☆trade shop of whims☆

Patch

👍 2

Posted 26/Oct/2022 01:44:57 (1 year ago)

Thank you so much for making this guide! It helps a lot as someone trying to learn more about CSS :DD (totally not a post to keep the thread from not being deleted nope who said that)

parker !! - he/they - minor background & signature avatar is offical hypmic art

1810/333,333

Emberlynn

👍 0

Posted 06/Nov/2022 01:50:46 (1 year ago)
Edited 06/Nov/2022 01:51:16 (1 year ago)

Currently trying to edit some Pokemon panel code to go with some of my freebie templates. But I'm having a heck of a time keeping my progress bar coding from further up in my coding from messing with the coding for the progress/exp bar on the Pokemon panel. Can anyone give me a hand? This is what my current style code for those two parts looks like for the template itself.

code

//normal progress bar codes// .expbar {background:#000000; border:1px dotted #627EA0; width:50%; height: 11pt;margin-top:-10px;} .expbar>div {background: #0F1125; border:none;} .expbar>span {color:#ffffff; font-size:11pt;} //pkmnpanel code// .party > div > .action > .berrybuttons[data-up='sour'] > [data-berry='aspear'], .party > div > .action > .berrybuttons[data-up='spicy'] > [data-berry='cheri'], .party > div > .action > .berrybuttons[data-up='dry'] > [data-berry='chesto'], .party > div > .action > .berrybuttons[data-up='sweet'] > [data-berry='pecha'], .party > div > .action > .berrybuttons[data-up='bitter'] > [data-berry='rawst'] { background: #8ccce9; } .party>div>.action>.berrybuttons[data-down='sour']>[data-berry='aspear'], .party>div>.action>.berrybuttons[data-down='spicy']>[data-berry='cheri'], .party>div>.action>.berrybuttons[data-down='dry']>[data-berry='chesto'], .party>div>.action>.berrybuttons[data-down='sweet']>[data-berry='pecha'], .party>div>.action>.berrybuttons[data-down='bitter']>[data-berry='rawst'] { background: #0f1125; } .party>div>.action a[data-berry]:after { border: 1px dotted #696969; } .party > div { background: #000; color: #8ccce9; border: 1px dotted #696969; box-shadow: none; a:link, a:visited { color: #8ccce9; } } .party > div > .pkmn:before { border: 1px solid #696969; background-color: #000; } .party > div > .expbar {background:#000000; border:1px dotted #627EA0; height: 15pt;margin-top:5px; >div {background: #0F1125; border:none;} .expbar>span {color:#ffffff; font-size:11pt;} } div.tooltip_content { background: #000; color: #8ccce9; border: 1px dotted #696969; } .bbcode_tooltip { border-bottom: 1px dotted #696969; }

"There's not a cup of tea big enough or a book long enough to suit me." - C.S. Lewis | Avatar credits |

Patch

👍 0

Posted 06/Nov/2022 02:31:01 (1 year ago)

QUOTE originally posted by Emberlynn

Currently trying to edit some Pokemon panel code to go with some of my freebie templates. But I'm having a heck of a time keeping my progress bar coding from further up in my coding from messing with the coding for the progress/exp bar on the Pokemon panel. Can anyone give me a hand? This is what my current style code for those two parts looks like for the template itself.

code

//normal progress bar codes// .expbar {background:#000000; border:1px dotted #627EA0; width:50%; height: 11pt;margin-top:-10px;} .expbar>div {background: #0F1125; border:none;} .expbar>span {color:#ffffff; font-size:11pt;} //pkmnpanel code// .party > div > .action > .berrybuttons[data-up='sour'] > [data-berry='aspear'], .party > div > .action > .berrybuttons[data-up='spicy'] > [data-berry='cheri'], .party > div > .action > .berrybuttons[data-up='dry'] > [data-berry='chesto'], .party > div > .action > .berrybuttons[data-up='sweet'] > [data-berry='pecha'], .party > div > .action > .berrybuttons[data-up='bitter'] > [data-berry='rawst'] { background: #8ccce9; } .party>div>.action>.berrybuttons[data-down='sour']>[data-berry='aspear'], .party>div>.action>.berrybuttons[data-down='spicy']>[data-berry='cheri'], .party>div>.action>.berrybuttons[data-down='dry']>[data-berry='chesto'], .party>div>.action>.berrybuttons[data-down='sweet']>[data-berry='pecha'], .party>div>.action>.berrybuttons[data-down='bitter']>[data-berry='rawst'] { background: #0f1125; } .party>div>.action a[data-berry]:after { border: 1px dotted #696969; } .party > div { background: #000; color: #8ccce9; border: 1px dotted #696969; box-shadow: none; a:link, a:visited { color: #8ccce9; } } .party > div > .pkmn:before { border: 1px solid #696969; background-color: #000; } .party > div > .expbar {background:#000000; border:1px dotted #627EA0; height: 15pt;margin-top:5px; >div {background: #0F1125; border:none;} .expbar>span {color:#ffffff; font-size:11pt;} } div.tooltip_content { background: #000; color: #8ccce9; border: 1px dotted #696969; } .bbcode_tooltip { border-bottom: 1px dotted #696969; }

i think i may know a way to help with this but i dont know if its the most efficient and user friendly 🤷‍♂️ so what i would do is make a new styleclass just for the pokemon panel, for example like .pkpanel { } and in that you paste the normal styling for the panel. after that you paste in a second .expbar style so that only items within [sc=pkpanel] will be affected by the second .expbar. However, with this, in order to put in a panel it will look like [sc=pkpanel][pkmnpanel=ID][/sc] Now in the second .expbar you can edit it to fit in the width and height of the panel. Again, this may not be the most user friendly so you will probably have to clarify in your templates that the extra [sc] has to be added. Hope this helps :D

Example Code for extra clarification >:D

//general expbar// .expbar {background:#000000; border:1px dotted #627EA0; width:50%; height: 11pt;margin-top:-10px;} .expbar>div {background: #0F1125; border:none;} .expbar>span {color:#ffffff; font-size:11pt;} //panel// .pkpanel { //panel expbar// .expbar {background:#000000; border:1px dotted #627EA0; width:50%; height: 11pt;margin-top:-10px;} .expbar>div {background: #0F1125; border:none;} .expbar>span {color:#ffffff; font-size:11pt;} //actual panel code// .party > div > .action > .berrybuttons[data-up='sour'] > [data-berry='aspear'], .party > div > .action > .berrybuttons[data-up='spicy'] > [data-berry='cheri'], .party > div > .action > .berrybuttons[data-up='dry'] > [data-berry='chesto'], .party > div > .action > .berrybuttons[data-up='sweet'] > [data-berry='pecha'], .party > div > .action > .berrybuttons[data-up='bitter'] > [data-berry='rawst'] { background: #8ccce9; } .party>div>.action>.berrybuttons[data-down='sour']>[data-berry='aspear'], .party>div>.action>.berrybuttons[data-down='spicy']>[data-berry='cheri'], .party>div>.action>.berrybuttons[data-down='dry']>[data-berry='chesto'], .party>div>.action>.berrybuttons[data-down='sweet']>[data-berry='pecha'], .party>div>.action>.berrybuttons[data-down='bitter']>[data-berry='rawst'] { background: #0f1125; } .party>div>.action a[data-berry]:after { border: 1px dotted #696969; } .party > div { background: #000; color: #8ccce9; border: 1px dotted #696969; box-shadow: none; a:link, a:visited { color: #8ccce9; } } .party > div > .pkmn:before { border: 1px solid #696969; background-color: #000; } .party > div > .expbar {background:#000000; border:1px dotted #627EA0; height: 15pt;margin-top:5px; >div {background: #0F1125; border:none;} .expbar>span {color:#ffffff; font-size:11pt;} } div.tooltip_content { background: #000; color: #8ccce9; border: 1px dotted #696969; } .bbcode_tooltip { border-bottom: 1px dotted #696969; } }

Emberlynn

👍 1

Posted 06/Nov/2022 22:48:42 (1 year ago)

Ah that's what I was afraid of, doesn't make it super user friendly if I have to do it that way for my freebies. Guess I'll just have to stick with my hodge-podge code that kinda works. Thank you though Patch, much appreciated even it isn't something I'm able to use.

Mirzam

👍 0

Posted 08/Nov/2022 04:41:03 (1 year ago)
Edited 08/Nov/2022 04:55:32 (1 year ago)

@Emberlynn: I think you had some errors in your code that may have been affecting this? Specifically, in your party expbar section, you had .expbar>span *inside* your .expbar block, so it wouldn't have worked right. Other than that I think you have the right idea - the more specific code (the expbar inside the .panel) will override the less specific code (general expbars) I ran your code through a formatter so I could read it more easily, and changed the colors to make the differences more obvious. Is this kind of what you were going for?

Lv. 100 — +249,688

Likes:

Spicy food

27%

Brave nature

test

Edit: A code diff of what I changed, if that helps:

Uhhh, also, idk if those are your final color choices, but on my mediocre monitor with my night time color shift on, I really can't tell the difference in the progress bar colors at all without squinting... might want to add more contrast for readability? (just checked and it's even worse on my phone, even with daytime colors and brightness)

pkspsapphire

👍 0

Posted 09/Nov/2022 21:20:19 (1 year ago)

ive been trying my absolute best to try and figure out a way to code a 2x3 grid made up of images but i cant figure it out. i also want the boxes of each part of the grid to be separated a little bit, like a 1 or 2px gap in between each. this is what i have so far. any help would be greatly appreciated, im really stuck here ^^; it's for an about code if that helps.

code

.pkmn { display: inline-grid; grid-template-columns: 63px 63px 63px; grid-template-rows: 34px 34px; border: 1px solid black; grid-gap: 1px; background-color: black; } .item { background-color: white; padding: 15px; text-align: center; }