The PokéCommunity Forums

The PokéCommunity Forums (https://www.pokecommunity.com/index.php)
-   Internet & Technology (https://www.pokecommunity.com/forumdisplay.php?f=57)
-   -   CSS Help & Resources (https://www.pokecommunity.com/showthread.php?t=200899)

Flannery Lue July 16th, 2015 7:31 PM

Quote:

Originally Posted by Tsutarja (Post 8849534)
I'm gonna attempt to see if I got this right...

Spoiler:
http://i.imgur.com/tDmjSy0.png http://i.imgur.com/UHWqtab.png http://i.imgur.com/ERQRLsc.png
Love and Understand, Imagine and Believe. It will take you far.


Hmm, is that what you needed? Here's the code to that right here:

Spoiler:
Code:

[center][div="background: url('http://i.imgur.com/5Ffpfl8.gif') center no-repeat; width: 480px; height: 272px;padding-top: 210px;text-shadow: 0px 0px 8px silver; color: darkred;font-family:georgia;"][URL="http://flanneryluemoore.imgur.com/"][IMG]http://i.imgur.com/tDmjSy0.png[/IMG][/URL] [URL="http://www.minecraftforum.net/members/Quavelen/"][IMG]http://i.imgur.com/UHWqtab.png[/IMG][/URL] [URL="http://services.runescape.com/m=adventurers-log/profile?searchName=Quavelen"][IMG]http://i.imgur.com/ERQRLsc.png[/IMG][/URL]
[SIZE="3"]Love and Understand, Imagine and Believe. It will take you far.[/SIZE][/div][/center]




Hope this helps! :)

That's exactly it! Thank you. =)
I really appreciate it.

Etherion July 17th, 2015 6:32 AM

hey guys :3
I was wondering how can I make a grid using CSS?

Tsutarja July 17th, 2015 6:53 AM

Quote:

Originally Posted by gio7sm (Post 8850029)
hey guys :3
I was wondering how can I make a grid using CSS?

Could you perhaps provide us with an example to give us a better idea, please? :)

Etherion July 17th, 2015 7:14 AM

Quote:

Originally Posted by Tsutarja (Post 8850067)
Could you perhaps provide us with an example to give us a better idea, please? :)

A chessboard

Tsutarja July 17th, 2015 7:24 AM

Quote:

Originally Posted by gio7sm (Post 8850094)
A chessboard

Well a chessboard can't be done with standalone CSS (if can, then it's a very tedious process to make), so you'd probably have to find a background like this one and repeat the background.

Nurse Joy July 29th, 2015 8:48 AM

EDIT: Nevermind, I figured it out!!! But I'm gonna leave my post here for reference in case anyone else has the same problem. When you use the float property, you can't use margin at the same time. For example, if you used float: right, you can't use margin-left !! ...It's kind of a dumb mistake when you figure it out to be honest but it's easy to make ^ ^;;;;;


You see this big giant space at the top?

Spoiler:

Quick Reference
Quick Links:

> Items
> Pokemon
> Power Items

Important Items:

https://www.pokecheck.org/i/itm/294.png Power Items: Battle Resort (16 BP) / PGL Games


Important Pokemon:
~~

Power Items:
~~




It won't go away, even with float. What on earth am I doing wrong? //sighs forever

Code:
Spoiler:
Code:

