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



ghosteye's picture

Aaaand Tracking!

Aaaand Tracking!
Mordecai's picture

Track'd! This is really

Track'd!

This is really useful, thank you for taking the time to do this Laughing out loud
EternalWanderer's picture

...Hum. I'll try not to take

...Hum. I'll try not to take much time. :P this isn't urgent at all, don't give it any priority. I know you're busy.

1. I still can't make the opacity gradient of the borders visible ._.

2. Is it possible to stretch the tr.even comments to the borders of the browser, so the avatars in the comments would be aligned right under the sidebar?

3. I know this is godawful, but I still can't place scrollboxes inside other divs o_o' It just crawls onto it or under it.

4. Can border-radius be applied to ul pager? As in turning it into a circle?
Unplugged's picture

1) The opacity issue has to

1) The opacity issue has to do with the numbers you chose. yours is "25 25 25px", which means your shadow is 25px away from the box horizontally and vertically, and your blur radius is 25 px too. The blur itself (it's not a gradient actually) is very weak to begin with, that's why you don't see anything. So you have to work with much smaller numbers:
-moz-box-shadow: 0 0 5px rgba(37, 75, 75, 0.6);-webkit-box-shadow: 0 0 5px rgba(37, 75, 75, 0.6)
blur is moved 0px to the right and 0px to the bottom, the blur radius is 5 px.

2) It is if you break the page purposefully. :b You'll need to have four unecessary </div>-Tags at the very end of your page. As you already have two needless /divs somewhere in your code, you'll only need to add two more and this code:
#comments{width:100%}
The comments will go to the left border. Strangely it ends before the right side though.

3) This is probably caused by a coding mistake. Check if all your div boxes have a proper opening and close tag and if there are no unnecessary /div-tags.

4) To make border-radius work you'll need to specify a border for the ul first, so "ul.pager{border:1px solid #ff0000; border-color:#00ff00 ..." and then the border-radius stuff. I didn't try it but that's what google gave me.

I am very sorry, I really

I am very sorry, I really dont feel like reading all of your pages, but I read the first two.

How do you add a scroll box and how do you make it a different size, and how do you add the content into it?

Ive scowered the css blogs both in this blog, and in any other blogs I could find, and I didnt see one that had what I was looking for.

If you have the time, could you explain how to do so, and what the link is for scroll boxes?

I am not at all experienced with Css, and the final code you have, I cant get to work.

Sorry for spamming, youve probably answered this a million times, but could you please answer mai questions--Only if you know them--or if you have the time?

No matter what happens, I am greatful for your time into explaining Css. Thank you so so so so so so much!! <3

Unplugged, is there a way to

Unplugged, is there a way to change the color of the "reads"? For example this blog says 10744 reads. Or can it just be hidden completely? It clashes with the color of my blog.

You're so awesome for doing all this!
Unplugged's picture

Rokysopp-- To change

Rokysopp-- To change colour:
.links span{color:#ff00ff}
To remove:
.links span{display:none}


Dinamo:
Here's a basic scrollbox code you can play around with:
<div style="width:200px; height:130px; overflow:auto; background: #253128; border: 2px solid #264135; text-align:justify; padding:10px; font: 11px georgia; letter-spacing:1pt;">
text
</div>

Just leave the "overflow:auto".
What do you mean by the "link for scrollboxes" though?

Lol, I'm sorry. Thank you for

Lol, I'm sorry. Thank you for the code, Ill play around with it for Dinamo's bio!! <3

I mean 'code' instead of 'link'. I'm not handy with computer lingo. :S

{e} Ok, I have it on her bio. How do you get the scroll box to go to the center of the page? I have the center codes around the whole scroll box code, but it doesnt work?
Unplugged's picture

To center divs you need to

To center divs you need to use < and > instead of the usual [-Brackets. :b

OHH. Thank you so much!

OHH. Thank you so much! <3333

Its up and running! : D
EternalWanderer's picture

(And again, there's no hurry

(And again, there's no hurry about these__v)

1) Aw well, too bad it's so weak but thanks.

2)Adding the two aditional div enclosing was what made the comments move, and for what I can see the only thing #comments{width:100%} made was to add a small gap between the right border and the screen :I
Unfortunately, the forth /div is gaving me an odd result o_o If I remove that last /div it looks fine but the preview text box sinks beneath the left side of the screen.
2.1)Is it possible to place the "Add new comment", "Blog" and "Reads" links inside the wrapper, while keeping the comments where I wanted them to be?
Sounds somewhat contraditory ._. If it's not possible, I'd like just to change their color or align them to the right or center.

4) Just letting you know Google doesn't like me B)
Unplugged's picture

