* {CSS Help} The Structure of a Blog Entry

February 18, 2010 - 8:52pm — Unplugged

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)

If you have any problems, questions, ideas or find any mistakes here, please let me know!
Enjoy. ♥

Miscellaneous

Unplugged's blog
Login to post comments

June 1, 2011 - 8:24pm — Unplugged

Silverbells-- Well first

Silverbells-- Well first you'll have to upload the downloaded picture somewhere, like imageshack. Then you copy the direct link and paste it between the (' ') here:

<style>body, #wrapper #container #center .right-corner .left-corner{background:url('http://url_here.jpg') repeat}</style>

this code you just add to your bio, and remember to set the Input Format to BBCode.

BetweenTheBars-- can you show me the blog? I'll try it directly then.

June 1, 2011 - 8:52pm — BetweenTheBars

Here you go.

June 1, 2011 - 9:18pm — Unplugged

comment-colour

comment-colour only:
#comments{color:#000000}

menu-colour only:
.sidebar a, .sidebar h2{color:#ffffff}

June 1, 2011 - 9:40pm — BetweenTheBars

Hmm...the comment section

Hmm...the comment section worked, but the menu one isn't...

Holy crap, CSS can be infuriating, hahaha ;;

I'm so sorry for all of this...

June 1, 2011 - 9:42pm — Unplugged

oh yeah, I forgot the

oh yeah, I forgot the !important..
.sidebar a, .sidebar h2{color:#ffffff !important}

June 1, 2011 - 9:51pm — BetweenTheBars

Yes, it works! Thank you so

Yes, it works! Thank you so much fkskfsk <3

Again, sorry about all the hassle...;;

June 1, 2011 - 10:56pm — SilverBells

Unplugged- AHAHAHAAAAA!!!!

Unplugged- AHAHAHAAAAA!!!! Yessssss!! >8D Thank you. <3333333

I think I'm catching on a bit. I've read a lot of your CSS information posts time and time again and it's starting to click. xD I'm learning. ^3^

♥

—

June 2, 2011 - 4:17pm — EternalQueen

Um um I... Need help

Um um I... Need help >.>'

This:

How did I move the "Reply" buttons and such all the way upp?
I rather wan't it at the normal place at the bottom of the comment ;_;'

—

June 2, 2011 - 5:47pm — Unplugged

.comment

.comment .clear-block{min-height:180px}

This should do it.

June 3, 2011 - 7:05pm — EternalQueen

:'D Thaanks! Uh, oh, yeah...

:'D Thaanks! Uh, oh, yeah... Um, see this blog?

http://endlessforest.org/community/test-css-2

It looks weird. Like I cut off something :/ Why can't it get all round? >='C *Slaps blog*

—

June 3, 2011 - 7:13pm — Unplugged

Change the height of the div

Change the height of the div before the round one from "height:500px" to "height:560px". :b

June 3, 2011 - 7:15pm — EternalQueen

8'D &hearts;! ... Lawl, I

8'D ♥!

... Lawl, I feel stupid.

—

June 3, 2011 - 7:55pm — Mis

Hello there Unplugged! My

Hello there Unplugged! My head just exploded all over my screen, and I thought before I'd throw this away, I'd perhaps ask you for advice.

Misako thought, hey, let's make a new bio-layout! And do it with funky tabs. So everything was nice and I was working happily, and then I thought I was finished. Yay! Now I encountered a problem that I think has no way around it. But hey, it can't hurt to ask.

This is my testing blog, and well, I guess at first nothing looks off. All the red text are hyperlinks, and there is a very eye-blinding menu in the third div.
I thought I'd make like, in "art and writing", an option to change the text in the divs with tabs. But if you click on a tab(like "By others" or "By me"), the page jumps down and in this case, the next big tab that should be invisible comes up. Which isn't so much the problem, the problem is is that the upper part of the blog gets cut off.
(Hope that made sense)

So what I'm looking for is a way to get the tabs to stop cutting part of my div off. The upper part especially. Did that make sense? I hope so. As said, my head exploded and thinking without it sure is no good.

—

June 3, 2011 - 8:40pm — Unplugged

Hmmm I'm not sure but I'd

Hmmm I'm not sure but I'd like to try. can you give me your code though?

June 3, 2011 - 8:48pm — Mis

Here you go! Please try not

Here you go! Please try not to break your brain over it though.. I could always just think of another layout! Very happy you're willing to look though! ♥

—

June 5, 2011 - 1:33pm — Mis

Psst, Unplugged. I decided to

Psst, Unplugged. I decided to do something a bit more simple, and try again with something else. Thank you still, though ♥. Hope you didn't have too much hassle with it so far, heh.
Though I guess I'd still be curious how such a thing can be solved, but you surely don't have to go through the hassle for me.
Thanks again!

—

June 5, 2011 - 2:08pm — Unplugged

I thought about it but

I thought about it but haven't found anything :/ I think you're right in that there is no solution. I couldn't think of a workaround either.

June 10, 2011 - 9:52pm — OokamiAzura

Back with more annoying

Back with more annoying questions. fksfkskfs

- How do you change the colour of the date section of a comment? *including the dash line

- How do you make the blog semi-transparent so you can sort of see the backround through it?

EDIT: Also, when using the Table divs, how do you get it so that the tables are touching each other? Right now, i have an image, and some text, and I want them right next to each other, but instead I have this large gap...

—

June 10, 2011 - 10:05pm — Unplugged

egh, is this a new post or

egh, is this a new post or did you update it? If you updated, I'm really sorry. I'm getting painfully forgetful for some reason.

There you go. Date colour:
.comment span.submitted{color:#ff0000}

Transparency copypasta:

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.

Re your last question, tables are very annoying. Could you show me your code?

June 10, 2011 - 10:24pm — OokamiAzura

I updated it. No big deal

I updated it. No big deal though. <3 (:

Here's the blog.

I'll try the other stuff that you posted too. (:

—

June 10, 2011 - 10:37pm — Unplugged

Hmmm.. Change the width of

Hmmm..
Change the width of the div where your picture is to the size of the picture? (from 350px to 164px)

June 10, 2011 - 10:47pm — OokamiAzura

Hm, they're still not

Hm, they're still not "together." There's still a gap there.

Ehh, I'll deal with it for now. Thank you. (:

The other codes you gave me work by the by. <3

—

June 12, 2011 - 7:10pm — EternalQueen

Teacher, I have a

Teacher, I have a questioon~!

This: http://endlessforest.org/community/test-css-2

I've messed up. How do I solve this?

—

June 12, 2011 - 7:18pm — Unplugged

Before the "a name="3"" part

Before the "a name="3"" part there's one </div> too much. You have two when there should be one. The same with "a name="4"", 5 and 6.

June 13, 2011 - 5:49pm — EternalQueen

:'D Thank you so much

:'D Thank you so much<3

Edit: Now another problem appeared. Damn. When you click the tabs... Yeah, something wrong. :'D It's only okay on the first page...

—

June 13, 2011 - 6:12pm — Unplugged

Looks alright to me. What

Looks alright to me. What exactly do you mean?

June 13, 2011 - 6:17pm — EternalQueen

Hah? Hmm, like the

Hah? Hmm, like the scrollbar-stuff get's cut off a little, for example at page #2. And some black lines from #1 is...

... Wan't a screenie instead? xD

—

June 13, 2011 - 6:29pm — Unplugged

Uhhh could you give me your

Uhhh could you give me your code? I'll try to rework it.

June 13, 2011 - 8:04pm — EternalQueen

... Um, like this?

—

June 13, 2011 - 8:42pm — Unplugged

try this, I hope it's what

try this, I hope it's what you meant.

June 13, 2011 - 10:38pm — EternalQueen

:'D Yes! Epic skills. I

:'D Yes!

Epic skills. I gotta learn. B3

—

June 16, 2011 - 4:37pm — Ryff

Hey Unplugged. Just dropping

Hey Unplugged.

Just dropping a comment to ask for some assistance. I don't really understand CSS and I'm trying to learn, but I'd like to get some CSS for my biographies. I need a simple non-scrolling background and semi-transparent boxes for information and comments. Possibly changing the colours of links and text.

If you could provide some codes/recommend one of them that's up here, please do! I have this on my track. Thanks! c:

—

June 17, 2011 - 1:40pm — EternalQueen

D'8 OMFGAWD I MESSED

D'8 OMFGAWD I MESSED UP!

Again.

—

June 17, 2011 - 1:55pm — Unplugged

Hmmm well Ryff, I'm not sure

Hmmm well Ryff, I'm not sure where exactly you want the background ('outside' only? blog only? comments too?), so could you specify?

For the link colours, use the "CSS Code for Sidebar Links" above, and also add this between the style tags:
a:link, a:visited{color:#ffffff}a:hover{color:#666666}

Do you know how to do boxes/divs? Here's a basic div code, you can experiment with this if you change the px numbers, hex codes etc.
For the transparency, you have to make a small semi-transparent png picture and use it as a background (replacing the 'url here')

<div style="width:600px; height:130px; overflow:auto; background: url('url-here'); border: 2px solid #264135; text-align:justify; padding:10px; font: 11px georgia; letter-spacing:1pt;"> Text </div>

And lmao, eternalqueen. Do you still have my old working code somewhere? In this case it's best to go back to the code which wasn't messed up.

June 17, 2011 - 2:07pm — EternalQueen

... Um... I tried to click

... Um... I tried to click your code you did for me before. It wouldn't show :'B
TT _ TT I'm so sowwy...

I can't even go edit the crap. Only delete because I had another version of it where there are no comments :'c

—

June 17, 2011 - 3:00pm — Unplugged

If you remember what change

If you remember what change made it stop working, you can access the edit-page manually. I can also try to rework your code again (the whole of it this time though, including the css), it's not a lot of work.

June 18, 2011 - 9:44am — EternalQueen

Oh... You just write "Edit"

Oh... You just write "Edit" in your blog-link, then...? Smarty 8o
Ah... Um, okay... Even if you say so, gehm, I feel a little bad. But, here... >.>'

—

June 19, 2011 - 6:38pm — Unplugged

I'm not 100% sure that this

I'm not 100% sure that this is the cause, but you forgot the closing bracket in the "a name" code:
<a name="6"></a
<a name="5"></a
<a name="4"></a
<a name="3"></a
<a name="2"></a

June 19, 2011 - 6:48pm — EternalQueen

Ah. Okay C: 2 sec... *Goes

Ah. Okay C: 2 sec... *Goes editing*

8'D Yes! It worked, wee~! Thanks again ♥

—

June 28, 2011 - 6:38pm — EternalQueen

TT.TT I think I am taking the

TT.TT I think I am taking the prize of the most dump css'er evar.

Fail. It's something like div stuff, right? I can't find iit Q.Q'

And how do you modify the sidebar and choose which link you wan't+put them in a box at the top? o.o

—

June 29, 2011 - 8:58pm — EternalQueen

Bump?

—

June 30, 2011 - 1:16am — Unplugged

Egh sorry. I really didn't

Egh sorry. I really didn't feel like CSSing, or doing anything for that matter. 6_6
You need to put a "hiding div" around your table. Before <table style="border:hidden">, add <div style="width:960px;height:630px;overflow:hidden;">
and after your very last </table>, add </div>.

June 30, 2011 - 1:23am — Lung

-Badgers with more questions-

-Badgers with more questions- ;;

For this blog, how do you center the blog, and get rid of the menu, logo, and links at the top? I plan on having links to the menu, etc if this can be done, I just have no clue how to go about this...

June 30, 2011 - 1:44am — Unplugged

It's not possible to

It's not possible to accurately center the blog (at least I haven't found a way yet), it will always look at least slightly off in other screen resolutions. If you're willing to give me a bit of time I'll go digging for some code that gets close to it (and works with the premade css)..
[e]: ~~not absolutely perfectly centered but the same with all screen resolutions.~~ Got it! should be perfect center now. thanks for asking about this. Here's the code for centering:

#wrapper #container #center .right-corner .left-corner{position:relative;margin:auto}#wrapper #container #center{float:none;}body.sidebar-left #center, body.sidebar-left #squeeze{margin-left:0px}

for the other stuff:
#header-region, #logo-floater, .breadcrumb,.sidebar{display:none}

June 30, 2011 - 1:47am — Lung

Oh my god. I love you. So, so

Oh my god. I love you. So, so much.

Thank you so much for this...;; <3

June 30, 2011 - 6:22pm — EternalQueen

Ah, I'm sorry. I didn't want

Ah, I'm sorry. I didn't want to bother. :'x But thanks for the help, as usual it's working perfect.

—

July 2, 2011 - 1:13am — Chickenwhite

Unplugged, please help me,

Unplugged, please help me, for some reason my tables and scrollboxes won't work anymore T___T On the old blogs they work fine, but if I try to make them in a new blog, nothing shows up... You know what's going on? T___T

—

July 2, 2011 - 1:18am — Unplugged

The Endless Forest