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



EternalWanderer's picture

ArrowDoe, you're everywhere

ArrowDoe, you're everywhere D: Doesn't matter because new pages are always miiine Twisted
Unplugged's picture

Ugh sorry sorry sorry I

Ugh sorry sorry sorry I haven't had the time for CSS these past days :(

Rell, I'm afraid I don't exactly understand. :x What do you mean by borders around the background?

Uitleger, sorry :( I know I've managed to change the link colour there before but I can't find the code at the moment. I've been looking into it.
[e]:
.form-item a{color:#336699}a:link{color:#996633}
Again, sorry for the long wait. :/
Tenley's picture

Can i request A css? please?

Can i request A css? please?
Walking into a room and saying, " I should clean this! " Then walking out. -lily

Unplugged's picture

I don't do CSS-Requests but I

I don't do CSS-Requests but I am always ready to answer questions or help when you have any problems. Laughing out loud
Tenley's picture

oh.. ok well um I dont get

oh.. ok well um I dont get how to make a css like i know how but i want a perfectley white CSS with gray letters and red peddles in the backround how am i gonna make that?
Walking into a room and saying, " I should clean this! " Then walking out. -lily

Unplugged's picture

Well, for starters you can

Well, for starters you can use any pre-made layout provided here. All you need to do is to change the colours. Smiling
You could use the code of one of the blogs I linked in the big white box above as your "base" coding.

The code from this CSS Help is the most basic one. It just changes background colours, no text colour or borders, unless you add them yourself.
This blog is also very basic, but it already has stuff like text and border colours changed. I'd call it an upgraded (and not as eye-searing) version of this blog.
And this one has a bit more of fancy stuff in it compared to the others.

If you use these and just change the #hex-colours not much can go wrong, and it really doesn't require any CSS-knowledge.

If you want to do something with a more "personal" touch you could always look more into CSS, but this is the quick and easy method. :b
Tenley's picture

ok thanks!

ok thanks!
Walking into a room and saying, " I should clean this! " Then walking out. -lily

MizuSky's picture

trackage~

trackage~


Harakka's picture

Hey, I was wondering if you

Hey, I was wondering if you could check out the coding on this page: http://endlessforest.org/community/node/45641
There's something wrong with it, that I completely don't understand, Do you see those awkward and random lines (like it would be a uh.. glitched div that doesn't exist?) around the tabs box? They appear only on the tabs pages, and it changes place on the 'Pathways.' tab.

Do you know how they got there and how I can get rid of them? .-.
Unplugged's picture

I'm not exactly sure what you

I'm not exactly sure what you mean. The only error I see is this when I go to the "Pathways"-Tab. :x Could you screenshot it for me?
Harakka's picture

Ofcourse!

Ofcourse! v
http://img31.imageshack.us/img31/5038/blogscreenie.jpg
This is what it looks like on all the other tabs. o:
(I use google chrome btw, if that makes sense..)
Unplugged's picture

By the looks of it I'd say

By the looks of it I'd say just put more <br>s between the different tab-boxes. Smiling
Harakka's picture

Yes! Thank you! 8D

Yes! Thank you! 8D
Hraeth's picture

Do you think it might be

Do you think it might be possible to apply an opacity filter to the scrollbars of div layers?
Unplugged's picture

I don't think it's possible

I don't think it's possible to do that. :< Sorry.
Hraeth's picture

Aww. 8C Oh well! Thanks for

Aww. 8C Oh well! Thanks for getting back to me! ♥
EternalWanderer's picture

I was wondering, could you

I was wondering, could you make a tutorial about the correct usage of <div> tags, and... "bridge" tags? (Tags that allow you to give a title to a certain code to use it later... No idea how they are called... Hah I'm such a noob...) I always lose concentration and will to live when it comes to place them in the right place. It confuses me, and searching in google only gets me more confused since I can't find any tutorial for starters.

Also, how do we put sliding boxes in the My Blog page? I know the code for them, but is it contained in that page, or in one of the blogs of that page? :'?
EternalWanderer's picture

Little bump? Don't know if

Little bump? Don't know if you noticed that :O
Unplugged's picture

Daaaang looks like I really

Daaaang looks like I really didn't. :x Must've missed it somehow.
I'm kinda confused by what you mean with the tutorial (examples by what you mean?), but the code for the "My Blogs"-Box is put into one of the blogs, in the (top) Summary-Box, with having "Show summary in full view" turned off.
EternalWanderer's picture

Ohh *slaps self* About the

Ohh *slaps self*

About the tutorials, it's just this blog is very useful for those who already know about CSS but don't know how to apply it in their blogs (...right?) but what about people who don't know anything about CSS (me) to begin with?

All I can really do is change the colors, because I get really confused when it comes to use, uhm, codes to make paragraphs and repeat a certain code without writing it all over again... Just a short tutorial about each of those base tags? Because I don't know anything and don't seem to find a coherent "How To" in the entire Internet D:
/uh, made sense? ,:p -again, might be just because I'm dumb&lazy-
Unplugged's picture

Okay, I thiiiink I understand

Okay, I thiiiink I understand now. Sticking out tongue Sorry for the stupidity.
Do you mean how CSS generally works? That's a lot of stuff to take in, I could never cover everything in one single tutorial (plus the fact that I'm anything but a pro at CSS). You could check out Selectutorial, it explains a lot of stuff really well.
Also, I made this once, which just explains the general build of a CSS code. Don't know if it's helpful:


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.

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. A list of declarations you can apply is located here.
EternalWanderer's picture

YES! Thank you so much :D I

YES! Thank you so much :D I knew a bunch of codes but I had no idea where to put what so, yeah, in the end all what came out was a depressing gibberish. Thanks!
heather!'s picture

THANK YOU DROOL

THANK
YOU
DROOL
gglidden's picture

Do you know how to do a

Do you know how to do a patterned background? Can you show the code?
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

It's just a normal background

It's just a normal background code. It will repeat automatically. Smiling
"background: url('URL HERE');"
gglidden's picture

Hmmm but if you were to look

Hmmm but if you were to look at the blog here, it's not covering the whole background. So I know I'm missing something.
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

You need to remove the

You need to remove the "background-attachment: fixed; background-position: right;" from your code. :)
gglidden's picture

Ok I did that, but now the

Ok I did that, but now the picture is at the top, and still hasn't filled up the whole background. Look here.
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

Hmm, try using this

Hmm, try using this instead:
<body style="background-image: url('http://static2.bigstockphoto.com/thumbs/6/7/2/large2/2766412.jpg');background-repeat:repeat">
gglidden's picture

Oh YAY! Ok one more thing

Oh YAY! Ok one more thing about the background, I don't want the image to repeat...so how do I do that?
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

I thought you asked for a

I thought you asked for a repeating background? D: I'm confused, sorry. What exactly do you want?
gglidden's picture

Oh my bad, I didn't mean to

Oh my bad, I didn't mean to confuse you, I'm sorry D: I was just wondering on how to not have the image repeat in the background. Like, if I were to scroll down on the blog page, I want to see one image instead of the same image repeating itself. I hope that makes sense.
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

If you want one image to fill

If you want one image to fill the whole page you'll either need a bigger image for that or a small pattern-background image. Or resize the one you currently have, but it'd look all pixelated then. 8c
gglidden's picture

Well heck.... :/ Thank you

Well heck.... :/ Thank you very much for helping. =)
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")
Moondragon's picture

i am i bit confused. Which

i am i bit confused. Which code will make the entire backround black? By backround i mean where i am typing write now... where the text is...in this blog its green
If life gives you lemons, you make grape juice!
Unplugged's picture

You could compare this page

You could compare this page to a coloring book. You can see here that the comments are green. If you read the blog you can see that the green comments correspond to the names ".comment.odd, tr.odd" (the darker comments) and "tr.even, .comment.even" (the lighter comments). If you copy the Blog Code provided here and find these parts in the coding, you can change the #hex code from green to black. Smiling
If you use the "CSS from Unplugged's * (Testing, ignore #4)", you already have a mainly black base though, so it might be easier to work with that one.
Moondragon's picture

also which one changes the

also which one changes the color the text in comments is?

edit: thanks, the second code worked Smiling :)
If life gives you lemons, you make grape juice!
Aivilo's picture