[FONT="Lucida Console"][cd=background-image:url("http://oi59.*.com/k2islj.jpg"); width: 900px; height: auto; padding:14px;][cd=border: 4px;border-radius: 6px;border-color: #000; border-style: double; height: 30px; width:886px; font-size:28px; padding:3px; padding-top:6px; background-color:#FAFAFA;][B][COLOR=#000]Quick Reference[/COLOR][/B][/cd][cd=border: 4px;border-radius: 6px;border-color: #000; border-style: double; background-color:#FAFAFA;margin-left:700px; height:auto;overflow:hidden;  width: 180px; float: right; margin-top:14px; padding:8px;][COLOR=#1C1C1C][B]Quick Links:[/B]

      > [aurl=items]Items[/aurl]
      > [aurl=pokemon]Pokemon[/aurl]
      > [aurl=power]Power Items[/aurl]
[/COLOR][/cd]
[cd=background-color:#FAFAFA;border: 4px;border-radius: 6px;border-color: #000; border-style: double; width:650px; height:auto; padding:12px;][COLOR=#1C1C1C][B][a id]items[/a id]Important Items[/B]:
[LIST][*][img]https://www.pokecheck.org/i/itm/229.png[/img][B]Everstone[/b]: Granite Cave B2F (Hidden between TM65 and Steelixite)[*][img]https://www.pokecheck.org/i/itm/280.png[/img][B]Destiny Knot[/B]: Pick Up (Lv50 - Lv100) / Master Rank Contest / Young Couple Lois & Hal (Rematch, not guaranteed to receive, so save before battle)[*][img]https://www.pokecheck.org/i/itm/231.png[/img][b]Lucky Egg[/b]: Dex Nav — Pelipper (Rare)[/LIST]
[img]https://www.pokecheck.org/i/itm/294.png[/img] [B]Power Items[/B]: Battle Resort (16 BP) / PGL Games

[a id]pokemon[/a id][B]Important Pokemon[/B]:
~~

[a id]power[/a id][B]Power Items[/B]:
~~

[/cd][/cd][/COLOR][/FONT]




Thanks in advance for any help!


Kirestananderson01 August 6th, 2015 2:13 AM

ohh nice thread.

Dedenne1 August 6th, 2015 8:30 PM

Hi just had a quick question :D
Ive recently learned the basics of css and havent had too much trouble so far but while im working on updating my sig no matter what i do i cant change the color hyperlinks show up. Regular text colors ive had no problem with and i do have another question when i use title coding the word that has the title always appears black and also cant be changed. Anyway to set the colors they appear as? thnx!

Twilight Storm August 29th, 2015 6:26 PM

um... How do you make a signature like this?http://www.pokecommunity.com/showpost.php?p=8901239&postcount=33I tried many times, but i just can't make it. Thanks!

Sopheria August 29th, 2015 7:04 PM

Quote:

Originally Posted by Dedenne1 (Post 8880123)
Hi just had a quick question :D
Ive recently learned the basics of css and havent had too much trouble so far but while im working on updating my sig no matter what i do i cant change the color hyperlinks show up. Regular text colors ive had no problem with and i do have another question when i use title coding the word that has the title always appears black and also cant be changed. Anyway to set the colors they appear as? thnx!

It's tricky, but you need to put the color tag inside the url tag. Like so:

[url=http://pokecommunity.com][color=#FFFFFF]Example[/color][/url]

So for example, if you wanted to set the link color to red in your signature (obviously this will work with any color though):

Spoiler:
[cd=background-image: url("http://i.imgur.com/0UM7y6m.gif");height250px;width:400px;padding:20px; text-align:center;][cd=background-color:rgba(255,255,255,0.4);height:150px;width:350px;]





[URL="http://pokecommunity.com"][COLOR=red]This is a link, yo[/COLOR][/URL][/cd][/cd]


Result:



Quote:

Originally Posted by PokemonNerd65 (Post 8909576)
um... How do you make a signature like this?http://www.pokecommunity.com/showpost.php?p=8901239&postcount=33I tried many times, but i just can't make it. Thanks!

Can you show the code for some of your attempts? If you do, I can tell you what's wrong and how to get it working :)

Twilight Storm August 30th, 2015 9:49 AM

Quote:

Originally Posted by Sopheria (Post 8909631)
Can you show the code for some of your attempts? If you do, I can tell you what's wrong and how to get it working :)

I forgot.): I have a bad memory span...

Sopheria August 30th, 2015 1:41 PM

Quote:

Originally Posted by PokemonNerd65 (Post 8910296)
I forgot.): I have a bad memory span...

Well this code should do the trick:

Spoiler:

[cd=padding:20px;background-image:url('<put the url to your image here.');height:250px; width:450px;][cd=background-color:rgba(255,255,255, 0.7);height:215px; width:410px;text-align:center;padding:80px 0px 20px 0px;]Put some text in here.


links and stuff[/cd][/cd]




Put some text in here.


links and stuff


That's the basic idea of it, but if you wanted a different font family or color, you'd have to tweak it a bit. Hope that helps!

Adrasteia September 4th, 2015 7:05 PM

Hello, I'm completely new to anything CSS related so I hope Iv posted this in the right arepa.
Could anyone explain to me in relatively simple terms how to add an image to the background of a post like on some trade stores? I'm helping run one and I'd like to make it look more attractive. Thank you for any help you could offer

Sopheria September 5th, 2015 9:12 AM

Quote:

Originally Posted by jazzyjazz666 (Post 8916535)
Hello, I'm completely new to anything CSS related so I hope Iv posted this in the right arepa.
Could anyone explain to me in relatively simple terms how to add an image to the background of a post like on some trade stores? I'm helping run one and I'd like to make it look more attractive. Thank you for any help you could offer

Put the background-image: property, into a [cd] tag, and place the image URL into the url() field, with the URL surrounded by quotation marks. So as an example:

[cd=background-image:url('--put your URL here--');]Trade store related stuff...[/cd]

Trade store related stuff...


Just make sure you have quotation marks surrounding the URL, otherwise it wont work c:

Adrasteia September 5th, 2015 9:19 AM

Quote:

Originally Posted by Sopheria (Post 8917135)
Put the background-image: property, into a [cd] tag, and place the image URL into the url() field, with the URL surrounded by quotation marks. So as an example:

[cd=background-image:url('--put your URL here--');]Trade store related stuff...[/cd]

Trade store related stuff...


Just make sure you have quotation marks surrounding the URL, otherwise it wont work c:

That's brilliant, thank you so much

Twilight Storm September 8th, 2015 12:44 PM

How do you fix this to make Togekiss Fan Club in the middle, inside the box? Thanks.

Mana September 8th, 2015 12:59 PM

Quote:

Originally Posted by PokemonNerd65 (Post 8920569)
How do you fix this to make Togekiss Fan Club in the middle, inside the box? Thanks.

It'll need to be inside the [/cd] or [/css-div] brackets that you've got. :)

Night Watcher September 27th, 2015 4:22 PM

So I'm basically going back to basic CSS. I'm having a little trouble right now though.

Spoiler:
Cousin | VM | PM | FC


It always appears with another picture, am I doing something wrong?

Sopheria September 27th, 2015 5:29 PM

Quote:

Originally Posted by Night Watcher (Post 8945443)
So I'm basically going back to basic CSS. I'm having a little trouble right now though.

Spoiler:
Cousin | VM | PM | FC


It always appears with another picture, am I doing something wrong?

Use this code instead.

Spoiler:
[css-div="background-image: url('http://i.imgur.com/1pQeYVv.png'); height: 220px; width: 450px;border-radius:20px;overflow:hidden;"][css-div="background-color:Transparent; width: 450px;"][title="My cousin Aven!"][COLOR=Black][URL="http://www.pokecommunity.com/member.php?u=499902"][COLOR=Black]Cousin[/COLOR][/URL][/COLOR][/title] [COLOR=Black]|[/COLOR] [URL="http://www.pokecommunity.com/member.php?u=499902"][COLOR=Black][title="Send me a Visitor Message"]VM[/title][/COLOR][/URL] [COLOR=Black]|[/COLOR] [URL="http://www.pokecommunity.com/private.php?do=newpm&u=499902"][COLOR=Black][title="Send me a Private Message"]PM[/title][/COLOR][/URL] [COLOR=Black]|[/COLOR] [COLOR=Black][title="4253-3906-8346"]FC[/title][/COLOR][/css-div][/css-div]


This can happen when you have an extra closing tag in your code. It looks like you had a third closing [/css-div] tag at the end of your code when you had first typed it, so the BBCODE duplicated it.

nicolewatin October 18th, 2015 10:02 PM

Great post!!

Circuit November 26th, 2015 8:47 AM

