* {CSS Help} The Structure of a Blog Entry

Unplugged's picture


Adopt one today! Adopt one today! Adopt one today! Adopt one today!

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.

ONE

simplest and easiest to edit; lacking refinement

TWO

simple, easy to edit; slight transparency effects

THREE

refined, transparency effects, right-aligned sidebar; code for 'normal' sidebar in comments (page 2)

FOUR

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






MAKING A CUT (Terabetha)

BASIC CSS

TAB-LAYOUTS

ORGANIZE YOUR CSS (Ikaron)

Art, Design, Coding Links

Explaining Divs (shamiya)

Div Layouts (shamiya)

Zebbie's CSS Help - Fun With Coding

Iaurdagnire's about:blank








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. ♥



Ravyn's picture

You're a genius.

You're a genius.
yqwndw's picture

Stupid question time, are you

Stupid question time, are you able t0 change the purple/gray line in between comments. o3o

This is amazing. *Stalks*
Hey contact me if you need me,

Looking back I was a bit immature on here. Sorry, maybe I'll try to be active again.
Unplugged's picture

.comment{border-top:1px solid

.comment{border-top:1px solid #ff0000; border-bottom:1px solid #00ffff}
yqwndw's picture

Thank you. (:

Thank you. (:
Hey contact me if you need me,

Looking back I was a bit immature on here. Sorry, maybe I'll try to be active again.
Spirituelle's picture

I don't know if this question

I don't know if this question is ridiculous or way beyond reason, but do you think it would be possible to put comments in a scroll box?
Unplugged's picture

Spirituelle-- Yes! I actually

Spirituelle-- Yes! I actually did that once. :b I think this is the code:
#comments{height:550px; overflow:auto}
Spirituelle's picture

Omg, thank you so much.

Omg, thank you so much.
fdsfhdskf. ;; <3
Alphafrost's picture

I don't get any of this. What

I don't get any of this. What ion the WORLD do you DO? O.e

† Life is a Velvet Crowbar
Hitting you over the head
You’re bleeding
Boy you want more?
This is so like you I said
Put yourself on back to bed †
Unplugged's picture

Simplest way to use this is

Simplest way to use this is to copy the "Blog Code" and change the colours (the hex codes) to the colours you wish. Like a fill-in-the-blank. Sticking out tongue

Oh, hi again 8D I have sum

Oh, hi again 8D
I have sum questions about the CSS from your personal blog;

I wonder how can I put back the borders on the comments? Or change background colors of the two... There's something with the code that I don't really get. .-.
And also, in the menu, the texts that says 'the endless forest', my account name, 'menu' and 'who's online' hovers in an beige color. :c Where do I change that?

/sorry if this was asked already. o: XD
Unplugged's picture

What code are you using? Can

What code are you using? Can you show me the blog?

Hi Unplugged: I was wondering

Hi Unplugged:
I was wondering could you help me on my CSS~I want to make my character's bio~?
By the way this is great! It helped me a bit but some things are kind of confusinf^.^
Thank you:)
-Konoha-

Unplugged's picture

I'll be glad to help you if

I'll be glad to help you if you tell me what exactly you need. Smiling
I'll need to get offline soon though.

Thank you:) Well first: ~What

Thank you:)
Well first: ~What do you mean by putting the CSS under the cut? Is there something you do for that?
~I want to put tabs on my bio- how do you do that? and also how do you center it or move it from place to place?
~How do you put pictures for your backround insted of colors?
~And if I don't want to change any colors or anything for like the header what do I do?
~The blog code- where do I put that or is there a specific place for where the entire code goes?
Thanks so much Im sorry to be a bother with this:> This is the main topics I don't understand:) I might have a few more questions but this is mainly it:)
thank you again<3
-Konoha-

Unplugged's picture

1. When you click on "Split

1. When you click on "Split Summary at Cursor", you should get two boxes. You put your CSS in the box below so the CSS only appears when you click "read more". Smiling
2. I created a code for tabs here. To center it you just need to put <center></center> tags around everything.
3. Change the "background: #000000" to "background:url('URL HERE')"
4. You just remove that part out from the code. Like if you don't want the header in a different color, remove "#header{background:#cc99cc}" Laughing out loud
5. Like I said at #1, in the second box, and preferably at the very beginning, above every other text you put there.
Harakka's picture

-is Ashdrau- I started with

-is Ashdrau-
I started with the code you use on your personal blog as a base;
http://endlessforest.org/community/biography-solitude

thank you so much you are

thank you so much you are amazing. One last thing:) How do you put music and is there a place where you put it?
I don't even know how to get it from youtube or anything so can you plz show me?
Thank you Unplugged:D

Unplugged's picture

Most people use Mixpod for

Most people use Mixpod for music here. Smiling
On Youtube:
Below the video is a button called "Embed". When you click on it you should get a code that you just paste in your blog.

Harakka/Ashdrau, I'll get to you later if that's okay. Sorry! I don't have enough time at the moment but I am going to take a look asap.

Thank you Unplugged this is

