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



November 15, 2011 - 1:26pm — Unplugged
Unplugged's picture

Lung--

Lung-- ".links{text-align:right}". Or alternatively you can fix it the right way by removing the </div> in this part: </table></div></center>

AngelWings-- Try one of these? I don't know which you want.
".body{background:#000000}"
"#wrapper #container #center .right-corner .left-corner{background:#000000}"

EternalQueen-- Do you still need help with this? I've been slacking off here, sorry.
November 15, 2011 - 7:58pm — EternalQueen

:'3 Yes please. If you have

:'3 Yes please. If you have time, of course.
—



November 15, 2011 - 10:22pm — Unplugged
Unplugged's picture

I think this is all you need

I think this is all you need Smiling
#squeeze h2{margin:auto}
November 16, 2011 - 3:49pm — EternalQueen

No difference. :/

No difference. :/
—



November 19, 2011 - 5:32pm — BouncyDeer1
BouncyDeer1's picture

Can you help me with this

Can you help me with this blog?
I can't make the right side be the color I want )= Please help if you have time =)
—

Thank you Kaoori for this drawing!Natali looks beautiful =D
November 19, 2011 - 5:33pm — Unplugged
Unplugged's picture

Try "body{background:#000}"

Try "body{background:#000}" Smiling
November 19, 2011 - 5:40pm — BouncyDeer1
BouncyDeer1's picture

Oh okay,thanks =)

Oh okay,thanks =)
—

Thank you Kaoori for this drawing!Natali looks beautiful =D
November 24, 2011 - 1:24pm — Adolf

Hello Thank you for all the

Hello Thank you for all the codes that you gave me.
I would like to ask for another rim, you do not know a code that hides a blog avatar?
November 24, 2011 - 3:33pm — Unplugged
Unplugged's picture

.node

.node .picture{display:none}

If you want to hide them in the comments too:
.comment .picture{display:none}
or
.comment .picture{visibility:hidden}
November 25, 2011 - 6:16pm — Adolf

comment

comment .picture{visibility:hidden} Smiling
December 3, 2011 - 5:12pm — Corell
Corell's picture

Hi! 1) I just wanted to ask

Hi!
1) I just wanted to ask you how I put: Recent posts, Current Map, Search in a box centered at the top of the blogg, like this:

http://endlessforest.org/community/djinn

2) And also how to take away the sidebar?

Thank you! <33
December 3, 2011 - 5:41pm — Unplugged
Unplugged's picture

For the first one, they just

For the first one, they just added the links manually. Smiling
#2, .sidebar{display:none} or .sidebar{visibility:hidden}
December 3, 2011 - 6:10pm — Corell
Corell's picture

