Home › Blogs › Unplugged's blog

* {CSS Help} The Structure of a Blog Entry

Unplugged's picture
February 18, 2010 - 8:52pm — Unplugged


Adopt one today! Adopt one today! Adopt one today! Adopt one today!

Colours for visualizing, not my fault if you go blind. :B

(may 23, reworked link section. USE BBCODE INSTEAD OF FILTERED HTML )



Remember to put your CSS under the cut!

Set your Input Format to BBCode!

Write all CSS in one line!



You don't need to credit me for anything.


CSS Templates


The easiest way yo use these templates is to change #ffffff hex colours and replace background images.
Experiment with the colours to see what is what.

ONE

simplest and easiest to edit; lacking refinement

TWO

simple, easy to edit; slight transparency effects

THREE

refined, transparency effects, right-aligned sidebar; code for 'normal' sidebar in comments (page 2)

FOUR

3 Versions. refined, heavy page altering, lots of transparency



This Blog


This blog is only useful to you when you have any pre-knowledge of CSS!
Otherwise you will not gain much from it. This blog shows the "names" of different parts through different colours.

If you want to understand CSS, check out * {CSS Basics} How Do I CSS?

BLOG CODE


Colours for Sidebar Links






MAKING A CUT (Terabetha)
BASIC CSS
TAB-LAYOUTS
ORGANIZE YOUR CSS (Ikaron)

Art, Design, Coding Links
Explaining Divs (shamiya)
Div Layouts (shamiya)
Zebbie's CSS Help - Fun With Coding
Iaurdagnire's about:blank








OUTSIDE (RED & PINK)

body
(includes: #logo #header #header-region #center .sidebar .menu .item-list
anything pink and red here)

#logo

#header

#header-region
(includes: .menu)

#center
(includes .sidebar .menu .item-list)

.sidebar
(includes: .menu .item-list)

.menu

.item-list


INSIDE (BLUE)

#wrapper #container #center .right-corner .left-corner
(includes: .breadcrumb .node .submitted(blog only) #tabs-wrapper .picture .links
anything blue)

.breadcrumb

.node

.submitted
(in comments and blog)

#tabs-wrapper

.picture

.links

COMMENTS (GREEN)

#comments
(includes: .comment.odd, tr.odd tr.even, .comment.even)
(only visible when you have "background:none" on .comment.odd, tr.odd and tr.even, .comment.even )

.comment.odd, tr.odd
(darker comments)

tr.even, .comment.even
(lighter comments)

.new
(the "New" that appears by a new comment)

.comment div.links
("edit" and "reply" buttons, although I am not sure if it affects all links in comments)





CSS rule set
I am not a professional, so I can't guarantee accuracy. My english is not perfect either, but I hope this will help you understand CSS a little bit better.

Selectutorial
Very helpful site if you want to understand CSS better. I highly recommend looking through it sometime.


Build of a basic CSS code:


