Making A Layout: Customizing the Sidebar

May. 15th, 2015 12:00 pm
ext_194372: TVD: Caroline Close Up (Default)
[identity profile] sireesanwar.livejournal.com posting in [community profile] layoutlounge
Account Status: All
Theme: Flexible Squares
Actions: Creating Your Own Layout: Customizing the Sidebar
Links: Code Index

Now that we've picked how wide our content is, how wide the sidebar and the posts are, what our header image & header navbar look like; it is time to make that sidebar look like something!


The coding I would like to work with is from my layout Oxygen.


Let's see what we have so far because we're going to be adding to that Sidebar section we created a bit back....


This is what I'm looking for. I'm going to continue adding coding in this section above our Misc section.
/*-------------Sidebar--------------*/
#sidebar {
 background-color: #ffffff;
 padding: 10px;
 font-family: "Abel", arial, georgia;
 font-size: 14px;
 color: #000000;
 width: 260px;
 float: left;
 text-align: right;
 text-transform: none;
 }


I like to start off with the sbarbody coding. I have the sbarbody2 first because I tend to customize this more but it doesn't matter which order you have them in.

.sbarbody is for your components except the free text/blurb. So it will apply to calendar, linklist, page summery, tags, and userpic. That doesn't seem that convienent does it. Good thing we can do all of those components individually which is while you'll notice there isn't much to this bit of coding.

  1. margin: I have this set to zero because in this instance it is better to work off the padding for a little wiggle room around our components.

  2. padding: I'm looking at this and can't believe I did it. I probably was in a rush. I mean technically you can do this but it isn't clean coding. What it should say is padding: 5px 5px 10px 5px; but I've just added an extra 5px for the bottom of the components.

.sbarbody2 is just for the free text/blurb. You'll notice I have an additional coding section which is exactly the say and therefor nested with it called li.sbaritem2. This is for the free text that can be created if you have a PAID account. So it is a precaution that you don't have to keep but should you end up with a paid account or customize a layer in your paid account this is what you should add to this section just to make sure this coding will apply to your PAID free blurb text sections.
This is our free text/blurb component on this layout. Let's style this:

  1. padding: Just like the other components I want a 5px padding around this component. I'm going to forgo the extra 5 at the bottom.

  2. margin: Sometimes you'll notice that this component doesn't sit the same way as the others so here I have a margin to the left which will move it into place with a little margin to help it out.

  3. text-transform: I'm actually doing that with this line. In the sidebar section I have the transform set to none. But here I've decided I want all the text in my blurb to be lowercase.

  4. text-align: Same with the alignment. My sidebar has everything right aligned but I wanted to change it up in the blurd so I went with left.

If you save the layout now, you'll see the sidebar is coming along but a lot of it still looks funny. We definitely need to keep adding to the coding.


ul.sbarlist is all about the lists. If you had saved you were seeing dots or numbers but your links or tags. Anything that is essentially a list like that will have looked off but this is going to style those.

  1. list-style-type: This is important here because it gets ride of the numbers or dots from the bulleted lists.

  2. text-align: I have this as left as an almost default but I don't actually need it because we will be further customizing each section.

