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



Unplugged's picture

I'll take that blog apart for

I'll take that blog apart for you in a sec but I think basically they just used the code I gave you and resized the comments..
Yeah, it's annoying to go through the comments here and I'm going to change change the font colour eventually. :x

And as for my personal blog, simply look for all "background:url('http://i49.tinypic.com/2l4389.gif')" and remove them. :)

Ah silly me xC I will try

Ah silly me xC I will try it.

Thank you very much for your help! :3 ♥


Edit: Sorry for bothering with my questions Dx
Is it possible to move the menu bar a little bit down?

Is there a way to put a

Is there a way to put a picture in the side bar and not make it repeat itself?
Unplugged's picture

Bamboo-- Try

Bamboo-- Try this:
.sidebar{top:200px;}

Rhyolite--
.sidebar{background:url('IMG') top center no-repeat}
You can also change the "top center" to "top left", "bottom right" etc etc. Just keep the no-repeat.
Wotsits's picture

Thank you for doing this~

Thank you for doing this~<3


EternalWanderer's picture

Click I was wondering if it's

Click
I was wondering if it's possible to remove the list squares, the leaf of the title and that annoying line at the top of the box?(marked with red) And to keep the sentence "the endless forest" in one same line? (yellow)
Also, how do we change the color of the post dates :o ?

Silly questions, I feel like I should know this by now :p
Unplugged's picture

There you go! Bullets: ul li,

