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



Ravyn's picture

I think the name of my blog

I think the name of my blog messed it up somehow. The node links seem to make it work, but on my other tabs on other blogs I don't use nodes.

How weird...

Thank you for the help.

You never know, it could have

You never know, it could have been the .dot// messing with it. Code and Murphy's law go hand in hand.

Either way, glad to see that you've got it working, and no problem with the help. Though I know little of CSS, I've got my own coding background and I enjoy trying to help solve a coding problem regardless of the language. Smiling
Ravyn's picture

(No subject)

<3
EternalWanderer's picture

Laaate track, for exactly the

Laaate track, for exactly the same reason that I left in Zebbie's CSS Help
J!n's picture

Is there a code that allows

Is there a code that allows you to move the username and the date on a blog post, separately from the comment usernames and dates? Since it's not positioned the same to begin with it looks off when I try to move them somewhere else..
Unplugged's picture

I've tried to find a code for

I've tried to find a code for blog-name/date and comment-name/date for a long time now, I couldn't find anything so far.
So no, sorry, nothing that I know of. :x
shaku's picture

The pain is so very worth it

The pain is so very worth it <3
Thank you so much!

Hey Unplugged, sorry to

Hey Unplugged, sorry to bother you again for the millionth time xD
But is the a code that puts the comments into the text box where all your writing is?
If that makes sense..?
So the comments are in a text box?
Unplugged's picture

I'm not sure if that's

I'm not sure if that's exactly what you want but this is the code for putting comments in a scroll box. Smiling
#comments{height:550px; overflow:auto}
Ravyn's picture

I'm really interested in

I'm really interested in stuff like this -> http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/

But I have no idea how to make it work, especially if I want it for Ravyn's voice text.

"I'm also glowing but more blurry" is what I'm leaning towards...

Thank you for all of the help you've given to the community and I. <3
Unplugged's picture

Oh, all that nifty CSS3

Oh, all that nifty CSS3 stuff.
Only few browsers actually support it yet, so it will only be visible to a few people.

When writing, you would have to use following code that is given on the website then:

<font style="color:#000000;text-shadow: 0px 0px 3px #000000;font-size:16px;">Good evening.</font>
Good evening.

The "color:#000000" being your font colour, the other one being the colour of the glow.


I beliiieeevee that in "0px 0px 3px" the first 0px is how far away from the text the glow is, x-coordinate, the second "0px" how far away from the text y-coordinate, and the last one "3px" the blurriness of it.
Ravyn's picture

(No subject)

<3
Thank you very much.
Unplugged's picture

Since I've been asked several

Since I've been asked several times, I finally found a way to get rid of the user picture in blog only/comments only, and the date-time-username.

Remove user picture in Blog only:
.node .picture{display:none}

Remove user pictures in comments only:
#comments .picture{display:none}


Remove date-time-user in Blog only:
.node .submitted{visibility:hidden}

Remove date-time-user in comments only:
#comments .submitted{visibility:hidden}
J!n's picture

Thanks!

Thanks!
Harakka's picture

Thanks x 2! 8D

Thanks x 2! 8D
Havak's picture

Do you know how to make links

Do you know how to make links have a semi transparent look to them? Like a white film or mist? =O I know it has something to do with the opacity...but I dont know the code.
Unplugged's picture

Never seen that. Do you have

Never seen that. Do you have some examples?

The code for transparency is this:
a{filter:alpha(opacity=15);-moz-opacity:0.15;opacity:0.15}a:hover{filter:alpha(opacity=30);-moz-opacity:0.30;opacity:0.30}
Havak's picture

/meep/ =X no I dont I saw it

/meep/ =X no I dont I saw it a long time ago though on another site. It was cool. Where do I put this and thank you! =D
Unplugged's picture

You just put it between the

You just put it between the <style> and </style> tags as you would with other CSS. Smiling
Havak's picture

Oh! =X How silly of me! Thank

Oh! =X How silly of me! Thank you!

Hm, btw... Please don't laugh

Hm, btw... Please don't laugh if I come with a silly question, but...
Is there like any way to put the whole site in a box?
I mean... I have a screen that's 1024 x 768, so my page looks alot wider for someone with bigger screen. (Unless they ofcourse don't have the internet window maximized, right?)

Can I make everything appear as it would be on a normal 1024 x 768 screen? Leaving a blank space to the very right if the window is maximized on a bigger screen?

/I have really no idea o: Maybe this is just about browser settings? XD Anyway.
Unplugged's picture

Well uh.. you could define

Well uh.. you could define the width of the body maybe?
body{width:600px} for example.
It doesn't look really nice though, I wouldn't recommend it.

Okay. Thanks, I'll try it out

Okay. Thanks, I'll try it out a bit anyway XD
Ravyn's picture

#comments

