Home › Blogs › Unplugged's blog

* {CSS Help} The Structure of a Blog Entry

Unplugged's picture
February 18, 2010 - 8:52pm — Unplugged


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



April 30, 2011 - 2:31pm — Unplugged
Unplugged's picture

Try one of these

Try one of these solutions:

Quote:

1. Make a small 2-px semi-transparent png image and use it as background:
.comment.odd, .comment.even{background:none;} #wrapper #container #center .right-corner .left-corner{background:url('http://img156.imageshack.us/img156/1014/creambg85.png')}
This will work 100% on every browser.

2.1 .comment.odd, .comment.even{background:none;} #wrapper #container #center .right-corner .left-corner{background:rgba(0, 0, 0, 0.8)}
This code might not work on older browsers.

RGBA: You'll have to use the RGB values of a colour for this. In this case
0 Red, 0 Green, 0 Blue, 0.8 Alpha = Black, 80% opacity
255 Red 255 Green 255 Blue, 0.2 Alpha = White, 20% opacity

((2.2 I'm not sure how to use this code with a background picture yet.))

3. .comment.odd, .comment.even{background:none;} #wrapper #container #center .right-corner .left-corner{opacity:0.8; filter:alpha(opacity=80)}
This code will also make all the content in your box semi-transparent.
April 30, 2011 - 2:51pm — EternalQueen

♥ Thaaaank you! xD

♥

Thaaaank you! xD
—



May 19, 2011 - 6:59pm — EternalQueen

Um, I have another

Um, I have another question...

How do I place more than one box at one line? o.o You know, like that in your collection of links... Or many other bios :B
—



May 23, 2011 - 5:58am — EternalQueen

Bump~

Bump~
—



May 23, 2011 - 2:15pm — Unplugged
Unplugged's picture

Aah sorry! I didn't notice.

Aah sorry! I didn't notice. :x
You have to use a table, like this:
<table style="border:hidden">
<tr>
<td><div style="width:350px;overflow:auto;background:#000000">box 1</div></td>
<td><div style="width:350px;overflow:auto;background:#000000">box 2</div></td>
<td><div style="width:350px;overflow:auto;background:#000000">box 3</div></td>
</tr>
</table>


and add this to your css if you want to remove the white line (in case it's still there, I actually included something that should remove it in that code above):
<style>table{border-collapse:seperate}</style>
May 23, 2011 - 2:50pm — EternalQueen

&hearts; Thanks a lot~

♥ Thanks a lot~ ^u^


Edit: Wait... Um how do i center them, meaning I have 3 box at the same "line"? It doesn't work, gaaah...

—



May 23, 2011 - 2:52pm — Unplugged
Unplugged's picture

Make sure you set your blog's

Make sure you set your blog's Input Format to BBCode, it doesn't work in Filtered HTML Smiling
May 23, 2011 - 4:49pm — EternalQueen

Ah... Ooops ^x^' Yay, it

Ah... Ooops ^x^'
Yay, it worked! )8'DD Thaaanks~♥
But will that affect my html code? o.O'

Uuuh, aand... I have another annoying question )x'c
You know shakus blog, right?
http://endlessforest.org/community/guardians-spirit-interaction-blog

I really wan't my comments to be in a box, but I wan't some space between them, too...
—



May 23, 2011 - 4:46pm — kyuubiuchiha

WHOA thanks for typing this

WHOA thanks for typing this out <33 O: I was wondering how you made the style sheet? Like got the different colors on the page. I was also wondering if it was possible to replace an image as the colors, sort of like a lot of the biographies are done on here :]
May 23, 2011 - 4:51pm — Unplugged
Unplugged's picture

EternalQueen-- no, it won't

EternalQueen-- no, it won't affect anything else from your code, so it's best to always use BBCode Smiling
And no question is stupid, I'm here to answer them.

kyuubiuchicha-- What do you mean by "making the style sheet"?
And yes, you can by replacing "background:#000000" with "background:url('url-here')" . You may want to check out this blog because it explains how to use CSS.
May 23, 2011 - 4:53pm — kyuubiuchiha

ah thank you! that's what i

ah thank you! that's what i was looking for, after i typed that post i felt stupid because i noticed it right on the first page.... ahah. i guess sometimes it all looks like another language to me. thank you <3 <3
May 23, 2011 - 4:55pm — EternalQueen

.

.
—



May 23, 2011 - 4:55pm — Unplugged
Unplugged's picture

Yes, CSS is a lot like

Yes, CSS is a lot like learning another language. That's a good analogy. Smiling

Oh, and EternalQueen--
.comment{margin:20px} for space between the comments.
#comments{height:400px;overflow:auto} for putting them in a box.
May 23, 2011 - 5:00pm — EternalQueen

