Kuribo64
Views: 19,850,608 Home | Forums | Uploader | Wiki | Object databases | IRC
Rules/FAQ | Memberlist | Calendar | Stats | Online users | Last posts | Search
03-28-24 12:10 PM
Guest:

0 users reading Post Layout Guide | 1 bot

Main - General Chat - Post Layout Guide Hide post layouts | New reply


NWPlayer123
Posted on 01-25-13 04:03 AM (rev. 2 of 01-25-13 04:03 AM) Link | #9625
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.

<style type="text/css">
.topbarXX_1{

}
.topbarXX_2{

}
.sidebarXX{

}
.mainbarXX{

}
.mainbarXX div.quote{

}
.mainbarXX div.quotecontent{

}
.mainbarXX div.geshi{

}
.mainbarXX div.spoiler{

}
.mainbarXX div.spoiler button{

}
.mainbarXX div.spoiled{

}
</style>
Replace any XX with the number you got from the id that you got from your URL.
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

.mainbarXX img.imgtag{

}
If you want to edit smilies for a glow or such then add

.mainbarXX img.smiley{

}
If you want to edit the properties of links such as your name in the top left or any links you post in the main part, there are 3 options.

[/code]
.mainbarXX a:link{

}
.mainbarXX a:visited{

}
.mainbarXX a:hover{

}
[/code]
a:link is the link when it hasn't been clicked on, a:hover is when your mouse is on the link, a:visited is when it has been clicked on. Using these you can change the text color to whatever you want. To change text color on ANYTHING, the CSS that you put in brackets is
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 IMPORTANT

thing 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 :P 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 :P

MK7tester
Posted on 01-25-13 04:03 AM Link | #9626
Couldn't you have posted this on the other thread? Blarg, but nice work anyways. :P

Tahcryon
Posted on 01-25-13 08:43 AM Link | #9646
Wow, nice work!

____________________


[04/15/2018]gridatttack: I still think the whole smg2.5 team are still in middle school lol
[04/15/2018]gridatttack: and they are 14yrs old
__________

cosmological: There's no one in Russia who doesn't agree with Putin, probably because his ideas are that great



Degolegodyl
Posted on 01-25-13 12:00 PM Link | #9651
Good. But just a but late. I finished my layout less than 8 hours ago :(

Arisotura
Posted on 01-25-13 01:02 PM Link | #9669
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
Posted on 02-16-13 04:09 PM Link | #15694
It's not true that editing link colors changes your name link color. It was just kinda misleading there. :P
Status: It was really, really fun, guys - thanks for the ride!

NWPlayer123
Posted on 02-16-13 04:10 PM Link | #15695
It actually does but it's against Kuribo's rules.

____________________
"I hate playing musical chats" ~ Quote of the month

Stygmax
Posted on 02-16-13 04:15 PM Link | #15697
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
Posted on 02-16-13 04:18 PM (rev. 2 of 02-16-13 04:21 PM) Link | #15703
.topbar7_1{
text-align: center;
...
}
Is my exact CSS

____________________
"I hate playing musical chats" ~ Quote of the month

Stygmax
Posted on 02-16-13 04:19 PM Link | #15704
Ah, I see, it's in .topbarXX_1. Thanks.
Status: It was really, really fun, guys - thanks for the ride!

Nadia
Posted on 02-17-13 04:42 PM Link | #15831
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.057 seconds. (2048KB of memory used)
MySQL - queries: 29, rows: 221/221, time: 0.018 seconds.
[powered by Acmlm] Acmlmboard 2.064 (2018-07-20)
© 2005-2008 Acmlm, Xkeeper, blackhole89 et al.