We Roleplayers gather here today to strive towards better CSS for writing purposes such as clarity and design. Here are some guidelines which aim to help you design your CSS so that it appears cleaner and gives an overall better impression for your roleplay! Let's begin! NB: This will not give you any design templates, since those can already be found for RPs in the RPT.

Design

Arguably the most important factor in any CSS construction, the design is what readers will first see when they come to read your RP, be it the OP or a character post. This can immediately deter or attract potential RPers and readers, and is very important that you make it as attractive as possible, whilst maintaining readability and simplicity. Here are a few tricks to ensure that you get the most out of your CSS design:
  • Main Body Borders
    These borders can make or break CSS and you really should aim to make them appear as smooth and reduce the bulkiness that some borders end up having. Block colour, square borders are very clunky, and very often detract from a potentially very nice CSS design. This can be prevented by using border rounding, using the following code:
    [cd= ... border-radius: --px --px --px --px;]
    The order of the value for each corner is as such: top-left, top-right, bottom-right, bottom-left. Example:
    Spoiler:
    boo

    Redacting one value results in the bottom-left and top-right values being the same. Redacting two values results in the top-left and bottom-right values and the bottom-left and top-right values being the same, and redacting three values results in all radii being the same. Example:
    Spoiler:
    boo

    boo

    boo

    And with that, you can now take the edge off your otherwise clunky and sharp borders, which mainly become an eyesore in bulk colour.

    Another technique you can use to improve your borders is to stylise them. This can be done using the main border command, which often appears as such:
    [cd= ... border: --px solid #------;]
    Here you can change the "solid" definition to one of the following:
    "groove" "ridge" "inset" "outset" (omitting the "" of course). This results in the following examples:
    Spoiler:
    boo

    boo

    boo

    boo

    As you can see, these make for more refined borders. Couple these with border rounding, and you can make some really nice borders, which are pleasing to the eye. There are plenty of other ways to achieve some totally wicked or simplistic designs, if you just mix codes creatively.

    Also, try and keep away from using extremely bright and/or vivid colours as border colours. These (at least imo) look tacky and are quite distracting. I prefer dull colours, which can be brighter if you use inset, outset, groove or ridge borders.

  • Main Body Backgrounds
    Very often I come across CSS with very abstract, busy and loud backgrounds in RPers' CSS, and it really detracts from the text, in some cases making it unreadable. This doesn't mean that the text isn't visible or is the wrong colour against the background, but that the background image used simply attracts the reader's attention too much that focusing on the text is very difficult. To avoid this, backgrounds with vibrant colours should be avoided, when placed directly below the text you want the reader to see. Here is an extreme example indicating this:
    Spoiler:
    Try reading this entire text passage. This is hard isn't it? Focussing on the bright text atop a bright background. It's taking you a while to get this far huh? Try a little further. If you can read this at your normal pace you're probably very accustomed to this, but I assure you there are people reading this very slowly, wondering why the hell I'm still going. Go a little further! Okay, that should be enough for this example.

    Okay, so that was probably more extreme than you'll likely ever see in RPT, however I've seen similar very occasionally, and CSS designs that achieve a similar effect just not as extremely are more common. The first thing to do is plop a nice child body in there, for your text to sit on so it can be read without the background detracting your attention from it. Example time:
    Spoiler:
    This is much easier I bet. I can talk like this for ages and you'll always be able to read this at a faster rate than in the previous example. So I'm not going to talk because this is enough to reinforce my point now I wager.

    As you can see this is a LOT easier on the eyes. I apologise to those who I've turned blind from my first example. You can also lower the opacity on the child body if you reeeaaally want your background to show through, and this can be done in the "background-color" code of the child body. Instead of using a hexadecimal code for your colour (#------) you can use the "rgba" format. This uses the rgb values and adds and "alpha" value which controls the opacity. 1 is fully opaque and 0 is fully transparent. It looks like this:
    [cd= ... background-color:rgba(255, 255, 255, 0.8]
    This means the background is white with an opacity of 80% (Is 80% opaque). Applied to my previous example it looks like this:
    Spoiler:
    Now you get to see some opacity in action. Be careful, because opacity reduces the effect of having a solid colour background behind your text, and too much will render your text illegible once more. Use it in small quantities, and above a more vibrant background I recommend never going lower than 0.8 but with more simplistic backgrounds that are more monochrome you can go lower, but never sacrifice text legibility for your background. Don't do it. Ever.

    So you still get your background in place, but can still read the text. Best of both worlds eh? Hahahaha!

  • Child Body Backgrounds
    Okay, so I pretty much covered this before, and it is pretty obvious how it should look in order to preserve text legibility, but just to reinforce the point; do not have vibrant colours as your child body's background. Keep them dull, close to white (or black) or so that the text is still very visible and you do not strain your eyes to read it. Slight gradients work wonders in keeping a child body's background interesting whilst not detracting from the text. That's all for that really, it is pretty self-explanatory once you've seen the previous examples.

Finally, make sure your design FITS YOUR CHARACTER. If you have a lively bright background for a very dark and serious character, well, no one is going to take your character seriously. You must ALWAYS ensure that your design fits your character's personality, and ensure that the response from the CSS matches the response from your character overall. CSS design can change the mood of your character with as simple a change as background colour. Be aware of this, and ensure that the emotions conveyed from the CSS are the right ones.

Text

Whilst it may not seem like it, text appearance is a very big factor in attracting or deterring readers, and you should always strive to find the best text in any design. On average, I spend around half of my time on the text when I design CSS for a character (if I do design CSS). There's a lot to consider when designing your text, so think carefully about what you choose since it has a fairly large impact for something so minimal. Here is what you should try and think about each time:
  • Text Font
    An obvious one, but it is also a very important one. First things first: DO NOT WRITE IN COMIC SANS. If you do, stop it. On that same note, do not write in ANY cursive font, as they are not suitable for large blocks of text and look horrible. There are plenty of sans-serif and serif fonts which will give the same feeling across, in a style that is a lot easier to read. For a good list of fonts of each style, look here.
    Text font should always match your character; generally, more upbeat characters benefit from sans-serif fonts whilst darker and more serious characters benefit from serif fonts. Of course, it's up to you to decide how you want your text to appear and convey to your reader the feelings and emotions you want.

  • Text Colour
    Colour matters. It needs to be legible for a start, but also can be used to convey a little bit of emotion. Red for passion and danger, blue for colder characters, green for passive, more upbeat characters and so on. Ultimately, I don't advise colouring your text anything other than greyscale, but some people do, and want to, so here is the advise. Be aware on what colours drag out which emotions, and use them accordingly. Making text look pretty isn't paramount to legibility and emotional response.

  • Text Size
    Last thing here, your font size matters too, and does add to the emotional response of the reader. Smaller fonts indicate a more timid character, whilst larger fonts give a feeling of presence and make your character feel larger and bolder as a result. Don't be ridiculous with sizes, since this only works up to a point, before just being plain silly. I mean come on, you're gonna have your posts deleted if your font is 48px large or is so small it can't be read.


Last words: Ultimately, it is your writing which will invoke the most emotional response from your reader, but you want to reinforce the feelings you are aiming to convey through your stylisation. But if you write well enough, any design that doesn't perfectly fit wont have much negative impact. That said a good design will impress, and you'll garner a lot more respect and credit for a very well designed bit of CSS to compliment your character. At the end of the day though it is your writing that matters, and if you make people focus on that, with or without CSS, and focussing on that will get you very far indeed!

Hope this helps some of you :)

Desert Stream~ January 11th, 2016 12:50 PM

How do I get a scroll box for thing like trade shops?

Twilight Storm January 12th, 2016 4:42 PM

Why is the background not showing?

Sopheria January 12th, 2016 5:10 PM

Quote:

Originally Posted by MUDKIP!!! (Post 9072135)
How do I get a scroll box for thing like trade shops?

You have to put your text inside a [cd], and give it overflow-y: auto, and set the height that you want the scroll window to be. So for example:

Spoiler:
[cd=overflow-y:auto; height: 200px;]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet diam at nisi blandit, et aliquam tellus vestibulum. Maecenas ut urna non nibh elementum finibus. Nullam nisl dui, tempor at posuere ac, bibendum at risus. Nulla facilisi. Suspendisse libero quam, imperdiet et congue nec, maximus pellentesque magna. Vestibulum fringilla posuere mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean at odio iaculis, venenatis metus non, fermentum purus. In venenatis ipsum vel ante facilisis facilisis. Integer aliquet eros nec pellentesque porta. Pellentesque elementum dapibus lorem ac posuere. Nam neque tellus, aliquam eget ullamcorper vitae, laoreet eget sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ac risus sed ligula aliquet tempus in vulputate purus. Nam eget faucibus augue.

Cras dui nisl, laoreet quis lacus vel, condimentum posuere purus. Nam rhoncus vehicula ex, a bibendum risus feugiat dictum. Quisque id vehicula lorem, a lobortis metus. Curabitur maximus quam in lorem elementum, nec fermentum nulla lacinia. Aenean id eros eget dolor ullamcorper gravida a quis justo. In varius turpis vestibulum suscipit hendrerit. Aenean lacinia volutpat neque quis scelerisque. Maecenas dictum tellus ac ante scelerisque sollicitudin. Morbi vel ligula leo. Etiam accumsan non ipsum eget venenatis. Aliquam pharetra auctor ipsum sit amet tempor. Integer rutrum id arcu vitae condimentum. Aenean sagittis convallis urna, ut tristique turpis luctus nec. Sed id orci risus. Aenean consequat, sapien eu ultrices eleifend, odio velit maximus mi, rhoncus luctus ante arcu nec erat.
[/cd]


Obviously though you'll want to replace the lorem ipsum with your trade shop content, but you get the idea :P

And the result is this:


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet diam at nisi blandit, et aliquam tellus vestibulum. Maecenas ut urna non nibh elementum finibus. Nullam nisl dui, tempor at posuere ac, bibendum at risus. Nulla facilisi. Suspendisse libero quam, imperdiet et congue nec, maximus pellentesque magna. Vestibulum fringilla posuere mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean at odio iaculis, venenatis metus non, fermentum purus. In venenatis ipsum vel ante facilisis facilisis. Integer aliquet eros nec pellentesque porta. Pellentesque elementum dapibus lorem ac posuere. Nam neque tellus, aliquam eget ullamcorper vitae, laoreet eget sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ac risus sed ligula aliquet tempus in vulputate purus. Nam eget faucibus augue.

Cras dui nisl, laoreet quis lacus vel, condimentum posuere purus. Nam rhoncus vehicula ex, a bibendum risus feugiat dictum. Quisque id vehicula lorem, a lobortis metus. Curabitur maximus quam in lorem elementum, nec fermentum nulla lacinia. Aenean id eros eget dolor ullamcorper gravida a quis justo. In varius turpis vestibulum suscipit hendrerit. Aenean lacinia volutpat neque quis scelerisque. Maecenas dictum tellus ac ante scelerisque sollicitudin. Morbi vel ligula leo. Etiam accumsan non ipsum eget venenatis. Aliquam pharetra auctor ipsum sit amet tempor. Integer rutrum id arcu vitae condimentum. Aenean sagittis convallis urna, ut tristique turpis luctus nec. Sed id orci risus. Aenean consequat, sapien eu ultrices eleifend, odio velit maximus mi, rhoncus luctus ante arcu nec erat.


Quote:

Originally Posted by PokemonNerd65 (Post 9073633)
Why is the background not showing?

Do you mean in your signature? Or is there a certain post that your background isn't showing in?

Twilight Storm January 12th, 2016 5:25 PM

In my signature. Thanks in advance.

Sopheria January 12th, 2016 5:43 PM

Quote:

Originally Posted by PokemonNerd65 (Post 9073670)
In my signature. Thanks in advance.

Try this:

Spoiler:
[cd=background-image:url('http://weknowyourdreams.com/images/turquoise/turquoise-04.jpg');height: 220px; width: 450px;border-radius:20px;overflow:hidden;][css-div="background-color:Transparent; width: 450px;"][FONT=Amatic SC][B][CENTER][title="My brother, Allen."][COLOR=Black][URL="http://www.pokecommunity.com/member.php?u=534336"][COLOR=Black]Brother[/COLOR][/URL][/COLOR][/title][COLOR=Black] ※[/COLOR] [URL="http://www.pokecommunity.com/showthread.php?t=353326"][COLOR=Black][title="The Auria Region"]Auria[/title][/COLOR][/URL] [COLOR=Black]※[/COLOR] [URL="http://www.pokecommunity.com/forumdisplay.php?f=43"][COLOR=Black][title="The Playground"]The Playground[/title][/COLOR][/URL][/CENTER]
[CENTER]
[IMG]http://pldh.net/media/pokemon/gen6/xy-animated/468.gif[/IMG][/CENTER]
[CENTER][SIZE=4]As everyone knows, it visits peaceful regions, bringing them gifts of kindness and sweet blessings.[/SIZE][/CENTER]
[/B]
[B][CENTER][title="Visitor Message"][COLOR=Black][URL="http://www.pokecommunity.com/member.php?u=533507"][COLOR=Black]VM[/COLOR][/URL][/COLOR][/title] [COLOR=Black]※[/COLOR] [URL="http://www.pokecommunity.com/private.php?do=newpm&u=533507"][COLOR=Black][title="Private Message"]PM[/title][/COLOR][/URL][/CENTER]
[/B][/FONT][/css-div][/cd]

I think it was because of the quotation marks around the attributes.

As everyone knows, it visits peaceful regions, bringing them gifts of kindness and sweet blessings.

VM PM


Desert Stream~ January 13th, 2016 2:53 PM

Thanks! I'll test it out.

Twilight Storm January 13th, 2016 4:40 PM

Quote:

Originally Posted by Sopheria (Post 9073687)
Try this:

Spoiler:
[cd=background-image:url('http://weknowyourdreams.com/images/turquoise/turquoise-04.jpg');height: 220px; width: 450px;border-radius:20px;overflow:hidden;][css-div="background-color:Transparent; width: 450px;"][FONT=Amatic SC][B][CENTER][title="My brother, Allen."][COLOR=Black][URL="http://www.pokecommunity.com/member.php?u=534336"][COLOR=Black]Brother[/COLOR][/URL][/COLOR][/title][COLOR=Black] ※[/COLOR] [URL="http://www.pokecommunity.com/showthread.php?t=353326"][COLOR=Black][title="The Auria Region"]Auria[/title][/COLOR][/URL] [COLOR=Black]※[/COLOR] [URL="http://www.pokecommunity.com/forumdisplay.php?f=43"][COLOR=Black][title="The Playground"]The Playground[/title][/COLOR][/URL][/CENTER]
[CENTER]
[IMG]http://pldh.net/media/pokemon/gen6/xy-animated/468.gif[/IMG][/CENTER]
[CENTER][SIZE=4]As everyone knows, it visits peaceful regions, bringing them gifts of kindness and sweet blessings.[/SIZE][/CENTER]
[/B]
[B][CENTER][title="Visitor Message"][COLOR=Black][URL="http://www.pokecommunity.com/member.php?u=533507"][COLOR=Black]VM[/COLOR][/URL][/COLOR][/title] [COLOR=Black]※[/COLOR] [URL="http://www.pokecommunity.com/private.php?do=newpm&u=533507"][COLOR=Black][title="Private Message"]PM[/title][/COLOR][/URL][/CENTER]
[/B][/FONT][/css-div][/cd]

I think it was because of the quotation marks around the attributes.

As everyone knows, it visits peaceful regions, bringing them gifts of kindness and sweet blessings.

VM PM


It's still not working.

Sopheria January 13th, 2016 4:58 PM

Quote:

Originally Posted by PokemonNerd65 (Post 9074851)
It's still not working.

Your image is huge @[email protected]

I think it's just taking forever to load. That, or the browser is just refusing to load it to save memory. Try this one:

http://i.imgur.com/m75nthe.jpg?1

It's cropped, so it's a lot smaller.

As everyone knows, it visits peaceful regions, bringing them gifts of kindness and sweet blessings.

VM PM

Twilight Storm January 13th, 2016 5:05 PM

Quote:

Originally Posted by Sopheria (Post 9074879)
Your image is huge @[email protected]

I think it's just taking forever to load. That, or the browser is just refusing to load it to save memory. Try this one:

http://i.imgur.com/m75nthe.jpg?1

It's cropped, so it's a lot smaller.

As everyone knows, it visits peaceful regions, bringing them gifts of kindness and sweet blessings.

VM PM

Thanks!

Dusty January 27th, 2016 6:19 AM

Is there some way to use CSS to play a GIF once when moused over?

Vendily February 19th, 2016 7:59 PM

You can use border-image on PC.
Placeholder


-webkit- and -o- are just for backwards compatibility.

HTML Code:

[cd="border: 10px solid transparent; padding: 10px; -webkit-border-image: url('http://i.imgur.com/9LbRgtc.png') 8 stretch; -o-border-image: url('http://i.imgur.com/9LbRgtc.png') 8 stretch; border-image: url('http://i.imgur.com/9LbRgtc.png') 8 stretch; background-color: #FFFDFE; width: 120px"]Placeholder[/cd]



Sopheria February 19th, 2016 8:41 PM

Quote:

Originally Posted by STARDU5T (Post 9093479)
Is there some way to use CSS to play a GIF once when moused over?

Not with the css we're limited to in posts. A gif doesn't have pause or play controls, unless you have browser plugins that make it possible. The closest you could come to doing it via css would be to hack it in with a :hover selector, which we unfortunately don't have access to in forum css :/

Quote:

Originally Posted by Eros (Post 9093487)
Is there anyway to css an image map? I really want all the idvidiual parts of my signature to be links

You could crop your signature image into several individual images. That way you'd be able to apply a link to each image :)

Vendily February 20th, 2016 12:59 PM

Continuing on my quest to find properties that work on PC, check out this!
The transform property works!


Texts


HTML Code:

[cd=" width: 200px; height: 100px; background-color: yellow; -ms-transform: rotate(7deg); -webkit-transform: rotate(7deg); transform: rotate(7deg);"] Texts[/cd]


I know for a fact that rotate(angle) and scale(x,y) work.

Lucario April 12th, 2016 7:40 AM

Quick tip for a scrolling background image: just put
Code:

background-attachment:fixed;background-repeat:no-repeat


in with your background image code.

Syvelocin June 8th, 2016 7:47 PM

I'm having a really hard time here lol. I can't get this to center. I would like to have it in the middle of the screen.

Rules and Information
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text

Giggleswee June 8th, 2016 7:57 PM

Quote:

Originally Posted by Syvelocin (Post 9278067)
I'm having a really hard time here lol. I can't get this to center. I would like to have it in the middle of the screen.

Rules and Information
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text
text text

One thing, position: center isn't a thing. It's either position: absolute, position: fixed, position: relative or position: static. ( http://www.w3schools.com/cssref/pr_class_position.asp )

If you want to center the whole thing you need to add in the first box
Code:

margin:0 auto;


This (almost) always centers things (at least on this forum where some themes break css >.<)

Protip: This only works when the div has a initial size set

Syvelocin June 8th, 2016 8:17 PM

Ah thanks, perfect. I haven't used any tutorials but I was looking at a few examples of some code to figure out how to do similar things and it used position: center without margin: 0 auto and the post was centered. I wonder why that code was there then.

Road August 6th, 2016 7:31 PM

Hello everyone! I was wondering if someone could help me figure out this one code.

So far I've got the gist of using CSS, but the one thing I can't figure out is how to make two boxes float next to each other like in this example trade thread CSS (the "Wants" and "Trophy Case" boxes). I thought it was the float code, but when I used it my two boxes went all the way to the edge like this. Is there some sort of limit I have to set so it stays in line with the other boxes?

Maybe a dumb question but I can't seem to figure out where I'm messing up. Thanks in advance! @[email protected]

Venia Silente August 7th, 2016 9:18 AM

For floating two boxes next to each other, you need to give them and the boxes right below extra information, so you'll find yourself using css-div.

Quote this post and check the CSS code to see the example I give here. These are, more or less, the keys to aligning floating boxes properly:

* Float all boxes, or float none.
* To align N boxes, float (N-1) of them left and the last of them right, or the first of them left and the other (N-1) of them right.
* After the floating boxes, add an empty box with the css-div content: [css-div="float: clear; clear:both;"][/css-div]. This disables the floating of elements (so that the following boxes don't get mixed into all of this)
* In what regards to PokéCommunity CSS code: the css-divs contaning each floated box need to be contiguous, in that you don't break a line when finishing one to start the next. if you add a line break, the line break will also count in the floating elements.

Example follows:


Box One, not floated, main content. Here I talk about life, love, pizza and CSS.

Floated box numero uno, this one floats to the left and should stick by the other's side. Give this box a width (width or max-width property) so that the browser knows how to align the content.
Floated box numero dos, this one floats to the right and should stick by the other's side. This box need to have a width set so that added with the other one they don't go above 100%. In this example, both boxes have a max-width of 49%.
(This small box doesn't need to hold any actual content inside, it's there only for the next content to align correctly to the two boxes; all that matters is that you use the "float:clear; clear:both" CSS tags.)

Box Two, not floated, main content. Here I mostly part goodbye with the post and stuff.




This is what happens if you add linebreaks between the css-div tags:


Box One, not floated, main content, pretty much the same treatment as in the above example.

Floated box to the left, with content and stuff.

Floated box to the right, with content and stuff.

(Clearing box)

Box Two, not floated, main content. Same treatment as in the above example.


Road August 7th, 2016 4:24 PM

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 September 8th, 2016 5:53 AM

Hi, I have this image:
http://i.xomf.com/lmxxh.png

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

http://i.xomf.com/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 September 8th, 2016 8:56 PM

Quote:

Originally Posted by Team Fail (Post 9400537)
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.

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.

tokyodrift September 9th, 2016 6:23 PM

Quote:

Originally Posted by Lucario (Post 9400982)
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.

Mind posting what you have so far?

Lucario September 10th, 2016 12:07 PM

Quote:

Originally Posted by Josephine (Post 9402944)
First of all you want to fill in that transparent background in your image:

http://i.imgur.com/BJfd5q8.png

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

Lucario

Code:

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


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:

[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]


which would give you this:

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

to center this just wrap it in [center] tags

Thanks!

Trev December 27th, 2016 7:18 PM

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][/css-div][/center]


Some notes on using it:
  • Use "top" to adjust the position vertically and "left" to adjust the position horizontally.
  • Because of the [center] 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 [center] 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.

AlphaLuxray February 9th, 2017 10:52 PM

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:
[css-div=width:250px; height:250px; background-image:url('http://cdn.bulbagarden.net/upload/thumb/a/a7/405Luxray.png/250px-405Luxray.png');][css-div=width:75px; height:250px: background-color:#000000; position:relative; left:175px;]Text testing the width of things and therefore must be long[/css-div][/css-div]


And the finished product:

Spoiler:
Text testing the width of things and therefore must be long

Flowerchild February 9th, 2017 11:46 PM

Quote:

Originally Posted by AlphaLuxray (Post 9568144)
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:
[css-div=width:250px; height:250px; background-image:url('http://cdn.bulbagarden.net/upload/thumb/a/a7/405Luxray.png/250px-405Luxray.png');][css-div=width:75px; height:250px: background-color:#000000; position:relative; left:175px;]Text testing the width of things and therefore must be long[/css-div][/css-div]


And the finished product:

Spoiler:
Text testing the width of things and therefore must be long

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

AlphaLuxray February 10th, 2017 8:19 AM

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:
[css-div=height:37px; width:128px; float:left; vertical-align:middle; background-color:#000000;]The Prism League[/css-div]

The Prism League

AlphaLuxray February 21st, 2017 9:50 AM

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

AlphaLuxray February 21st, 2017 6:40 PM

Alright, perfect. Thanks.

~kaito~ February 26th, 2017 2:00 PM

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 -

Quote:

Spoiler:
[ css-div="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]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][IMG]http://www.serebii.net/pokedex-dp/icon/468.gif[ /IMG]

[ /css-div]


Christos February 26th, 2017 3:49 PM

Quote:

Originally Posted by ~kaito~ (Post 9582259)
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 -

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 Code:

[css-div="width: 500px; margin: 0 auto"]stuff[/css-div]



~kaito~ February 26th, 2017 4:22 PM

Quote:

Originally Posted by Christos (Post 9582350)
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 Code:

[css-div="width: 500px; margin: 0 auto"]stuff[/css-div]



i tried it out, but i don't quite know where to put it. >.<

Christos February 26th, 2017 4:30 PM

Quote:

Originally Posted by ~kaito~ (Post 9582377)
i tried it out, but i don't quite know where to put it. >.<

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][IMG]http://www.serebii.net/pokedex-dp/icon/468.gif[ /IMG]

[ /css-div]

~kaito~ February 26th, 2017 5:06 PM

Quote:

Originally Posted by Christos (Post 9582383)
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][IMG]http://www.serebii.net/pokedex-dp/icon/468.gif[ /IMG]

[ /css-div]

thank you so so so so much <3 <3 <3

Spyro March 3rd, 2017 7:26 AM

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 March 4th, 2017 5:21 AM

Quote:

Originally Posted by Soapie❤ (Post 9586260)
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.

Hi there! Based off of my findings, I do not think tables are within the limits of what PC allows for CSS, sadly. :(

Spyro March 4th, 2017 7:37 AM

Quote:

Originally Posted by Tsutarja (Post 9586901)
Hi there! Based off of my findings, I do not think tables are within the limits of what PC allows for CSS, sadly. :(

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

Venia Silente March 4th, 2017 5:24 PM

Quote:

Originally Posted by Soapie❤ (Post 9586260)
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.


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.

Tsutarja March 4th, 2017 7:57 PM

Quote:

Originally Posted by Venia Silente (Post 9587283)
-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 March 4th, 2017 10:06 PM

Quote:

Originally Posted by Tsutarja (Post 9587345)
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 April 7th, 2017 12:12 AM

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 April 13th, 2017 6:54 AM

Quote:

Originally Posted by Venia Silente (Post 9587283)

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 April 13th, 2017 12:25 PM

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 April 18th, 2017 2:05 AM

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 April 18th, 2017 10:50 AM

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 April 18th, 2017 12:01 PM

Quote:

Originally Posted by Radiating (Post 9621831)
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 April 18th, 2017 12:07 PM

Quote:

Originally Posted by Tsutarja (Post 9621860)
|#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 April 18th, 2017 12:16 PM

Quote:

Originally Posted by Radiating (Post 9621868)
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 April 18th, 2017 12:31 PM

Quote:

Originally Posted by Johnny (Post 9621878)
|#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?

Quote:

Originally Posted by Tsutarja (Post 9621888)
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 April 18th, 2017 1:06 PM

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

Thanks

AnimePunk314 June 4th, 2017 2:34 PM

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

Spyro June 12th, 2017 2:31 PM

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 June 12th, 2017 3:45 PM

Quote:

Originally Posted by Johnny (Post 9677212)

Yes! :o exactly!

Spyro June 12th, 2017 3:57 PM

Quote:

Originally Posted by Johnny (Post 9677226)
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 July 2nd, 2017 8:05 PM

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 July 2nd, 2017 10:50 PM

Quote:

Originally Posted by Radiating (Post 9694796)
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 July 3rd, 2017 11:58 AM

Quote:

Originally Posted by Radiating (Post 9694796)
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?


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 Code:

[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]PokTrivia 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 July 3rd, 2017 12:39 PM

Quote:

Originally Posted by Ash (Post 9695519)
something like this?


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 Code:

[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]PokTrivia 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.)

alisaie July 3rd, 2017 1:49 PM

Quote:

Originally Posted by Radiating (Post 9695560)
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.)

Yes you are more than welcome to use it!! Let me know if you have any issues!

Nah April 29th, 2018 12:40 PM

Is there a limit on the number of slides a css carousel can have?

Incineroar April 29th, 2018 10:04 PM

There shouldn't be, it's probably dependent on the library itself and what the browser can show. That being said, screen width is a huge concern if you start using more than a few, so I'd probably try to keep the number low unless you don't have a positional marker for the carousel.

Nah April 30th, 2018 3:45 AM

Quote:

Originally Posted by Ganondorf (Post 9870671)
There shouldn't be, it's probably dependent on the library itself and what the browser can show. That being said, screen width is a huge concern if you start using more than a few, so I'd probably try to keep the number low unless you don't have a positional marker for the carousel.

I see.

The plan right now is to have 7 slides in total. But after 5, it doesn't want to make more of them be separate--the 6th one it keeps mashing together with the 5th for some reason =/ Some of the slides use images that go across the whole screen. Would making them not do that help, or am I misunderstanding things here?

And what is a "positional marker"?

Hyzenthlay May 1st, 2018 2:55 AM

Hey guys, for some reason I can't get rid of the scroll near my signature. I tried overflow:visible but it didn't help. I'm only using BB code, so why the scroll?

Tsutarja May 1st, 2018 4:03 AM

Quote:

Originally Posted by Clover (Post 9871164)
Hey guys, for some reason I can't get rid of the scroll near my signature. I tried overflow:visible but it didn't help. I'm only using BB code, so why the scroll?

I don't see it on my end. :o

Hyzenthlay May 1st, 2018 4:08 AM

Quote:

Originally Posted by Tsutarja (Post 9871187)
I don't see it on my end. :o

Oh, really? What browser are you using? I'm on Chrome and my forum skin is Shooting for the Sun.

The scroll is driving me crazy, I swear, haha.

Tsutarja May 1st, 2018 4:29 AM

Quote:

Originally Posted by Clover (Post 9871192)
Oh, really? What browser are you using? I'm on Chrome and my forum skin is Shooting for the Sun.

The scroll is driving me crazy, I swear, haha.

One and the same, my friend. What OS are you using? Screen resolution?

I'd like to see a screenshot as well just to see.

Hyzenthlay May 1st, 2018 4:38 AM

Quote:

Originally Posted by Tsutarja (Post 9871209)
One and the same, my friend. What OS are you using? Screen resolution?

I'd like to see a screenshot as well just to see.

I'm using a 64-bit operating system and my resolution is the recommended 1920 x 1080.


Tsutarja May 1st, 2018 5:41 AM

Either way, it's not really outside of the signature limits. However, have you tried different styles to see if it's still present? I have matched my settings with yours and still don't see it at all.

Hyzenthlay May 1st, 2018 5:50 AM

Quote:

Originally Posted by Tsutarja (Post 9871240)
Either way, it's not really outside of the signature limits. However, have you tried different styles to see if it's still present? I have matched my settings with yours and still don't see it at all.

Well this is sort of embarrassingthe scroll only appeared because I had Chrome zoomed in to 110%! That's all. \_(?)_/

Thanks for your time, all the same! ^_^;

Incineroar May 1st, 2018 8:22 AM

I saw this and was totally going to reply but forgetful me...
Quote:

Originally Posted by Nah (Post 9870756)
I see.

The plan right now is to have 7 slides in total. But after 5, it doesn't want to make more of them be separate--the 6th one it keeps mashing together with the 5th for some reason =/ Some of the slides use images that go across the whole screen. Would making them not do that help, or am I misunderstanding things here?

And what is a "positional marker"?

A positional marker is those dots or dashes or whatnot that you may see on an image carousel to indicate where in the set of images you are. It's the thing in this image underlined in red:

https://i.imgur.com/r9KK45O.png

Nah May 2nd, 2018 3:44 AM

Quote:

Originally Posted by Ganondorf (Post 9871309)
I saw this and was totally going to reply but forgetful me...

A positional marker is those dots or dashes or whatnot that you may see on an image carousel to indicate where in the set of images you are. It's the thing in this image underlined in red:

Removing them seems to have fixed things. Thanks n_n

Hyzenthlay June 28th, 2018 12:20 PM

Hi guys! Is there any reason why the following code for my custom usertitle isn't working?

[*span=font-family: Germania One; font-size: 20px; background: -webkit-linear-gradient(#078218, #98ba8d); -webkit-background-clip: text; -webkit-text-fill-color: transparent;]#TeamTrivia[/span]

It was fine ten minutes ago...


Trev July 17th, 2018 7:02 AM

I don't know that you necessarily need to use the webkit version of those parameters. I think you can just use text-fill-color and background-clip as they are. Then again, I've never use [span] so...

Hyzenthlay September 8th, 2018 11:00 AM

Well, I'm back again! Can anyone tell me why using a transparent border makes an image repeat, like shown below?

Spoiler:
testing

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu.


For example, if you look at the right border, you'll notice the image behind it is where the left side of the background starts. Why won't it fit the image properly?

EDIT: Never mind, all it needed was "background-origin: border-box", haha. But I will leave this up in case anyone else encounters the issue. ????

Mewtwolover July 21st, 2019 8:53 AM

Quote:

Originally Posted by seeker (Post 5327324)
Firebug - One of the most useful addons for FireFox I've downloaded. What this does is, basically lets you edit a web pages coding (not for good only for demonstration purposes) and see your edits right before your eyes as you type. It's a great way to see what way a web site is built up as well as check codes to see how things are done.

This is outdated, Firebug isn't available anymore because same features are included in Firefox.

AMP017 June 2nd, 2021 5:56 PM

Hey, I don't really know much CSS but was wondering if someone could help me with making a fancy flair or something? I am seeing them and wondering how they were done.

Tsutarja June 3rd, 2021 7:29 AM

Quote:

Originally Posted by AMP017 (Post 10366587)
Hey, I don't really know much CSS but was wondering if someone could help me with making a fancy flair or something? I am seeing them and wondering how they were done.

Hi there o:

I know this thread is a mess (and that's why we're hoping to get it reworked in the future ^^) but here's a good place to start if you want to learn some CSS:
https://www.w3schools.com/css/

Or if you were looking to just have a nice flair to go along, you could pop into art shop as well here!
https://www.pokecommunity.com/forumdisplay.php?fn=art-and-design

AMP017 June 3rd, 2021 9:22 AM

Quote:

Originally Posted by Tsutarja (Post 10366779)
Hi there o:

I know this thread is a mess (and that's why we're hoping to get it reworked in the future ^^) but here's a good place to start if you want to learn some CSS:
https://www.w3schools.com/css/

Or if you were looking to just have a nice flair to go along, you could pop into art shop as well here!
https://www.pokecommunity.com/forumdisplay.php?fn=art-and-design

Thanks bro! I'll check both of them out later!


All times are GMT -8. The time now is 11:04 PM.


Like our Facebook Page Follow us on Twitter © 2002 - 2018 The PokéCommunity™, pokecommunity.com.
Pokémon characters and images belong to The Pokémon Company International and Nintendo. This website is in no way affiliated with or endorsed by Nintendo, Creatures, GAMEFREAK, The Pokémon Company or The Pokémon Company International. We just love Pokémon.
All forum styles, their images (unless noted otherwise) and site designs are © 2002 - 2016 The PokéCommunity / PokéCommunity.com.
PokéCommunity™ is a trademark of The PokéCommunity. All rights reserved. Sponsor advertisements do not imply our endorsement of that product or service. User generated content remains the property of its creator.

Acknowledgements
Use of PokéCommunity Assets
vB Optimise by DragonByte Technologies Ltd © 2023.