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. ♥



July 3, 2011 - 12:38pm — Unplugged
Unplugged's picture

Instead of changing the

Instead of changing the background of "#wrapper #container #center .right-corner .left-corner", you need to change the background of .node, as well as #comments.
July 7, 2011 - 8:43pm — Torturer

Hi Unplugged How do you

Hi Unplugged

How do you chance the color of a link, inside a box? Shocked
—
July 9, 2011 - 4:43pm — EternalQueen

Thanks!

Laughing out loud Thanks!
—



July 15, 2011 - 3:26pm — EternalQueen

Um... I wan't links on my

Um... I wan't links on my blog a certain color, and I already tried "body a{color:#FFFFFF}". "body a:hover{color:#000000}" worked fine, so my brain can't figure out the wrong stuff >.<'

Oh, yeah, um, how do I center this thing?
—



July 17, 2011 - 7:15pm — Unplugged
Unplugged's picture

I apologize for

I apologize for kind-of-disappearing and not answering your questions. I don't have access to the tools I use normally so I might not be able to help with some issues for the next two weeks.

Torturer-- has your question been resolved by now?
can you specanfy which box you mean? generally, if you want to change the color of links, use this without the spaces:
[ code ][ url=http://stuffgoeshere.com ][ color=#000000 ]link[ /color ][ /url ]

EternalQueen-- try simply "a{color:#fff}" ? if not, try "a:link, a:visited{color#fff}"

For the centering, keep the width of the comments the same as the width of your blog. Means you add "#comments{width:1000px}"
July 19, 2011 - 6:49pm — Lung

Okay, I am in the need of

Okay, I am in the need of some serious help.

I am desperately trying to get a scroll box like the one seen here, but when I tried to use the one I found here a few pages back, it completely messes up my blog. Any help...?

Ugh, I hate CSS so much.
July 19, 2011 - 7:25pm — Unplugged
Unplugged's picture

You mean like this one

You mean like this one here?
Does it work without your "own" content? Maybe it clashes because you forgot to close a div or something.
Could you give me your code (the one that doesn't work for you)?
July 19, 2011 - 7:59pm — Lung

....I totally forgot about

....I totally forgot about that blog.

Excuse me while I go slap myself.

/ slaps self

I just created a different testing blog, and it looks like everything's working fine. If I run into trouble, I'll come back. Ugh, I feel so stupid rofl

EDIT: hokay, slight hitch. The add comment section on the bottom is on the left hand side now. Any way to get it back over to the right?

EDITAGAINBECAUSEIFAIL: Right here. 8v
July 19, 2011 - 8:21pm — Unplugged
Unplugged's picture

yes, you must have one </div>

yes, you must have one </div> too much somewhere. brb checking this.

[e] hmmm... try removing the /div after /center?
July 19, 2011 - 8:39pm — Lung

Yes, it worked! Just one

Yes, it worked!

Just one slight thing.

I'm noticing that the text in the boxes aren't level. Am I missing something here?
July 19, 2011 - 8:41pm — Unplugged
Unplugged's picture

yeah, that's an issue I

yeah, that's an issue I haven't really been able to fix yet. I can get working on it.

[e] OR. you might want to check how many empty lines you left before each 'title'. keep them all the same.
July 19, 2011 - 9:19pm — Lung

Ah I see. I'm pretty sure

Ah I see. I'm pretty sure I've got them all at the same. Still, I'll go with this for now. Thank you so much for your help, I really do appreciate it. <3

EDIT: Ugh. I've looked all over the code, but I can't seem to figure this out.

The text for "Inner circle," and "Factoids" aren't the same colour as the rest of the titles. I can't figure out why. =/
July 19, 2011 - 9:36pm — Corell
Corell's picture

Its alot of helping css in

Its alot of helping css in here. Thank you so much..<3
July 23, 2011 - 2:42pm — EternalQueen

Hello again I was just

Hello again
I was just wondernig how you modify the sidebar. I've seen a bunch of people only having the "Home", "Recent posts" and such at the top of their bio in a box... How do I do that?
—



July 23, 2011 - 3:50pm — Unplugged
Unplugged's picture

They remove the sidebar and

They remove the sidebar and add the links manually. Smiling
.sidebar{display:none}
July 23, 2011 - 3:59pm — Corell
Corell's picture

Hai, hope I don't bother.

Hai, hope I don't bother. :'-)

Do you know how to make the comments look like this:

http://endlessforest.org/community/node/53233

Thanks ♥
July 23, 2011 - 5:13pm — Unplugged
Unplugged's picture

Shush, it's been almost 13

Shush, it's been almost 13 pages and none of it was bothersome so far.
"look like this" is kind of vague though. I will make some wild assumptions and throw this code at you:

.comment{border-top:1px solid #000000;border-left:1px solid #000000;border-right:1px solid #000000;}tr.even,.comment.even,tr.odd,.comment.odd{background:none}#comments .picture{display:none} .content .clear-block{display:none}
July 23, 2011 - 6:17pm — Lung

I noticed that in that blog I

I noticed that in that blog I posted earlier (This one) the text for "Inner Circle" and "Factoids" aren't the same colour as the rest. I've looked through the code a few times, and I can't figure out what the problem is.

Also, is there a way to get everything even, as opposed to some columns being higher up than others?
July 23, 2011 - 6:29pm — Unplugged
Unplugged's picture

Jesus I can't believe I

Jesus I can't believe I forgot about this. sorry.
Can you give me your code please? http://textuploader.com/
July 23, 2011 - 6:53pm — HexStag
HexStag's picture

~Track Ive been looking for

~Track
Ive been looking for something like this, TY
—
July 23, 2011 - 7:49pm — Lung

No, it's totally fine! Here

No, it's totally fine!

Here you go. (:
July 23, 2011 - 7:59pm — Unplugged
Unplugged's picture

I think I'll only be able to

I think I'll only be able to help you when I return home in august, sorry. 6_6 Taking a quick look at this I can't find the issue either.
July 23, 2011 - 8:12pm — Lung

Ah, it's alright. I can wait.

Ah, it's alright. I can wait. (:
July 23, 2011 - 9:22pm — Corell
Corell's picture

Perfect &hearts; It

Perfect ♥ It workt..Thank you so much sweety =D
July 23, 2011 - 9:27pm — EternalQueen

Thanks a bunch &hearts;

Thanks a bunch ♥
—



July 24, 2011 - 1:33pm — Corell
Corell's picture

I'm here again, and trust

I'm here again, and trust me...I won't bother you this time Ooh <3

How do I change the text and background color on the Reply thing in comments? ♥
July 24, 2011 - 8:58pm — Unplugged
Unplugged's picture

I'm actually not sure right

I'm actually not sure right now! but maybe this?
.comment div.links{background:#ffffff}.comment div.links a{color:#ff0000}.comment div.links a:hover{color:#ffff00}
July 24, 2011 - 9:09pm — bluejay17

1) Thank you for putting this

1) Thank you for putting this up! It's so useful, even to someone with no CSS ability - i.e. me XD
2) Can you point me into the direction of centred scroll boxes?
—
July 24, 2011 - 9:17pm — Unplugged
Unplugged's picture

There is a pretty simple

There is a pretty simple scroll box template to play around with here (code is in the comments). To center it, just put it between <center> </center> tags Smiling
July 24, 2011 - 9:25pm — bluejay17

You're amazing, thank you so

You're amazing, thank you so much Smiling
—
July 24, 2011 - 9:48pm — Corell
Corell's picture

YesYesYes! Thank you

YesYesYes! Thank you <33
July 29, 2011 - 5:28pm — Corell
Corell's picture

Hi :] Do you know where I can