Thank you Unplugged this is truly great:) thanks<3 I really appreciate it(:

I have a question.., How do

I have a question..,

How do you put pictures in backgrounds?

Like this... -example- http://endlessforest.org/community/blind-innocence-elyana039s-bio-and-updates

and keep the css still? o:
Unplugged's picture

Bambookirin, change the

Bambookirin, change the "background: #000000" to "background:url('URL HERE')". In this case it would be "body{background:url('URL HERE')}".

Harakka--
Man, it shouldn't take me this long to figure out my own code. Sticking out tongue Sorry.

The comments are here: ".comment.odd, tr.odd, tr.info,tr.even,.comment.even{background:none;color:#596C56;font: 12px arial}", so you can add the borders and background to that part.
If you want to edit odd and even comments seperately, just add these codes:
".comment.odd, tr.odd{background:ff0000;border:1px solid ff00ff}tr.info,tr.even,.comment.even{background:0000ff;border:1px solid 00ffff}"

The beige hovering is in this code: ".sidebar h2:hover{background:transparent;color:#ebd380;font: 12px arial}"
And the text-colour itself is in this part: "#logo,.mplayer,.picture.sidebar h2{color:#484D46;font: 12px arial}"

Thank you! &hearts; Though...

Thank you! ♥
Though... What's up with the h2? I got the hovering now perfectly, but now I still can't get it to look the same way, not hovering? I can't find iiiiit .-.
Unplugged's picture

In your

In your "#logo,.mplayer,.picture.sidebar h2{color:#596C56;font: 15px arial}", you are missing the comma between ".picture" and "sidebar h2" :b
Unplugged's picture

Doublepost. *throws bricks at

Doublepost. *throws bricks at slow internet*

... Oh! XD Silly me. Thanks!

... Oh! XD Silly me. Thanks! XD
Emerald's picture

I love this. : D Now my

I love this. : D
Now my Dieu's profile isn't all nasteh.
Thanks for posting, and for helping us when we need it! C:

gone's picture

This is awesome, thanks so

This is awesome, thanks so much ^^
yqwndw's picture

1) Whats the code for a

1) Whats the code for a simple scroll that can be put in your bio. :3 (Sorry if this is somewhere I could find. Blindness)

2) How do you change the color of the links under your user name? ( My account, My blog, Create New, ect.)

Sorry for my questions, I'm learning. xD
Hey contact me if you need me,

Looking back I was a bit immature on here. Sorry, maybe I'll try to be active again.
Unplugged's picture

Simple scroll box code can be

Simple scroll box code can be found somewhere in the comments of this blog. Smiling
As for the links, I don't know, sorry. :x I know I have done it before though, so I'll go through my codes sometime.
Aegle's picture

loveyou. andtracking.

loveyou. andtracking. <3
Ravyn's picture

Link ->

Link -> http://endlessforest.org/community/ravyns-biography

Do you know how to change my picture and only my picture?
I want to center it, and if that isn't possible then I'll just hide it.. If that's possible. (:

I tried this: position:relative; right:-25px; But it moves the pictures in the comments as well. Hm. :/
Unplugged's picture

Sorry, I haven't managed to

Sorry, I haven't managed to find out how to work with the picture in the blog only yet. :x
Ravyn's picture

Thank you so much anyway.

Thank you so much anyway. <3

Hey Unplugged I have a

Hey Unplugged I have a question for you:
You know those purple and green, I think, lines that divide the comments? How do you change that like the colors, dashes, solid, etc?
Thank you so much Smiling
-Konoha-

Unplugged's picture

You could try

You could try this...
.comment{border:2px dashed #ffff00}

I haven't done CSS in such a long time I forgot everything aaahhhh

Thank you, so do I just add

Thank you, so do I just add that into the code? Thanks<3 Smiling

Unplugged's picture

Yep! You're welcome~

Yep! You're welcome~

Ooh before I forget(happens a

Ooh before I forget(happens a lot XD) How do you change the colors of the comments? I just can't figure out how :/ Im so sorry if I'm a bother, really<3
-KH-

Unplugged's picture

Do you mean the background

Do you mean the background colour? The text colour?

The text color:) And is it

The text color:) And is it also added to the code? Smiling

Unplugged's picture

Yeah, you just add it. And I

Yeah, you just add it. And I think it's "#comments{color:#ffffff}".

Thank you

Thank you<3 Smiling
-Konoha-

BUMPPBUMP

BUMPPBUMP

Hey again 8D Quick one: Do

Hey again 8D Quick one: Do you know how to remove the sidebar menu and the logo? .-.
Unplugged's picture

I don't know what code other

I don't know what code other people use (not really a fan of having no 'recent posts' button) but this should do it:
<style>#logo{display:none;}.sidebar{visibility:hidden}</style>

Ah, thank you! (Actually I

Ah, thank you! (Actually I too don't like it without the 'recent posts'... But well then how can I have only that one left? o:)
Ravyn's picture

http://endlessforest.org/comm

http://endlessforest.org/community/dotcss2 <- Link

I'm having the worst trouble ever. :/
I tried redoing my entire CSS code and I thought it was great until I clicked on the second tab.
When I do it logs me off and the Edit Blog button disappears. I have no idea how it got like that. :/
Can you take a look at my code and tell me why it's doing this ?

For the sake of offering up

For the sake of offering up some ideas until Unplugged sees your message, the only thing I can see with your code that might cause an unintended result might be where your tabs are linking to.

Comparing your code with the code of the tab tutorial, your tabs are linking to community/dotcss2 where as the tutorial links to community/node/*number*.

So far this is the only thing I can really find that's any different.

Edit: Unfortunately I can't find very many other examples of code to compare with, but the -one- other I have found also links to community/node/
Ravyn's picture

You don't have to use a node

You don't have to use a node link in order for it to work.
Thank you though. (:

Alright.. Does it have this

Alright.. Does it have this problem with both tab 2 and tab 3? Or just tab 2? Does it happen if you go from 3 to 2, etc. ?

I'm just going through typical debug process of 'what looks out of place' and the first place to start is often comparing to something that works.

I looked through the entire string of your code for any possible missing or misplaced brackets, or missing tabs. Missing semicolons or quotes, etc. To me it seems like it should just work. o.O

Edit: Ah. I found something at least. You're missing a closing 'center' tag for your second tab.