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. ♥
It unfortunately isn't
Oh ok, I'm sorry then and
I can't tell you exactly why
Alright thanks then~
Do you have an email I can
I just don't want this particular question in public is all, but it is about css I promise.
You can contact me at
This applies to anyone else too.. if there's anything you want to ask, or if you need a fast response, don't hesitate to add me on MSN.
Thanks so much for getting
Extremely late track~
Extremely late track~
/and yeah, again me/ How can
How can you make a frame around the side menu, please ? And center this last ? c;
Avatar by Awentia, signature by Wildflowerdeer
I believe it should work with
.sidebar{border:1px solid #ff00ff}I don't know what you mean by "center this last" though. :x Could you explain?
I mean... Not center the
PS : thank you, your code is perfect ! &hearts
Avatar by Awentia, signature by Wildflowerdeer
I'm not sure.. You could try
It's perfect, thank you very
Avatar by Awentia, signature by Wildflowerdeer
Back, with more annoying
Is there a way to keep the TEF logo at the top, but not have the links on the right hand side there as well? It's not so much the logo I mind, I find the links look...messy, considering their colour...
Also, if I want to fix opacity of said logo, what's the code for that? I'd like to try and make it somewhat transparent, but have it light up when someone puts their cursor over it...
Fffff, I ask too much. Sorry =/
Do you mean the big logo or
In any case:
Remove top right links:
#header-region .menu{display:none;}Logo Transparency:
#header-region img{filter:alpha(opacity=15);-moz-opacity:0.15;opacity:0.15}#header-region img:hover{filter:alpha(opacity=30);-moz-opacity:0.30;opacity:0.30Feel free to change numbers to your liking, and if you're talking about the big yellow logo, just change "#header-region" to "#logo".
I was talking about the huge
Thank you so much &hearts
EDIT: Is there something you have to put on the end of the second code for the logo? It's not working when I copy and paste it in...
I love u.
Hey Unplugged, I need help
1- How do you center your own date, time, and username thing found on the top of the blog? And also how do you do that for the comments as well?
2- How do you change the font and size of the comments and date, time, username thing?
3- How do you get those backrounds that when you scroll up or down, the backround stays on place and does not move with the scroll?
4- I tried arranging the text boxes to go side by side but it never seems to work :/ I put the code for one text box and then another beside it, but they end up one directly at the bottom of the other, not side by side. Can you tell me a code for this?
5- How do you make everything, but the blog itself and the comments, disappear or not be visible, like this: http://endlessforest.org/community/interaction-blog
Thank you so much
OokamiAzura-- I forgot to
Konoha-- I'll get to you in a secccc
.
I really want to try this
Like, if every code has to be in one line, where does text come in? Like in those little boxes with arrows, that are always in the blog. Might be a very stupid question, but I read all of it like three times and I just don't get it. I've never been good with these things anyway...
You don't have, by coincidence, a version for dummies?
There are no stupid questions
You just type your blog entry normally like you usually would. You just stick everything that's between the
<style>and</style>tags at the very top of all your other typing (but still in the box where you type).Usually, when you work with CSS you format everything so it looks tidy and well-arranged, like this:
<style> body{ background: #FFFFFF; } #logo{ background:#FF99FF; color:#000000; } </style>What I meant by the CSS having to be "in one line" is that in your code (everything between your style-tags) you aren't allowed to do this because it will break up your code and it won't work, so you just write everything out in a single line.
The TEF blog can't account
Okay thanks, I can wait
Alright, sorry for letting
1 & 2-- hope you can figure out.
<style>span.submitted,span.comment.odd,span.comment.even{text-align:center; font: 11px "Times New Roman"}.comment.odd,.comment.even{text-align:center}.comment.odd .content,.comment.even .content{text-align:left}</style>3
body{background:url('http://img823.imageshack.us/img823/946/webtreatsgrainywhitewas.jpg') fixed repeat}You can change the "body" to whichever part you want to add the background to.
4-- I think I showed you this once if I remember correctly?
<table style="border:hidden"> <tr> <td> <div>first box</div> </td> <td> <div>second box</div> </td> </tr> </table>5-- Just for everything around:
<style>#header,#header-region,.sidebar{visibility:hidden}</style>Okay, thank you! That's
Also, what about patterns? How do you stick those in? Load them from your computer or from a website-url?
For the scrollboxes, I have
Yes, you can get patterns from Pattern-sites, save them on your computer and then upload them using sites such as tinypic or Imageshack. And if you don't know where to start looking for patterns, I have collected a few sites for you to check out here, for starters.
Yes I understand it perfectly
Two more things please and
- There is this annoying light blue line at the end of my blogs, is there any code to get rid of it?
- How do you change the "Add new comment" section at the end of your blog(color, font, and size)
- And is there a way of separating the comments, like having a little space between the main blog and then the comments?
Ughhh I'm so sorry, I'm still figuring this stuff out
-Kono
What's the code for changing
*silly question* sorry if its asked before ^^'
Kono-- 1)
1)
.node{border-bottom: none;}2)
.node .links a{color:#00ffff;font:11px "times new roman"}3) Uh, not sure. You could simply try adding multiple
<br>s at the end. Or if that doesn't suit you, try this:.node{margin-bottom:200px;}and adjust as you wish.Z--
#comments{color:#00ffff;font:11px "times new roman"}thank you
Thank you so much♥
EDIT: it doesn't work ;;_;;
How did you add it to your
I added it at the bottom
You typed ".comments" instead
#comments{color:#C0C0C0;font:11px comic sans MS}Thank you, and how did you
EDIT: still doesn't work ;;_;;
I checked your code with my
After your ".node{font:11px;comic sans;color:#D8D8D8}", when you added your new codes you pressed enter and made a new line, this kills your code, so get rid of that. You got the same issue after your ".sidebar{border:1px;solid#FFFFFF}".
And your ".comments" is still ".comments" instead of "#comments".
*headdesk* sorry for my
[to explain the ninja skills,
Mick Kreiger: You Know You Love Me XOXO
Ahh! Ninja skills ftw!
ul.pager
I've been playing around a bit lately and found this.
Colours of page-numbers
<style>ul.pager {color:#ff00ff}ul.pager a{color:#ffff00}ul.pager a:hover{color:#00ffff}</style>Ah, nevermind I seem to have
http://endlessforest.org/community/css-frustrating-experients
Hello. 1.I was wondering how
1.I was wondering how to do a border around the menu. Something like here
2.And is there a code of putting comments into one text box?
3.And how do I make all the stuff in my blog be at the center of the page? Like this
1) .sidebar{border:1px
1) .sidebar{border:1px #000000 solid;} -- see this for further elaboration.
2) #comments{height:400px; overflow:auto;}
3) I'm guessing you could just put
<center></center>tags around your whole text stuff? Or, alternatively, .node{text-align:center}Thank you very much! But I'm
But I'm not sure where I should put ' #comments{height:400px; overflow:auto;} ' :c
Just add it to all your other
Ah ok I got it. Another
Another question. How do I put my comment box into another box?...I hope that makes sense |D
If I'm not confusing anything
#wrapper #container #center .right-corner .left-corner{width:700px;height:400px;overflow:auto;}, but this will put your whole blog in a div.Here, like this C: FFFF I
FFFF I had to search for that page through all those eye burning comments |DEdit: I really like your personal blog CSS, but how do I take off that picture which shows up when I move my mouse over a link?..... I fail at explaining things T_T