![]() |
Quote:
I really appreciate it. |
hey guys :3
I was wondering how can I make a grid using CSS? |
Quote:
|
Quote:
|
Quote:
|
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 ^ ^;;;;; Spoiler:
It won't go away, even with float. What on earth am I doing wrong? //sighs forever Code: Spoiler:
Thanks in advance for any help! |
ohh nice thread.
|
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! |
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!
|
Quote:
[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:
Result: Quote:
|
Quote:
|
Quote:
Spoiler:
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! |
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 |
Quote:
[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: |
Quote:
|
How do you fix this to make Togekiss Fan Club in the middle, inside the box? Thanks.
|
Quote:
|
So I'm basically going back to basic CSS. I'm having a little trouble right now though.
Spoiler:
It always appears with another picture, am I doing something wrong? |
Quote:
Spoiler:
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. |
Great post!!
|
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:
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:
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 :) |
How do I get a scroll box for thing like trade shops?
|
Why is the background not showing?
|
Quote:
Spoiler:
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:
|
In my signature. Thanks in advance.
|
Quote:
Spoiler:
I think it was because of the quotation marks around the attributes. |
Thanks! I'll test it out.
|
Quote:
|
Quote:
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. |
Quote:
|
Is there some way to use CSS to play a GIF once when moused over?
|
You can use border-image on PC.
Placeholder -webkit- and -o- are just for backwards compatibility. HTML Code:
|
Quote:
Quote:
|
Continuing on my quest to find properties that work on PC, check out this!
The transform property works! Texts HTML Code:
|
Quick tip for a scrolling background image: just put
Code:
|
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.
|
Quote:
If you want to center the whole thing you need to add in the first box Code:
Protip: This only works when the div has a initial size set |
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.
|
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] |
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. |
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:
|
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? |
Quote:
|
Quote:
|
Quote:
|
Diagonal Floating Headers Here's a quick example of a neat little feature I found when working on my thread. Hamlet Act III, Scene 1To 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:
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. |
Hi! I've run into an issue trying to stack div's within each other, most notably that the interior one's background color does not seem to be parsing.
Here's the code: Spoiler:
And the finished product: Spoiler:
|
Quote:
|
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:
|
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
|
Alright, perfect. Thanks.
|
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:
|
Quote:
HTML Code:
|
Quote:
|
Quote:
[ 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] |
Quote:
|
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. |
Quote:
|
Quote:
Thank you very much for your help and your time! :) |
Quote:
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. |
Quote:
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) |
Quote:
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 ) |
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.. |
Quote:
|
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. |
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 |
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?) |
Quote:
|#TeamTrivia|Paired with Soapie❤| You mean like this right? |
Quote:
|
Quote:
|
Quote:
Quote:
|
Actually Johnny it's fine, I think I'll just use Tsutarja's code for now.
Thanks |
How do you close a thread? Please help, I don't want to lead people thinking my offer is still open.
|
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
|
Quote:
|
Quote:
Had a little time to do it and it works! Thank you ^-^ |
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?)
|
Quote:
(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), |
Quote:
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:
|
Quote:
|
Quote:
|
Is there a limit on the number of slides a css carousel can have?
|
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.
|
Quote:
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"? |
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?
|
Quote:
|
Quote:
The scroll is driving me crazy, I swear, haha. |
Quote:
I'd like to see a screenshot as well just to see. |
Quote:
Spoiler:
|
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.
|
Quote:
Thanks for your time, all the same! ^_^; |
I saw this and was totally going to reply but forgetful me...
Quote:
https://i.imgur.com/r9KK45O.png |
Quote:
|
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... Spoiler:
|
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...
|
Well, I'm back again! Can anyone tell me why using a transparent border makes an image repeat, like shown below?
Spoiler:
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. ???? |
Quote:
|
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.
|
Quote:
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 |
Quote:
|
| All times are GMT -8. The time now is 11:04 PM. |
![]()
© 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.