INDEX A - D | INDEX E - R | INDEX S - Z |
.sbarbody || .sbarbody2 || .sbarcalendar || .sbarcalendarposts || .sbarheader || .sbarlist* || .separator || #sidebar || .skiplinks || .subcontent || .subject || .subject a, .subject a:link, .subject a:visited || .subject a:hover || .subtitle || table.calendar || table.yeartable || table.yeartable td.yeardate || table.yeartable td.yearday || td.yearmonth || .title || ul.navfooter || ul.navfooter li || ul.navheader || ul.navheader li || ul.sbarlist || ul.year || ul.year li || .userpic || .userpiccomment || .userpicfriends || .userpicfriends a font* |
Defines: The basic look of the contents of all your sidebar boxes except for the blurb box and the box with your default usericon in it. Location Sidebar |
![]() |
Defines: The basic look of the content of the blurb box Location Sidebar |
![]() |
Defines: The look of all the little boxes in the calendar that contain dates except for the dates on which a post has been made. Location: Sidebar |
![]() |
Defines: The look of the little boxes in the calendar on the dates posts have been made Location: Sidebar |
![]() |
Defines: Consider me clueless. I think there was once an option to define a title for your sidebar, and this is what defined it. I could be wrong though :P Location: Sidebar, I guess |
|
Defines: The look of the linklist in your sidebar Location: sidebar Attention! While this defines the look of the whole linklist, the look of the single listet items can be defined through li.sbaritem, and the look of the whole sidebarbox containing the linklist is defined through .sbarbody. |
![]() |
Defines: The look of a divider you can place between your entries Location: Between your entries A divider aka separator is usually an image, maybe a little flower, a swung line or something. You can do amazing things with them, like here for example. (wait, this is not meant to sound arrogant, I just meant that the possibilities are amazing =)). The separator is the lower end of the entry boxes, like this. |
![]() |
Defines: The look of the sidebar! NOTE: For information on how to change the width of the sidebar, check #maincontent! There are so many things you can do with your sidebar: a, Keep it the way it is and just play around with colors/borders and so on... b, hide it, like #sidebar { display:none; } #maincontent { margin-right:0px; } c, add a background image for #content that has background for both sidebar and maincontent in it like here.. d, and so on and so on...so many possibilities!! |
![]() |
Defines: The look of the words " prev | edit tags | mem | next Location: On the comments pages at the top of your entry If you want to change the color of the vertical lines, you can do so here; but the color of the actual links can only be changed through skiplinks a. |
![]() |
Defines: The look of the whole entry with subject, comments, entry text... Location: Entry pages This is very closely related to .entry and .entry_text. The first one defines the look of the entry without subject and comments, while .subcontent includes all. |
![]() |
Defines: The look of your subject line (font, color, background...) Location: In every entry at the top |
![]() |
Defines: If you use a link in your title or a username, this defines the color. (E.g. "Icons for Location: In every entry at the top |
|
Defines: The look of your subtitle (font, size, color..) Location: At the top of your layout under the title Personally, I like to either make the subtitle smaller than the title (like this), or just erase it all together by setting it to display:none; |
![]() |
Defines: The little table that contains the calendar Location: In your sidebar Attention: The look of the whole sidebarbox that contains the calendartable is defined through sbarbody and the little boxes around the dates are defined by .sbarcalendar and .sbarcalendarposts. |
![]() |
Defines: The look of a full month Location: On the archive pages |
![]() |
Defines: The look of all the little boxes that stand for a day in the calendar (define font size and so on here) Location: On the archive pages If you want to change the color of the font size for just the numbered links that lead to posts, use table.yeartable td.yeardate a |
![]() |
Defines: The look of the day boxes (Mon - Sunday) Location: On the archive pages |
![]() |
Defines: The look of "April - View Subjects" on top of the monthly calendar Location: On the archive pages Be careful not to use a fixed width that is too high here, since "April" and "View Subjects" are divided into two table cells and everything you change here doesn't affect them both together, but each on it's own. |
![]() |
Defines: The look of your journal title Location: at the top of your layout |
![]() |
Defines: This looks very much like .footer, but is a subclass of it and can come in handy when you define a background image for the footer and need to adjust "viewing most recent entries" and so on. Location: at the bottom of your layout in the footer |
![]() |
Defines:While ul.navfooter defines the look of the whole line in the footer, this can be used to define the single elements - background color, font size.... Location: at the bottom of your layout in the footer An example how you can use the footer classes together: Here, the grey boxes around the single elements were defined through ul.navfooter li, as well as font color/size/weight...while the whole line that contains the boxes is defined through ul.navfooter (see here), and the whole white area (height, padding) is defined through #footer. Like this. |
![]() |
Defines: The navigation at the top! Or more precisely, the line that contains the navigation links. Location: at the top of your layout in the header |
![]() |
Defines: The look of the single elements in the navigation at the top! Location: at the top of your layout in the header An example of how to use this with the other header classes: Click! The white region is defined through #header, the line that contains the boxes is ul.navheader (See here), and the grey boxes are defined through ul.navheader li. There is also an extra class called li.view that defines the look of only the word on which's page you're currently on. As you can see, the font color of "Recent Entries" is different from the others because we're currently on the Entry page. You could of course expand this by adding a different background color to the box or a bigger font...for more see li.view. If you want to change the color of the actual words, it is normally defined through div.header a. |
![]() |
Defines: Sub element of .sbarlist, see there for reference. Location: Sidebar |
|
Defines: The look of the line that contains the years (2005 2006..) Location: Archive pages |
![]() |
Defines: The look of the single elements in line that contains the years (2005 2006.., your place to change font, size..) Location: Archive pages |
![]() |
Defines: The look of the box around your userpics displayed on the entry and the comments pages Location: In every entry, as long as you don't hide it Be careful that this only changes the look of the box around the picture, so if you want to add a border to the usericon itself, you will need to use .userpic img. And example: You'd like a white box around your userpics and in that box a grey border around the icon. (Like this). The codes I used look like this: .userpic { .userpic img { border:5px solid #e6e5e5; } I added padding to the box, a 1px wide dashed border and white background color, then added the grey border to the icon with .userpic img. ATTENTION: If you are using Flexible Squares in a community, the look of the userpic box on the entry page is defined through .userpicfriends.(Thanks to |
![]() |
Defines: The look of the box that contains the userpic of the people that comment Location: comments pages Again, if you want a border around the icon itself, use userpiccomment img |
![]() |
Defines: The look of the box around the icons on your friends list Location: Friend's Entry pages ATTENTION! The background color of the box is only changeable with an !important tag: .userpicfriends { background-color:#ffae02 !important; } Replace the color with whatever you want, but the !important needs to be there or the code will not apply. However, if you redefine the color using this here, you will loose all your friends colors you may have defined through the customization wizard. So, if you want both, change this here through the wizard as well. (thanks to Attention: If you're using FS in a community, this here defines also the look of the boxes around the userpics on the entry page. |
![]() |
Defines: The look of the usernames under the usericons (change color, size and so on here) Location: Friend's Entry pages If you want to change the color/look of the usernames when the mouse hovers over them, use userpicfriends a:hover font |
![]() |