• Our software update is now concluded. You will need to reset your password to log in. In order to do this, you will have to click "Log in" in the top right corner and then "Forgot your password?".
  • Welcome to PokéCommunity! Register now and join one of the best fan communities on the 'net to talk Pokémon and more! We are not affiliated with The Pokémon Company or Nintendo.
    Register

CSS Help & Resources

Road

Road

beyond salvation
767
Posts
15
Years
OHH this makes perfect sense! I got it to work perfectly!! Apologies for the long explanation required, but thanks a ton for the help! c:
 
Lucario

Lucario

Hardly active since 2017!
809
Posts
8
Years
Hi, I have this image:
lmxxh.png


I'd like to put my signature inside it, like this terrible mockup:

gyrxs.png


Is it possible to do this with PC's CSS, so that the text is actual text and the links are clickable?
 
Lucario

Lucario

Hardly active since 2017!
809
Posts
8
Years
Team Fail said:
You should be able to, just have one div that holds the image (But make sure the inside is transparent so you can use a background-color attribute, or else add the color in an image editor) and inside that div place all your text and links.
Click to expand...

The thing I can't work out now is how to position the text inside the image, by default it is placed underneath the image.
 
Lucario

Lucario

Hardly active since 2017!
809
Posts
8
Years
Josephine said:
First of all you want to fill in that transparent background in your image:

BJfd5q8.png


then you want to create a div with that as the background image:

Lucario

Code: 
[PLAIN][cd="width:653px;height:141px;background-image:url('http://i.imgur.com/BJfd5q8.png');"]Lucario[/cd][/PLAIN]

as you can see your text is now overlayed on the image.

to position and format the text you'd then replace 'Lucario' with something like:
Code: 
[PLAIN][cd="text-align: center;letter-spacing: 1px;"][cd="color: orange;font-size: 1.7em;padding-top: 20px;"]Lucario[/cd][cd="a;color: white;font-size: 1.25em;padding-top: 25px;"][URL="#"][COLOR="Blue"]Blog[/COLOR][/URL] | [URL="#"][COLOR="blue"]Soundcloud[/COLOR][/URL] | "[quote of the day]"[/cd][/cd][/PLAIN]

which would give you this:

Lucario
Blog | Soundcloud | "[quote of the day]"

to center this just wrap it in
tags​
Click to expand...


Thanks!​
 
Trev

Trev