There you go!
Bullets: ul li, ul.menu li, .item-list ul li, li.leaf{background:none;}
Leaf: #squeeze h2:before{content:""}
Line: #tabs-wrapper{border-bottom:none;}
Dates: .submitted{COLOR:#000000 !important}

As for keeping that text in one line, you'll need to change the size of your font. I haven't yet found a way of changing the sidebar width without destroying the whole page. :x
EternalWanderer's picture

Alright, thank-you :D {e}:

Alright, thank-you :D

{e}: One more thing, where should I insert those pieces of code?
Unplugged's picture

Simply add it to all your

Simply add it to all your other code-stuff between the style-tags. Laughing out loud
EternalWanderer's picture

Well yes, that's not exactly

Well yes, that's not exactly what I meant xD I was thinking it would disable the code if I placed it between a dot and the wrong word? -if that made any sense at all-
Unplugged's picture

I got no clue what you're

I got no clue what you're talking about, sorry. Sticking out tongue But if you place them all after your very last }-bracket and your </style>-tag you can't do anything wrong.

Thank you again so much

Thank you again so much ♥
And quickly, hopefully the last of me bothering you, but what is there a code that allows you to put text infront of an image? Thank you (:
Unplugged's picture

You simply need to make a div

You simply need to make a div with that image as a background. Laughing out loud

Ah, thank you so much

Ah, thank you so much ♥

Ok I'm back with mah

Ok I'm back with mah questions D: sorry to bother. Again.

How can I make my comments stay like this?
Unplugged's picture

I'm not sure what exactly you

I'm not sure what exactly you mean by "stay like this"? :x

I mean to stay in the middle

I mean to stay in the middle of the page.. :x
Unplugged's picture

Hmm, try this

Hmm, try this out:
#comments{margin:auto}

IT WORKS >8D

IT WORKS >8D MWAHAHAHA

Thankieess! I love you O3O <33333

I was wondering how you can

I was wondering how you can put pictures in the background like this-http://endlessforest.org/community/chosen-one-harry
and their whole too, not little squares
Unplugged's picture

"body{background:url('URL

"body{background:url('URL HERE') fixed repeat}"
will give you a background image like in your example that doesn't "move" with the page. Smiling
I'm not sure what you mean by 'little squares' but are you talking about the image repeating itself?

Oh thanks 8D!!! x3 could you

Oh thanks 8D!!!
x3 could you give me the code for a picture that does move with the scroll thingy too? o:
Unplugged's picture

Just remove the "fixed" then.

Just remove the "fixed" then. :b

Hello again (: I was

Hello again (:
I was wondering if you could have yet another look at this blog; http://endlessforest.org/community/biography-solitude
I seemed to have messed up the menu links somehow, they aren't supposed to pop out like that while hovering over them. It happened when I centered the blog title.
Can you find it? ♥
Unplugged's picture

div#sidebar-left.sidebar

div#sidebar-left.sidebar a:hover,div#sidebar-left.sidebar ul.menu a:hover,div#block-user-1.clear-block.block.block-user a:hover,.inspir a:hover,.new,.comment div.links:hover,span.submitted {text-align:center;color:darkgray}

^ This part of your code, change it to following:

div#sidebar-left.sidebar a:hover,div#sidebar-left.sidebar ul.menu a:hover,div#block-user-1.clear-block.block.block-user a:hover,.new,.comment div.links:hover{color:darkgray}span.submitted{text-align:center;color:darkgray}

Thank you! &hearts;

Thank you! ♥
snowbell's picture

edit: nvm i got it XD

edit: nvm i got it XD
Solaya's picture

I tried to add a table on a

I tried to add a table on a biography, but, behind the table, there is a white line... How can I delete it, please ? :/

Avatar by Awentia, signature by Wildflowerdeer
Unplugged's picture

In your <table>, add

In your <table>, add "style="border:hidden"" and it should disappear.
Like this:
<table style="border:hidden">
Solaya's picture

Perfect, thank you

Perfect, thank you <33

Avatar by Awentia, signature by Wildflowerdeer
OokamiAzura's picture

I've looked around, and can't

I've looked around, and can't seem to find the code for this 8'D

How do you center this?

Also, is there a way to center the TEF logo at the top?
Unplugged's picture

To center the blog

To center the blog title:
span.submitted, #squeeze h2{text-align: center;}

As for the TEF-Logo, I haven't found a way to center it yet, but you can move it to the right:
#logo{position:relative;left:100px;}
will move the logo 100px from the left side (aka to the right).

((Also, here's something nice, removes the yellow leaf:
#squeeze h2:before{content:""}))
OokamiAzura's picture

Thank you so much!

Thank you so much! fskfskfks

- Spams &hearts -
TheSnalf's picture

I have a question, not sure

I have a question, not sure if its been asked. I cant seem to get absolute positioning to work.

I would like to move the text boxes to overlay each other but when I position more than one box it breaks apart. Any advice?

EDIT: Never mind I got it Sticking out tongue
__

Hey unplugged. I sent you an

Hey unplugged. I sent you an email on 12/1 but I dont think you got it. So posting here.

Hey, I was wondering if you could answer a few css questions? For this blog:
http://endlessforest.org/community/node/51570

How do I remove/change the color of the Home > Blogs > Lustful's Blog
How do I remove/change the color of the 'Picture Categories/Blog Categories/Online Users'

I've been through your entire blog and still haven't seen these. If by chance I've missed them, I apologize.

Unplugged's picture

No, I didn't receive

No, I didn't receive anything. I'm generally not reliable when it comes to e-mail. :x Which address did you send it to?

To hide the Home > Blogs:
.breadcrumb{display:none;}
To change the colour of Home > Blogs:
First one are the small > arrows, second the links and third links when hovering your mouse over them.
.breadcrumb{color:#ff0000 !important}.breadcrumb a{color:#ff00ff !important}.breadcrumb a:hover{color:#ffff00 !important}

To hide Categories:
div#sidebar-left.sidebar h3{display:none;}
To change the colour of Categories:
div#sidebar-left.sidebar h3{color:#000000;}

Tell me if there's anything else you need. :)
Chickenwhite's picture

Hey, Unplugged, do you know

Hey, Unplugged, do you know how to change the colour of the blog-title? >w< 'cuz I have a really light background and I can hardly see the title TwT;;
Unplugged's picture

#squeeze

#squeeze h2{color:#000000}
Laughing out loud
In the preview, you won't see it on the Blog Title though, but on the title that says "Preview".

-flails- Ummm...the one that

-flails- Ummm...the one that I got from here I believe. Arcia? And thank you. ^^
Chickenwhite's picture

Thanks! >w< I'll try that

Thanks! >w< I'll try that out! >w<

http://endlessforest.org/comm

http://endlessforest.org/community/node/51570
Could I possibly bother you for the code to remove the black bars over reply?
Unplugged's picture

Could you screenshot that for

Could you screenshot that for me? I don't see anything. :x
You could try adding ".comment div.links{border:none;}" but I'm not sure.
GanzfeldEffect's picture

Tracking.

Tracking.
Munkel's picture

http://endlessforest.org/comm

http://endlessforest.org/community/crybaby-0
I have a little question, but maybe there's nothing which can fix it.
On the first page of the comments it got messed up long ago, probably because of Deathwing's "/" on the beginning of her comment.
Is it somehow possible to fix this and get it back to normal? In the comment-< style > part maybe?
Unplugged's picture

What browser are you using?

What browser are you using? It looks all fine to me, I'm using firefox. Could you give me a screenshot?
Munkel's picture

Oh I didn't look at it in

Oh I didn't look at it in Firefox, forgot about that. Looks fine for me there as well.
I used Google Chrome http://i228.photobucket.com/albums/ee220/pirate-johnny/Unbenannt-3.png
Unplugged's picture

Hmmm I'll go download Chrome.

Hmmm I'll go download Chrome. About time. Quite a few people seem to use it.
Munkel's picture

Alright &hearts;

Alright ♥
Unplugged's picture

Just for general

Just for general troubleshooting, try to merge the four different styles you have into one.
Issue seems to be in IE too.

[e]: Aha! The issue seems to lie broken /center-tag that gloryofdeerforever has in their signature. It probably "reacts" with some other element there. You can see it in the source code if you check with Chrome or IE, in firefox this seems to get an automatic fix, all tags are closed there. There's nothing you can really do here unfortunately. :x
Thanks for making me download Chrome though, I've been meaning to do that for a long time now. :b
Munkel's picture

Ah yes I thought so. Aw okay

Ah yes I thought so. Aw okay >__< thanks for the help anyway.
And you're welcome xD