CSS Help & Resources

Tsutarja · Mar 4, 2017

Venia Silente said:
-snip-

Hi there!

If you perhaps want to write up a more detailed tutorial on how to make tables using PC's CSS, I would really appreciate it! It'll be linked in the OP as well. :)

(PS you can use the BB code as well to show the raw code)

Venia Silente · Mar 5, 2017

Tsutarja said:
Hi there!

If you perhaps want to write up a more detailed tutorial on how to make tables using PC's CSS, I would really appreciate it! It'll be linked in the OP as well. :)

(PS you can use the BB code as well to show the raw code)

I'd love to, will try to take the time to write it up, will likely ask for some advice.

(And oh? It seems I have not checked all the format tags as I thought I did! :p )

Lize · Apr 7, 2017

Regarding tables, might as well work with a grid-like system, depending on what kind of content you want to use it for. In the case of an art shop or gallery, I'd actually prefer a grid over a table. Probably because tables are generally only used for (and should only be used for) data.

I'm not entirely sure how and if a grid system would work very well in posts, though, considering the different kind of widths on all the themes, because generally a grid needs to be in a fixed width. Could always work with a minimum though.

Actually, think I might have a look and see if i can do anything.

edit: i need to check dates more... argh..

donavannj · Apr 13, 2017

Venia Silente said:
Row 1, Column 1 with some content.
Row 1,
Column 2
with some content.
Row 1, Column 3 with some content
Row 2, Column 1 with some content.
Row 2, Column 2 with some content
Row 2, Column 3 with some content

That was actually way cleaner than the code I messily assembled when I built some "tables" of my own using PC's CSS in the past. Just wanted to commend you for that.

Lize · Apr 13, 2017

Row 1 content #1

Row 1 content #2

Row 1 content #3

Row 1 content #4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et ante metus. Fusce lorem libero, euismod ac turpis non, fermentum consequat tellus. Cras auctor eros quis lorem laoreet scelerisque. Mauris at eros mi. Proin venenatis ante fermentum, pellentesque urna ac, consectetur tellus. Donec porttitor eget ante nec euismod. Proin ac semper ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur sit amet metus vitae enim lacinia cursus. Fusce scelerisque condimentum magna sed suscipit. Maecenas laoreet tellus ac gravida imperdiet. Aenean vitae risus vel metus efficitur ullamcorper ac ac nulla. Maecenas tincidunt vulputate leo ut porta. Duis a neque bibendum, molestie velit id, fringilla dolor. Nullam sed ipsum sit amet nibh tincidunt tristique.

Row 2 content #2

Row 2 content #3

Row 2 content #4

Just quickly drafted this in a couple minutes... would definitely need some adjustments because i probably overlooked some things but yeah, %-based grid with flex for positioning, I'd say this would be the way to go.

Impo · Apr 18, 2017

Would anyone here have any idea if it's possible to have partial rounded borders?

https://jsfiddle.net/impo/se9tL7ds/26/

Here's a jsfiddle of what I have - I'm trying to get another rounded border, but green, to go over the grey border based on the %EXP to the next level - trying to get it to work statically before I figure out the dynamics in code

Radiating · Apr 18, 2017

I've never used CSS, so I don't know where to start.

So I want to code links into sections of my signature (on the right side), how would I get two separate links on my signature picture? (Or would I need to use BB code?)

Tsutarja · Apr 18, 2017

Radiating said:
I've never used CSS, so I don't know where to start.

So I want to code links into sections of my signature (on the right side), how would I get two separate links on my signature picture? (Or would I need to use BB code?)

|#TeamTrivia|Paired with Soapie❤|

You mean like this right?

Radiating · Apr 18, 2017

Tsutarja said:
|#TeamTrivia|Paired with Soapie❤|

You mean like this right?

Yes, but is there a way to get the text on the right side of my signature? (One on the top right and the other on the bottom right)

Tsutarja · Apr 18, 2017

Radiating said:
Yes, but is there a way to get the text on the right side of my signature? (One on the top right and the other on the bottom right)

See, I did it to the left because honestly the text would have clashed with the colors. The code Johnny has is what you're asking for, but I'm not sure how you'd feel about the clashing colors.

Radiating · Apr 18, 2017

Johnny said:
|#TeamTrivia|Paired with Soapie❤|

You mean like this right?

Just tell me what you want and where lmao

Can you put one near the top right and the other one near the middle right?

Tsutarja said:
See, I did it to the left because honestly the text would have clashed with the colors. The code Johnny has is what you're asking for, but I'm not sure how you'd feel about the clashing colors.

I'll just change the font color.

Radiating · Apr 18, 2017

Actually Johnny it's fine, I think I'll just use Tsutarja's code for now.