6_6 I'm not sure. I looked at

6_6 I'm not sure. I looked at your code but it's all really confusing. Maybe you should start by cleaning up your coding or even starting over completely going step by step, starting with the basic layout you want and then add all other fancy CSS stuff.
EternalWanderer's picture

Quote:starting over

Quote:
starting over completely

...-GASP- omgawdnoplease D8

I think that wouldn't fix it, I'm really slow with coding and everytime I look at it again I forgot where is what and what is what ó_ò

Alright, I'll remove the problematic stuff and start adding the information, as I should have done from the beggining if I hadn't been so stubborn. Thanks for your patience :)

(PS: I believe the confusing stuff is the hidden CSS on the top of the code that I took from your Personal Blog and stored above everything to have a map of valid values c: If it's not that, well, I fail with organization everyway)

Hi Unplugged, there seems to

Hi Unplugged, there seems to be a problem with my test blog (soon to be biography). First of all, the 'Add New Comment' wont show up. Also, my comments havent are incrediably close to my text box.
Any suggestions?
Unplugged's picture

Remove ".content

Remove ".content .clear-block{display:none}" from your css. Smiling
As for more space between comments and blog, just add a few <br>s at the end of your page.

Thank you so much

Thank you so much Unplugged!
I hope you dont mind, but I have a few more questions.

• How can I change the comment font color on my blog (in my previous comment) to another color? Alot are finding it hard to read.

• How can I get my comments to center and have a double border around them? When I say 'center' I'd also like them to be of a smaller size, like in CryBaby's bio?

• And lastly, just clearing it up~ but is it ('url= img link here') for putting an image in a text box?

Thank you again ♥
gglidden's picture

Hey there! Do you know how to

Hey there! Do you know how to make the grey area of a blog transparent so that people can see the background image better?
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")
Unplugged's picture

Rhyolite-- Sorry for the late

Rhyolite-- Sorry for the late reply. There you go:
Comment color: #comments{color:#000000}
Comment width and centering: #comments{width:200px;margin:auto;}
Double border: .comment{border:5px double #000000}
And the code is {background: url('goes here')}

ggliden-- Not sure what grey area you mean? Where all the blog content goes?
gglidden's picture

Yeah, were the blog content

Yeah, were the blog content goes. Sorry that my question was a little vague.
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")
Unplugged's picture

This will remove the

This will remove the background from the blog and the comments:
#wrapper #container #center .right-corner .left-corner, .comment.odd, .comment.even{background:none;}

You might want to change/remove the comment borders too because it looks sort of awkward with the regular ones.
If you want the comments to be colored, remove the ".comment.odd, .comment.even" Smiling

Thank you so much,

Thank you so much, Unplugged!
I know, I know.. kill me now, but I have just ONE more question!
I hope you dont mind.
How do you make an image, go infront of a text box? Is that possible? I've seen it on a few biographies, and I really like it.
Thanks again ♥

*Edit - the comments are playing up for me. I've put in the margin:auto, etc. But my comments go all weird. Could you show me how to set it up? Like, from the #comments all into one line so I can just copy & paste? I've been fiddling around with the comments, but they just dont like me!
uwharrie's picture

tracking

tracking <3 thank you!!!!
Unplugged's picture

Can you show me

Can you show me examples?
Generally you can adjust image position like that if you use this code:
<img src="image-goes-here.jpg" style="position:relative;top:-10px;left:30px">
This will move your picture from its usual position 30px from left, and -10px from top (i.e 30px to the right and 10px up). You'll have to adjust the position here.


As for the comments, I'm not sure. It might have something to do with the way I set up the CSS you're using. Can you show me what goes wrong with the comments?
J!n's picture

The 'ul.links a' and

The 'ul.links a' and 'ul.links a:hover' seems to affect both the add new comment-button and the reply/edit-button.

Is there a code that only affects the reply button?
It bugs me that whenever a comment is replied to it can't be edited..
BluedeerLegend18's picture

MY EYES! THEY

MY EYES! THEY BURRRRRRRNNNNNNN!!!!

This is an EXTREMELY nice guide, very helpful, too.
I have a Master's degree in Wumbology.
Unplugged's picture

Saosin-- #comments ul.links

Saosin-- #comments ul.links a{color:#000000} #comments ul.links a:hover{color:#ffffff}

I can't do anything about the disappearing edit-button, sorry.

Thank you BluedeerLegend Smiling

How do you remove the

How do you remove the sidebar?
Unplugged's picture

.sidebar{display:none} or .si

.sidebar{display:none}
or
.sidebar{visibility:hidden}

Thank you &hearts;

Thank you ♥
Xemi's picture

Thank you SO much for this,

Thank you SO much for this, I've started using your CSS with the right-aligned sidebar as a base for my deer bios as of today with edits for appearance and I absolutely love it.

Just wanted to say thankyou since I'm using your stuff. ;w; Tyty~ <3
Kirness's picture

Gotta keep a track on this. I

Gotta keep a track on this. I know I'll need it again. Thanks a bunch!
Please call me Lyssa or Kir. n.n

Art by Anjali. ♥
z.m123's picture

How do I round the edges on a

How do I round the edges on a div box?
Pistol's picture

I've been trying to center

I've been trying to center all this, but it just doesn't seem to work ;-; I want it to be in the center like here.
Unplugged's picture

Try it using this: #wrapper

Try it using this:
#wrapper #container #center .right-corner .left-corner{position:relative;margin:auto}#wrapper #container #center{float:none;}
Pistol's picture

It works. Thank you!

It works. Thank you!
z.m123's picture

I can't center my blog :c

I can't center my blog :c
arrowdoe's picture

Unplugged, do you by chance

Unplugged, do you by chance have the code to center the title of a blog, and replace the leaf with something else?
Unplugged's picture

z.m123-- Did you use the code

z.m123-- Did you use the code I gave to Pistol? Can you show me your blog?

arrowdoe-- #tabs-wrapper{text-align:center} #squeeze h2:before{content:url('http://unplugged_rules.jpg');}
^ that's the code dag gave me :b
arrowdoe's picture

Thank you! [e] The little

Thank you!

[e] The little icon wont show up :s
Unplugged's picture

hmm that's strange. try

hmm that's strange. try adding !important to it, like this:
url('http://i992.photobucket.com/albums/af43/littlewhitefawn/treeplz.png') !important;
arrowdoe's picture

There we go! Thank you again!

There we go! Thank you again!
WonderfullySarcastic's picture

*round of applause!!!!*

*round of applause!!!!*
#1354
.
z.m123's picture

Yes, here it is

Yes, here it is
Unplugged's picture

Theres a mistake in your

Theres a mistake in your code:
#wrapper #container ;#wrapper #container #center .right-corner .left-corner{position:relative;margin:auto}
Remove the "#wrapper #container ;" here Smiling
z.m123's picture

Still doesn't work :c

Still doesn't work :c
Unplugged's picture

Add this one

Add this one too:
#squeeze{width:100%}
Your blog will get all broad so you'll have to adjust its width on top on that:
#wrapper #container #center .right-corner .left-corner{width:80%;}
z.m123's picture

When I added the second code,

When I added the second code, I got
Quote:
This content has been modified by another user, changes cannot be saved.

D=
Sorry for me beeing noobish..
Unplugged's picture

Don't use the back-button to

Don't use the back-button to get back to your edit page. Reload it. :b
z.m123's picture

Lol, silly me Dx Thank you

Lol, silly me Dx
Thank you for your help ♥

Hellow again It's about the

Hellow again

It's about the transparent thing. Thanks a lot for that! Laughing out loud
Now... It's how to play with opacity there is my problem. I've tryed many ways, but I don't know how it's done TT.TT

1. try) #wrapper #container #center .right-corner .left-corner{background:opacity=50%}

2. try) #wrapper #container #center .right-corner .left-corner{background:opacity=50}

3. try) #wrapper #container #center .right-corner .left-corner{background:opacity:50%}