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.


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.