&hearts;! Edit: How do I put

♥!

Edit: How do I put each comment into their own box? >8 x
—



May 23, 2011 - 5:11pm — kyuubiuchiha

Okay, so i read the blog, but

Okay, so i read the blog, but i'm confused about something, i want to change the "color" inside the wrapper,, an image - just an image. the colors outside the wrapper i'm fine with, i'll change them up and stuff, i know how to do that part of it ahaa. like, where i'm typing, i'd want an image as the background, i don't know if thats a whole seperate code or something, but where in the code on the first page of this blog would i put the '' background:url('url-here') '' if it would change the background of the inside if the wrapper that the text would go over ?
Sorry if i'm being annoying D:
May 23, 2011 - 5:51pm — Unplugged
Unplugged's picture

You people should stop being

You people should stop being so apologetic! I've answered questions on 10+ pages of this so obviously I am somewhat enjoying it.

EternalQueen-- Try one of these, I don't know which option you want:
.comment .content{height:100px;overflow:auto;}
.comment{height:100px;overflow:auto;}


kyuubiuchicha-- I'll do this systematically ok? I hope it's not too confusing. Smiling

  • So you know that it's the light blue area you want to change, and that the light-blue area is called #wrapper #container #center .right-corner .left-corner.
  • You're using the CSS that I provided here. So next thing we do is search in the code for the right name: #wrapper #container #center .right-corner .left-corner{background:#00CCFF}
  • We know that the thing between the speech bubbles is what we want to change: {background:#00CCFF}
  • We want a background image instead of a colour, and we know the code for it: background:url('url here')
  • We replace the command "color me this" background:#00CCFF with the command "use this as a background" background:url('url here'). Everything else is left intact.

  • Finished it looks like this: #wrapper #container #center .right-corner .left-corner{background:url('url here')}

    If you do all of this from scratch and don't use a template, we'll have to use style tags first and it'll look like this:
    <style>#wrapper #container #center .right-corner .left-corner{background:url('url here')}</style>
    • May 23, 2011 - 5:56pm — EternalQueen

    :') Hehe,love you~&hearts;

    :') Hehe,love you~♥
    —



    May 23, 2011 - 6:05pm — kyuubiuchiha

    IT WORKED 8DDDDDDD I ended up

    IT WORKED 8DDDDDDD
    I ended up using "<style>#wrapper #container #center .right-corner .left-corner{background:url('url here')}</style>" to avoid e v e r y t h i n g being changed aha.
    thank you so much <33
    May 23, 2011 - 6:02pm — Unplugged
    Unplugged's picture

    awesome! ask me if there's

    awesome! ask me if there's anything else you want. building css from scratch is not easy.
    could you put that code between [ code] [ /code] tags? (without the spaces) it's messing with the page right now, haha.
    May 23, 2011 - 6:17pm — kyuubiuchiha

    Oops, sorry O:

    Oops, sorry O:
    http://endlessforest.org/community/test-20 Here's the test, i'm using google chrome so i hope it shows up okay in other browsers, is there a specific simple little code like the one you gave me for the comment backgrounds too? or would i have to use the full code on the first page to do that part of it?

    edit: I might try to fiddle around with some of the codes on the first page, such as http://endlessforest.org/community/testing-ignore-4 Would it be okay if I used that code and fiddled around with it?
    May 23, 2011 - 6:33pm — Unplugged
    Unplugged's picture

    tl;dr version I'm sorry, I'm

    tl;dr version I'm sorry, I'm a little too eager on teaching this stuff so if you don't care about it just add this:
    <style>.comment.odd, tr.odd, tr.even, .comment.even{background:url('url here')}</style>
    and you can use everything provided here and do whatever you want with it, yes.


    Now to my ramblings--

    You just work with the same method.
    Search for the code color to find the right name: .comment.odd, tr.odd and also tr.even, .comment.even (light and dark comments)

    You got the names, now you build the code. Through "How Do I CSS" we know how to construct it.
  • .comment.odd, tr.odd = the name
  • .comment.odd, tr.odd{ } = the name, speech bubble, our command "background image" will be between those speech bubbles.
  • background:url{'url here'} = our command "background image here". We add that between our speech bubbles.

    Finished:
    .comment.odd, tr.odd{background:url('url here')}

  • You might have noticed that this was the name for the dark comments only. If you want the same background for the light comments too, you add it to the list of names before the speech bubbles.

    We will get this:
    .comment.odd, tr.odd, tr.even, .comment.even{background:url('url here')}

    Now the background image will apply to both, light and dark comments.


  • BUT this will give you a seperate background image for each comment. If you don't want your comments to have any background but rather have the wrapper-background visible, we won't use a code that gives us a background, but we will use a code that will remove the background:
    background:none

  • We already know the code for comments so all we need to do is replace the "background image" with "no background".
    .comment.odd, tr.odd, tr.even, .comment.even{background:none}

    So, technically, the finished product would be this:
    <style>.comment.odd, tr.odd, tr.even, .comment.even{background:none}</style>
    Or this if you want to have a different background for the comments:
    <style>.comment.odd, tr.odd, tr.even, .comment.even{background:url('url here')}</style>

    Now, your code is currently this:
    <style>#wrapper #container #center .right-corner .left-corner{background:url('http://i52.tinypic.com/fmhret.jpg')}</style>
    See how you already got the style tags. We don't need them again. That would be a waste of pixels.
    Because of that we can put our result between the already existing styletags, but /after/ the last speech bubble. We're finished with that command already, so we simply add a new one afterwards.

    This is how the /actually/ finished code will look like:
    <style>#wrapper #container #center .right-corner .left-corner{background:url('http://i52.tinypic.com/fmhret.jpg')}.comment.odd, tr.odd, tr.even, .comment.even{background:url('url here')</style>

    <style> beginning of all commands, beginning-style tag #wrapper #container #center .right-corner .left-corner{background:url('http://i52.tinypic.com/fmhret.jpg')}this is where our old command (wrapper-bg) ends and the new one (comment-bg) starts now .comment.odd, tr.odd, tr.even, .comment.even{background:url('url here')} end of all commands, end-style tag </style>
    • May 23, 2011 - 11:52pm — kyuubiuchiha

    ah thank you

    ah thank you <33
    i'm sorry for being such a bother ahah, but thank you O: <3
    May 24, 2011 - 4:17pm — Salome
    Salome's picture

    I don't know whether someone

    I don't know whether someone already asked it but do you know how to remove the violet line in the comment boxes?

    /edit : got it (:
    May 24, 2011 - 4:17pm — EternalQueen

    Uuhm it doesn't work... Where

    Uuhm it doesn't work... Where shall I put the code? Betweeen style tags? Or...? =o

    And how do I round the corners of my boxs? ^^'
    —



    May 24, 2011 - 4:29pm — Unplugged
    Unplugged's picture

    Yes, you have to put it

    Yes, you have to put it between style tags. Smiling Also make sure you write all of your CSS in one line. If you press enter and make a new line it won't work.

    Round corner on a div box:
    <div style="border:10px solid #ffffff;-moz-border-radius: 15px;border-radius: 15px;"></div>
    May 24, 2011 - 6:13pm — EternalQueen

    Ah, I'll recheck. But I

    Ah, I'll recheck. But I aren't sure how it is supposed to look, do you have a blog I can compare to? :'D

    Thanks x3
    —



    May 25, 2011 - 4:25pm — EternalQueen

    Hello again... ^u^' What do

    Hello again... ^u^'

    What do I do to make the comments all to the left... As you can see, it's kinda centered in this blog as an example. :/

    And I can't make each of the comments go in their own box, either. TT-TT'
    —



    May 25, 2011 - 7:40pm — OokamiAzura
    OokamiAzura's picture

    A question in the form of a

    A question in the form of a screencap.

    Since I'm horrible with explaining things rofl ;;
    —
    May 25, 2011 - 8:16pm — Unplugged
    Unplugged's picture

    EternalQueen, can you show me

    EternalQueen, can you show me screenshots of your problems? I'm not sure I can follow you, sorry. xD

    OokamiAzura-- Try this one:
    #squeeze h2, .node .picture, .node .submitted{display:none !important}
    May 25, 2011 - 8:31pm — OokamiAzura
    OokamiAzura's picture

    Sweet baby jesus, it

    Sweet baby jesus, it worked.

    Thank you so much! <3

    P.S. I see you there. <3
    —
    May 25, 2011 - 10:31pm — EternalQueen

    :'D Suure~: ^That c:

    :'D Suure~:



    ^That c: Deleting the avatar must saddly be the consequence... Frown Except if you know a way to minimize the avatars & being able to push it all (avatar, account, date ect.) more to one side? O.o
    —



    May 25, 2011 - 10:36pm — Unplugged
    Unplugged's picture

    .comment{padding-left:0px;}.c

    .comment{padding-left:0px;}.comment .picture{display:none}.comment .content{margin-left:5px}

    ^ try this one?
    [e]: wait, give me a sec.
    resize variant:
    .comment{padding-left:0px;}.comment .picture img{width:70px}.comment .picture{width:70px}.comment .content{margin-left:5px}.comment .submitted{position:relative;right:80px}
    May 25, 2011 - 10:54pm — EternalQueen

    Thank you~! It's pretty cool

    Thank you~!

    It's pretty cool you can do codes like this B3


    Edit: Um how do I make the space bigger between the avatar and the date/account-link? 8'D
    —



    May 25, 2011 - 10:55pm — Unplugged
    Unplugged's picture

    .comment

    .comment .submitted{position:relative;right:80px}
    ^ in this part of the code, make the 80px smaller. Smiling The smaller the number, the closer it gets to its original position.
    May 26, 2011 - 7:25pm — EternalQueen

    Ah, but it's because I think

    Ah, but it's because I think the avatar is almost overlapping the date ^^' Screenie because of my lack of probably explanation-technique?

    Is it too weird? ^^'
    —



    May 26, 2011 - 7:31pm — Unplugged
    Unplugged's picture

    Oh, do you mean vertically,

    Oh, do you mean vertically, not horizontally. Use this then:
    .comment .submitted{position:relative;right:80px;bottom:10px}

    Sorry for my slow replies. If I don't understand something I usually leave it for a day and then re-read, usually it helps.
    May 26, 2011 - 10:42pm — EternalQueen

    Yes! x3 &hearts; Thanks a

    Yes! x3 ♥

    Thanks a lot, I'm happy you even wanna help with the CSS ^^
    —



    May 28, 2011 - 8:59am — EternalQueen

    Um, yeha, I'm comming for

    Um, yeha, I'm comming for help again ^w^'

    It's about 2 things:

    1) How do I colour each comment... Like Sasuke-fan asked and got explained. But how do I do that at a somewhat transparent blog?

    2) ↓ How do I modify that little stuff at bottom? : <
    —



    May 28, 2011 - 4:05pm — Unplugged
    Unplugged's picture

    hmm both of these things

    hmm both of these things would require a little modification of the way the css is set up currently. give me a sec and I'll try to rework it.
    May 28, 2011 - 4:18pm — EternalQueen

    C: Thanks~&hearts;

    C: Thanks~♥
    —



    May 28, 2011 - 5:43pm — Unplugged
    Unplugged's picture

    For the black line: #wrapper

    For the black line:
    #wrapper #container #center .right-corner .left-corner{padding:0px}
    this will remove the black part at the bottom. Change the px if you want to make it thicker.
    I'm not sure about the background image yet, sorry.
    May 28, 2011 - 9:39pm — EternalQueen

    Thanks a lot. It's fiine, I'm

    Smiling Thanks a lot. It's fiine, I'm happy you tried ^u^
    —



    May 29, 2011 - 7:39am — happyskittleslizzy
    happyskittleslizzy's picture

    tracking

    tracking
    May 30, 2011 - 6:34pm — Munkel
    Munkel's picture

    I hope I'm the first one

    I hope I'm the first one asking this question, don't want to seem annoying :')
    Do you know how to center the "The Endless Forest community"-logo?
    May 30, 2011 - 7:57pm — Unplugged
    Unplugged's picture

    > "don't want to seem

    > "don't want to seem annoying"
    > says the person who last posted here months ago

    And yes, you are the first one asking this. I only recently managed to get this code as it's quite a workaround and then ended up not using it after all:
    #wrapper #container #header #logo-floater{margin:auto;position:relative;text-align:center}#wrapper #container #header h1 img{float:none}
    May 30, 2011 - 8:36pm — Munkel
    Munkel's picture

    rofl ;; I just know you're

    rofl ;; I just know you're answering a lot of questions all the time and I don't wanna tire you more 8'D

    Oh thank you so much ♥ It worked perfectly well c:
    June 1, 2011 - 7:07pm — BetweenTheBars

    Is there any way to change

    Is there any way to change the colour of the text in the menu without changing the colours of the links in the actual biography? I want my text in the menu to be white, but the main biography backround is white, and it's hiding the links. ;;
    June 1, 2011 - 7:14pm — Unplugged
    Unplugged's picture

    Hmm, I think the "colours for

    Hmm, I think the "colours for sidebar links" here should cover that.
    June 1, 2011 - 7:51pm — SilverBells
    SilverBells's picture

    I'm still in a state of

    I'm still in a state of cluelessness. That link you gave me, the one where I posted the question in the wrong place, (fail) once I download a background from PatternCooler how do I go from that downloaded file to the background being on my deer's bio page? I'm not talking anything fancy. xD Rock bottom knowledge here. (But I'm reading these posts of yours and trying! D':)

    thank you c:
    —






    June 1, 2011 - 8:21pm — BetweenTheBars

    Hmm...I copy-pasted the code,

    Hmm...I copy-pasted the code, and took out the style tags, but it doesn't seem like anything's changed on the page. I'm actually thinking that the same line of code is already in the CSS for it.

    Hmm...

    EDIT: Ack, while I'm at it, is there a code to change just the colour of the text in the comment boxes? I went sifting through the CSS, and I couldn't find anything for it...