Thanks

AnimePunk314 · Jun 4, 2017

How do you close a thread? Please help, I don't want to lead people thinking my offer is still open.

Spyro · Jun 12, 2017

Hi! I need help with a very small thing. See my signature, I have 2 images. The Leafeon Sprite is meant to be on the right side, but it's kinda also under the Spyro Gif. Is there a way to put the Sprite in parallel of the gif? I can provide my sig's "code" if needed

Spyro · Jun 12, 2017

Johnny said:
Like this?

Yes! :o exactly!

Spyro · Jun 12, 2017

Johnny said:
You need to "float: right" the sprite and put it above spyro image.

Sweet! I'll try that, thank you senpai! :3c

Had a little time to do it and it works! Thank you ^-^

Radiating · Jul 3, 2017

Hello! Does anyone know the CSS code to add a black text bar at the bottom of an image/gif? (Also is there a way to adjust the height and length of said bar?)

Yvtq8K3n · Jul 3, 2017

Radiating said:
Hello! Does anyone know the CSS code to add a black text bar at the bottom of an image/gif? (Also is there a way to adjust the height and length of said bar?)

just use paint(png) or photoshop(gift) and all your scalling problems will be solve, hehe.

(If u still insist whit css send me a pm, i can help u making what u want, if so pm me like the image and that border details),

alisaie · Jul 3, 2017

Radiating said:
Hello! Does anyone know the CSS code to add a black text bar at the bottom of an image/gif? (Also is there a way to adjust the height and length of said bar?)

something like this?

Moderator - Pairs - Pok?Trivia League - Credit

if so here's the code for this below. the way i did it was having a black box and then putting the image and the text below inside. size of the text box can easily be changes by adding more height to the box or padding.

~~please forgive the content this signature was from like two years ago rip~~

HTML:

[CENTER][cd=width: 400px; height: 215px;overflow: hidden;background-color: #000][IMG]http://i.imgur.com/PO38vvL.gif[/IMG][cd=font-size: 9px;  letter-spacing: 4px; font-family:segoe ui;line-height: 150%;color:#fff][title=Pokemon Trivia & Forum Games]Moderator[/title] - [title=Stand Alone & Roswell]Pairs[/title] - [title=Earn your Badges today!][URL="http://www.pokecommunity.com/showthread.php?t=302695"][COLOR=#fff]Pok?Trivia League[/COLOR][/URL][/title] - [title=icon from fonic_database | gif from tumblr][URL="http://fonic-database.livejournal.com"][COLOR=#fff]Credit[/COLOR][/URL][/title][/cd]
[/cd][/CENTER]

Radiating · Jul 3, 2017

Ash said:
something like this?

Moderator - Pairs - Pok?Trivia League - Credit

if so here's the code for this below. the way i did it was having a black box and then putting the image and the text below inside. size of the text box can easily be changes by adding more height to the box or padding.

~~please forgive the content this signature was from like two years ago rip~~

HTML:

[CENTER][cd=width: 400px; height: 215px;overflow: hidden;background-color: #000][IMG]http://i.imgur.com/PO38vvL.gif[/IMG][cd=font-size: 9px; letter-spacing: 4px; font-family:segoe ui;line-height: 150%;color:#fff][title=Pokemon Trivia & Forum Games]Moderator[/title] - [title=Stand Alone & Roswell]Pairs[/title] - [title=Earn your Badges today!][URL="http://www.pokecommunity.com/showthread.php?t=302695"][COLOR=#fff]Pok?Trivia League[/COLOR][/URL][/title] - [title=icon from fonic_database | gif from tumblr][URL="http://fonic-database.livejournal.com"][COLOR=#fff]Credit[/COLOR][/URL][/title][/cd] [/cd][/CENTER]

Yes something like that would be perfect! I tried to make a CSS textbox like that but I couldn't get to work ;-;. Would it be alright to borrow the code for my sig? I'd change up all the current text and pictures. (I'd also give credit either in the sig or my profile.)

CSS Help & Resources

More options

Tsutarja

Venia Silente

Inspectious. Good for napping.

Lize

Forever paired with [b]machomuu[/b]

donavannj

Lize

Forever paired with [b]machomuu[/b]

Impo

Playhouse Pokemon

Radiating

Tsutarja

Radiating

Tsutarja

Radiating

Radiating

AnimePunk314

Animepunk314

Spyro

[title=Free 6iv Dittos!][url=https://www.reddit.co

Spyro

[title=Free 6iv Dittos!][url=https://www.reddit.co

Spyro

[title=Free 6iv Dittos!][url=https://www.reddit.co

Radiating

Yvtq8K3n

muhaha

alisaie

Radiating