Hi :]
Do you know where I can download backgrounds that you can look through?
Its exactly like the ones you use to the most of your blogs c:
July 29, 2011 - 6:49pm — Unplugged
Unplugged's picture

Transparency

Transparency copypasta:

Quote:

1. Make a small 2-px semi-transparent png image and use it as background:
.comment.odd, .comment.even{background:none;} #wrapper #container #center .right-corner .left-corner{background:url('http://img156.imageshack.us/img156/1014/creambg85.png')}
This will work 100% on every browser.

2.1 .comment.odd, .comment.even{background:none;} #wrapper #container #center .right-corner .left-corner{background:rgba(0, 0, 0, 0.8)}
This code might not work on older browsers.

RGBA: You'll have to use the RGB values of a colour for this. In this case
0 Red, 0 Green, 0 Blue, 0.8 Alpha = Black, 80% opacity
255 Red 255 Green 255 Blue, 0.2 Alpha = White, 20% opacity

((2.2 I'm not sure how to use this code with a background picture yet.))

3. .comment.odd, .comment.even{background:none;} #wrapper #container #center .right-corner .left-corner{opacity:0.8; filter:alpha(opacity=80)}
This code will also make all the content in your box semi-transparent.
July 30, 2011 - 8:30pm — Corell
Corell's picture

Thanks alot, I'll try that

Thanks alot, I'll try that ^-^

Edit:

By the way..Do you know how to make two narrow boxes beside the regular box? Like this:

http://endlessforest.org/community/21-profile

And I have one more question, how do I make a box whit round corners?

Thanks alot <3
July 31, 2011 - 6:18pm — EternalQueen

Like make the box on a line?

Like make the box on a line? (down, just insert the box at the "BOX" names. To add more boxs, add more "<*td>" and end "<*/td>"):

<*table style="border:hidden">
<*tr>
<*td>
BOX 1
<*/td>
<*td>
BOX 2
<*/td>
<*/tr>
<*/table>

(remove asterix -> *)

Round box:
;-moz-border-radius: 15px;border-radius: 15px;
—



July 31, 2011 - 5:38pm — Silverpaw15
Silverpaw15's picture

I shall track this for

I shall track this for further reference. ^_^
—
July 31, 2011 - 10:54pm — Corell
Corell's picture

EternalQueen your awesome,

EternalQueen your awesome, thank you so much <3
Btw, where do I insert the: ;-moz-border-radius: 15px;border-radius: 15px;
August 1, 2011 - 11:07am — Unplugged
Unplugged's picture

Corell, you add it to the div

Corell, you add it to the div just like you add other css to it, like this:
<div style="width:500px;height:250px;overflow:auto;background:#ffffff;-moz-border-radius: 15px;border-radius: 15px;"> text </div>
August 1, 2011 - 1:28pm — EternalQueen

^ That.

^ That.
—



August 1, 2011 - 11:13pm — Corell
Corell's picture

Thats just wonderful, thank

Thats just wonderful, thank you both so much <3
August 2, 2011 - 12:24am — Clavicle

Ah, this is very helpful. I

Ah, this is very helpful. I will be keeping track of this for my own CSS use.
August 2, 2011 - 11:08am — EternalQueen

(No subject)

Smiling
—



August 2, 2011 - 7:41pm — Clavicle

Hello. I have a few

Hello. I have a few questions.

1) How do you alter the size of the comments in the comment boxes?
2) How do you alter the size of the "Add new comment" etc. that is on the bottom of the blog?
3) Also, how do you get rid of the glow around the blog? Here's the blog. I'm talking about that faint white glow. Or is there a way to alter its colour?
4) How do you change the size of the text in the sidebar?
August 2, 2011 - 10:47pm — Unplugged
Unplugged's picture

