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



Iaurdagnire's picture

I love you.

I love you.
Unplugged's picture

I hope this will be at least

I hope this will be at least a little bit helpful for some. xD;


(..ouch, my eyes)
Verycrazygirl's picture

You sir, are amazing.

You sir, are amazing.

Sithrim's picture

You rock.

You rock. <3


#4b5160
Unplugged's picture

@VCG: Not really. Thank

@VCG: Not really. Thank you~
@Sithrim: Haha, thanks. ♥
Flyra's picture

This is amazing, thank you so

This is amazing, thank you so much. 8O
f l y r a b l o g avatar by tinkee, sig by Quamar
Unplugged's picture

Glad I could be helpful. c8

Glad I could be helpful. c8

Track of love! 8D

Track of love! 8D
J!n's picture

Amazing.

Amazing.
Verdalas's picture

OH MY GOD MY EYES. I'm

OH MY GOD MY EYES.

I'm learning CSS a bit. Using Dreamweaver to make the CSS for you is a lot easier though. xD
Unplugged's picture

@Ashdrau: Yay. c8 @Saosin:


@Ashdrau: Yay. c8

@Saosin: Thank you.

@Verdalas: AUGH IT BURNS
I have Dreamweaver.. but I am too stupid to use it. For some reason I find manual coding much easier. :B
XxBlackSoulxX's picture

thank you for this

thank you for this <3 ahhh my eyes! Shocked

© Rell
ocean's picture

*bookmarks* Thank you.

*bookmarks* Thank you. <3 Your coding is so useful!
onyxsoulclaw's picture

I'm BLIND!

I'm BLIND!Exclaim gagagagagagagagagaaaaa

More please more. I have been fightig the codes for ages your amazing to be able to show it. THANKYOU THANKYOU. sends hugs and cookies.
Tuhka's picture

Thank you

Thank you <333
Unplugged's picture

@XxBlackSoulxX: You're

@XxBlackSoulxX: You're welcome. Laughing out loud

@ocean: Thank you too, glad I can help Ooh

@onyxsoulclaw: Thanks! I'm not sure if I'll make more of this stuff, maybe I'll do a more detailed insight next time I get bored to death. Sticking out tongue

@Tuhka: No problem!
onyxsoulclaw's picture

Hi sorry to be a pain, i'm

Hi sorry to be a pain, i'm not as smart has everyone else. I have placed the code in one line on my blog, but when previewing it all i see is the code, please would you be able to say whwere to insert information and such. kind regards. me
Unplugged's picture

That's strange. Did you copy

That's strange. Did you copy all of it? are the <style> and </style> tags closed? Is the Input Format set to BBcode?
onyxsoulclaw's picture

yayayayyayaa got it o was

yayayayyayaa got it o was missing the final > (kicks self) Big thankyou once again. Your a master. (bows) Take care and all the best. happy galloping.
Tally's picture

I love you for this. xD I

I love you for this. xD

I was experimenting with this already but didn't really know what I was doing.
Unplugged's picture

@onyxsoulclaw: Glad it works

