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



Ive read it, but i still dont

Ive read it, but i still dont understand how to do it! I get the informational part, but there has to be something that im missing if cant get the true point of this blog... sorry!
Unplugged's picture

Well, the most simple way to

Well, the most simple way to use this is to copy the Blog Code I provided and then just change the colours in any way you want. Sort of like a Fill-in-the-blank. Sticking out tongue
What exactly do you have problems with?
Dementia's picture

Okay so I put entered my

Okay so I put entered my background url exactly like this just so I could test your advice out:

~ And it didn't do anything? What did I do wrong? ;-;
GingerNut's picture

I can't remember if I

I can't remember if I commented on this or not xD (Don't think I did) but anywho~
This really has helped me out a lot, even I still take it as a bunch of gobblety-gook, it kinda makes sense now..... I think.... Maybe...
Nevertheless, thank ye kindly :3 *bowbow*
Unplugged's picture

Did you keep the ' '

Did you keep the ' ' quotation marks?
Where did you put the code?
Did you just preview your blog or update it? Some parts are not visible in the preview.


GingerNut-- Once you understand the logic behind it it doesn't look that confusing anymore. Smiling Glad it's useful.
Dementia's picture

Oh no~ Nvm! I figured it out!

Oh no~ Nvm! I figured it out! Thanks for all the help. <3<3<3
kaitlyn's picture

track gdfg

track gdfg
Ravyn's picture

I've been informed that my

I've been informed that my tabs no longer work.
I don't know why...
I've kept everything the same except for changing the colors and the background.
I was wondering if you could take a look at my coding?

I'll make a new blog if you want to post it...
Unplugged's picture

Does this problem still

Does this problem still occur? I'll look into it if you want to, but they work fine for me.
Hraeth's picture

Do you know of any way to

Do you know of any way to change to color of the square list bullets alongside the menu links?
Ravyn's picture

Quote:Do you know of any way

Quote:
Do you know of any way to change to color of the square list bullets alongside the menu links?

...Or make them disappear?

Continuing from before, it seems only Jin is having a problem with them.
They don't respond to her clicks or anything.
Unplugged's picture

To make them

To make them disappear:
<style>ul li, ul.menu li, .item-list ul li, li.leaf{background:none;}</style>

Changing colour is a bit more complicated.
Save this and change its colour manually. Save and upload, add it in this code:
<style>ul li, ul.menu li, .item-list ul li, li.leaf{background:url('URL HERE') no-repeat scroll 1px 0.35em transparent}</style>

Thanks for asking this, I finally found something new too. :b


As for the problem with the tabs, I'm not sure why this is happening. :/
Munkel's picture

*tracks*

*tracks*
Hraeth's picture

Wonderful. :'D Thank you!

Wonderful. :'D Thank you! ♥
Munkel's picture

Hm... you have any idea why

Hm... you have any idea why Crybaby's bio doesn't work in the internet explorer? It works fine in Firefox and Google Chrome... .__.
Unplugged's picture

Sorry, I'm not really

Sorry, I'm not really familiar with the CSS differences between Internet Explorer and other browsers yet. All I know is that IE is stupid and doesn't support certain things.
Munkel's picture

Mwahaha rofl x'D I hate IE so

Mwahaha rofl x'D I hate IE so I just hope the most don't use it anyway :'D
ShadowsofLight's picture

@Munkel: I didn't see what

@Munkel: I didn't see what was wrong with it...

Mick Kreiger: You Know You Love Me XOXO
Munkel's picture

Well I just looked at it in

Well I just looked at it in the Internet Explorer... didn't look the same as in Firefox at all, most was displaced.

Is there any way to remove

Is there any way to remove comments completely? I mean they can still add a comment but they're hidden?
Unplugged's picture

Ohhh, that's a favourite

Ohhh, that's a favourite trick of mine. Sticking out tongue
<style>#comments{display:none}</style>

Oh! Thank you. I saw it

Oh! Thank you. I saw it before on someones bio page and I'd love to add it to my Lusts. Thank you! <3
arrowdoe's picture

Hey there, Unplugged! I've

Hey there, Unplugged! I've been meaning to ask this for quite a while now, but haven't gotten around to it until now.

Is it possible to separate one blog into, say, four links without any other parts showing?

(ex.) Having a link to the basics of the bio- then having a link that takes you to the same blog but has, say, the friends ect?

I don't think that made sense. Vee had something like it in Virgil's bio- but she removed it.
Unplugged's picture

I think this is what you

I think this is what you mean. Laughing out loud

hey, how do i post a video in

hey, how do i post a video in my deer's bio?
arrowdoe's picture

YES! EXACTLY! Thank you!

YES! EXACTLY!
Thank you! <333
Unplugged's picture

Lolamad911-- I think you just

Lolamad911-- I think you just have to embed it from youtube. There is an "Embed" button below every video that gives you the code. Sticking out tongue

This is awesome!

This is awesome!

.