[span="font-size: 8px; color: white;"][font="Monts
1,505
Posts
11
Years
  • Age 27
  • Seen Nov 15, 2023
Diagonal Floating Headers​

Here's a quick example of a neat little feature I found when working on my thread.



Hamlet
Act III, Scene 1

To be, or not to be: that is the question:
Whether 'tis nobler in the mind to suffer
The slings and arrows of outrageous fortune,
Or to take arms against a sea of troubles,
And by opposing end them? To die: to sleep;
No more; and by a sleep to say we end
The heart-ache and the thousand natural shocks
That flesh is heir to, 'tis a consummation
Devoutly to be wish'd. To die, to sleep.​

Code: 
[*CENTER][*css-div="background-color: white; border: black 4px solid; border-radius: 20px; width: 800px; padding: 30px; position: relative;"]
[*cd="background-color: black; color: white; border: transparent; border-radius: 20px; width: 250px; padding: 15px; position: absolute; float: left; transform: rotate(-15deg); top: -15px; left: -85px;"][*SIZE="6"]Hamlet[/SIZE][/cd][*SIZE="6"]Act III, Scene 1[/SIZE]

[*left]To be, or not to be: that is the question:
Whether 'tis nobler in the mind to suffer
The slings and arrows of outrageous fortune,
Or to take arms against a sea of troubles,
And by opposing end them? To die: to sleep;
No more; and by a sleep to say we end
The heart-ache and the thousand natural shocks
That flesh is heir to, 'tis a consummation
Devoutly to be wish'd. To die, to sleep.[/LEFT][/div][/center]

Some notes on using it:
  • Use "top" to adjust the position vertically and "left" to adjust the position horizontally.
  • Because of the
    tag surrounding the entire CSS, the header will always anchor in the center. This is, in my opinion, the best way to use these headers. You can, however, put the
    tag around just the [cd] containing the header if you want the rest of the CSS to be in a different position.
    [*] The text can be treated like a separate entity by using BBCode within the confines of [cd][/cd]. You can, for example, align the text to the left while keeping the entire header centered.
    [*] It's always best to try and cover the corner for a cleaner look. However, you can adjust the positioning to make it look more banner-like.
    [*] A fixed width on the [cd] will almost always look better, unless you increase the value of "padding." Note that this will require editing of "left" to keep the header overtop the corner, however.
    [*] Add newlines in your post between CSS boxes to keep the header from overlapping into the previous box's border.
    ​


If you mess around with the [cd]'s positioning, you can probably move it to other places on the CSS if you really want to.​
 
Last edited:
AlphaLuxray

AlphaLuxray

Serious Punch!
76
Posts
7
Years
  • Age 26
  • Seen Oct 5, 2017
Hi! I've run into an issue trying to stack div's within each other, most notably that the interior one's background color does not seem to be parsing.

Here's the code:

Spoiler:


And the finished product:

Spoiler:
 
Flowerchild

Flowerchild

fleeting assembly
8,709
Posts
13
Years
AlphaLuxray said:
Hi! I've run into an issue trying to stack div's within each other, most notably that the interior one's background color does not seem to be parsing.

Here's the code:

Spoiler:


And the finished product:

Spoiler:
Click to expand...
You used a colon following your height:250px rather than a semicolon, so anything after that won't parse.
 
AlphaLuxray

AlphaLuxray

Serious Punch!
76
Posts
7
Years
  • Age 26
  • Seen Oct 5, 2017
Oh shoot, thanks. xP Typos get me every time.

EDIT: Now I've run into a different problem. It seems vertical-align is not working for me (I double checked my semicolons this time too).

Taken straight from my sig, sans vertical-align:
Spoiler:
 
Last edited:
AlphaLuxray

AlphaLuxray

Serious Punch!
76
Posts
7
Years
  • Age 26
  • Seen Oct 5, 2017
So, not sure if my question was missed because I edited it on, but it still stands. I'm sure it's something simple I'm just not thinking of. xP
 
~kaito~

~kaito~

baby really hurt me
55
Posts
7
Years
i had a question - how do you make the width of my sig smaller? it's probably super obvious/easy, but idk tbh.

here's the code of it if you need it -

Spoiler:
Click to expand...
 
Christos

Christos

6,355
Posts
18
Years
  • Seen Apr 16, 2020
~kaito~ said:
i had a question - how do you make the width of my sig smaller? it's probably super obvious/easy, but idk tbh.

here's the code of it if you need it -
Click to expand...

Add "width: 500px" (adjust accordingly) in css-div. If you want to center it, add "margin: 0 auto" as well. Also, you can post CSS code without having to use spaces if you wrap them in
HTML: 
 tags!

[HTML][div="width: 500px; margin: 0 auto"]stuff[/div]
 
~kaito~

~kaito~

baby really hurt me
55
Posts
7
Years
Christos said:
Add "width: 500px" (adjust accordingly) in css-div. If you want to center it, add "margin: 0 auto" as well. Also, you can post CSS code without having to use spaces if you wrap them in
HTML: 
 tags!

[HTML][div="width: 500px; margin: 0 auto"]stuff[/div]
Click to expand...
i tried it out, but i don't quite know where to put it. >.<
 
Christos

Christos

6,355
Posts
18
Years
  • Seen Apr 16, 2020
~kaito~ said:
i tried it out, but i don't quite know where to put it. >.<
Click to expand...

Just add them in your first css-div. Like this:

[ css-div="width: 500px; margin: 0 auto; border: 1px inset ; background-color: #C7D9D2; background-image: none; color: #000000; Padding-left: 1px;" ][ css-div="Float: right; padding-right: 8px;" ]

[ URL="http://twitter.com/Kaito_IDF" ][ IMG]http://i.imgur.com/bE5n1YD.png[ /IMG][ /URL]
[ URL="http://instagram.com/kaito_ice.65/"][ IMG]http://i.imgur.com/7JRyTat.png[/IMG][/URL] [ /css-div]
[ COLOR=#C7D9D2]aaaaaaaaaaaa[/COLOR][ IMG]http://www.serebii.net/pokedex-dp/icon/468.gif[/IMG]
[ COLOR=#C7D9D2]a[/COLOR][ FONT=georgia][ I]togekiss; #468 - the jubilee pokemon[/I][/FONT]
[ COLOR=#C7D9D2]aaaa[/COLOR][ IMG]http://www.serebii.net/pokedex-dp/icon/468.gif[/IMG][ IMG]http://www.serebii.net/pokedex-dp/icon/468.gif[/IMG]http://www.serebii.net/pokedex-dp/icon/468.gif[ /IMG]

[ /css-div]
 
~kaito~

~kaito~

baby really hurt me
55
Posts
7
Years
Christos said:
Just add them in your first css-div. Like this:

[ css-div="width: 500px; margin: 0 auto; border: 1px inset ; background-color: #C7D9D2; background-image: none; color: #000000; Padding-left: 1px;" ][ css-div="Float: right; padding-right: 8px;" ]

[ URL="http://twitter.com/Kaito_IDF" ][ IMG]http://i.imgur.com/bE5n1YD.png[ /IMG][ /URL]
[ URL="http://instagram.com/kaito_ice.65/"][ IMG]http://i.imgur.com/7JRyTat.png[/IMG][/URL] [ /css-div]
[ COLOR=#C7D9D2]aaaaaaaaaaaa[/COLOR][ IMG]http://www.serebii.net/pokedex-dp/icon/468.gif[/IMG]
[ COLOR=#C7D9D2]a[/COLOR][ FONT=georgia][ I]togekiss; #468 - the jubilee pokemon[/I][/FONT]
[ COLOR=#C7D9D2]aaaa[/COLOR][ IMG]http://www.serebii.net/pokedex-dp/icon/468.gif[/IMG][ IMG]http://www.serebii.net/pokedex-dp/icon/468.gif[/IMG]http://www.serebii.net/pokedex-dp/icon/468.gif[ /IMG]

[ /css-div][/QUOTE]
thank you so so so so much <3 <3 <3
Click to expand...
 
Spyro

Spyro

[title=Free 6iv Dittos!][url=https://www.reddit.co
2,457
Posts
8
Years
  • Seen Oct 5, 2018
Hello!
I was wondering if I can do tables in CSS?
Right not in my Trade Shop I have 2 columns that showcase Pokémon Sprites. But they're not all the same size, so often the Pokémon in the two columns will be offset. I wanted to add rows, that would adjust to the size of the sprites, but I'm not sure if it's possible, and most things I've copy pasted from the web don't seem to work.
 
Tsutarja

Tsutarja

27,742
Posts
14
Years
Soapie❤ said:
Hello!
I was wondering if I can do tables in CSS?
Right not in my Trade Shop I have 2 columns that showcase Pokémon Sprites. But they're not all the same size, so often the Pokémon in the two columns will be offset. I wanted to add rows, that would adjust to the size of the sprites, but I'm not sure if it's possible, and most things I've copy pasted from the web don't seem to work.
Click to expand...
Hi there! Based off of my findings, I do not think tables are within the limits of what PC allows for CSS, sadly. :(
 
Spyro

Spyro

[title=Free 6iv Dittos!][url=https://www.reddit.co
2,457
Posts
8
Years
  • Seen Oct 5, 2018
Tsutarja said:
Hi there! Based off of my findings, I do not think tables are within the limits of what PC allows for CSS, sadly. :(
Click to expand...

Oh well... :c
Thank you very much for your help and your time! :)
 
Venia Silente

Venia Silente

Inspectious. Good for napping.
1,230
Posts
15
Years
Soapie❤ said:
Hello!
I was wondering if I can do tables in CSS?
Right not in my Trade Shop I have 2 columns that showcase Pokémon Sprites. But they're not all the same size, so often the Pokémon in the two columns will be offset. I wanted to add rows, that would adjust to the size of the sprites, but I'm not sure if it's possible, and most things I've copy pasted from the web don't seem to work.
Click to expand...


No table instructions within PokéCommunity's BBCode parser set, but you can achieve a similar effect with css-div and a lot of work. Effectively you need to make use of newlines and nested css-divs with specified widths and heights to get a similar effect to that of a table, and apply to those the properties "display: table-row" or "display: table-cell" depending on their context.


Otherwise you won't be able to get either rows or columns to align.



----


I have provided an example below of what can be done. As you will see, the browser will take care of itself to align the table structure (rows and columns), provided you follow some instructions:


* You must specify all table content (that is, all rows and columns) within a single line, in the sense that you must place no blank lines whatsoever between a closing /css-div and the opening of the next css-div.
* You must specify the the opening css-div with the property "display: table;" which sets the browser to organize everything else, by setting the browser to process the div as a HTML's <table>.
* Similarly, you must then specify a level of css-divs with the property "display: table-row;" to imitate HTML's <tr> element which opens a table row.
* Then you must specify the next level as a css-div with the property "display: table-cell;" to imitate HTML's <td>, which hosts the actual table cell content.
* The css-divs of the first row must contain "(min/max)width: ..." properties, which set up the cell widths for the rest of the table. In this case I've set up the first column to 10% of the width of the table, the second column grow between 25% and 40% according to requirements, and the 3rd column to span the rest of the available space.
* Each "table-cell" div must contain either a "left: 0;" or a "right: 0;" property, which tells the browser to not set up separating space between the cells.
* Be wary that if you include images, borders, spoilerblocks or some sort of floating content, content might overflow and break the table.
* With this model, at least for what I know, it is not possible to create table cells that span more than one row or column.



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



I recommend you use post quote in order to examine the code and copy it verbatim -warts and all- to a text editor in order to perform the modifications you want. Test often.


I'm sure a seasoned PC guru will come in and improve on this code, but at least I hope for a first attempt at organizing your content it helps.
 
You must log in or register to reply here.
Back
Top