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



3's picture

Comment 101! >

Comment 101! >Shocked

III

Links & Info
Unplugged's picture

ggliden-- you did everything

ggliden-- you did everything right, it's just called #center, not #container. Smiling


*102's*
Kiraki's picture

Thankies for this it really

Thankies for this it really helped ^^

I did struggle to get the inside (darker blue) to work though, not sure what I did wrong there but I messed around with it and it finally worked but I honestly have no idea how I did it :3
gglidden's picture

I meant to type #center,

I meant to type #center, because that's what I'm trying to change in my Practice blog, sorry. The picture still isn't showing up, and I'm using ImageShack. Errrg....

EDIT: I figured it out. New question, do you know how to change the color text off to the left? Not the text when you write a blog, bio, diary entery, etc, but all those links?
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")
OkamiLugia's picture

I accidentally put coding in

I accidentally put coding in a comment on my deer's (Riza's) bio, and now I can't edit that comment or add new ones. I used the example template from your personal blog to make mine. Maybe you know how to fix this?
Unplugged's picture

gglidden-- I have the code

gglidden-- I have the code for this in this blog. ("Colours for Sidebar links")
OokamiLugia-- I fixed that for you now. :]
Ravyn's picture

http://endlessforest.org/comm

http://endlessforest.org/community/node/40539 <- Link Sticking out tongue

How do I make it so the comments are the same size as the black boxes above?
Also, I don't want certain images to be transparent, and I don't want my borders to be transparent.
How do I fix this?
Unplugged's picture

I don't think it's possible

I don't think it's possible to make the borders not transparent this way. I think you'd have to remove the opacity code and give the boxes a half-transparent black .png as a background.
About the certain images - what images do you mean?
As for the comments, maybe try using a "width:"-code for the ".comment.odd, tr.odd, tr.info" and "tr.even, .comment.even"..
Ravyn's picture

It's the picture of

It's the picture of Ravyn.
When I use the width thing, it aligns to the left instead of centering.
It looks weird. :/
Any idea on how to fix this?

And thank you for helping me... <3
Unplugged's picture

Hmm. Can I snatch the code

Hmm. Can I snatch the code from you or something? I got stuff to do so I can't help you now but I'd like to try and find something later.
Ravyn's picture

http://endlessforest.org/comm

Unplugged's picture

Found the code surprisingly

Found the code surprisingly quickly!
should center them. :)
Ravyn's picture

You are so amazing and

You are so amazing and talented. Thank you!

Edit:
Um. Where do I insert this? :/
Unplugged's picture

You got a ".comment {border:

You got a ".comment {border: none;}" in your code, add the "margin:auto" there. Smiling
Ravyn's picture

That didn't work for

That didn't work for me?

Image and video hosting by TinyPic

There right ?
Unplugged's picture

Hm. :/ Do you use

Hm. :/
Do you use Firefox?
Did you add the width codes for the .odd and .even comments?
Ravyn's picture

I got it. I took the width

I got it.
I took the width out before I inserted the margin code.

Thank you so much. <3 Haha.
I put you through hell with these things. ):
Unplugged's picture

This is much, much more fun

This is much, much more fun to do than homework, please bother me again asap.
gglidden's picture

"Please bother me again

"Please bother me again asap", haha lolz. XD Just thought that was funny. (Pointless comment...)
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")
Ravyn's picture

One more thing. I don't like

One more thing.
I don't like the gap on my biography, and every time I get rid of the < br >, the other boxes become visible...
Is there a way to get rid of it without having the other boxes scroll up?

http://i45.tinypic.com/2vxizac.jpg
Unplugged's picture

The link is broken, but if

The link is broken, but if you're talking about what I think you are talking about-- I don't think it's possibe to remove it. The gap will always be as big as your biggest box. :/
Ravyn's picture

Why doesn't Mozart's do it

Why doesn't Mozart's do it and mine does?
Unplugged's picture

That is because in Mozart's

That is because in Mozart's bio I used scrollboxes - the boxes for every text are all the same size, and if I have more content you can scroll it, while in Ravyn's the height of the box is adjusted by how much content you got.
Making all boxes the same size to scroll through is a possible solution, now that you mention it, yes...
Ravyn's picture

Attempted:

Unplugged's picture

Haha. Okay. ...What.

Haha. Okay.
...What.
Ravyn's picture

I have no idea what I just

I have no idea what I just did...
Um, haha.
Where do I insert the scroll boxes?

Do you just want the code and work on it whenever you have time? Sticking out tongue
Unplugged's picture