Excuse me, Unplugged. Sorry

Excuse me, Unplugged. Sorry to bother you, but how on earth do you do scroll boxes? I'm horribly confused.. Mainly, because what I am aiming for is for my biography to look similar to that of This beautiful one, made by TheWolf Could you help me with the coding? Thank you!
mellion's picture

Trackage, just in case. Thank

Trackage, just in case.
Thank you for this post. <3
~ Azugi
Unplugged's picture

Rhyolite, I believe I have

Rhyolite, I believe I have the code for a simple scroll box somewhere in the comments of this blog. Smiling

Thank you Unplugged (: It did

Thank you Unplugged (: It did help but from the link I posted before, I was just wondering if you had codes for that type of format? The border around the text, the title etc. As thats how I'd like mine to look like (;
Sorry for bothering you again haha
Unplugged's picture

Oh, I think you'd have to ask

Oh, I think you'd have to ask Ravynn for her code and if you can use/change it then, after all she did all the work. I thought you meant just the scroll box with the traits. :b

Haha, no problem. I'll be

Haha, no problem. I'll be sure to ask Ravyn, thank you so much for your help. Also, (sorry to annoy you again) but I can't seem to put music from MixPod onto my blogs, they always come up as an URL. I've looked for the codes etc but I'm clueless. Any ideas?
Unplugged's picture

(You don't need to apologize

(You don't need to apologize for asking for help, that's what I'm here for. :b)
What code do you use? You need to use the code they give you when you click "Get Code".

Ok, I ask that then all of a

Ok, I ask that then all of a sudden the code for the MySpace one comes up. I copy it and it goes into a URL. Im confused :/
Unplugged's picture

The MySpace code is the right

The MySpace code is the right one, yes.
Do you use the long code in the box?
Can you show me what your code is?
Is Input Format set to Filtered HTML or BBCode?

Yes, I use the long code and

Yes, I use the long code and its in BBCode. (:
Unplugged's picture

And he only shows an url.

And he only shows an url. Huh.
Are other Mixpods visible to you?

Yes, other MixPods are

Yes, other MixPods are visable. I'll try again
Unplugged's picture

:/ I am confused. Try

:/ I am confused. Try updating even if you don't see it in preview, if you haven't yet.
Can you give me a link to both, your playlist and the blog you tried to put it in?

Sorry for my horrible wording

Sorry for my horrible wording :/ but i think I've solved the problem. Am I supposed to just leave the MySpace Code, and do nothing to it?

Aha! SUCCESS! thank you!

Aha! SUCCESS! thank you!
Unplugged's picture

Yes, just leave it. You can

Yes, just leave it. Smiling You can delete anything past the < /object> if you want to.
Hraeth's picture

First of all, thank you for

First of all, thank you for being so helpful with all this CSS stuff. ♥

I'm going to impede on your generosity again. |D

Is there a way to either color the scrollbars of div layers or make them partially transparent?
So far I can only get the color change to work with certain browsers, but maybe you know of something I don't.
Unplugged's picture

Nope, unfortunately colored

Nope, unfortunately colored scrollbars are something that only works with IE. :x There is no CSS way to make them partially transparent either.

If you use divs, I know a way to completely hide scrollbars there, in case you're interested. Smiling
Ravyn's picture

Link:

Link: http://endlessforest.org/community/diaries/ravynn

Is there a way to make some blogs invisible? I HATE taking up room on that page.
I know in order to do this I'll probably need to make a new one for the code, but when I do I want to hide that blog as well and bookmark it so I'll be able to delete it later when needed.
Unplugged's picture

Ahh I've been using that

Ahh I've been using that trick for some time now. Sticking out tongue

You don't actually need to create a new blog for this, just put the CSS code into the Summary-part of one of your blogs.

- Right click somewhere on the page and click "View Source Code".
- Crtl+F to search the title of the blog you want to hide.
- Check a little above that title, you should find following:
<div id="node-#####" class="node">
The ##### being a number.
- Copy the "node-#####" with your number.
Add following then to the summary of any of your blogs:
<style>#node-#####{display:none}</style>

Repeat. Smiling

Seele's picture

Thank you so much for this

Thank you so much for this blog <33 It has been really helpfull!
I'd also love to know how to hide scrollbars in divs! I'm really curious about it. It was frustrating to find out it'd only work in IE when I searched the internet, so if you have another way that would be cool..

Thank you! <333
Unplugged's picture

Thank you guys for asking! It

Thank you guys for asking! It gives me something to do and it often really helps me calm down and concentrate on something else, like now <333!

There you go Seele! It's just sort of a... prototype as I haven't experimented much with it yet but it should work fine. Smiling
<div style="width:550px;height:300px;overflow:hidden;">
<div style="width:500px;height:200px;padding:50px;overflow:auto;">
Your Text
</div>
</div>

If you want to change the size you'll need to play with the widths. Just make sure the numbers in the first div are always bigger than those in the second div.