#comments .picture{display:none} Doesn't work in Ravyn's biography. :/
Unplugged's picture

Does it only not work in her

Does it only not work in her bio, or does it not work for you at all?
Alternatively you could try #comments .picture{visibility:hidden}.
Ravyn's picture

It doesn't seem to be working

It doesn't seem to be working at all for me. :l
Unplugged's picture

Do you also see the comment

Do you also see the comment pictures in this blog?
Ravyn's picture

Yes.

Yes.
ShadowsofLight's picture

I don't though, if that

I don't though, if that helps...

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

...Alright, I'm stuck now. So

...Alright, I'm stuck now. So let's try with the usual:
You use Firefox? Do you use the latest version?

(I have to go offline soon-ish so sorry I can't help immediately)

[e]: That does help a bit. Smiling
If it doesn't work for someone else too, it'd be very helpful to know.
Ravyn's picture

Yes, firefox. The latest

Yes, firefox. The latest version? Not so sure. Usually it just updates itself when it needs one.
So I guess it is.
Unplugged's picture

Alright. Sorry I've been

Alright. Sorry I've been probably asking you a million times about that already. I always forget. :x

I'm clueless atm. I'll ask some others about how the code works for them for now.

I'm not seeing the comment

I'm not seeing the comment avatars in that link, and I'm currently running Firefox 3.0.19.

This is probably going to

This is probably going to sound really stupid, but does the CSS work if you simply click "preview", or do you have to actually submit the blog before it will work?

I've been trying to work with CSS for blogs, but nothing will work. I just see the coding as if it was written in text (and yes, I do have < style > tags and all that, I'm pretty good with CSS otherwise). But I'm the kind of person who doesn't want to press "submit" until everything looks okay, so I was wondering if this might be the problem? :s

It works to some extent. But

It works to some extent. But you're not going to see everything that CSS can modify without submitting the blog. Comments, for example. You'll also want to make a few comments on your blog so you can see changes there.

Also you're making sure your

Ugh. Stupid blog system is stupid. I can't believe that's even possible. I feel like I'm a part of an Alpha or something.

I was asking if you were making sure to put your (style) code in one unbroken line, Eslie.

Edit: Thanks to Hraeth for suggesting the idea of using a (/style) tag to fix the broken comment. That was getting aggrivating.

do you know of any sites that

do you know of any sites that i can go to, to get background images for my deers bio? im having a terrible time trying to do this. Sad
Unplugged's picture

I used to know lots of

I used to know lots of different pages, unfortunately I can't remember many anymore but here is something to get you started with..
Naked and Angry, Zebbie recommended me this. Simply tick all the boxes and click on "List 'em". Lots of fun patterns.
Damask Wallpaper Patterns if you're going for a kinda vintage-y look.
Vintage Wallpapers. Unfortunately not all of them are tiled.
PatternCooler, Terabetha once mentioned this. You can pick a pattern and then edit the colours to your liking. Really lovely.
Patterriffic Lovely, lovely stuff. :D

You can also just google "free patterns", browse pages like deviantart and search in pretty much every other picture-oriented community.
Uitleger's picture

This has helped me a great

This has helped me a great deal..
*a bow of gratitude*
Yet I have a question.. perhaps even two..
First, what are the codes for all the green text/lines/asterisk? They need a color change..
Second.. hmm.. Is there a way to make pictures in avatars and signatures almost transparent? So they would become 'solid' again, when the mouse hovers above them.
Tally's picture

Is it possible to remove only

Is it possible to remove only the signatures out of comments on your blog? I always think they make a page look messy..
Unplugged's picture

Uitleger-- I'll look into it

Uitleger-- I'll look into it in a sec. Laughing out loud The link colour should actually be changable by simply using a{color:#ffffff}a:hover{#000000} in theory, but I haven't checked.
[e]: Oh yeah, sorry, forgot about the transparency thing.
.picture{filter:alpha(opacity=15);-moz-opacity:0.15;opacity:0.15}.picture:hover{filter:alpha(opacity=30);-moz-opacity:0.30;opacity:0.30}
First one is normal, second when hovered.
[e2]: Asterisk:
span.form-required{color:#00ffff}
Green line:
fieldset{border-color:#ffff00}

Tally-- I've posted it somewhere before, here you go:

CODE FOR REMOVING SIGNATURES ONLY
.content .clear-block{display:none}
Uitleger's picture

It worked just fine, except

It worked just fine, except for the links.. for some reason.
Rell's picture

Is it possible for the

Is it possible for the background to be gradient with a border? The blog and back area.
Munkel's picture

Edit: Nevermind, someone

Edit: Nevermind, someone already helped me x3
Uitleger's picture

Thank you.. -v-

Thank you.. -v-
arrowdoe's picture

300 >3

300 >3