li.sbaritem looks a bit familiar (I hope). Back when we were styling the sbarbody2 we had a li.sbaritem2 attached to that coding because we were styling them together. You can style this code with sbarbody (.sbarbody, li.sbaritem {) but I like to add a few customizations here so I separate them out.

  1. position: we have it set to inline here so that the components on the sidebar to be inline with what we are creating.

  2. list-style-type: Again important so there aren't numbers by each of our components.

li.sbaritem a is essentially the links on all the components. You can style this or not. Really we are going to style all the components separately so you don't actually have to style this much. A lot of these lines of code might be something you want to customize in further detail for the linklist, tagslist, calendar, and page summary. It is possible though you might forget so you can do a "default" styling for your sidebar links here. This way if it isn't the same as your sidebar you have some customizations you don't have to do to the linklist, tagslist, calendar, and page summary.

  1. color: This is one I customize myself in the other components but you can customize it like I did here.

  2. display: We set this to inline just to prevent any of our links from going astray and ending up on another line.

  3. font-weight: This is not part of the sidebar coding and won't come up again so it are telling our sidebar components we want our links to be "lighter". For more customizing of font-weight see the Code Index (link at the top and on sidebar).

  4. padding and margin: These I've put here to prevent extra spacing.

  5. text-align: Again this is different than sidebar.

li.sbaritem a:hover is just changing the color when we hover over a link. All we need here is the color unless we want to give the link more letter-spacing or make it bold or ltalics.

li.sbartitle is an important section because it is the title of all her sidebar components. This is where you make TAGS above the taglist look nice.

  1. background-color: you'll notice this isn't a normal (#FFFFFF) color code. Instead this is the RGB code meaning white. The advantage to this is that I can change the 0.5 to more or less (0.3 or 0.9). This will make it semi-transparent with 0.9 being nearly solid. This seems to be leftover from another layout which happens but if we changed the background color of the sidebar then these would have a semi-transparent background of white.

  2. list-style: Again we don't want to see the bullet points.

  3. color, text-align, letter-spacing, font-family, font-size, text-transform: All of these are to customize the text as you've been learning. Some are the same as sidebar so they are redundant but some like letter-spacing are customized.

  4. margin: This time I actually want to use the margin to make some extra space. I want to get us a little room above the Sidebar Titles and then I'm moving them 12px towards the entries which is when they are -12. +12 would move them away. I want them close to their component so 0 on the bottom but a little indent to the left of 8. Give it a nice look.

I would save this because you've done a lot. But remember there is more. *sigh* Coding is time consumming.


Let's start with the Link List on our sidebar. This is when we start to actually customize the different components that make up the sidebar (Link List, Tags, Page Summary, Free Text/Blurb, Calendar, Default Userpic. I've crossed out Free Text/Blurb because we customized it with .sbarbody2.

#sidebar_linklist: This is where we want to style exactly what we want for the Link List. Do we want the font the same as the sidebar? I'm going with yes so we don't have to code that in but you can add those font codes at any time.

  1. list-style-type: again we don't want bullet points in our list.

  2. Both the padding and the text-align I'm adding for style and importance.

  3. text-transform: This time I want the Link List to automatically be uppercase.

#sidebar_linklist li.sbaritem a: Remember how I told you that we were coding sbaritem a: was the links for all the sidebar components? Well that is why we have that li.sbaritem as part of the coding section. It is part of this element so needs this bit when we style the links.

  1. Here I've decided to add a background-color to my links which is why you see the black (actually off black) block of links in the image above.

  2. border-bottom: I wanted each block of a link to have a faint line below it to make it look like a block list. This is where this came in. Below I'll explain borders more in-depth.

  3. Again I'm just stylizing with color, font-family, font-size, font-weight and tex-align.

  4. display: This is important here. Block mean we will get this block (one right below the other) of links. You could say inline if you wanted to create something like a cloud.

  5. Again margin and padding for placement.

#sidebar_linklist li.sbaritem a:hover: To get our link list to have any hover features. In the previous coding I have the background-color as #111111 which is a dark gray (almost black) but now I've got it set to #000000 which is black. This means when we hover the background will change colors. The reason the entire colored area is changing color is because of the margin and padding in the previous bit of coding. Sometimes when the background color changes it is good for the color of the text to change as well. I have the text-align added here though it is the same. I think originally I have the links move to right align when hovered over.

Now those borders I promised. I used the border in the link coding. You write out border properties like this: border: size type color; (ie border: 1px solid #000000;) but as you might notice I did border-bottom in my coding. You can do this too which means you can do border-top, border-left and border-right as well. This is considered shorthand for the border coding.

You can also do it this way:
border-width: 1px;
border-style: solid;
border-color: #000000;

This also enables you to do this:
border-width: 1px 2px 1px 2px; (top, right, bottom, left).

And for color you can also do this:
border-color: rgb(0, 0, 0, 0.5); which is black with transparency, If you leave off the last comma and 0.5 then you just get black.

Other options for border-style are: hidden, dotteed, dashed, solid, double, groove, ridge, inset, and outset.


Now the calendar. The different components that make up the sidebar (Link List, Tags, Page Summary, Free Text/Blurb, Calendar, Default Userpic. I've crossed out the ones we've done.

#sidebar_calendar: This isn't in the coding layout but this is the base of the calendar and enables you to give an overall component stylizing.
#sidebar_calendar li.sbaritem a: Again not part of the original coding but can customize the links.
#sidebar_calendar li.sbaritem a:hover: Same as above.

Instead you see these:
td.sbarcalendar: This is because the calendar is essentially a small table and we are now styling the actual table and the days. I have them as transparent with a little padding to space them out.

td.sbarcalendarposts: This is for the "days" that have posts attached to their links and essentially customizes the links on the calendar. Looks like I gave it a background-color which is unnecessary here but I also started a border and instead went with a box-shadow. No telling what I was thinking. LOL

table.calendar: This is probably what you are thinking which is the entire table of the calendar without being the whole component. I just padded this and left it alone. Calendar is usually pretty easy.


Now the Page Summary. The different components that make up the sidebar (Link List, Tags, Page Summary, Free Text/Blurb, Calendar, Default Userpic. I've crossed out the ones we've done.

#sidebar_summary .sbarcontent: This will control the entire Summary element which is why I've giving it the background-color and a few other customizations. Here the right margin is -5px which moves it over to the right a little and on the left there is a 5px margin to move the left side over a little. This is how I'm evening things up with other sidebar components.

#sidebar_summary li.sbaritem: Just like the link list we have the li.sbaritem because it is an item on the sidebar. Here I've changed a few things like the padding and I've given it a border. But overall, the customizing it very similar to what we've been doing all along.

#sidebar_summary li.sbaritem a: Again for the links customizing we need that a added to the end. Now here there is something I should explain.

#sidebar_summary li.sbaritem a: hover: And again the hover element with customizing.


Now the Tags. The different components that make up the sidebar (Link List, Tags, Page Summary, Free Text/Blurb, Calendar, Default Userpic. I've crossed out the ones we've done. Warning the Tags are a little more complicated.

#sidebar_tags .sbarcontent: This coding is a little different and much like any of the components can be scrolled. I always use scroll for the tags because there are often just too many to have extended on your sidebar. You'll also notice that we don't have li.sbaritem but instead .sbarcontent tacked onto the end of this coding. It is sidebar content but I'm not really remembering why this one is different, just that this is how it works. When I remember I'll update this. I often have my coding on multiple lines but you technically can have it all on one long line that will word wrap.

  1. height: This is where we are setting how big we want the taglist to be before it starts scrolling.

  2. overflow-x: This is the scrollbar at the bottom which I don't want to see so I'm hiding it.

  3. overflow-y: This is the scrollbar on the right which I have set to auto. This way if you're taglist isn't 500px then it won't scroll and if it is it will.

li.tagBox a & #sidebar_tags li.sbaritem a: You'll notice I have two sets of coding for links. Sometimes I combine them so you see it as #sidebar_tags li.sbaritem a, li.tagBox a but this time I have not though the coding is identical in both. The reason behing this is that when you customize your taglist as a PAID member the #sidebar_tags li.sbaritem a ends up not working and the li.tagBox a becomes necessary. So here I'm covering both bases. So if it is listed #sidebar_tags li.sbaritem a, li.tagBox a in you PAID coding and it isn't working reverse the order (li.tagBox a, #sidebar_tags li.sbaritem a).

  1. background: You'll see I added an image which is a little gray arrow. I also added shorthand for the rest of the background coding like positiion. I also had to compensate for the image's presence with the padding.

  2. display: Again block because of the styling.

li.tagBox a:hover & #sidebar_tags li.sbaritem a:hover: Again the same reasoning as above. Covering bases. And again they can be combined.


Last but not least the Default Userpic. The different components that make up the sidebar (Link List, Tags, Page Summary, Free Text/Blurb, Calendar, Default Userpic. I've crossed out the ones we've done.

.defaultuserpic: For exactly what it says. It is going to customize this area.

  1. width & height: These are important to how big the image will be. However, if you leave them off then the image will be 100x100. But should you want them to be 90x90 you'll need this portion of the code.

  2. margin: notice in margin we have those auto settings... to center the image.

  3. Here the padding and the background-color are working together. You are seeing the padded area as the background-color.

  4. box-shadow: is to get a little shadowing behind it.

  5. I can add rounded corners which you can learn more about in the Rounded Corner Tutorial though we'll go over it a bit when we get to the other userpics.

.defaultuserpic img: This controls the image. So if we did add the rounded corners above then we'd add them here too so the image becomes rounded as well. Here I've left it in the coding with no customizations because I'm not really using it at this time but I want it there should you want to use it.

Now I highly recommend you not only save the updates you've made to your Custom Stylesheet but that you save this updated coding to a text file. If you refresh your journal it should look something like this:

You can also add it the Social Media Coding, from my tutorials over at Layout Lounge, in this section since you will be working with the sidebar.

So now here is what our coding has come to. FYI this coding is changing a bit as we go.


Any questions about this tutorial? Please Comment.

Tags:
Flat | Top-Level Comments Only

(no subject)

Date: 2015-06-26 07:15 pm (UTC)
From: [identity profile] muses-mistress.livejournal.com
Can you help me? I got this layout from a comm and I can't work out how to get rid of the gap at the top of the sidebar headings (aside from the profile one). I discovered there's div with a class named "box-after-first-widget" in there but not connected to the class is a margin that's causing the problem, but I have no way to override it... believe me, I've tried!
Any help would be brilliant.
Thanks

[livejournal.com profile] thesoulwalker

(no subject)

Date: 2015-06-26 07:49 pm (UTC)
ext_194372: TVD: Caroline Close Up (Hug: Oliver and Felicity Arrow)
From: [identity profile] sireesanwar.livejournal.com
What type of journal is this? Is it flexible squares?

(no subject)

Date: 2015-06-26 08:03 pm (UTC)
From: [identity profile] muses-mistress.livejournal.com
It's Unstyled (Expressive)

(no subject)

Date: 2015-06-26 11:32 pm (UTC)
ext_194372: TVD: Caroline Close Up (Default)
From: [identity profile] sireesanwar.livejournal.com
That is why it looked funny when I tried to upload it. Okay... one minute.

(no subject)

Date: 2015-06-26 11:52 pm (UTC)
ext_194372: TVD: Caroline Close Up (Default)
From: [identity profile] sireesanwar.livejournal.com
Okay I'm having trouble with the coding coming up on my journal without the ads on the sidebar hindering everything but have you tried this

div.typelist-widget widget { margin-top: 0px; }
div.categories-widget widget { margin-top: 0px; }
div.customtext-widge widget { margin-top: 0px; }

That didn't help... I'm really not sure because I don't know too much about Expressive.

You might ask those over at http://everything-lj.livejournal.com/.

So sorry. I mean I know how to do this for Flexible Squares but in Flexible Squares you have the ability to code the types of boxes and then the boxes individually and I'm not sure it that is true of Expressive.
Edited Date: 2015-06-27 12:14 am (UTC)

(no subject)

Date: 2015-06-27 08:56 am (UTC)
From: [identity profile] muses-mistress.livejournal.com
I gave that a try anyway and it didn't work. I'll go to everything-LJ and see what they say.

Thank you for your help.

(no subject)

Date: 2016-03-17 06:03 pm (UTC)
crystilia_ixora: (Default)
From: [personal profile] crystilia_ixora
hi!!

I do not know where to look in this journal section, I want to ask... how to add the live traffic like FEEDJIT or Flag Counter to livejournal... at the sidebar?


Thanks

(no subject)

Date: 2016-03-18 10:55 pm (UTC)
ext_194372: TVD: Caroline Close Up (Default)
From: [identity profile] sireesanwar.livejournal.com
I would add the coding to the free blurb/text in the customizations area of LJ.

(no subject)

Date: 2016-03-19 05:04 am (UTC)
crystilia_ixora: (Default)
From: [personal profile] crystilia_ixora
Thank you very much :D
Flat | Top-Level Comments Only

About

Welcome to the Lounge. Our tutorials are saved here. These are currently all for LJ and Flexible Squares. Should you have general questions about us check out our FAQ. I do NOT customize layouts for individuals.


    Layout Change Quick Guide
If you like Flexible Squares, I have tons of layouts for you, and still create them.

I've been creating Layouts for DW's Bannering. Here's how to use them:
1. Go to Transmogrified Layouts.
2. Choose Basic.
3. Go to Custom CSS.
4. Make sure all boxes are unchecked
5. Copy Coding to Stylesheet Box.
6. Make sure to update with your own images/image urls. Imgur images are okay to be used.
7.Click Save.


Tips Welcome:

You can also find layout_lounge at LiveJournal.

Links

Tags

Summary

April 2025

S M T W T F S
  1 2345
6789101112
1314 1516171819
2021 2223242526
2728 2930   
Top of page