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. ♥
Aaaand Tracking!
Track'd! This is really
This is really useful, thank you for taking the time to do this
...Hum. I'll try not to take
1. I still can't make the opacity gradient of the borders visible ._.
2. Is it possible to stretch the tr.even comments to the borders of the browser, so the avatars in the comments would be aligned right under the sidebar?
3. I know this is godawful, but I still can't place scrollboxes inside other divs o_o' It just crawls onto it or under it.
4. Can border-radius be applied to ul pager? As in turning it into a circle?
1) The opacity issue has to
-moz-box-shadow: 0 0 5px rgba(37, 75, 75, 0.6);-webkit-box-shadow: 0 0 5px rgba(37, 75, 75, 0.6)
blur is moved 0px to the right and 0px to the bottom, the blur radius is 5 px.
2) It is if you break the page purposefully. :b You'll need to have four unecessary
</div>
-Tags at the very end of your page. As you already have two needless /divs somewhere in your code, you'll only need to add two more and this code:#comments{width:100%}
The comments will go to the left border. Strangely it ends before the right side though.
3) This is probably caused by a coding mistake. Check if all your div boxes have a proper opening and close tag and if there are no unnecessary /div-tags.
4) To make border-radius work you'll need to specify a border for the ul first, so "ul.pager{border:1px solid #ff0000; border-color:#00ff00 ..." and then the border-radius stuff. I didn't try it but that's what google gave me.
I am very sorry, I really
How do you add a scroll box and how do you make it a different size, and how do you add the content into it?
Ive scowered the css blogs both in this blog, and in any other blogs I could find, and I didnt see one that had what I was looking for.
If you have the time, could you explain how to do so, and what the link is for scroll boxes?
I am not at all experienced with Css, and the final code you have, I cant get to work.
Sorry for spamming, youve probably answered this a million times, but could you please answer mai questions--Only if you know them--or if you have the time?
No matter what happens, I am greatful for your time into explaining Css. Thank you so so so so so so much!! <3
Unplugged, is there a way to
You're so awesome for doing all this!
Rokysopp-- To change
.links span{color:#ff00ff}
To remove:
.links span{display:none}
Dinamo:
Here's a basic scrollbox code you can play around with:
Just leave the "overflow:auto".
What do you mean by the "link for scrollboxes" though?
Lol, I'm sorry. Thank you for
I mean 'code' instead of 'link'. I'm not handy with computer lingo. :S
{e} Ok, I have it on her bio. How do you get the scroll box to go to the center of the page? I have the center codes around the whole scroll box code, but it doesnt work?
To center divs you need to
OHH. Thank you so much!
Its up and running! : D
(And again, there's no hurry
1) Aw well, too bad it's so weak but thanks.
2)Adding the two aditional div enclosing was what made the comments move, and for what I can see the only thing #comments{width:100%} made was to add a small gap between the right border and the screen :I
Unfortunately, the forth /div is gaving me an odd result o_o If I remove that last /div it looks fine but the preview text box sinks beneath the left side of the screen.
2.1)Is it possible to place the "Add new comment", "Blog" and "Reads" links inside the wrapper, while keeping the comments where I wanted them to be?
Sounds somewhat contraditory ._. If it's not possible, I'd like just to change their color or align them to the right or center.
4) Just letting you know Google doesn't like me B)
6_6 I'm not sure. I looked at
Quote:starting over
...-GASP- omgawdnoplease D8
I think that wouldn't fix it, I'm really slow with coding and everytime I look at it again I forgot where is what and what is what ó_ò
Alright, I'll remove the problematic stuff and start adding the information, as I should have done from the beggining if I hadn't been so stubborn. Thanks for your patience :)
(PS: I believe the confusing stuff is the hidden CSS on the top of the code that I took from your Personal Blog and stored above everything to have a map of valid values c: If it's not that, well, I fail with organization everyway)
Hi Unplugged, there seems to
Any suggestions?
Remove ".content
As for more space between comments and blog, just add a few
<br>
s at the end of your page.Thank you so much
I hope you dont mind, but I have a few more questions.
• How can I change the comment font color on my blog (in my previous comment) to another color? Alot are finding it hard to read.
• How can I get my comments to center and have a double border around them? When I say 'center' I'd also like them to be of a smaller size, like in CryBaby's bio?
• And lastly, just clearing it up~ but is it ('url= img link here') for putting an image in a text box?
Thank you again ♥
Hey there! Do you know how to
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")
Rhyolite-- Sorry for the late
Comment color: #comments{color:#000000}
Comment width and centering: #comments{width:200px;margin:auto;}
Double border: .comment{border:5px double #000000}
And the code is {background: url('goes here')}
ggliden-- Not sure what grey area you mean? Where all the blog content goes?
Yeah, were the blog content
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")
This will remove the
#wrapper #container #center .right-corner .left-corner, .comment.odd, .comment.even{background:none;}
You might want to change/remove the comment borders too because it looks sort of awkward with the regular ones.
If you want the comments to be colored, remove the ".comment.odd, .comment.even"
Thank you so much,
I know, I know.. kill me now, but I have just ONE more question!
I hope you dont mind.
How do you make an image, go infront of a text box? Is that possible? I've seen it on a few biographies, and I really like it.
Thanks again ♥
*Edit - the comments are playing up for me. I've put in the margin:auto, etc. But my comments go all weird. Could you show me how to set it up? Like, from the #comments all into one line so I can just copy & paste? I've been fiddling around with the comments, but they just dont like me!
tracking
Can you show me
Generally you can adjust image position like that if you use this code:
<img src="image-goes-here.jpg" style="position:relative;top:-10px;left:30px">
This will move your picture from its usual position 30px from left, and -10px from top (i.e 30px to the right and 10px up). You'll have to adjust the position here.
As for the comments, I'm not sure. It might have something to do with the way I set up the CSS you're using. Can you show me what goes wrong with the comments?
The 'ul.links a' and
Is there a code that only affects the reply button?
It bugs me that whenever a comment is replied to it can't be edited..
MY EYES! THEY
This is an EXTREMELY nice guide, very helpful, too.
Saosin-- #comments ul.links
I can't do anything about the disappearing edit-button, sorry.
Thank you BluedeerLegend
How do you remove the
.sidebar{display:none} or .si
or
.sidebar{visibility:hidden}
Thank you ♥
Thank you SO much for this,
Just wanted to say thankyou since I'm using your stuff. ;w; Tyty~ <3
Gotta keep a track on this. I
Art by Anjali. ♥
How do I round the edges on a
I've been trying to center
Try it using this: #wrapper
#wrapper #container #center .right-corner .left-corner{position:relative;margin:auto}#wrapper #container #center{float:none;}
It works. Thank you!
I can't center my blog :c
Unplugged, do you by chance
z.m123-- Did you use the code
arrowdoe-- #tabs-wrapper{text-align:center} #squeeze h2:before{content:url('http://unplugged_rules.jpg');}
^ that's the code dag gave me :b
Thank you! [e] The little
[e] The little icon wont show up :s
hmm that's strange. try
url('http://i992.photobucket.com/albums/af43/littlewhitefawn/treeplz.png') !important;
There we go! Thank you again!
*round of applause!!!!*
.
Yes, here it is
Theres a mistake in your
#wrapper #container ;#wrapper #container #center .right-corner .left-corner{position:relative;margin:auto}
Remove the "#wrapper #container ;" here
Still doesn't work :c
Add this one
#squeeze{width:100%}
Your blog will get all broad so you'll have to adjust its width on top on that:
#wrapper #container #center .right-corner .left-corner{width:80%;}
When I added the second code,
D=
Sorry for me beeing noobish..
Don't use the back-button to
Lol, silly me Dx Thank you
Thank you for your help ♥
Hellow again It's about the
It's about the transparent thing. Thanks a lot for that!
Now... It's how to play with opacity there is my problem. I've tryed many ways, but I don't know how it's done TT.TT
1. try) #wrapper #container #center .right-corner .left-corner{background:opacity=50%}
2. try) #wrapper #container #center .right-corner .left-corner{background:opacity=50}
3. try) #wrapper #container #center .right-corner .left-corner{background:opacity:50%}