Thank you! (:: What do you

Thank you! (::
What do you mean with Manually? (I'm a noob ;D)
December 3, 2011 - 6:19pm — Unplugged
Unplugged's picture

You just make a link to the

You just make a link to the recent/map/etc page like you would link to any other page Sticking out tongue
December 3, 2011 - 7:12pm — Corell
Corell's picture

Oh, I understand now :'D

Oh, I understand now :'D Thank you!

Edit: Btw, do you know how to change the size of the comment box and how to put a border around it? Like this : http://endlessforest.org/community/bio-beautiful-white-albino-doe-3-ofline-music?page=11

I know its alot of ppls that have asked you this, but I still don't understand it.

<3
December 3, 2011 - 7:17pm — Unplugged
Unplugged's picture

#comments{width:600px}.commen

#comments{width:600px}.comment{border:1px solid #666}
^ this should do it Smiling
December 3, 2011 - 7:51pm — Corell
Corell's picture

Yeaaa I workt ;D Thank you

Yeaaa I workt ;D Thank you again, haha.
Sorry for all my questions ;; I feel stupid.

How do I center the Headline and how do I change the color on it? <3
December 11, 2011 - 11:25pm — Mis
Mis's picture

Hello again! XD I hope you

Hello again! XD I hope you don't mind.. I'm running into a problem I have no clue about how to fix. And I thought, hey, why not ask if perhaps Unplugged has any tips.
So well this is my testing blog.. What I'm running into seems to be browser-related. I work in google-chrome, but when re-checking my code in Firefox I noticed the tabs don't work quite the same. In Chrome, the scrollbars look fine. They start where they are supposed to, and they end where they are supposed to. But in Firefox, it looks like in each tab, the next div gets pushed down a little further, and the bottom arrow of the previous div's scrollbar is visible. And because it gets pushed down, the bottom line is hard to read.

I think it has to do with how both browsers deal with padding? In Chrome I made the size of the div that contains the tabs 450px, and all the tabs are 430. This way the padding doesn't exceed the borders. Though in firefox, it seems I need to make the big div 430 as well for the scrollbars not to flow into the next tab.
But.. I need like, a middle-way. XD How to get it to look okay in both browsers.. Maybe I am doing it wrong, or maybe I am missing someone. I realised in my old bio, the issue was the same but less prominent? I don't even know why.
—
December 11, 2011 - 11:34pm — Unplugged
Unplugged's picture

Hmm could you give me your

Hmm could you give me your code Misako?
http://textuploader.com/
Though I think it might be just a problem of spacing. Try putting more space between each tab-div, and make sure the a name="1" etc also all have the same amount of space between them and the div.
December 12, 2011 - 12:08am — Mis
Mis's picture

Oh. That was actually fairly

Oh. That was actually fairly simple. Just but a lot of breaks everywhere. Atleast all the text is readable again, I doubt anyone using firefox will miss the bottom of the scrollbar.. Lol. Thanks. I guess I was just too tired to think simple anymore. XD
—
December 20, 2011 - 1:27am — Sakura
Sakura's picture

Bloop Blop. Just checking out

Bloop Blop. Just checking out what the comments look like. :3
—
Reality hits you hard bro...

Siggy by Stalkerdino! Avatar by me! :3
December 26, 2011 - 4:51am — Lung

http://www.endlessforest.org/

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

I am completely clueless as to how to fix the comments area and get the boxes centered properly.

Here's the code.
December 27, 2011 - 12:35am — Unplugged
Unplugged's picture

In the second "div

In the second "div style="width:300px; ....", add "float:right".
The comments look okay to me. Mind providing a screenshot of what's wrong?
January 3, 2012 - 2:01am — taytay101
taytay101's picture

How do you make all the

How do you make all the comments automaticly centered?
—
January 3, 2012 - 2:46am — Unplugged
Unplugged's picture

#comments{margin:auto} or .co

#comments{margin:auto}
or
.comment{text-align:center}
not sure which one you mean?
January 3, 2012 - 2:58am — taytay101
taytay101's picture

Like in the Comments, I want

Like in the Comments, I want the words to be automaticly centered.
—
January 5, 2012 - 7:51pm — Lung

Mrph, I meant the "Add new

Mrph, I meant the "Add new comment" section, oops. What you gave me centered the tabs right, but the "Add new comment" section stills hangs on the left as opposed to the right. I think there's a code you gave though that can change where it is..?
January 5, 2012 - 8:11pm — Unplugged
Unplugged's picture

.links{text-align:right}

.links{text-align:right} perhaps?

Generally the left-aligned glitch happens when you got one /div too much somewhere, but it's easier to use this css code to move it back to the right. (not necessarily prettier though)
January 5, 2012 - 8:25pm — Lung

Yep, that worked! Thank

Yep, that worked! Thank you.

Heh, yeah I figured that. But when it comes to CSS, I sorta prefer the easier methods. /lazy
January 22, 2012 - 8:09pm — Lynetta
Lynetta's picture

This has helped me so

This has helped me so much~

A few questions, on this blog, how would you center the .node, or put more space between the left side and the .node?

Also, on that same blog, how would you get the date/time posted above the blog and the comments to go back to the left?
January 22, 2012 - 8:24pm — Unplugged
Unplugged's picture

For the centering: #wrapper

For the 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}

For the date/time, remove ".comment.odd,.comment.even{text-align:center}" from your css Smiling
January 22, 2012 - 8:40pm — EternalQueen

Heys Unplugged c: You know

Heys Unplugged c:

You know the three links at the bottom of the node, yes? Do you have any idea what "Insert name's blog", "Add New Comment" & "reads" 'names' are...? Cause I want to remove "Insert name's blog" from my blog, and I have no idea how to... Tried firebug, but really, I couldn't figure it out x'D
—



January 22, 2012 - 8:47pm — Unplugged
Unplugged's picture

For the "name's blog",

For the "name's blog", ".blog_usernames_blog{display:none !important}" Smiling
January 22, 2012 - 8:52pm — Lynetta
Lynetta's picture

Great, thanks! One more, is

Great, thanks!
One more, is there a way to add a glow around the .node?
January 22, 2012 - 9:04pm — Unplugged
Unplugged's picture

.node,#comments{-moz-box-shad

.node,#comments{-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.8)}

the 0,0,0 are the RGB values (black, in this case). 0.8 is the transparency. You can also change the 15px which determines how "big" the glow is.
January 22, 2012 - 9:16pm — EternalQueen

8D Ah thanks

8D Ah thanks
—



January 27, 2012 - 5:32am — Lynetta
Lynetta's picture

Thank you! Okay, just three

Thank you! Okay, just three last questions, I promise.

1. How do you change the color of the links (such as a picto link) in the blog?

2. How do you resize the __'s blog, Add new comment, and reads?

3. How do you add space between comments?
January 27, 2012 - 7:21pm — Ertale

Can I also have some help...?

Can I also have some help...? Please?

This is a bit messed up. As you can see, I have a huge space from "css test" to the div, and honestly, I can't get rid of it. I also have troubles with the comments... Why won't it adjust to how much I write?

January 27, 2012 - 8:17pm — Unplugged
Unplugged's picture

Lynetta-- 1) .node

Lynetta--
1) .node a{color:#ffffff} is how to do it through CSS
2) .node .links{font-size:10px} (I assume you mean resizing the text)
3) .comment{margin-top:50px}

