* {CSS Help} The Structure of a Blog Entry

February 18, 2010 - 8:52pm — Unplugged

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)

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

Miscellaneous

Unplugged's blog
Login to post comments

February 14, 2012 - 2:24pm — goodvibration

alrighty - I sent ya the mail

alrighty - I sent ya the mail again:)

February 15, 2012 - 7:34am — parrotsnpineapple

Hey unplugged, I need a hand,

Hey unplugged, I need a hand, Im not sure if its been asked already or has been posted somewhere, I cant seem to find it nonetheless.

Here is my testing blog.

Im trying to remove the "The Endless Forest, Home › Blogs › parrotsnpineapple's blog and the actual heading of the blog itself. I want to have that Ravenflight image fairly close to the top for a more instant impact sort of thing. Very much like what can be seen here. Where the content pretty much starts right away and doesnt have the sites headers and links before it.

If that makes sense...rofl

—

February 15, 2012 - 2:12pm — Unplugged

That's about as high up as

That's about as high up as you can get by removing stuff:
.content .clear-block{display:none} #squeeze h2{display:none} #header-region{display:none} .node .submitted{display:none} .breadcrumb{display:none} .node{margin:0px;padding:0px}
Also, not sure if you want to keep the logo or not, but here's one for removing the logo too:
#header{display:none}

February 15, 2012 - 10:15pm — goodvibration

Hey Unplugged, *its me

Hey Unplugged,
*its me again*

I´ve done what you´ve advised me and now I still have some several small
problems - because I´m too lazy to write it down I made a screenshot
of the parts that keep bugging me ( the green shaded parts) + some small describtion
PICTURE

+ the links in the div box are green, how do I change the color of that?
* additional note: I think the coding is rather messy and I dont have a clue
what I am doing xD

February 15, 2012 - 10:34pm — Unplugged

Sorry that the mail thing

Sorry that the mail thing didn't work immediately. :s

