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

#comments{margin:auto} for

#comments{margin:auto} for centering. For your green div, you need to change position:absolute to position:fixed, if I'm understanding you correctly. Smiling There's no difference when you make a table out of it.

Thanks, the comments worked!

Thanks, the comments worked!
But the green was supposed to 'stay like a normal div', so when I scroll, it's stille where I left it... If you can say it like that... I'm a retard... Uh...
But even when I changed it to fixed, only the second green div was visible :'|



Thank you for this! My life

Thank you for this! My life would be ruined with out this blog post... ._.
DEERTH's picture

Hi, Unplugged! Can you look

Hi, Unplugged! Can you look my previous comment where's my question? Eye
Call me Deery. Smiling
Dragon Scroll.
Avvie by me, siggy by Saosin

I...still need help with

I...still need help with mine.

Copy+paste from previous page:

Quote:
http://www.endlessforest.org/community/css-testing-please-ignore-2

Is there anyway to get those to line up exactly? I hate how one is higher than the other.


And...

Quote:
Is there a way to seamlessly bring the real backround and the actual blog backround together? Like in this blog?

I've noticed that when I'm trying to create a backround, you can tell where the blog backround is, and where the "other" backround is. I'm trying to get rid of that, it looks hideous.
Unplugged's picture

EternalQueen, I'm not sure I

EternalQueen, I'm not sure I understand. :x Where do you want your div to be? Do you want it to stay in its place, or do want it to scroll with the page?

Deerth, to get rid of the brown, use "#wrapper #container #center .right-corner .left-corner{background:none}" Smiling

Lung, for the first one, adding another empty line after the "Mentally"-select worked for me.
For the second question, EternalQueen has the answer. You add the background to the body, and remove use background:none for .node and #wrapper...
body{background:url('url')}.node{background:none}#wrapper #container #center .right-corner .left-corner{background:none}

Yeah, but do you mean "empty

Yeah, but do you mean "empty line" as in, just a space, or...

And I'm assuming, the "break" goes after <*/select> part?

Ugh, I'm sorry I'm so confusing. I just...can't focus or wrap my brain around this entire concept. :/
Unplugged's picture

Yeah, after the last /select.

Yeah, after the last /select. Just press enter once more. Sticking out tongue

I wan't it to stay at it's

I wan't it to stay at it's place, please. But as you can see here, I also wan't to be able to place it where ever I wan't on the page. I tried with the absolute, but I could only place it on the .node area... Sucks.



Unplugged's picture

Try changing to absolute

Try changing to absolute again. You just have to define top/bottom and left/right when you use absolute, otherwise it doesn't work. I believe you didn't have that before.

That seemed to do the trick.

