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



Hraeth's picture

Fff, awesome. Thank you. =D

Fff, awesome. Thank you. =D
J!n's picture

Hiya. I feel bad for asking

Hiya.
I feel bad for asking you all this.
What code changes the color of the 'Home>Blogs>' and 'Game Info Download'-links?
And the blue line between the blog and the comments, is it possible to change that one's color too..?
And how do I get a thin border around the blog like this gray one? (Hope Baal doesn't mind that I use Az's biography as example.)
Unplugged's picture

There we go~ Top menu (Game

There we go~
Top menu (Game Info, Download etc)


Breadcrumb (Home>Blogs)


Blue Line


Border


I'm usually quicker to respond on my MSN. Feel free to message me there about coding stuff if you're more comfortable with that. :)
arciawuzhere@hotmail.com
J!n's picture

Thanks a lot. I have all the

Thanks a lot. I have all the codes I need now though, I think...
Added.
Spirituelle's picture

Do you think there's a

Do you think there's a possible code to hide The Endless Forest community banner?
Well, if it's allowed.

I've tried everything that I know of, but none of the display:none codes(codes with that in it, not just that :b) seem to work.
But then again, I could be putting it in the wrong place. (:
Ephra's picture

If you don't find a code to

If you don't find a code to make it disappear entirely, you could probably just cover it up.
Ravyn's picture

Hullo.

Hullo.<3
I've recently looked on one of Zebbie's blogs and noticed tabs. I'm very curious about this but the reason why I come to your page about it, is because you have experience with Java.
I Googled some information about tabs and it's all very confusing for me.
I would like to know how to create tabs, but I wouldn't want them navigating to a different page. I would just want the tabs to bring up separate information about Ravyn. I would need three tabs, I think.
I just don't know how/where to start. I hate taking up blog space and it would just be nice to have all of the information on one page but in separate tabs, does that make sense?
(:
Ephra's picture

Sorry for being such a reply

Sorry for being such a reply hog when I don't even know what I'm talking about. Laughing out loud I don't know how to use java but if I were going to create the illusion of tabs, I would put all the info on one div, while only making it large enough to show the first tab's text and disabling scrolling so that the rest remained hidden. Then I would create links (I don't remember what they're called :/) to jump to the other areas of the text. That's a really makeshift way to do it, but that's the only way I'd know how.
Ravyn's picture

Ephra: Jump links? These

Ephra:
Jump links?

These are examples of what I would like:

http://javascript.internet.com/css/page-organizer.html
http://javascript.internet.com/css/tab-view.html

It gives me everything, but I don' know how to work with what's been given. Hm. :/
Ephra's picture

I'll see if I can mess around

I'll see if I can mess around with it and make something happen. Smiling

#logo{display:none;} To hide

#logo{display:none;}

To hide the TEF logo
Spirituelle's picture

Thank you so much.

Thank you so much. <3
Ravyn's picture

That's awesome.

That's awesome.
AnimaSoul's picture

I have another couple of

I have another couple of question's if that's alright...

1) For the Opacity Code, how do you make it so that it lights up when you hover over it....
2) Is there a way to make a picture sit in the side, like where the #center code changes the colour....
The Soul Of Souls
Unplugged's picture

About the tabs, I don't know

About the tabs, I don't know anything about JavaScript either, so the only option I can think of is what Ephra described. I also tried experimenting with Java but I believe you can't use JavaScript yourself here. (But there are still things I would like to try to make it work.)
I used tabs the way Ephra described here once.

Jump links = Anchor links.
Anchor links let you jump from one part of the same site to another part.
Example:
<a href="http://page.com/hello#a">Link to part "a" of your page</a>

And then you add this code to where you want this link to jump to:
<a name="a"></a>

In my first coding experiments I took the first part of the anchor-link code on the "Hey! Klick here" and then used the second part in a comment. Like that I made it jump from the top to the comment.

Sorry if anything is too confusing, I haven't slept enough lately. :b

AnimaSoul:
1) I think I told someone the code for that on the first page, so check there. Smiling
For 2), I'm not sure what you mean. Do you have an example?
ShadowsofLight's picture

uhm no but i mean the bit

uhm no but i mean the bit where all the menus are in the side if that makes it any clearer....-I'm Mick/Anima

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

