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
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. ♥
Fff, awesome. Thank you. =D
Hiya. I feel bad for asking
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.)
There we go~ Top menu (Game
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
Thanks a lot. I have all the
Added.
Do you think there's a
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. (:
If you don't find a code to
Hullo.
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?
(:
Sorry for being such a reply
Ephra: Jump links? These
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. :/
I'll see if I can mess around
#logo{display:none;} To hide
To hide the TEF logo
Thank you so much.
That's awesome.
I have another couple of
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....
About the tabs, I don't know
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.
For 2), I'm not sure what you mean. Do you have an example?
uhm no but i mean the bit
Mick Kreiger: You Know You Love Me XOXO
div#sidebar-left.sidebar
This..?
Yeah that area, is there any
Mick Kreiger: You Know You Love Me XOXO
It does't work. All it does
Maybe I'm not doing this right?
Hm:/
#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?
Arigato Unplugged
Mick Kreiger: You Know You Love Me XOXO
I want to be able to hide the
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
I find it hard to explain
TEF is acting very slow for
I posted the code on the link I gave you.
What's the code for the line
It could
#tabs-wrapper{border-bottom:1px solid #ffff00}though I'm not sure.
Sorry for the late reply, been busy.
Tracking, so I can find it
Thanks for doing this!
Thank you very much! =>
I have a question- I mean't
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?
You need to put your CSS
I've been trying to change
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")
Do you mean the dark blue
Is this page a preview? Cause
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")
Hm. No, it's not. Can you
{#container-color:#1F2091}<
test test, I think you killed the comments ggliden.
Oh god. What did I just do? 8D *is Unplugged*
test x Okay, at least I fixed
Okay, at least I fixed the comments now.
You need to put your code between a
[code] and[/code], gglidden. xD8O! How the heck did that
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")
And make sure to preview your
<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....)
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")
<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.
This may have already been
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
Yay! It worked! Thanks a
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")
Sure. Just post here if you
I'm usually quicker to respond on my MSN, if you want:
Ok, I've been trying to get
<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.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")