@onyxsoulclaw: Glad it works now. (:

@Tally: *suddenly feels loved*

hello , Unplugged. i would

hello , Unplugged.


i would like to ask if you are willing to give me the same layout alotugh in CSS format , since in the website which im trying to expirement with , this layout comes out as black or something else.


~
sorry for the waste of time
Density's picture

0: This is spectacular. Thank

0: This is spectacular.
Thank you!

8D
Unplugged's picture

@Helment: I'm not exactly

@Helment: I'm not exactly sure what you mean, the Blog Code I provided is in CSS format.
Did you copy the whole code? Did you change the Input Format to BBCode?

Or do you mean using this layout on a website outside TEF? In this case the code won't work, because it focuses on the TEF Community layout, and actually only changes the colours of the things TOT coded. Smiling

@Density: Glad I could help~
Hraeth's picture

Tracking~

Tracking~
TheSnalf's picture

*stalksforlater*

*stalksforlater*
__

oh...em..gee *bows down*

oh...em..gee

*bows down* Thank you so much dbcddshvdvd!
Unplugged's picture

Have fun. &hearts; The

Sticking out tongue Have fun. ♥


The codes for sidebar links are different though, I want do something like this for them too.
Harakka's picture

Hello (: I was just

Hello (:
I was just wondering, how do I code to get exact ALL of the text in one row? I mean if I want exact every bit of text to look the same? Do I really have to code each type for itself? Like links, hoverings, menu's, everything... ? o:
AnimaSoul's picture

tracks.

tracks.
The Soul Of Souls
Unplugged's picture

Harakka-- I'm afraid, yes.

Harakka-- I'm afraid, yes. :/
The only thing you can do is to apply one code for more than one box, like this
.sidebar .node{font:#000000} instead of .sidebar{font:#000000} .node{font:#000000}
I don't think there's a way to do what you mean though. I'll try to figure out. :b
Harakka's picture

I see... Thank you :3

I see...
Thank you :3
Solaya's picture

Amazing, thank you (:

Amazing, thank you (:

Avatar by Awentia, signature by Wildflowerdeer
AnimaSoul's picture

I have two questions... 1)

I have two questions...

1) how you change the font and colour of the Menu lists (i.e. Home, about tefc, etc)
2) how you change the default colour of the comment texts
The Soul Of Souls

Hey I was wondering, after

Hey I was wondering, after having a shy sneek-peek at your personal blog<3 (I'm amazed...), how do you get that 'filter effect'? You know, everything look's sort of dimmer and lights up once you hover over it, all pictures and everything. *drools over your skills* ._. Or maybe you want to keep it a secret? (;

I was also sorta wondering umm... Is there like... Even possible to turn a whole page just like that black & white? :| Excuse my ramblings XDXD Just wondering XD
/overtired and in editing-mode.
Unplugged's picture

AnimaSoul-- 1) Yeah, those


AnimaSoul--
1) Yeah, those have seperate codes-- I wanted to post them sometime later. Not an absolutely perfect code, but take this for now. Sticking out tongue

2) Not completely sure about this right now, but try this one:

the ones ending with -odd are for dark comments, -even are the light comments.

Ashdrau--
No secrets there! Sticking out tongue

Just change numbers.
The code might be a little bit confusing though, so I'll try to explain how it works..
First thing is #logo, this is the TEF logo at the top. Change #logo to whatever box you want. If you want this for more than one box, just seperate it with a comma. (e.g. #logo, #header-region{ ... )
Now you have "{filter:alpha(opacity=15);-moz-opacity:0.15;opacity:0.15}". Means the opacity is set to 15%. If you want to change it, you have to change all three of the numbers (e.g. ""{filter:alpha(opacity=60);-moz-opacity:0.60;opacity:0.60}"). Actually all of these codes do the same thing, but you have to keep all three because each one is only visible in one specific browser.
Second, #logo:hover. Basically the same. The :hover just defines that this code will be applied when you hover your mouse over something. You can do this for other stuff too. (e.g. .sidebar:hover{CODES} -- codes will apply when you hover over the sidebar)
{filter: alpha(opacity=30 ... just change the numbers again. Opacity when hovered.


And yes, it is possible to make the whole site just one colour like that. Sticking out tongue
AnimaSoul's picture

thankssssss

thankssssss
The Soul Of Souls

Woah! You know you're awesome

Woah! You know you're awesome 8D Thanks a bunch! I shall gladly mess with it~
Spyrre's picture

Whoa, colors..... o_O *track*

Whoa, colors..... o_O
*track*
Reyy's picture

You are so brilliant. Really.

You are so brilliant. Really. <3
J!n's picture

Is it possible to change the

Is it possible to change the color of the "Add new comment" and so on?
AnimaSoul's picture

it's one of the

it's one of the parts....which exactly i can't remember...i think it's .div links or something
The Soul Of Souls
Unplugged's picture

Saosin-- I am not sure at the

Saosin-- I am not sure at the moment, but you could try..
<style>ul.links a{color:#ff0000} ul.links a:hover{color:#ff00ff}
Tell me if it doesn't work. :x I haven't tested.
J!n's picture

Thanks, I'll try that.

Thanks, I'll try that.
Unplugged's picture

Edit: Yep, it works. :]

Edit: Yep, it works. :]
J!n's picture

How about the comment's

How about the comment's usernames, is it possible to change the color of those links too?
I hope I'm not being a bother...
Unplugged's picture

No, no, it's fine! I have fun

No, no, it's fine! I have fun trying to figure such things.
<style>.submitted a{color:#ffff00}.submitted a:hover{color:#ff00ff}</style>
(not tested)
It changes the username link colour in your blog entry too, though, but it's the only thing I can think of.
J!n's picture

Even better! You're amazing

Even better! You're amazing at this. Thank you!
Hraeth's picture

Do you know of a way to make

Do you know of a way to make the links that are posted in only the odd or even comments a specific color? o:
Unplugged's picture

Of course~ odd .comment.odd

Of course~
odd


even