irinafan (![[info]](http://l-stat.livejournal.com/img/userinfo.gif){kind=small} irinafan) wrote in ![[info]](http://l-stat.livejournal.com/img/community.gif){kind=small} cartonage,@ 2006-07-12 15:21:00 |
|
| Entry tags: | css guides, style: flexible squares |
CSS Guide » Flexible Squares Part I (A - D)
This took ages, so I hope that it is useful for at least a few people. Originally I also wanted to do this for Smooth Sailing, but now I'm not so sure anymore. *frowns*
Part II and III will be up in a second.
Flexible Squares CSS Guide - Part I (A - D)
This is a guide on all the classes you can find in the original css file for Flexible Squares and a few additional useful ones.
Blame me for all errors, mistakes and missing classes and please comment! Comment if you think something doesn't work the way it should, if image links are wrong, if you stumble across a css class you can't find in here and so on. Of course comments just to say that this helps would be greatly appreciated as well because this has taken ages to complete. =)
Notes
1.) To customize the Flexible Squares stylesheet you first need said stylesheet, logically :P- Download the original stylesheet: CLICK.
- Download a slightly edited version that has the css classes sorted a bit clearer: CLICK.November.
2.) "Install" the css file:
- Upload your edited css file to your own server or www.ripway.com
- Go here and choose Stylesystem 2, then here and choose "Flexible Squares" from the drop down menu.
- Go here, click on "Custom CSS", set "Use layout's stylesheet(s) when including custom external stylesheet" to "no", "Use external stylesheets" to "yes" and add the url to your stylesheet in the blank box after "Custom external stylesheet URL".
3.) In the table below, the element in question is always marked in orange in the accompanying picture
4.) Classes in orange font only affect the comments pages and are therefore not relevant if you're customizing a layout for a free account.
5.) The * after a definition mean that it is not part of the original css file but that you can use it for further customization.
6.) What do the signs # and . mean?
- # indicates that you're dealing with an id. An id is only used once in every page, it is something unique. For example, #header only exists once and therefore is defined through an id.
- . marks a class. A class is a css definition that is used multiple times on a page, for example .entry, because it applies to every entry and that could be any number between 1 and 20.
---> Basically, if it's a class or an id doesn't matter to you, you just need to pay attention to use the right sign.
| a Defines: The look of a link Location: Everywhere |
|
| a:hover Defines: The look of a link when the mouse hovers over it Location: Everywhere |
|
| blockquote Defines: The look of a quote Location: In your entry text This is a much underrated class, you can do loads with it! If you want to cite something, just put <blockquote>Text of your quote</blockquote> into your entry text, and if it's defined it can look quite interesting! The code I used here was this:
blockquote {
font-family:"trebuchet ms"; background-color:#ecf0f6; padding:5px; border:1px dashed; color:#919bad; } |
|
| body Defines: The basic look of your whole page, background, fonts.... I just added a background color, a background image and increased the space between the top of the window and the beginning of the actual layout to 100px.
body {
background-color: #e8f6f7; background-image:url(http://private.lass background-repeat:repeat-x; text-align: right; color: #000000; font-family: "Verdana", sans-serif; font-size: 11px; margin: 100px 0 120px 0; } |
|
| .box Defines: The look of the whole part of the page that contains the comments Location: On the comments pages, logically According to afuna sometimes the css code contains clearing, like:
.box {
clear:left
}
Watch out for this and do not touch it! |
|
| code Defines: The look of the html or css code you put between <*code> and </code> Location: In your entry text This is usually used when you want to present a html or css code to your friends list, and wouldn't it be nice if it turns up different from the entry text? I used this here:
code { background-color:
#e8f6f7; display:block; color: #000000; color:#006e76; padding:5px; border:1px dashed; } |
|
| .commentbox Defines: The basic look of each separate comment (you can add borders, background colors, margins,paddings ....) Location: On the comments pages |
|
| .commentboxpartial Defines:The look of that little thingie that appears with the subject and the poster of the comment but doesn't display the full comment, instead you have to click on it (yes, I'm having a hard time explaining this :P) Location: On the comments pages |
|
| .commentinfo Defines:I have no clue what this is, if anyone has, please leave a comment! =) Location: On the comments pages, I think |
|
| commentlinks* Defines: The look of the links in the comment line at the bottom of the comments Location: Comment pages ETA: woops, this is not a public class, it was additionally added in the layout of s2flexisquares. Aplogies if you were trying to customize this and it didn't work. |
|
| .commentreply Defines:The look of the actual comment text. You can change font size, font color and so on and it won't affect the subject of the comment or the links at the bottom. Location: On the comments pages |
|
| .comments Defines: The look of the line/bar with the comment, mem, read links. Attention! This does not define the color of those links, they are defined through div.comments a Location: On the bottom of each entry |
|
| #content Defines: The very basic look of your layout. The width, the background color, where on the page the layout is located (left, right, middle)... Location: It's around everything, if you change your journal width in the customization wizard, this is the element which's size you change. This is also where you would define a background image for your whole layout. For example, in this layout there's this background image added to the content, the code looks like this:
#content {
width: 555px; background-image:url(http://h1.ripway.co margin-left: auto; margin-right: auto; margin-top:0px; } |
|
| .clear Defines: This is an empty element that is used to create distance between other elements. It also ends floats and is very important if you don't want your layout to get messed up, so better don't touch this. Location: Entries and Sidebar mostly |
|
| .clearfoot Defines: See above. If you delete this, you will have funny experiences with a missing content background...just don't touch it ;) Location: At the bottom of your layout |
|
| .currents Defines:This affects the current mood, current music and current location under your entry text. You can add a background color, change the text, make a border above them so they are separated from the entry text.... Location: At the bottom of your entry |
|
| .currents strong* Defines: This is a little special class of mine. I HATE that Current Mood, Current Music and so on are bold by default, so I like to change them back to normal this way:
.currents strong{
font-weight:normal; } |
|
| .currentmood, .currentmusic, .currentlocation Defines: These are the separate classes for the currents, so if you want to change the look of one of them but don't want it to affect the other two, you can do it here. E.g., in the third example on the image, I've hidden the current location like this:
.currentlocation {
display:none; } |
|
| .date Defines: The color, font, background color/image of the date. Location: At the top of each entry, does NOT affect dates in comments Attention: On the page where you comment (the one with the box to enter your comment without the other comments that have already been made) there isn't a .date or .subject, only .datesubject. (Thanks to afuna)
|
 |
| .datesubject Defines: The color, font, background color/image for date AND subject. If you want them to look different from each other, use .date and .subject. Location: At the top of each entry, does NOT affect dates and subjects in comments An example of how this can be used together with .date and subject: In this layout I defined a background image for .datesubject (this) and then defined different font sizes and colors for the date with .date and for the subject with .subject. |
|
| .datesubjectcomment Defines: The color, font, background color/image for date AND subject for each comment. Location: Comments pages |
|
| .datesubjectcomment a:link, .datesubjectcomment a:visited, .datesubjectcomment a:hover Defines: The color of the username displayed on top of each entry and the color of it on mouse hover. Location: Comments pages |
 |
| dd* Defines: The look of the listed subjects and dates Location: On the month pages in the archive |
|
| .defaultuserpic Defines: The look of the box that contains your default userpic Location: At the top of the sidebar Attention! If you add a border to this it won't give you a border around the actual icon, but around the box that contains it. Use .defaultuserpic img to add borders to the image. (see below) I often hide this whole thing with:
.defaultuserpic {
display:none; } |
 |
| .defaultuserpic img* Defines: The look of the actual default userpic (add borders, padding...) Location: At the top of the sidebar In this example, I added a background color, then 5px padding to make that background color visible, and a white border to the image:
.defaultuserpic img{
padding:5px; background-color:#919bad; border:2px solid #ffffff; } |
|
| div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited Defines: The look of the links in header and footer Location: Everywhere where header and footer appear Of course you can separate them and define different colors for the links in header and footer. =) |
|
| div#header a:hover, div#footer a:hover Defines: The look of the links in header and footer when the mouse hovers over them Location: Everywhere where header and footer appear |
|
| div#sidebar a, div#sidebar a:link, div#sidebar a:visited
Defines: The look of the links in the sidebar when the mouse hovers over them (affects all links, in the user link box and the little calendar) Location: The sidebar |
|
| div#sidebar a:hover
Defines: The look of the links in the sidebar (affects all links, in the user link box and the little calendar) Location: The sidebar |
|
| div.comments a, div.comments a:link, div.comments a:visited Defines: The look of the links in the comments line ("Read", "comment" and so on) Location: At the bottom of every entry |
|
| div.comments a:hover Defines: The look of the links in the comments line when the mouse hovers over them ("Read", "comment" and so on) Location: At the bottom of every entry |
|
| dl* Defines: The look of everything that is written on the month pages in the archive. You could change fonts, colors and so on here. If you want to change only the look of the day date (24th, 25th and so on), use dt. Location: Month pages in the archive |
|
| dt* Defines: The look of the day date (change size here for example) Location: Month pages in the archive |
|