div#sidebar-left.sidebar


This..?
ShadowsofLight's picture

Yeah that area, is there any

Yeah that area, is there any way to put a background picture in like that bit

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

It does't work. All it does

It does't work. All it does is take me to the same page where I started...
Maybe I'm not doing this right?
Hm:/
Unplugged's picture

#center{background:url('PICTU


Just change the URL :)

Ravynn-- Are you talking about the links? It doesn't work in the preview, if that's what you did. Are you sure you don't have any typos?
ShadowsofLight's picture

Arigato Unplugged

Arigato Unplugged

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

I want to be able to hide the

I want to be able to hide the information and only show whats been clicked...
I have different categories and throwing it all onto one page is just a lot of reading.

I got it to work. I still want to be able to hide other information, though. :l

http://endlessforest.org/community/x-9
Unplugged's picture

I find it hard to explain

I find it hard to explain everything, so can I try and experiment with your code?
Ravyn's picture

TEF is acting very slow for

TEF is acting very slow for me for some reason.
I posted the code on the link I gave you.
J!n's picture

What's the code for the line

What's the code for the line just below the title? I just want to change the color...
Unplugged's picture

It could

It could be
#tabs-wrapper{border-bottom:1px solid #ffff00}
though I'm not sure.
Sorry for the late reply, been busy.
Tsudo's picture

Tracking, so I can find it

Tracking, so I can find it later Smiling
Thanks for doing this!
J!n's picture

Thank you very much! =>

Thank you very much! =>

I have a question- I mean't

I have a question-
I mean't to only use this for my deers bio. Instead the coloration and stuff went on my blog. Like I said, I only want it to be on a thread; a topic. Can you help me? Is there a code?
Unplugged's picture

You need to put your CSS

You need to put your CSS behind the cut, means when you click on 'split summary at cursor', you put your codes into the lower box.
gglidden's picture

I've been trying to change

I've been trying to change the background color for my deer's bio, but I still can't quite figure that out.
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

Do you mean the dark blue

Do you mean the dark blue (.node) part? Changes on that one are not visible in the preview, if that's the problem.
gglidden's picture

Is this page a preview? Cause

Is this page a preview? Cause you managed to change the background color on this page. Are you able to see the changes? Sorry if I'm not making any 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

Hm. No, it's not. Can you

Hm. No, it's not. Can you give me a link or post the code?
gglidden's picture

{#container-color:#1F2091}<


test test, I think you killed the comments ggliden.
Oh god. What did I just do? 8D *is Unplugged*
Unplugged's picture

test x Okay, at least I fixed

test x
Okay, at least I fixed the comments now.
You need to put your code between a [code] and [/code], gglidden. xD
gglidden's picture

8O! How the heck did that

8O!Exclaim How the heck did that happen?!?!?! Hm, ok I'll try doing 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

And make sure to preview your

And make sure to preview your comment first! 8D
gglidden's picture

<style>{#container-color:#1F2

<style>{#container-color:#1F2091}</style> Finally!! Thank you Unplugged for helping me at least show the code. I know I typed it wrong. What's the correct way to type the code to cahnge the background color?

(I have a headache now....)
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

<style>.node{background:#1F20

<style>.node{background:#1F2091}</style>
Try this. :]
Though I think it would be useful for you to copy and "fill in" the blog code I provided here. Smiling
ocean's picture

This may have already been

This may have already been resolved, but Zebbie has the code for making tabs on her CSS blog:
Click me!
If that's what you were looking for Ravynn.
If it's already been resolved/you've already found that, just ignore this. xD
gglidden's picture

Yay! It worked! Thanks a

Yay! It worked! Thanks a bunch Unplugged! Would you mind helping me out if I don't understand a certain code or something? In the mean time, I'll continue teaching myself. Once again, thanks.
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

Sure. Just post here if you

Sure. Just post here if you have any questions. :)
I'm usually quicker to respond on my MSN, if you want:
gglidden's picture

Ok, I've been trying to get

Ok, I've been trying to get an image to show up in the #container (the pink region to the left). Here's my code <style>#container{background-image:url('http://img535.imageshack.us/i/tefgglidden201004101338.jpg/');}</style> I'm pretty sure I typed it right, but I'm not sure.
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")