Going from top to bottom:
.breadcrumb, .breadcrumb a{color:#ffffff !important}
span.submitted{color:#ffffff}
.node .links{font-size:11px}
.submitted{background:none}
.picture{background:none}
.comment div.links{background:#ffffff} .links{background:none}
.comment div.links a{color:#000000}

(you may have to clean up your css at some point. at the moment you have lots of codes that cancel each other out)

February 16, 2012 - 11:56am — goodvibration

haha it´s alright. Thanks

haha it´s alright.
Thanks again.
Yep, I thought so but srsly I have no clue xD;; let´s see what I can do about that ~

February 17, 2012 - 6:26am — Lynetta

Just a quicky, In this

Just a quicky,

In this blog, how do I get rid of the white line above the table?

And how would I keep the columns from having space between the top of the table and the text?

February 19, 2012 - 5:54am — Rhyolite

Hi Unplugged, you've probably

Hi Unplugged, you've probably been asked this a lot before, but do you know how to center the main box where the whole blog is? If that makes sense. Like this blog here?
And also, how do you get rid of all the links like 'The Endless Forest, Home, Map, Whose Online etc.?' Aswell as the main title? Sorry if this is confusing!
Thank you!

February 20, 2012 - 7:52pm — Unplugged

Hey, I apologize for not

Hey, I apologize for not answering your questions. I haven't been on the site for a bit.

Lynetta-- To remove the white line, add to the table style "border-top:hidden".
For having the columns at the top, change "<tr height="30">" to "<tr height="30" valign="top">"

Rhyolite-- I believe these are what you need:
centering: #wrapper #container #center .right-corner .left-corner{position:relative;margin:auto}#wrapper #container #center{float:none;}body.sidebar-left #center, body.sidebar-left #squeeze{margin-left:0px}

removing sidebar: .sidebar{display:none}
removing title: #squeeze h2{display:none}

February 20, 2012 - 8:36pm — Lynetta

Perfect! Thank ya~

February 21, 2012 - 1:00am — Rhyolite

Thank you so much Unplugged!

Thank you so much Unplugged! You are a genius!
Oh I hope you dont mind me adding a quick other question on.. but is there a way to change the background of an image? For example, the background of my blog is white, and the image's background is black, is there a way to change that, or..?
Thank you again! ♥

February 22, 2012 - 3:00am — Lung

Any idea how to get rid of

Any idea how to get rid of the "Reads" text next to the "Leave comment" and "/username/ blog" links at the bottom of a blog?

February 22, 2012 - 5:42pm — Unplugged

.statistics_counter{display:n

.statistics_counter{display:none !important}

Trivia. If you know the add-on Stylish, I actually have this little code turned on permanently. I find the views counter very abrasive.

February 23, 2012 - 4:54am — Lung

Same here, especially if the

Same here, especially if the colour doesn't jive with the rest of the blog. :/

Thank you so much. <3

February 24, 2012 - 3:16pm — Hraeth

-slink in- Gotta bother you

-slink in- Gotta bother you with a question. ;u;

In this blog, I'm trying to get the 'Add new comments' link to be centered, or at least on the right side of the page, but everything I've tried so far hasn't gotten me any results.

If you need to look at the code, it's all here. I don't think it's an unclosed tag, I can't find any. But maybe some other piece of coding is interfering?

February 24, 2012 - 7:54pm — Unplugged

Ah! I checked your code and I

Ah! I checked your code and I think you actually do seem to have one /div too much.
At the very end in this little bit just before the css: <br></div></center>
Remove that and then use .node .links{text-align:center}.

Alternatively, you can just keep that one /div and use .clear-block .links{text-align:center}.

February 24, 2012 - 8:22pm — Hraeth

You're genius. I can't tell

You're genius. I can't tell you how much I've wrestled with that thing. :I Thank you so, so much.

March 11, 2012 - 2:35am — Pickles9

I need this....... &hearts;

I need this.......

♥

—

May 13, 2012 - 2:56pm — Dragon919

which link is it to how to

which link is it to

how to have 4 squares in a bio, for example, 2 on the left and 2 on the right? i cant do that because my css codes keep on toppling over

Edit: I only need help with this one. ^

May 10, 2012 - 3:39am — Reyy

So I have this thing on my

So I have this thing on my computer that allows me to see coding in 3D. Idk if everyone has this or if you know about it, but it's really neat.
Here:
http://i49.tinypic.com/24lr246.png
http://i47.tinypic.com/65v3ow.png
http://i45.tinypic.com/23w7bsl.png

May 10, 2012 - 3:53am — Dinamo

Woah; ravynn, that's awesome.

Woah; ravynn, that's awesome. Is that something that came with your computer?

May 10, 2012 - 4:00am — Lung

Whoa. That's really neat.

May 10, 2012 - 6:45am — Reyy

Dina - Yes.

Dina -
Yes.

May 10, 2012 - 4:39pm — Tulloh

Hai Unplugged, I have a

Hai Unplugged, I have a question; Is it possible to make this brown stuff go all the way up and down? Like, forcing it to do that?

May 12, 2012 - 9:22pm — Tearenn

This is great, thank you so

This is great, thank you so much. <3
Hope you don't mind if I'll ask you one question.

Do you know how to make the '' comment boxes '' to be centered under the box with information about my deer? It would be lovely if you could help me:
http://endlessforest.org/community/css-17

—

M i s c h a

May 13, 2012 - 11:01am — Tulloh

#comments{margin:auto}, I

#comments{margin:auto}, I think...?

May 13, 2012 - 2:19pm — Tearenn

Great! Where should I put it,

Great! Where should I put it, btw?

—

M i s c h a

May 13, 2012 - 2:54pm — EternalQueen

Between the <style> </style>

Between the <style> </style> tags.

—

May 13, 2012 - 3:20pm — Tearenn

Thank you so much, I'll try

Thank you so much, I'll try that <3

Edit: I didn't seemed to work. I have tried it before but it didn't worked this time. :s

—

M i s c h a

May 13, 2012 - 3:48pm — Unplugged

Tulloh pretty much got it,

Tulloh pretty much got it, you just need to add "width:810px" to it.
#comments{margin:auto;width:810px}

And Tulloh, it is possible to have it all the way up but not completely all the way down through. At least that's all I could manage. Give me a minute and I'll see what I can do.

dragon, sorry I didn't get to your question. : ( Is it still relevant?

May 13, 2012 - 3:49pm — Dragon919

What you mean by relevent?

May 13, 2012 - 3:51pm — Tearenn

Yesyesyes! Thank youuuuu

Yesyesyes! Thank youuuuu
<3

—

M i s c h a

May 13, 2012 - 3:56pm — Tulloh

Sheesh. I am still nothing

Sheesh. I am still nothing compared to the real master... xD

Hum, thank you. ^^

May 13, 2012 - 4:06pm — Unplugged

Do you still need help with

Do you still need help with your css dragon?

May 13, 2012 - 4:12pm — Dragon919

Yes please. It's for my

Yes please. It's for my Razoreye's bio. I cant seem to have 4 boxes :/ need link?

May 13, 2012 - 4:20pm — Unplugged

Tulloh-- #wrapper #container

Tulloh--

#wrapper #container #center{position:relative;top:-120px;z-index:-1;}#wrapper #container #center .right-corner .left-corner{padding-top:120px;}

That's the best I got so far. Although there's one more thing I'd like to try.

May 13, 2012 - 4:33pm — Tulloh

Yay~ Sure sure ^^

May 13, 2012 - 4:34pm — Unplugged

Tulloh-- You can also try

Tulloh-- You can also try this one, although it's not an ideal solution either:

#wrapper #container #center{position:fixed;top:0px;z-index:-1}#wrapper #container #center .right-corner .left-corner{height:300px;overflow:auto;padding-top:120px}

dragon-- I'll get to you in a sec

May 13, 2012 - 4:40pm — Dragon919

Sure! ^^

May 13, 2012 - 4:43pm — Unplugged

Alright, try this one. You

Alright, try this one.

You may have to do some tweaking if you want to stylize it, but that's the basic structure.

<div style="width:400px"><table style="border:hidden">
<tr valign="top"><td><div style="width:200px;height:200px;overflow:auto;border:1px solid #ff0;"> Div1 </div></td><td><div style="width:200px;height:200px;overflow:auto;border:1px solid #ff0;"> Div2 </div></td></tr>
<tr valign="top"><td><div style="width:200px;height:200px;overflow:auto;border:1px solid #ff0;"> Div3 </div></td><td><div style="width:200px;height:200px;overflow:auto;border:1px solid #ff0;"> Div4 </div></td></tr>
</table></div>

May 13, 2012 - 5:28pm — Tulloh

Hum. The code had a

Hum. The code had a surprisingly extra effect... I can't seem to click any links.

May 13, 2012 - 5:38pm — Unplugged

Haha whoops. Try removing the

Haha whoops. Try removing the "z-index:-1" and add "#header-region{position:relative;z-index:2}" instead.

May 13, 2012 - 5:41pm — Tulloh

Yay, there we go~ Thanks a

Yay, there we go~ Thanks a bunch :>

May 19, 2012 - 9:52pm — Alyssa035

Hiya Unplugged. Ok, so I have

Hiya Unplugged. Ok, so I have my code, where do I put the actual text?

—

The man with the key is king,
And honey you should see me in a crown.

May 19, 2012 - 10:47pm — Unplugged

anywhere that's not between

anywhere that's not between the <style> </style> tags.

May 24, 2012 - 4:27am — Lung

http://www.endlessforest.org/

http://www.endlessforest.org/community/node/64099

Any way to separate the bottom of the blog from the "(name)'s blog" and "add new comment" section? I hate how the quote is sitting right on top of it.

May 24, 2012 - 4:29am — OrinocoFlow

How can I make a center

How can I make a center placed blog with a fixed bg that has a pattern or flat color and then the part where the info goes being in the center and slightly see through and not fixed. -_- I want to do something like that for my newest fawn but don't know how

—

You do not have a soul. You ARE a soul. You have a body.
~ C.S. Lewis

May 24, 2012 - 11:54pm — Dragon919

ok, how can i do the 4 boxes

ok, how can i do the 4 boxes again? ill be last if you like! ^^

May 28, 2012 - 7:22pm — Unplugged

Hello.. I'm sorry I'm not

Hello.. I'm sorry I'm not keeping up really well lately. It's kind of embarassing to be honest. Sorry guys.

Lung, just pressing enter a few times after your very last line should do the trick. If it's not working, try using a few <br>.

Orinoco-- That's quite an intricate request! It's good though. Sounds a lot like what I have in this blog though. On the second page in the comments there, you'll find another code. ((the post starts with "here is the same css but with the sidebar on its normal position on the left")) Use that code.
Then, add the line "#wrapper #container #center .right-corner .left-corner{position:relative;margin:auto}" at the end of it. That should center the blog. Now all you have to do is customize it with your own colours and background.

dragon-- Are you talking about the code I gave you before? If so, check seven comments above.

May 28, 2012 - 9:02pm — Dragon919