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. ♥
I'll take that blog apart for
Yeah, it's annoying to go through the comments here and I'm going to change change the font colour eventually. :x
And as for my personal blog, simply look for all "background:url('http://i49.tinypic.com/2l4389.gif')" and remove them. :)
Ah silly me xC I will try
Thank you very much for your help! :3 ♥
Edit: Sorry for bothering with my questions Dx
Is it possible to move the menu bar a little bit down?
Is there a way to put a
Bamboo-- Try
.sidebar{top:200px;}
Rhyolite--
.sidebar{background:url('IMG') top center no-repeat}
You can also change the "top center" to "top left", "bottom right" etc etc. Just keep the no-repeat.
Thank you for doing this~
Click I was wondering if it's
I was wondering if it's possible to remove the list squares, the leaf of the title and that annoying line at the top of the box?(marked with red) And to keep the sentence "the endless forest" in one same line? (yellow)
Also, how do we change the color of the post dates :o ?
Silly questions, I feel like I should know this by now :p
There you go! Bullets: ul li,
Bullets:
ul li, ul.menu li, .item-list ul li, li.leaf{background:none;}
Leaf:
#squeeze h2:before{content:""}
Line:
#tabs-wrapper{border-bottom:none;}
Dates:
.submitted{COLOR:#000000 !important}
As for keeping that text in one line, you'll need to change the size of your font. I haven't yet found a way of changing the sidebar width without destroying the whole page. :x
Alright, thank-you :D {e}:
{e}: One more thing, where should I insert those pieces of code?
Simply add it to all your
Well yes, that's not exactly
I got no clue what you're
</style>
-tag you can't do anything wrong.Thank you again so much
And quickly, hopefully the last of me bothering you, but what is there a code that allows you to put text infront of an image? Thank you (:
You simply need to make a div
Ah, thank you so much
Ok I'm back with mah
How can I make my comments stay like this?
I'm not sure what exactly you
I mean to stay in the middle
Hmm, try this
#comments{margin:auto}
IT WORKS >8D
Thankieess! I love you O3O <33333
I was wondering how you can
and their whole too, not little squares
"body{background:url('URL
will give you a background image like in your example that doesn't "move" with the page.
I'm not sure what you mean by 'little squares' but are you talking about the image repeating itself?
Oh thanks 8D!!! x3 could you
x3 could you give me the code for a picture that does move with the scroll thingy too? o:
Just remove the "fixed" then.
Hello again (: I was
I was wondering if you could have yet another look at this blog; http://endlessforest.org/community/biography-solitude
I seemed to have messed up the menu links somehow, they aren't supposed to pop out like that while hovering over them. It happened when I centered the blog title.
Can you find it? ♥
div#sidebar-left.sidebar
div#sidebar-left.sidebar a:hover,div#sidebar-left.sidebar ul.menu a:hover,div#block-user-1.clear-block.block.block-user a:hover,.inspir a:hover,.new,.comment div.links:hover,span.submitted {text-align:center;color:darkgray}
^ This part of your code, change it to following:
div#sidebar-left.sidebar a:hover,div#sidebar-left.sidebar ul.menu a:hover,div#block-user-1.clear-block.block.block-user a:hover,.new,.comment div.links:hover{color:darkgray}span.submitted{text-align:center;color:darkgray}
Thank you! ♥
edit: nvm i got it XD
I tried to add a table on a
Avatar by Awentia, signature by Wildflowerdeer
In your <table>, add
<table>
, add "style="border:hidden"" and it should disappear.Like this:
<table style="border:hidden">
Perfect, thank you
Avatar by Awentia, signature by Wildflowerdeer
I've looked around, and can't
How do you center this?
Also, is there a way to center the TEF logo at the top?
To center the blog
span.submitted, #squeeze h2{text-align: center;}
As for the TEF-Logo, I haven't found a way to center it yet, but you can move it to the right:
#logo{position:relative;left:100px;}
will move the logo 100px from the left side (aka to the right).
((Also, here's something nice, removes the yellow leaf:
#squeeze h2:before{content:""}
))Thank you so much!
- Spams &hearts -
I have a question, not sure
I would like to move the text boxes to overlay each other but when I position more than one box it breaks apart. Any advice?
EDIT: Never mind I got it
Hey unplugged. I sent you an
Hey, I was wondering if you could answer a few css questions? For this blog:
http://endlessforest.org/community/node/51570
How do I remove/change the color of the Home > Blogs > Lustful's Blog
How do I remove/change the color of the 'Picture Categories/Blog Categories/Online Users'
I've been through your entire blog and still haven't seen these. If by chance I've missed them, I apologize.
No, I didn't receive
To hide the Home > Blogs:
.breadcrumb{display:none;}
To change the colour of Home > Blogs:
First one are the small > arrows, second the links and third links when hovering your mouse over them.
.breadcrumb{color:#ff0000 !important}.breadcrumb a{color:#ff00ff !important}.breadcrumb a:hover{color:#ffff00 !important}
To hide Categories:
div#sidebar-left.sidebar h3{display:none;}
To change the colour of Categories:
div#sidebar-left.sidebar h3{color:#000000;}
Tell me if there's anything else you need. :)
Hey, Unplugged, do you know
#squeeze
In the preview, you won't see it on the Blog Title though, but on the title that says "Preview".
-flails- Ummm...the one that
Thanks! >w< I'll try that
http://endlessforest.org/comm
Could I possibly bother you for the code to remove the black bars over reply?
Could you screenshot that for
You could try adding ".comment div.links{border:none;}" but I'm not sure.
Tracking.
http://endlessforest.org/comm
I have a little question, but maybe there's nothing which can fix it.
On the first page of the comments it got messed up long ago, probably because of Deathwing's "/" on the beginning of her comment.
Is it somehow possible to fix this and get it back to normal? In the comment-< style > part maybe?
What browser are you using?
Oh I didn't look at it in
I used Google Chrome http://i228.photobucket.com/albums/ee220/pirate-johnny/Unbenannt-3.png
Hmmm I'll go download Chrome.
Alright ♥
Just for general
Issue seems to be in IE too.
[e]: Aha! The issue seems to lie broken /center-tag that gloryofdeerforever has in their signature. It probably "reacts" with some other element there. You can see it in the source code if you check with Chrome or IE, in firefox this seems to get an automatic fix, all tags are closed there. There's nothing you can really do here unfortunately. :x
Thanks for making me download Chrome though, I've been meaning to do that for a long time now. :b
Ah yes I thought so. Aw okay
And you're welcome xD