Hello. I have a few

Hello. I have a few answers.

1) ehh do you mean the comment 'boxes' themselves or really just the 'space' in which the text is. Or do you mean text size? If it's that, add ".comment{font-size:10px}"
2) ".node .links{font-size:10px}"
3) remove this: "-moz-box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);-webkit-box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);"
If you want to alter the colour, change the rgb values, aka the 255y things. If you go to your drawing program and chose the colour, the variables should show up. R for the first number, B for the second, G for the third. The 0.6 is the transparency. 1 is opaque while 0.1 is transparent.
4) add ".sidebar{font-size:10px}"
August 2, 2011 - 10:55pm — z.m123
z.m123's picture

...And I'm back. xD 1.) How

...And I'm back. xD
1.) How do you change the sidebar 'backround'? Like, the blue stuff?
2.) How do you change the color of the commnets and the comment frame?
August 2, 2011 - 11:04pm — Unplugged
Unplugged's picture

For the sidebar background

For the sidebar background (which isn't blue here BUT): .sidebar{color:#000000}

OR, if you actually mean the blue stuff: #wrapper #container #center .right-corner .left-corner{color:#000000}

Comments: .comment .odd, .comment .even{background:#000000;border:5px solid #666666}

If you want to use a background image, replace "color:#000000" with "background:url('imgurlhere')"
August 2, 2011 - 11:06pm — z.m123
z.m123's picture

Thank youuu &hearts;

Thank youuu ♥
August 2, 2011 - 11:07pm — Unplugged
Unplugged's picture

I'm sorry but I just totally

I'm sorry but I just totally failed. This is stupid. Fixed this now.

For the sidebar background (which isn't blue here BUT): .sidebar{background:#000000}

OR, if you actually mean the blue stuff: #wrapper #container #center .right-corner .left-corner{background:#000000}

Comments: .comment .odd, .comment .even{background:#000000;border:5px solid #666666}

If you want to use a background image, replace "background:#000000" with "background:url('imgurlhere')"
August 3, 2011 - 7:18pm — Clavicle

Ah, these worked perfectly.

Ah, these worked perfectly. Thank you so much. <3
August 6, 2011 - 7:55pm — z.m123
z.m123's picture

If my comment code

If my comment code is;
Quote:
#comments{background:#262626}.comment.odd, tr.odd, tr.info{background:#262626} tr.even, .comment.even{background:#262626}.new{background:#262626}.comment div.links{background:#262626}


What do I add to change the border?