I don't know either, but

I don't know either, but something probably went wrong. Sticking out tongue
But judging by the code it seems as though you did everything right..

And yesss, code would be awesome. *grabby hands*

Wow, thank you so much for

Wow, thank you so much for this! It's a bunch of help. <3

But I have two questions. ^^;
1. Do you know how to change the color of the date/time that appears in every post/blog? (i.e. June 6, 2010 - 7:18pm)
2. How do you change the font for a whole blog entry?

Sorry if these were already asked. It's kinda hard to read through this. xD;;

Thanks in advance. ;D
Unplugged's picture

There you go! Date -

There you go!
Date - .submitted{color:#0000ff !important}
Font - .node{font: 11px verdana;color:#ffff00}
I'm not sure if that's exatly what you mean though. xD

Nope, that's exactly what I

Nope, that's exactly what I meant. c:
Thanks so much! <3

Edit: Okay... So I've run into a few more things that I need help with.. xD
1. The links aren't turning another color when I hover my mouse over them. But I have the code up. (#block-primary-links a:hover, #tabs-wrapper a:hover{color:#B2AC97}) What am I doing wrong? ;o
2. How do you change the colors of the purple/grey lines that appear between comments?
3. How do you change the color of the "New" sign that appears on new posts?
4. How do you change the font in the 'reply' boxes?

I feel egocentric for asking you all these questions... I need to pay you back. xD How's about some fan art? ;3

double post

double post
Ravyn's picture

Thank you for the code. It's

Thank you for the code. It's perfect. <3
Ravyn's picture

Is it possible to make the

Is it possible to make the links on the left scroll as you scroll down the page?
Unplugged's picture

Tried that before, but so far

Tried that before, but so far I don't have any success, no. I'm positive that there's a way to do it though.
ShadowsofLight's picture

Unplugged. Can you tell me

Unplugged. Can you tell me how to do what Ravyn does with her tabs on the Ravyn, The Black Swan Page, and how to change the comment size, also like on that page.

Mick Kreiger: You Know You Love Me XOXO
Unplugged's picture

I find it kinda hard to

I find it kinda hard to explain how tabs work, but I could try and make you a code for that if you want to. (Speaking of which, I should finally provide a tabs-code for everyone sometime...)

Comment resize:

And if you want to center them, add this:
ShadowsofLight's picture

Em...for the tabs thing, sure

Em...for the tabs thing, sure if you want...

um...also, can you make it so the comment border goes all the way around?

Edit: Finally. In your blog page, the box is funny!

Mick Kreiger: You Know You Love Me XOXO

tracks/

tracks/
murrr's picture

Thankyou :)

Thankyou :)


Ravyn's picture

Is there a way to remove only

Is there a way to remove only my picture and the "February 18, 2010 - 2:52pm — Unplugged" Part?
Spirituelle's picture

Is there a code to change all

Is there a code to change all the green links?
Like 'Add new comment' and your name? ;o
J!n's picture

Is there a code to make it

Is there a code to make it look like this instead of this?

Spirituelle - Here, I think that's all. Unplugged's codes.
<style>ul.links a{color:#ff0000} ul.links a:hover{color:#ff00ff}
<style>.submitted a{color:#ffff00}.submitted a:hover{color:#ff00ff}</style>
<style>.menu a{color:#ff00ff}.menu a:hover{color:#00ffff}</style>
<style>.breadcrumb a{color:#ff00ff !important}.breadcrumb a:hover{color:#00ffff !important}</style>
Spirituelle's picture

Thank you! What's the code

Thank you!

What's the code for the '>' and the title? For this bio.
Unplugged's picture

Quote:Is there a way to

Quote:
Is there a way to remove only my picture and the "February 18, 2010 - 2:52pm — Unplugged" Part?

Tried before, but no, nothing that I know of, sorry.

Quote:
Is there a code to make it look like this instead of this?

I don't think that's possible, but I'm going to try and experiment a little, maybe I'll find some trick.

Quote:
What's the code for the '>' and the title? For this bio.

'>': breadcrumb{color:#ffff00 !important}
Title: #squeeze h2{color:#00fffff}

J!n's picture

I think I found something

I think I found something similar here.
Unplugged's picture

I see only this?

I see only this?
J!n's picture

Oh.. It looks different on my

Oh.. It looks different on my computer. That's too bad.
Dementia's picture

How can I add an image rather

How can I add an image rather than a color for the background?
Unplugged's picture

You write {background:

You write {background: url('URL') #ffffff} for a normal background-image. Smiling