Views: 20,069,384 |
Home
| Forums
| Uploader
| Wiki
| Object databases
| IRC
Rules/FAQ | Memberlist | Calendar | Stats | Online users | Last posts | Search |
04-27-24 04:38 PM |
Guest: |
0 users reading Post Layout Guide | 1 bot |
Main - General Chat - Post Layout Guide | Hide post layouts | New reply |
NWPlayer123 |
| ||
Member Imma Snuggle You Level: 110 Posts: 1143/3604 EXP: 14207702 Next: 201184 Since: 07-07-12 From: Colorado Last post: 3104 days ago Last view: 1261 days ago |
So, I see that a lot of you are interested in making a post layout. Since I have nothing better to do tonight, I decided to make a guide.
Step 1 is to go open a new tab in your browser and edit your profile and go to post layout. Now add these tags in the header: <style type="text/css"></style>
This tells the browser that you're inserting a new script and that it should expect to read CSS syntax.
Now go back to your profile and look at what the URL is. You see how it says id=XX ? That will be important in a minute. Go back to editing your post layout. Now make a basic layout.
Now you need to decide what you want your post to look like. If you want to edit the image embedding element for things like a border or a glow around the edge then add color: #FFFFFF!important;
!important makes it override any existing settings, you will need it for a lot of your layout. Keep in mind the FFFFFF is a color in hex. If you want to get custom stuff, use this one that I use
Say you want to put a border around your post like I have that is green. You would use border-color: #FFFFFF!important; Again, with that link I posted. An alternative if you want trnasparency like mine uses, instead of #FFFFFF you can use border-color: rgba(XXX,XXX,XXX,0.XX)!important;
This works using decimal which you can still get from that linked website. the Red Green and Blue boxes go in the first 3 triple Xs. the last 0.XX is the alpha which is transparency. It can be anything from 0.0 which is completely transparent to 1.0 which is fully visible, or anything inbetween. The other VERY IMPORTANTthing you need for the border to work is the width.border-width: 1px 1px 1px 1px!important; puts a 1px border around the entire "element". The first 1px makes the top 1px. The second is the right, the third is the bottom, and the last one is the left.
You can have rounded borders by using border-radius: Ypx Ypx Ypx Ypx!important; and it works in the order top-left, top-right, bottom-right, bottom-left. You can set it to 0 to have straight edges no matter what.
Now onto backgrounds. First thing's first: Don't go overboard with the backgrounds, if it is eyerape, you should probably pass it off to something more simple.If you just want a simple background color, no image, then use background-color: inputmethod!important;
Are you catching onto the CSS syntax yet? the inputmethod can be either the hex or rgba mentioned above.
If you want to have an image, use background-image:url('http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg')!important;
Ignore the image I used in teh example, it's irrelevant The important thing is that the url you put in there works exactly like using the image tag on teh forums. If it wouldn't load in your post using those tags, it wouldn't work here. A good indication is if at the end of teh url, it has an image name, like blah.jpg or meep.png
One last thing you should know is text shadows. This basically makes a "glow" around the letters. the syntax is text-shadow: h-shadow v-shadow blur color!important;
h and v-shadow are the position offset of the literal text behind the text. if the number is something like 2px 2px it would be shifted down and to the right by 2px. YOU CAN USE NEGATIVES FOR THOSE 2
The blur should also probably be in px. That's basically how you make the text behind the text become a blurry "glow". finally, the color is the rgba or hex I talked about earlier. OH! Almost forgot. If you want to center/left/right/justify something, then you can use text-align: input!important; where input is what I just mentioned, center, left, right, or justify.
So, if you have any cool or fancy things you want to do, ask below and I can probably help. I know a bunch of CSS. Sorry for a super long post |
MK7tester |
| ||
Magikoopa I'm back Level: 104 Posts: 1269/3145 EXP: 11581578 Next: 280548 Since: 07-07-12 From: Dolphic Island Last post: 2600 days ago Last view: 2598 days ago |
Couldn't you have posted this on the other thread? Blarg, but nice work anyways. |
Tahcryon |
| ||
Embodiment of Time Can someone lead me to a non-capitalist clothing store? Level: 128 Posts: 1530/5087 EXP: 23825676 Next: 556024 Since: 07-07-12 Last post: 2206 days ago Last view: 769 days ago |
Wow, nice work! ____________________
|
Degolegodyl |
| ||
Larry Koopa /r/pcmasterrace Level: 92 Posts: 327/2397 EXP: 7566552 Next: 190385 Since: 12-09-12 From: Toronto, Canada Last post: 1891 days ago Last view: 1777 days ago |
Good. But just a but late. I finished my layout less than 8 hours ago |
Arisotura |
| ||
Star Mario in this room you have a pile of apple pies Level: 163 Posts: 905/9020 EXP: 56284046 Next: 203598 Since: 07-03-12 From: in a box Last post: 1 day ago Last view: 1 day ago |
Good, but gotta mention a few things. You should state that users need to have HTML/CSS knowledge, or else they're going to rip your examples off and make crap.
People should also go light on stuff like text shadows. They can make text harder to read. I find NWP's layout a bit hard to read because of that... ____________________ NSMBHD - Kafuka - Jul melonDS the most fruity DS emulator there is zafkflzdasd |
Stygmax |
| ||
SMG2.5 Cartographer Level: 88 Posts: 1041/2178 EXP: 6559030 Next: 91634 Since: 12-02-12 Last post: 399 days ago Last view: 399 days ago |
It's not true that editing link colors changes your name link color. It was just kinda misleading there. Status: It was really, really fun, guys - thanks for the ride!
|
NWPlayer123 |
| ||
Member Imma Snuggle You Level: 110 Posts: 1604/3604 EXP: 14207702 Next: 201184 Since: 07-07-12 From: Colorado Last post: 3104 days ago Last view: 1261 days ago |
It actually does but it's against Kuribo's rules. ____________________ "I hate playing musical chats" ~ Quote of the month |
Stygmax |
| ||
SMG2.5 Cartographer Level: 88 Posts: 1042/2178 EXP: 6559030 Next: 91634 Since: 12-02-12 Last post: 399 days ago Last view: 399 days ago |
By the way, how did you center your name? My .sidebar has centered text but it doesn't do that. Status: It was really, really fun, guys - thanks for the ride!
|
NWPlayer123 |
| ||
Member Imma Snuggle You Level: 110 Posts: 1606/3604 EXP: 14207702 Next: 201184 Since: 07-07-12 From: Colorado Last post: 3104 days ago Last view: 1261 days ago |
.topbar7_1{
Is my exact CSStext-align: center; ... } ____________________ "I hate playing musical chats" ~ Quote of the month |
Stygmax |
| ||
SMG2.5 Cartographer Level: 88 Posts: 1045/2178 EXP: 6559030 Next: 91634 Since: 12-02-12 Last post: 399 days ago Last view: 399 days ago |
Ah, I see, it's in .topbarXX_1. Thanks. Status: It was really, really fun, guys - thanks for the ride!
|
Nadia |
| ||
Hi I'm a person Level: 37 Posts: 106/297 EXP: 336106 Next: 2147 Since: 07-07-12 From: Denmark Last post: 263 days ago Last view: 16 days ago |
Here are some other properties (and more detailed syntax) you can set in your CSS:[source]
background-image: image, image, ...; The specified images are used as background, ordered first one on top. You can use any number of images you want. Examples: background-image: url(http://somesite.com/bricktile.png); -- Will set my background to one single background image. background-image: url(http://somesite.com/overlay.png), url(http://somesite.com/bricktile.png); -- Will set my background to overlay with bricktile below it. (You should use what I did in the second example together with background-repeat and background-position in most cases) background-color: Specifies the background color. Example: background-color: #00F; -- Sets my background color to blue. background-position: position, position, ...; Specifies the position of a background of an element. The positions should be in the same order as your background images, and there should be the same number of them. Example: background-position: right, top left; -- If we take my previous example, that places overlay at the center right and bricktile at the top left. background-repeat: repeat, repeat, ...; Specifies how background are repeated. Again, you need the same number as you have background images. Example: background-repeat: no-repeat, repeat; -- Causes the first image to not be repeated ant the second to be repeated as normal, can be used for side images for instance. border: size borderType color; Specifies an element's border. Example: border: 4px solid black; -- Makes a four pixel wide solid black border. border-radius: size; Rounds the border according to the size you specify, optionally you can specify. Example: border-radius: 8px; -- Makes the round border's radius 8 pixels. box-shadow: [inset] xOffset yOffset blur [spread] color, ...; Specifies a shadow for the element, xOffset, yOffset, blur and spread are specified like sizes. Inset and spread are optional. Examples: box-shadow: 0px 0px 8px #00F; -- Gives an element a subtle blue shadow with no offset. box-shadow: 4px 4px 0px #0F0; -- Gives an element a completely flat green shadow offset to the bottom right. box-shadow: inset 0px 0px 8px #000; -- Gives an element a box shadow on the inside. box-shadow: 0px 0px 8px 6px #000 -- Here the spread value is used to make the box shadow darker. color: color; Set the text color of an element. Example: color: #F00; -- Sets the text color to red. margin: size; margin-left: size; margin-right: size; margin-top: size, margin-bottom: size, Margin without a direction sets the margin in all directions. Margin with a direciton specified only sets it in that direction (obviously). Examples: margin: 8px; -- Makes 8 pixels of margin around an element. margin-left: 20px; -- Makes 20 pixels of margin to the left of an element. padding: size; padding-left: size; padding-right: size; padding-top: size; padding-bottom: size; Works exactly like margin, except the space is inside the element instead of around it. It is a very good idea to always use padding on your elements to add some distance between the text and the border. text-shadow: offsetX offsetY [spread] color, ...; Applies one or multiple shadows to the element's text. This works exactly like box-shadow, except there is no inset option. Values: size: Size is specified as a number followed by the units the size is in. You will be using pixels (px) most of the time, but there's also pt which are mainly used for fonts. Sizes can also be specifed in %, which will be relative to the elemnt's parent as far as I know. color: Colors are specified as either: a hex value #RRGGBB -- Example: #0000FF is blue an rgb value rgb(red, green, blue) -- Example: rgb(255, 0, 0) is red an rgba value rgba(red, green, blue, alpha) -- Example: rgba(255, 0, 0, 0.5) is 50% transparent red. Transparency is a value between 0 and 1. a hsl value hsl(hue, saturation, lightness) -- hsl(0, 100%, 50%) is red a hsla value hsla(hue, saturation, lightness, alpha) -- Same as hsl but with alpha (see rgba) repeat: Repeat is specified as either: repeat: Repeat in both horizontally and vertically repeat-x: Repeat horizontally repeat-y: Repeat vertically no-repeat: Do not repeat position: Position is specifed as one or two positions, for example: top left right -- Centered vertically, right-aligned horizontally[/source] |
Main - General Chat - Post Layout Guide | Hide post layouts | New reply |
Page rendered in 0.054 seconds. (2048KB of memory used) MySQL - queries: 29, rows: 217/217, time: 0.011 seconds. Acmlmboard 2.064 (2018-07-20) © 2005-2008 Acmlm, Xkeeper, blackhole89 et al. |