...You are my hero~ This will

...You are my hero~ This will help a lot

Hey Unplugged can you help me

Hey Unplugged can you help me out with getting this code:
I want to have a scroll box that the scroll only goes horizontally, so all the words are in one line, not a paragraph but one line. So not a vertical scroll where you go up and down, but a horizontal that goes from side to side Smiling
Thank you!

Unplugged's picture

Try this: <div style="width:

Try this:
<div style="width: 400px;height:50px;white-space:nowrap;overflow:auto;">#one #one #more #another #one #more #again #one #one #more #another #one #more #again #one #one #more #another #one #more #again</div>

Perfect! just what I wanted

Perfect! just what I wanted thanks Smiling I always wondered, is there any possibilities of changing the color of the scroll? Im not sure if it's been discovered yet, but I've been wondering about it...<3
-Kono

Unplugged's picture

Nope, unfortunately there is

Nope, unfortunately there is no way to do that. ): There is a code but it only works for Internet Explorer, so it's pretty much useless.

Awe that sucks That would've

Awe that sucks Sticking out tongue That would've been great so colors could match more. Thanks again<3

OokamiAzura's picture

Hnn... I looked around in

Hnn...

I looked around in the comments, and can't seem to find anything.

Is there a code that can allow you to get rid of the line between the blog title, and the blog itself?

This part, I mean?

EDIT: Also, is there any way to get rid of the little "Tale of Tales" thing at the top, along with the "Game info," etc links?
Unplugged's picture

For the Tale Of Tales/Top

For the Tale Of Tales/Top Bar, use this:
<style>#header-region{visibility:hidden}</style>

Code to remove black line:
<style>#tabs-wrapper{border-bottom:none}</style>
OokamiAzura's picture

Omg yesss Thank you so

Omg yesss

Thank you so much.

&hearts

Is there a code that makes

Is there a code that makes the whole background a certain image or colour? So all you see is the image/colour and no 'People Online' etc - if that makes sense? So all you see is the coloured/imaged background and then the biography or diary entry? Sorry if that's confusing!
EternalWanderer's picture

Is it possible to keep a

Is it possible to keep a bunch of elements from gathering up on a messy pile upon turning them into a floating menu? Such as keeping them at the same distance from one another than when default?
Unplugged's picture

Rhyolite-- Sorry for the late

Rhyolite-- Sorry for the late response! I didn't notice your question until now. :x
I think what you mean is removing everything but the blog itself?
"visibility:hidden". Just use it for anything you want removed. For example, to remove the sidebar
.sidebar{visibility:hidden}
to remove the TEF-Logo
#logo{visibility:hidden}
rinse and repeat for anything you want to hide. Smiling

EternalWanderer-- I'm afraid I don't really understand. :x Could you show me an example or something?
EternalWanderer's picture

I keep confusing you with my

I keep confusing you with my Creepy&Silly Stupidity :p Here!