| How to Properly Style Blogs and Profiles |
By Skittles
Posted 13 Dec 2011 07:21 Category: This Community |
|
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): 
|
| Featured: Yes (BanMan) | |
| Rating +15 | |