Ertale--
there's so much space because in your code you have also left a lot of space between the CSS code and the actual code of the blog. Smiling Just get rid of some of the line breaks there.
as for the adjusting, try removing "height:700px".
January 28, 2012 - 4:00am — Lynetta
Lynetta's picture

Alright, thank you soo much

Alright, thank you soo much for your time ♥
February 3, 2012 - 7:09am — Spirituelle
Spirituelle's picture

Hello~ These questions have

Hello~ These questions have been answered before no doubt, I was just wondering if there was any way to remove the links in the top left corner, where but it says Game Info, Download, etc, in blog? And if there is any way to center the date the blog (November 14, 2011 - 4:56am — Spirituelle) and where it says 'Spirituelle's blog Add new comment 120 reads'? O:

Thanks in advance! Smiling
February 3, 2012 - 10:55pm — Unplugged
Unplugged's picture

#header-region{display:none}

#header-region{display:none}
.node .submitted{text-align:center}
.node .links{text-align:center}

These three should do it Smiling
February 3, 2012 - 11:11pm — Spirituelle
Spirituelle's picture

You seem to know everything,

You seem to know everything, I'm always amazed. Thank you so much! :')
February 11, 2012 - 3:38pm — goodvibration
goodvibration's picture

Hey unplugged, it´s been a

Hey unplugged,

it´s been a while. Hope ya doing fine!
Today I wanted to redo my deer´s profile,
I already know the design but I have no
clue of coding. There are already a few basic
coding things done on my WISHery profile.

Maybe you´d be so kind and help me out?
*didnt want to spam this blog with my specifications* Sad
February 11, 2012 - 6:00pm — Unplugged
Unplugged's picture

You can e-mail me what you

You can e-mail me what you had in mind Smiling
Because right now it looks lovely and I don't know what you want to do, haha.
February 11, 2012 - 7:56pm — goodvibration
goodvibration's picture

Alrighty, did that. Hope ya

Alrighty, did that. Hope ya got the mail.
February 13, 2012 - 10:11pm — Unplugged
Unplugged's picture

Sorry goodvibration, I didn't

Sorry goodvibration, I didn't get anything.. :s Try again?
February 14, 2012 - 12:07am — taytay101
taytay101's picture

Hey Unplugged I was wondering

Hey Unplugged I was wondering if you could give me the code to when you hover your mouse over something and it shows info. Like this. (PS- hover over the pictos I want mine to look like that ^^)
—
February 14, 2012 - 12:55am — Unplugged
Unplugged's picture

Sianna's tooltip CSS blog can

Sianna's tooltip CSS blog can help you there. Smiling
February 14, 2012 - 1:04am — taytay101
taytay101's picture

*bows at feet* Oh how smart

*bows at feet* Oh how smart are you! I gravel at your feet! *messes up* Oops. Thanks. xDD
—