* {CSS Help} The Structure of a Blog Entry

Unplugged's picture


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



That worked. Thank you. (:

That worked. Thank you. (:
OrinocoFlow's picture

Omg thanks Unplugged!!! ^_^

Omg thanks Unplugged!!! ^_^
You do not have a soul. You ARE a soul. You have a body.
~ C.S. Lewis

Hey Unplugged Would you

Hey Unplugged

Would you mind, when you get the time, to help me a bit...? It's about the #wrapper #container and so on, going all to the top and all to the bottom.

I know you said it wasn't possible with both, but instead covering the top only was, but I just thought, is it possible to do so with the bottom instead...?
Unplugged's picture

Sorry Tulloh, I can't help

Sorry Tulloh, I can't help you there. The very bottom of the page is one of the things I haven't figured out how to modify yet, interestingly enough

You can try the code I gave you previously and change the numbers (-120 px and 120px), but I'm not sure how far that will get you.
#wrapper #container #center{position:relative;top:-120px;z-index:-1;}#wrapper #container #center .right-corner .left-corner{padding-top:120px;}

Veri interesting indeed. I

Veri interesting indeed.

I already tried a bit with that. Somehow, I am unable to cover the last perhaps 3-5 px at the very bottom. Watch this
dayne's picture

I've been refraining from

I've been refraining from posting my questions here and instead just going to check through the pages, but ugh, I do not feel like going through all the pages again right now, haha. So uh, anyway, question.

Is there a way to make my body background image in a fixed position? So the image doesn't scroll with the rest of the blog. I have a BG i want to use, but it's not big enough and doesn't repeat, but I hate how ugly it looks when it does the repeated pattern from the comments and stuff. So yes, am I able to fix a BG in it's set position without it scrolling with the rest of the blog?

Thanks in advance!
Unplugged's picture

body{background:url(' url

body{background:url(' url here ') fixed}
^^ that should actually do the trick. Smiling

You can also max out the size of your bg by adding "body{background-size:100%}" if you'd like that, though obviously that one has all the drawbacks of resizing a picture.
dayne's picture

It worked! Thanks : D!

It worked! Thanks : D!

._. Hey Unplugged. I need

._. Hey Unplugged. I need your help... Again.

I have a noobie question: How can I make the hovering in the div where it says "1) text text hover" to stop going inside the div and stretch it?

Here
Zom.B's picture

retracking to find this

retracking to find this easier *-*

Oi. Two little problems.

Oi. Two little problems.

The bright yellow box by the "reply" buttons. I can't make it be the color I want it to be.

And also. I somehow lost my "add new comment" button, as well.

/problems. <.>

I was just wondering how I

I was just wondering how I could make the corners of the blog itself rounded? (I think it would be called the wrapper?) I found the code, but I don't really know where to put it... (:

I take that back; I solved my

I take that back; I solved my problem myself. xD Sorry to bother you. Thanks~♥

Jinx: #wrapper #container

Jinx: #wrapper #container #center .right-corner .left-corner{-moz-border-radius: 15px;border-radius: 15px;}
Unplugged's picture

Hello! I'm not sure what's

Hello! I'm not sure what's the best way to go about this but I think I'll just settle with a comment.
As I'm not around anymore I won't be checking this thread either. There are plenty of other css-savy people around here and a good amount of you already ask in seperate blog entries when they need help.

However, if there's anything, I'm more than willing to help out. If you're stuck with something, feel free to pop me an e-mail at at any time. Usually it's pretty easy to reach me plus I like doing css.
Thanks!
Corell's picture

Hay &hearts; I just need

Hay ♥
I just need some help with my css, and I hope that you can help me. (-:

1: How do i center the '''July 25, 2011 - 6:01pm — Corell''
2: How do i take away the user-picture on the top of the bio?
3: And how do i center the ''Add new comment'' on the bottom of the bio?

Sorry if it is to much ;;

Hey Corell. :3 I think this

Hey Corell. :3 I think this is what you're looking for:


1: .node .submitted{text-align:center !important}
2: .node .picture{display:none !important}
3: .node .links, .comment .links{text-align:center}


Corell's picture

Omg, yes! It all worked. Your

Omg, yes! It all worked. Your an angel Tulloh! Thank you so much ♥♥

Tracking

Tracking<3 Thank you soo much for this.

Hii. I need some help with

Hii. I need some help with one thing! (:

How do I center the ''Add new comment'' text?
I tested < style >.node .links, .comment .links{text-align:center}< /style > but it didn't work.

You can see how it looks here: http://endlessforest.org/community/css-test-ignore-1
goodvibration's picture

Hello there unplugged! I

Hello there unplugged!

I would have to ask for your help again it seems.
Currently I made a new blog called "{jua}" and I wanted to do some adjustments.
I would love to change the header section + content background to a lighter colortone
but I dont have a clue how to change it , even though I looked through the code;;;
I kinda changed the comments section instead but not the elements that I wanted to.

Hope you can help me out and thank you in advance! Smiling
Unplugged's picture

Hello, I hope to be around

Hello, I hope to be around for a bit once again. Please feel free to shoot some css questions my way.
Poppy's picture

Omg thnx this is sooo

Omg thnx this is sooo helpful, btw your very helpful to the site and the users ^^
Angelus_FreeSoul's picture

Hi Unplugged! I need your

Hi Unplugged! I need your ability in CSS xD
I found out how to change the colors of the various sections, but I can not fix it as I would like.
How do I do it all entirely black?

I have read the old comments that you gave your msn contact, now that there's more you're on skype?
Because explain on skype would be more comfortable, because I don't want making two million questions here, bothering everyone else.

Sorry for the noise!!!
Unplugged's picture

Hey there It is very easy

Hey there Smiling

It is very easy to change the color to all black if you use the "Empty Base Template" from my blog CSS Quick Reference.

My Skype name is "artsja". I am happy to help!
Poppy's picture

How do you make rounded

How do you make rounded corners for the profile pictures?

Hello Unplugged, one of your

Hello Unplugged,
one of your templates - the two - was exactly what I was looking for!
I have used it on bio of my newest character. Hope you don't mind, credit is given anyway.
So... Click me!
Osmotious's picture

TRACKING

TRACKING
add me on discord: Krisaur#9391
Mjrn's picture

I know this is an insanely

I know this is an insanely old blog, but I didn't want to bother you on your personal.

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

No matter what I do, the 3rd box on that page has this giant gap between the top of it and the first line of text. All of those boxes use the same exact code, the only difference is in the sizes. It's really annoying me. :/

http://pastebin.com/nh00FTUj Here's the entire code for it.
Account previously Mjrn, returned to Veedeer.
AlisonRobin's picture

@Mjrn Is the paragraph break

@Mjrn Is the paragraph break between line 31 and line 32 on the pastebin the culprit? I could be totally wrong because I'm new at this but I noticed that difference between your divs.

Also I was waiting for this to get bumped because I didn't want to do it myself :x Was curious which part of the CSS controls the color of the text that displays the date of the the submission. I've been able to change the font of the date and the font of the link to the poster's account, but I can't for the life of me change the color.
Unplugged's picture

Sorry, didn't mean to take so

Sorry, didn't mean to take so long to reply.

AlisonRobin-- This should do the trick. Smiling
span.submitted{color:#000}

Mjrn-- Looks like AlisonRobin figured it out already. It does seem to be because of the line break between size=10 and The Roster. For all other boxes, you have those in the same line.
Mjrn's picture

...I feel so stupid for not

...I feel so stupid for not even noticing that, uuugh.

Thank you, both of you. (:
Account previously Mjrn, returned to Veedeer.
AlisonRobin's picture

Thanks Unplugged! This has

Thanks Unplugged! This has been driving me up the wall. My comments in the code have been full of curse words but now they don't have to be.

Mjrn I was seeing your notes on the title of the page you were working on the other night and I just wanted to bring you hot chocolate and a blanket and tell you everything would be okay.
Mjrn's picture

Ahaha, awww. Yeah, CSS is

Ahaha, awww. Yeah, CSS is painful for me, and having to trudge through pages of tutorials and trying to figure out where I want things to go and why this and that wouldn't work was just tuckering me out and making me pretty angry, heh. I'm still not happy at all with the end result, but it'll have to do for now.
Account previously Mjrn, returned to Veedeer.
AlisonRobin's picture

Oh, one more thing: How to

Oh, one more thing: How to remove the avatar of the first post without removing the avatars of the comments?
Mjrn's picture

.node

.node .picture{display:none}

I believe this is the code for it. I just went through my blog and looked for similarities in the coding, I'm pretty sure that's the one you're looking for.
Account previously Mjrn, returned to Veedeer.
AlisonRobin's picture

Thanks, that did the trick!

Thanks, that did the trick!
gglidden's picture

Hello, I need some help with

Hello, I need some help with my css. I was trying to make 2 more of those boxes underneath the image. I was trying to make them side by side but I don't know how. Can you help?
Ring The Bells That Still Can Ring.
Forget Your Perfect Offering.
There Is A Crack In Everything.
That's How The Light Gets In.

(A part of the lyrics of Leonard Cohen's Song "Anthem")
takayama's picture

track

track
Skatmat's picture

Hello CSS gods! I have a

Hello CSS gods! I have a fairly simple question;
On this blogpost here: http://endlessforest.org/community/node/59899
Everything is not perfectly centered. The whole thing itself, it sticks more to the left rather. How do I make it perfectly centered? (:
tigerart27's picture

Quick ref track

Quick ref track
Unplugged's picture

Skatmat, try adding this to

Skatmat, try adding this to your css:
body.sidebar-left #center, body.sidebar-left #squeeze{margin-left:0}
Skatmat's picture

That did it! Thank you! (:

That did it! Thank you! (:
littleswan's picture

my favorite thing. tracking

my favorite thing. tracking