That seemed to do the trick. Thank you. (:
DEERTH's picture

A little problem... My brown

A little problem... My brown frame still stays! What to do?
Call me Deery. Smiling
Dragon Scroll.
Avvie by me, siggy by Saosin

What shall the bottom and

What shall the bottom and left be then? Doesn't it depend on the screensolution? Is there some sort of thing you can write like the 'max', so no matter screensolution, it will defintly be to the one side?



Unplugged's picture

Deerth, you need to use the

Deerth, you need to use the exact code I gave to you: "#wrapper #container #center .right-corner .left-corner{background: none}"
Copy&Paste it to make sure there's no typos.

EternalQueen, it shouldn't be a problem as long as you use px for everything. You can check your page with different screen resolutions here. (remove the "http://" when you copy the url before you check)

Um... I need to warn you, I'm

Um... I need to warn you, I'm a moron... So what shall I do with this website? Umum... x'D
And isn't it kinda... Stupid if I need to adjust the bottom px everytime someone comment?



DEERTH's picture

Hurrah! Thank you Unplugged,

Hurrah! Thank you Unplugged, I got rid of the frame! Smiling

It is good that you are here. Smiling
Call me Deery. Smiling
Dragon Scroll.
Avvie by me, siggy by Saosin

Just a little thing: the CSS

Just a little thing: the CSS for drop down menus?
mismatched's picture

Okay, I seriously need help!

Okay, I seriously need help! Dx from someone; anyone!

http://endlessforest.org/community/node/62693

Go to the link above for reference to what I'm talking about^
So, I noticed that even though this blog has all the basics - which I'm INCREDIBLY grateful for - but it doesn't have any information on changing text color in any of the sections other than the node/main page. Could someone perhaps help enable me with a code for editing the sidebar colors, as well as the edit buttons, etc.
Also, I'm having trouble with the comments (if you look at the page, you'll understand what I'm talking about). And I understand there's a second layer of transparencies over the TEF logo, Blog entires & Pictures section of the sidebar, and the little Game Info section in the top corner of the page; how to I get rid of it but still manage to save the layer underneath, so that I have that one, semi-transparent layer?

...Help, please?

Hi mismatched Here ya go (you

Hi mismatched
Here ya go (you need to change the color though xD):


.submitted{color:#B28000 !important;text-align:center;}
.submitted a{color:#B28000}
.submitted a:hover{color:#FFC325;text-decoration:none;}

Okay, all those (^) Means:
1: The date and time color on your blog. Yours say "August 1, 2011 - 4:42am —". By chaning the colour you change color, by changing the text-align you change where you wish that text shall be on your blog.
2: The link colour of your account name (August 1, 2011 - 4:42am — mismatched).
3: When you hover your account name (same as above, mismatched).




.comment div.links{background:none;border:1px solid #B28000;}

This means (^):
The box around the "reply" or "edit" buttons in the comments.




ul.links a{color:#B28000}
ul.links a:hover{color:#FFC325;text-decoration:none;}

Those two:
1: The link colour of "(insert your username)'s blog" and "Add new comment" in the comments.
2: The colour when you hover the link.



.node a{color:#B28000}
.node a:hover{color:#FFC325;text-decoration:none;}

Those goes for (^):
1: All the links on your .node, perhaps if you have a link to your picto.
2: When you hover your links.




#tabs-wrapper a{color:#B28000}
#tabs-wrapper a:hover{color:#FFC325;text-decoration:none;}

Now:
1: You know the "view" and "edit" buttons on the top of the blog? This change the colour of where you click to edit your blog.
2: This changes the hovering colour.




#comments a{color:#B28000}
#comments a:hover{color:#FFC325;text-decoration:none;}

Last:
1: This changes all the link colours in the comments, meaning the username and "reply" and "edit".
2: The hovering color.




Ugh about sidebar gimme 2 sec...

And what do you mean about the transparent layers, uh, do you wan't them to disappear (so it looks like a normal blog?)?



Okay,

Okay, sidebar:

body{color:#A41696}

This will colour your whole font, but it will also colour the text under "Who's online", meaning "
There are currently 27 users and 4 guests online" ect.




div#sidebar-left.sidebar h3{color:#00FF00}

Those are the colours of the cream coloured text, meaning "Picture categories", "Blog categories" and "Online users".




h2{color:#FF0000;font:20px Times New Roman;}

The colours of the brown coloured text, meaning "The Endless Forest", "(insert your account name)", "Menu" and "Who's online".




div#sidebar-left.sidebar a{color:#FFFFFF;font:16px Monotype Corsiva; text-align:right}
div#sidebar-left.sidebar a:hover{color:#0004FF}

All the links are right-aligned, and the onlines users links are coloured.
You already know what hovering does.





div#sidebar-left.sidebar ul.menu a{color:#FFFF00;font:16px Monotype Corsiva; text-align:right}
div#sidebar-left.sidebar ul.menu a:hover{color:#00FFE2}

Colours The Endless Forest's links (home, about tefc ect. ect.) and the Menu links (concept, fan, biographys, community events ect. ect.).




div#block-user-1.clear-block.block.block-user a{color:#000000;font:16px Monotype Corsiva; text-align:right}
div#block-user-1.clear-block.block.block-user a:hover{color:#918b94;letter-spacing:1px;text-
align:right}

This colours your account links and hovering (my account, my blog ect. ect.)



mismatched's picture

OHMYGOSH YOU'RE WONDERFUL!!!

OHMYGOSH YOU'RE WONDERFUL!!! thank youuUuUUuuu!

Hmm, I still seem to be having issues with getting the title, the Home>Blogs>mismatched's blog, and the Game Info colors to work:/

Also, I'm sorry it's hard for me to explain what I mean, but do you see how, in the sidebar, where it says 'Create New>and then Blog entry or Picture' it's like, brighter than the rest of the area? I'd like to fix that, if possible. It's the same deal with the logo area:/ if you can't, it's fine, I can always figure something else out.

Title: #squeeze

Title: #squeeze h2{text-align:center;font: 40px "Times New Roman";color:#B28000;text-shadow: 0px 0px 3px #000000;}

Make leaf disappear: #squeeze h2:before{content:""}

Make Tales of Tales disppear: #header-region .block img{display:none}

Game info link and hovering: #header-region .block a{color:#FFFFFF}#header-region .block a: hover{color:#FFFFFF}

Home>Blogs>mismatched's blog link colour and hovering: .breadcrumb a{color:#FFFFFF !important;}.breadcrumb a:hover{color:#000000 !important;}


I still don't understand the comment thing. Uh can you give me a link as an example to what you would like it to look like? x'D


... Honestly, I don't know how you did that. What did you write? Perhaps you gave it 2 layers...



mismatched's picture

Oh, I got the comments worked

Oh, I got the comments worked out:) omg thank you AGAIN for the text color coding xD

Haha, you were such a big help! :DDD thank you so much!!!!

I guess I'll play around with the codes until I can workout the weird layering thing |D oh well haha.

Ah, I'm glad it worked out

Ah, I'm glad it worked out for you! Smiling

^^ My pleasure~



DEERTH's picture

I'm sorry for being dumb at

I'm sorry for being dumb at CSS... But what is that weird remaining part of usual TEF blog CSS at the upper side and how to remove it?

Bio.
Call me Deery. Smiling
Dragon Scroll.
Avvie by me, siggy by Saosin

#wrapper #container #center

#wrapper #container #center .right-corner .left-corner{background:red}



DEERTH's picture

I changed the CSS a bit to

I changed the CSS a bit to make it less weird, but the little part of it still stubbornly stays. And do you know how to remove the purple line between comments?

Thank you for trying to help me! Smiling
Call me Deery. Smiling
Dragon Scroll.
Avvie by me, siggy by Saosin

Borders. Wan't only the

Borders. Wan't only the purple to go away?

You know the comment odd and even, right? Put this inside your brackets: border:none



DEERTH's picture

Thanks! It's quite useful.

Thanks! It's quite useful. <3 The borders are removed from one of my bio. But both Eoron's and the other bio's sides stay, I mean, I see a weird side part from TEF original page, at the upper right of my screen...
Call me Deery. Smiling
Dragon Scroll.
Avvie by me, siggy by Saosin

Uh...? Sorry, come again?

Uh...?



Sorry, come again? x'D



DEERTH's picture

Gladly. This is White Dove's

Gladly.

This is White Dove's bio. Quite usual. But can you see a part of something from this blog's CSS? If not, something is possibly wrong with my browser. |D

In White Dove's bio, there is a bar of something in the upper right of the page. Not the light blue bar, that's my CSS, but a bit more below it.

Couldn't explain it better, hope that helps. xD
Call me Deery. Smiling
Dragon Scroll.
Avvie by me, siggy by Saosin

Unplugged's picture

Deerth, instead of

Deerth, instead of "body{background-color: black;cursor: feather}", use "body{background: black;cursor: feather}" That should fix it. Smiling

((by the way, just as a reminder, if you want faster help with something, you can always add me on msn. I'm online all day and respond immediately there: ))

(No subject)

Smiling



DEERTH's picture

At least Eternal has some

At least Eternal has some peace now.

But Unplugged, you scare me with your amazingness! And I'll add you as I can, I may be contacting if I need. Eye


You found out my code, nevertheless. Lmao.

And that little feather I'll be working on soon. That's just a reminder in my code, teehee.
Call me Deery. Smiling
Dragon Scroll.
Avvie by me, siggy by Saosin

And now Unplugged gonna die:

And now Unplugged gonna die: I still can't make the green div to do as I wan't. You say I need to write both top, bottom, left and right properties to make it stay on the page when it's absolute. Since I don't wan't it fixed. :'I
...



DEERTH's picture

Nuu!

Nuu!
Call me Deery. Smiling
Dragon Scroll.
Avvie by me, siggy by Saosin

Unplugged's picture

Aahhh haha EternalQueen I

Aahhh haha EternalQueen I think you're thinking too much. Just set them to absolute. Sticking out tongue

If you put, for example "top:10px", your box will be 10 px from top of the screen. No matter what screen resolution, it will be 10px from top of the screen, always.
Like right now, you have one box at the far left and one at the far right. When people view on a smaller screen, they will still be on the far left and on the far right of their screen.

x'I It still won't go all to

x'I It still won't go all to the side. Look..

Is it becuse of my margin or such...? I mean my coding in the style tags?



Unplugged's picture

hmmm alright, that's indeed

hmmm alright, that's indeed strange. As a workaround, you can set right to -32 px. I'm not exactly sure why this is happening.

Back...Sorry. :/ Someone

Back...Sorry. :/

Someone said to me that on their computer, there is no "Add new comment" line, or anything on Lacie's biography. They're using Internet Explorer. These are what it looks like on their computer.

Did I mess something up in the coding? And is there any way to fix it? I feel bad, because now I have no idea how many other people are having the same problem with that blog. :/

Yes! >: D Thank you,

Yes! >: D


Thank you, Unplugged! You're a genius.



Unplugged's picture

Tell them to use a different

Tell them to use a different browser. :T
jk jk, but seriously, Internet Explorer is nothing but trouble. It's always behind.

It's the same for me when I view it in IE. I'll look into it, but I'll need the code for cross-browser testing.
http://textuploader.com/ Sorry that I have to bother you with that.

Ai, I know. IE is horrendous.

Ai, I know. IE is horrendous. ;~;

http://textuploader.com/?p=6&id=kzTSI

There you go! <3
Unplugged's picture

Before each "a name", EXCEPT

Before each "a name", EXCEPT before a name="1", remove this line: "<div style="width:500px;height:600px;overflow:hidden;">"

Add a </div> between the last bit of text (said previous world.[/size][/left]) and the "</div></center>"


Or, alternatively, this.

It worked! Thank you, so, so

It worked! Thank you, so, so much. <3
dearjuno's picture

Sorry if this has already

Sorry if this has already been asked but,

do you know how to change the color of the peoples usernames in the comments, or how to change the color of the yqwndw's blog Add new comment? :|

Thanks ♥
Hey contact me if you need me,

'll try to be active again.

Scroll a bit up

Scroll a bit up Smiling



dearjuno's picture

Pfft curse me and my

Pfft curse me and my blindness.

♥ Thank you so much, finally starting to get this. >.>
Hey contact me if you need me,

'll try to be active again.

Great~

Smiling Great~



goodvibration's picture

Hi there Unplugged! I´ve got

Hi there Unplugged!

I´ve got a small problem.
In my recent Blog
I´d love to if the comments were all centered. Now it looks as if the comment user picture
+ the actual comment are more on the right side.

Maybe you can help me out? Smiling