How to Properly Style Blogs and Profiles By Skittles

By Skittles
POSTED: 13 Dec 2011 07:21
CATEGORY: This Community
FEATURED: Yes (BanMan)
(Go to comments)

This blog is more or less an improvement over my similar, previous blog covering this, which is the go-to place for more artistic take on styling, such as color coordinating with backgrounds and border use. Whatever. At the time, there were some things that I hadn't thought of for some reason. I really didn't want to have another of these submitted to be features since there have been toooonnnss of them, but I wasn't satisfied with my previous work and knew that there were several better solutions for new and veteran users alike. Oh, and for new users: remove the spaces in the [ style ] braces, as those are there so that the site doesn't interpret them as me trying to style something on the blog.

Images

In my previous blog, I suggested that you simply re-size your images down to 210px in width with an image editor such as GIMP. However, this method limits resizing to non-mobile device users. For some reason, despite being a web developer myself, I had a brain fart and hadn't thought of simply using CSS. Now, to set up a good resizing style with CSS, it's best to use the following two properties:

max-width
max-height

The reason being that there is also 3DSPaint, thus resizing only to fit well on DSiPaint is odd. Also, using these two properties will allow you to leave alone images that are smaller than those dimensions and only effect those that are larger than them. On to the code:

[ style ]IMG[name=body_images]{margin-right:0%;max-width:80%;max-height:210px;position:relative;left:8%;}[ /style ]

This is the code that I used on my Melee blog. I've found that 80% works best for both browsers, as it keeps the images withing the dimensions of the blog; when I tried to go 90% (which should have worked), it grew too large. All that the positioning portion of the code does is get the images to be close to the center of the blog where I like 'em. :3 Oddly, I tried a bit of slightly better CSS using TD#blog_body>IMG[name=body_images], however, it wasn't working for some reason. Hm, oh well, this works too.
Also, try and stick away from complicated .GIF (animated) images. The longer and more complicated they are, the more the page performance is impacted negatively. :'(

Backgrounds
In this case, my previous blog was okay in regards to the background of the <body> tag. However, like with the images, I completely forgot about using CSS for images in the textarea. So, we'll be using the following CSS properties:

background
background-origin
background-position
background-size
background-repeat

Now, I won't go into too much detail here, but I'll try to explain enough that you can use it easily. The first property is the standard background property. To set the background to an image, type background:url('http://urlhere.com/example.jpg');
Next up, I personally would set the next property to this: background-origin:content-box; After that, you can set the background position to whatever you want. What it does is set where the background image will begin at, such as: background-position:top;. You can use up to two terms when positioning, such as top left, etc.
Lastly, you can reference the desired position by use px or % dimensions like 5% 10%, which follows the mathematical (x,y) coordinate system. The background size is self explanatory, so it should suffice to say that you can style it, again, by using px or % measurements (x,y): background-size:5px 20px;
Use percentages for cross-browser support.
Finally, background-repeat allows you to repeat the background if it doesn't fit the element that it's inside of. The possible values are repeat-x, which repeats the image only horizontally, repeat-y which repeats the image vertically, and repeat which repeats the background image both ways.
(Complete code)

[ style ]textarea[name=comment]{
background:see above;
background-origin:see above;
background-position:see above;
background-size:see above;
background-repeat:see above;
}[ /style ]

Misc.
I'm certain there are some other things you've seen people that you wish you could do. Well, here are a couple of the ones I remember off the top of my head.
Fixed Position NavBar
Have you seen profiles where users have set it so that the box at the top stays in the same position even as you scroll down the page? Well, it's a really simple bit of CSS:

[ style ]
.navbar{position:fixed;top:% or px here; left:% or px here;}
[ /style ]

Again, use percentages for the top and left positioning so that it's in roughly the same position on the 3DS and DSi. You can also edit the look of that div (the box) if you wish to, just put it in the same place as you did your positioning code.

Hide Comment Box
I'm kind of hesitant to put this out there, since it can be abused in several other ways...oh well, I'm a deviant I guess. x) It's rather simple as well:

[ style ]
#text_comment{display:none;}[/style ]

Pandora's Box has been (re)opened?!!!111 Have fun...but abusers beware the ban hammer...that some Admin has. o3o

Oh, and here are two examples of that image styling with the max- dimension properties allow me to do (click the large image to see what it's like w/o the styling):

+17 -1

iSuckerzZ
29 Feb 2012 05:51

Of course, you learned this from w3schools xDD

Skittles
07 Jan 2012 04:10

Quoth Eric15:

Quoth Skittlesquote]Quoth AQMasterMage:Quoth Skittles:Quoth AQMasterMage<img src="/chatrooms/smilies/alien16.gif" alt="">ude, why cant I comment on your profile?
 
 Huh?
 
 I cannot comment on your profile.
 
 
 
 
 
 
 It could just be a bug unless somone ban you from commenting
 Not sure why.

[/quote]

No, it was because I had hidden the comment text box.

Eric15
07 Jan 2012 04:06

Quoth Skittles:

Quoth AQMasterMage:Quoth Skittles:Quoth AQMasterMage<img src="/chatrooms/smilies/alien16.gif" alt="">ude, why cant I comment on your profile?
 
 Huh?
 
 I cannot comment on your profile.

It could just be a bug unless somone ban you from commenting
Not sure why.

Skittles
18 Dec 2011 20:03

Quoth AQMasterMage:

Quoth Skittlesquote]Quoth AQMasterMage<img src="/chatrooms/smilies/alien16.gif" alt="">ude, why cant I comment on your profile?
 
 Huh?

I cannot comment on your profile.[/quote]

Not sure why.

Skittles
18 Dec 2011 17:44

Quoth AQMasterMage:

Dude, why cant I comment on your profile?

Huh?

Skittles
16 Dec 2011 06:16

Hm, the code randomly stopped working...

ShinyArceus67
16 Dec 2011 05:38

[size=12]Cool[/size] cool

ShinyArceus67
16 Dec 2011 05:35

HAHA this so cool im laughing XD on- oh yeah! +1 and how do i make an image url in my comment box please?

PrincessChanny
15 Dec 2011 18:04

Could you make a blog in how to make a register and login and checklogin.

a.smith
14 Dec 2011 13:01

TD#blog_body>IMG[name=body_images],

Is #blog_body an id for the blog body? Maybe try:
#blog_body img[name=body_img]{whatever}

Idk.

a.smith
14 Dec 2011 07:31

Lol thts actually pretty cool xD i did the max-width and height thing. what i prefer to do is fix the width and inherit the height.
e.g.
[style]img{max-width:170px;/*guess*/ width:inherit}[/style]
is it inherit or inherited... i forgot xD

Skittles
14 Dec 2011 01:01

Quoth Iciownu:

Thank you i did a test and my imahes were HUGE and now fit nice and clean and good very happy! Can I give you 200 savii points?

If you want. xD

Lakhlan01
14 Dec 2011 00:06

You know what's easier? Linking to photoshop.

Skittles
13 Dec 2011 21:06

Quoth Iciownu:

Thank you thank you thank you thank you thank you amd once again thank you
 
 
 I love you omg thank you omg thanks
 
 YYYYYEEEESSSSSS FINNNALLLLY

No problem; glad I could help.

MaxiMillion
13 Dec 2011 18:34

Nice blog. I usualy stick with links to my images, but I guess I can give this is a try.

BanMan
13 Dec 2011 16:09

While there are a lot of styling blogs, this one goes into some details that aren't covered in others. It's accepted!

How to Properly Style Blogs and Profiles

Comments