The start tag and the end tag define where your CSS code starts and where it ends.
The Selector "selects" the element of the page that is affected by the rule set. If you want to define more than one Selector at once, you can seperate them with a comma.
  example
      body, .sidebar {color:#ffff00}
The Declaration Block is the container for Declarations. It stands between curly brackets.
The Declarations tell the browser how to draw the selected element.
(Not pictured: A Declaration splits up into Property and Value. The Property is the aspect that you chose to style (like font, background), while the Value is the exact style for this Property (like font style, background color).)



Link colours
To change the colour of links in different parts, you have to add an "a" at the end of your Selector.
  example
      body a {color:#ff00ff}
If you want to change the link-color when you hover your mouse over it, you additionally have to add :hover, which is a so-called Pseudo-Class
  example
      body a:hover {color:#00ffff}
You can apply these Pseudo-Classes not only to links, but pretty much any Selector.

Read more about it here!




If you have any problems, questions, ideas or find any mistakes here, please let me know!
Enjoy. ♥



August 12, 2011 - 11:51am — Corell
Corell's picture

I need help once again

I need help once again [x

How do I change the the comment-text size in comments? <3

Edit: MIIIIIIIIIIIIINE G:
August 13, 2011 - 2:38am — Lung

Hii...another question. How

Hii...another question.

How do you change the size and colour of the "first, last" and page number links at the bottom of the page beneath all the replies?
August 13, 2011 - 2:21pm — Unplugged
Unplugged's picture

for comment borders:

for comment borders: .comment{border:1px solid #000000}
for comment text size: .comment{font-size:10px}
for the page list: ul.pager a{color:#8dcb22}
August 13, 2011 - 2:23pm — z.m123
z.m123's picture

Thank you. c:

Thank you. c:
August 13, 2011 - 2:47pm — Corell
Corell's picture

Yay, thank you!

Yay, thank you!
August 15, 2011 - 7:17pm — Lung

The colour works perfectly!

The colour works perfectly! <3

How do you adjust the height though?
August 15, 2011 - 7:26pm — Unplugged
Unplugged's picture

height? :s Care to elaborate?

height? :s Care to elaborate?
August 15, 2011 - 7:35pm — Lung

I meant the height of the

I meant the height of the page number links...some people have them small, like a size 10. Unless they changed the font or something...
August 15, 2011 - 7:41pm — Unplugged
Unplugged's picture

ul.pager a{font-size:10px}

ul.pager a{font-size:10px} ???
August 15, 2011 - 8:22pm — Lung

Yes, it worked! Thank you.

Yes, it worked! Thank you. <3
August 19, 2011 - 4:25pm — goodvibration
goodvibration's picture

Hi, I finally, kind of

Hi,

I finally, kind of managed to do a profile for
my recent deer so far. But I have one problem.
I can post text but no 'boxes' like this:
Blue Boxes

And I dont think the coding is quite right the way I coded them...
Maybe you could have a look at it? Sad

*EDIT*

This blog please:
Le blog
August 19, 2011 - 4:51pm — Unplugged
Unplugged's picture

When you edit your block,

When you edit your block, click "Input Format" and change it to BBCode. Smiling
August 19, 2011 - 5:04pm — goodvibration
goodvibration's picture

OMG! Yessss it works so

OMG! Yessss it works so far.
Thank you so much! Smiling
August 20, 2011 - 7:08pm — goodvibration
goodvibration's picture

Hullo again! Actually I have

Hullo again!
Actually I have some more things to ask, hope that´s okay.
how do I:

*change the blog title color
*the color of 'Add comment' and my blog name next to it
*The color of the 'reply' text
*There is a yellow box before 'reply', how can I make it disappear
*How can I center the comments
*How can I change the font in the sidebar
*How can I make a box which looks like this: (box with pattern border?)
E x a m p l e
*And I cant seem to change the comment background color*

Le-Blog I´m working on
Sad
August 20, 2011 - 7:38pm — Unplugged
Unplugged's picture

#squeeze

#squeeze h2{color:#E5E5E5}.links a{color:#000000}.sidebar{font-family:arial}

remove ".comment div.links{background:#FFFF00}"

in this line: ".comment.odd, tr.odd, tr.info,tr.even,.comment.even{background:none;color:#596C56;font: 12px arial}"
remove the "background:none;"

for the pattern-border box, those are acually not pattern borders, but divs with the pattern as a background, and inside the pattern-box there's another light grey div. Smiling

I'm not sure why the comment centering doesn't work. I'll look into it.
[e]: change "#comments{margin:auto}" to "#comments{margin:auto;width:500px}"
August 20, 2011 - 8:06pm — goodvibration
goodvibration's picture

The blog title color is done,

The blog title color is done, the comments background color too
only that white space around the pictures,date and username is still there.
Is there a way to color that part?

The reply text has a white box around it too and this time the yellow box is
black.

And and how do I do such a div with a pattern as a background?
+ I still dunno how to change the fonts from the sidebar ._.;;
August 20, 2011 - 9:03pm — Unplugged
Unplugged's picture

I reworked your CSS, hope you

I reworked your CSS, hope you don't mind.

For the div:
<div style="width:500px;height:400px;overflow:auto;background:url('imgurl here')"> </div>
August 20, 2011 - 9:22pm — goodvibration
goodvibration's picture

when I use the div code my

when I use the div code my main box is not centered.
And ugh... Sad
August 21, 2011 - 3:59pm — goodvibration
goodvibration's picture

Thank you again soo much for

Thank you again soo much for helping me out!

I kind of managed to do a div pattern background thingy. (3rd box)
My problem: I want the text centered. And a little scrollbar next to it.
And I cant put the div box in the first place, like:
*div pattern box
**box with picture background
***gallery box

I tried but it was all messed up then.
And I still dunno how to change the sidebar font
for example changing the font from arial to lucida sans.
August 21, 2011 - 4:42pm — Unplugged
Unplugged's picture

#wrapper #container

#wrapper #container .sidebar{font-family:times new roman}#wrapper #container .sidebar h2{font-family:times new roman}

^ this part of the code should change the sidebar font. it works for me actually?

Could you show me what you mean with the three div boxes?
August 21, 2011 - 7:22pm — goodvibration
goodvibration's picture

I want it to look like this.

I want it to look like this. (Red Box)



And I just want the div pattern box to have a scrollbar
and that the text is centered.
August 23, 2011 - 2:01am — Lung

[x] Been trying to figure

[x]

Been trying to figure out how to fix this. I don't see anything about it in that actual code...
August 23, 2011 - 2:06am — Unplugged
Unplugged's picture

.comment

.comment div.links{background:none} ?

goodvibration, working on it in a minute..

if you add to your pattern div "overflow:auto" it should scroll. Though I'm not completely sure what you've been doing with your divs there. Did you use the invisible-scrollbar trick?
August 23, 2011 - 2:08am — Lung

Yyyyyess. Thank you, so much.

Yyyyyess. Thank you, so much. <3
August 23, 2011 - 2:18am — Xemi
Xemi's picture

... I-invisible scrollbar

... I-invisible scrollbar trick?
SUCH A THING EXISTS? ♥

May I ask? ;u; <3
August 23, 2011 - 2:21am — Unplugged
Unplugged's picture

Copypasta: Quote:There you go

Copypasta:
Quote:
There you go Seele! It's just sort of a... prototype as I haven't experimented much with it yet but it should work fine. Smiling

<div style="width:550px;height:300px;overflow:hidden;">
<div style="width:500px;height:200px;padding:50px;overflow:auto;">
Your Text
</div>
</div>



If you want to change the size you'll need to play with the widths. Just make sure the numbers in the first div are always bigger than those in the second div.
August 23, 2011 - 3:12am — Xemi
Xemi's picture

This here? ^ Ngghh I'm gonna

This here? ^ Ngghh I'm gonna go mess with it a bit <3 Aaah thankyou! ♥
August 29, 2011 - 1:30pm — BambooKirin

I have a rather silly

I have a rather silly question...
How do you make only the comment-words white?
August 30, 2011 - 7:59pm — Lung

- never mind I figured it

- never mind I figured it out. (:
August 30, 2011 - 8:10pm — Xemi
Xemi's picture

^ Lolcrap ;; I was gonna

^ Lolcrap ;; I was gonna stalk the answer because I'm having the same problem
But I'm glad you got it ♥
August 30, 2011 - 8:12pm — Lung

I'll tell you what I found

I'll tell you what I found wrong.

In the second table, just put [*right][*/right] tags around the divs (Getting rid of the *s, of course). That's why it wasn't all the way to the right, haha.
August 30, 2011 - 8:13pm — Camy
Camy's picture

Should've done so before xD



Should've done so before xD
August 30, 2011 - 8:23pm — Xemi
Xemi's picture

I do that but for me they

I do that but for me they always overlap ;;
I asked Saph how to do it, and I use the same coding as her and Starbright for Umay and Kody's bios especially, Kody's is a prime example of how I wish I could get boxes side by side like this; [x]

But they still overlap. I checked Kody's bio on Chrome, IE, AND FireFox and they all look fine, they look right. Yet when I put that same coding on my bios, the two boxes that are side by side cross over each other (the text and borders overlap) and I can't fix it to save my life.

I've finally just had to say "please view this bio on Firefox or IE" because Chrome messed up my boxes and makes it hard to read. But I can't fix it, and I really like it this way, so.. what am I gonna do really?

EDIT: Adding a screenshot of the boxes: [x]
On the left is Google Chrome, where they cross over.
On the right is on Firefox, how I WISH they would look on all browsers..
IE's not perfect, some of the scrollbars don't scroll properly but ugh I give up.
August 30, 2011 - 8:25pm — Lung

Oh, you use Chrome? Hm, but I

Oh, you use Chrome? Hm, but I thought Chrome worked well with most CSS. Hm.

EDIT: Hm, I didn't realize that tables are an issue with Chrome. /shrugs/ I use FireFox, so...8'D
August 30, 2011 - 8:28pm — Xemi
Xemi's picture

No, I use Firefox, but I have

No, I use Firefox, but I have all three of the browsers I mentioned.

I check my bios on all three because generally I try to make my bios nice-looking and easily accessible on them all, so that people will be able to check them and read them no matter what they use. But I finally have Crucio's bio looking.. basically exactly the way I've wanted it to look for a long time, except Chrome won't cooperate with me. I've tried to fix it so many times, but I just can't, I just can't figure out how. It's frustrating. ;; So I guess I'm gonna ask here, since if anyone can help me it's bound to be Unplugged.

Tbh I hate chrome.. so much LOL because it always messes up my coding but some people like it so..
August 30, 2011 - 8:33pm — Camy
Camy's picture

Whoops, I meant "Should've

Whoops, I meant "Should've tracked" XD

Sorry for the confusion.
August 31, 2011 - 4:12pm — Unplugged
Unplugged's picture

BambooKirin--

BambooKirin-- .comment{color:#ffffff}

Xemi, what's the bio in question?
September 1, 2011 - 12:09am — Xemi
Xemi's picture

It's Crucio's bio, it's

It's Crucio's bio, it's linked in my signature, the pairing siggydeer by Trigger.
September 6, 2011 - 9:19pm — WonderfullySarcastic
WonderfullySarcastic's picture

Track

Track<3
—
#1354
.
September 6, 2011 - 9:49pm — Kuziifish
Kuziifish's picture

This will be super helpful,

This will be super helpful, but I gotta say, I suffer from migraines so it'll take me awhile to get through it with the bright, bright colors. Lol.
September 6, 2011 - 9:51pm — Unplugged
Unplugged's picture

Oh! I apologize Kuziifish.

Oh! I apologize Kuziifish. It's the only way to make this understandable unfortunately. Should I maybe put a warning in the title for other people?
September 7, 2011 - 4:14pm — Kuziifish
Kuziifish's picture

Lol, it's alright, I totally

Lol, it's alright, I totally understand on making it understandable. A warning I think would be good, it's like using the support forum, random bright colors are a killer on my eyes. Sticking out tongue
September 9, 2011 - 6:18pm — Uurd
Uurd's picture

Figured out my problem, was

Figured out my problem, was something really silly on my part :]

Thank you for all of these tutorials, Unplugged, they were so helpful!
—
September 10, 2011 - 1:42am — Lung

http://www.endlessforest.org/

http://www.endlessforest.org/community/css-testing-please-ignore-2

Is there anyway to get those to line up exactly? I hate how one is higher than the other.

The white is there so that I know how big the boxes are; just playing around with it for now, but the fact that those click tabs aren't lined up is bothering me. :/
September 10, 2011 - 10:09am — DEERTH
DEERTH's picture

Thanks, Unplugged, for making

Thanks, Unplugged, for making all these SUPER AWESOME CSS BLOGS!!! Very helpful!

But I have one thing: Here is White Dove's bio. I've finally learned most things of colouring, but what is that weird brown frame that covers most of the bio? How to prevent it?

(My eyes. X.x )
—
Call me Deery. Smiling
Dragon Scroll.
Avvie by me, siggy by Saosin

September 10, 2011 - 2:10pm — EternalQueen

Hi Lung I'm having troubles

Hi Lung

I'm having troubles with the same problem. For having both the same height, i just make 1 line more on the first div.

Look:

(1st div: <*center>
space
---)



(2nd div: <*center
---)


Play around a bit with that - it helped me o3o

—



September 15, 2011 - 1:49am — Lung

I'm...still pretty confused

I'm...still pretty confused by that. I'll have to take a closer look at it at some point.

although, I have another question.

Is there a way to seamlessly bring the real backround and the actual blog backround together? Like in this blog?

I've noticed that when I'm trying to create a backround, you can tell where the blog backround is, and where the "other" backround is. I'm trying to get rid of that, it looks hideous.
September 15, 2011 - 3:48pm — EternalQueen

x'D Uh oh. Sorry, I don't

x'D Uh oh. Sorry, I don't know how to explain in another way..

The .node background is invisible. There's only 1 background.
—



September 21, 2011 - 8:32pm — Unplugged
Unplugged's picture

Guys I'd like to apologize

Guys I'd like to apologize for my long absence. :x If any of your questions still need to be resolved please tell me.
September 21, 2011 - 9:39pm — EternalQueen

Welcome back Oh... And eh,

Welcome back Smiling

Oh... And eh, I have a dummy question:
How do I center my comments? And as how do I make something like the small little green div float where ever I wan't on the page? It's like it's limited and can only stay on the .node area. And plus, to make it even worse, I wan't it as a table (meaning 2).

x'/ Hope I aren't bombing you with way too many questions when you just returned...
—