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.
simplest and easiest to edit; lacking refinement
simple, easy to edit; slight transparency effects
refined, transparency effects, right-aligned sidebar; code for 'normal' sidebar in comments (page 2)
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
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. ♥
#comments{margin:auto} for
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
Hi, Unplugged! Can you look
Dragon Scroll.
Avvie by me, siggy by Saosin
I...still need help with
Copy+paste from previous page:
And...
EternalQueen, I'm not sure I
Deerth, to get rid of the brown, use "#wrapper #container #center .right-corner .left-corner{background:none}"
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
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. :/
Yeah, after the last /select.
I wan't it to stay at it's
Try changing to absolute
That seemed to do the trick.
A little problem... My brown
Dragon Scroll.
Avvie by me, siggy by Saosin
What shall the bottom and
Deerth, you need to use the
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
And isn't it kinda... Stupid if I need to adjust the bottom px everytime someone comment?
Hurrah! Thank you Unplugged,
It is good that you are here.
Dragon Scroll.
Avvie by me, siggy by Saosin
Just a little thing: the CSS
Okay, I seriously need help!
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
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,
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.)
OHMYGOSH YOU'RE WONDERFUL!!!
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
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...
Oh, I got the comments worked
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
^^ My pleasure~
I'm sorry for being dumb at
Bio.
Dragon Scroll.
Avvie by me, siggy by Saosin
#wrapper #container #center
I changed the CSS a bit to
Thank you for trying to help me!
Dragon Scroll.
Avvie by me, siggy by Saosin
Borders. Wan't only the
You know the comment odd and even, right? Put this inside your brackets: border:none
Thanks! It's quite useful.
Dragon Scroll.
Avvie by me, siggy by Saosin
Uh...? Sorry, come again?
Sorry, come again? x'D
Gladly. This is White Dove's
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
Dragon Scroll.
Avvie by me, siggy by Saosin
Deerth, instead of
((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)
At least Eternal has some
But Unplugged, you scare me with your amazingness! And I'll add you as I can, I may be contacting if I need.
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.
Dragon Scroll.
Avvie by me, siggy by Saosin
And now Unplugged gonna die:
...
Nuu!
Dragon Scroll.
Avvie by me, siggy by Saosin
Aahhh haha EternalQueen I
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
Is it becuse of my margin or such...? I mean my coding in the style tags?
hmmm alright, that's indeed
Back...Sorry. :/ Someone
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,
Thank you, Unplugged! You're a genius.
Tell them to use a different
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.
http://textuploader.com/?p=6&id=kzTSI
There you go! <3
Before each "a name", EXCEPT
<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
Sorry if this has already
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 ♥
Scroll a bit up
Pfft curse me and my
♥ Thank you so much, finally starting to get this. >.>
Great~
Hi there Unplugged! I´ve got
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?