Changing a Layout with a sidebar to a no sidebar layout...

[sireesanwar.livejournal.com]

Account Status: Free
Actions: Removing the Sidebar from your journal and changing a layout coding to make it a no sidebar layout
Theme: Flexible Squares (not sure if it works with other themes)

Directions:
1. Go to Select Journal Style.

2. Make sure you are using the right theme. We will work in Flexible Squares. So make sure your Current Theme is a Flexible Squares Theme. (I generally make all my layouts in the Autumn Layout.)

3. See the link under Customize your theme? Click Change page setup.

4. Choose the no sidebar option.

5. Then click the Customize theme button to the right.

6. You want to go to Custom CSS

6. On the Custom CSS page for Flexible Squares Themes you will be asked 3 questions. Mark them all NO. Then you are ready to insert the coding for one of Layout Lounge's Flexible Square Layouts. I would Save Changes now just to be safe.

7. You can then go back into this coding and make changes, such as, the urls for images you wish to use. Theme Layout for Beginners can help you with that.

8. The next step is finding the different parts of the coding to change the layouts structure. So what is likely happening now if you look at your journal is that you have no sidebar but the journal entries are off to one side a bit. You need to find the #sidebar portion of the coding.

#sidebar {
width: 260px;
margin-right: -50px;
margin-top: 150px;
background-color: #ffffff;
color: #999999;
font-family: open sans condensed, arial, georgia;
font-size: 12px;
font-weight: normal;
text-transform: lowercase;
float: right;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-khtml-border-radius: 20px;
-webkit-box-shadow: #b8b8b8 0 0 5px;
       -moz-box-shadow: #b8b8b8 0 0 5px;
        -ms-box-shadow: #b8b8b8 0 0 5px;
         -o-box-shadow: #b8b8b8 0 0 5px;
            box-shadow: #b8b8b8 0 0 5px;
}

9. Change this coding by adding the line display: none;:

#sidebar {
display: none;
width: 260px;
margin-right: -50px;
margin-top: 150px;
background-color: #ffffff;
color: #999999;
font-family: open sans condensed, arial, georgia;
font-size: 12px;
font-weight: normal;
text-transform: lowercase;
float: right;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-khtml-border-radius: 20px;
-webkit-box-shadow: #b8b8b8 0 0 5px;
       -moz-box-shadow: #b8b8b8 0 0 5px;
        -ms-box-shadow: #b8b8b8 0 0 5px;
         -o-box-shadow: #b8b8b8 0 0 5px;
            box-shadow: #b8b8b8 0 0 5px;
}

You could remove all the coding and leave it as:

#sidebar { display: none; }

If you think you might change your mind and want the sidebar back; I wouldn't remove the coding. Otherwise, feel free to change it.

10. Now that you've done that you'll want to find the content, maincontent, and subcontent sections. In my coding they are all at together close to the top of the code under the GENERAL Section.

#content {
background-color: #ffffff;
width: 1000px;
margin-left: auto;
margin-right: auto;
text-align: left;
padding: 0px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-khtml-border-radius: 20px;
-webkit-box-shadow: #ffffff 0 0 20px;
-moz-box-shadow: #ffffff 0 0 20px;
-ms-box-shadow: #ffffff 0 0 20px;
-o-box-shadow: #ffffff 0 0 20px;
box-shadow: #ffffff 0 0 20px;
}

#maincontent {
width: 725px;
padding-top: 150px;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 12px;
color: #333333;
text-align: center;
}

.subcontent {
min-height: 200px;
margin: auto;
padding-top: 10px;
}

Notice that the content width is 1000px. You'll want to change the maincontent width to be the same. If the subcontent also has a width, you can remove it all together or change it to match the content and maincontent.

11. Now that you've changed that the only thing left is to make sure your comments will be the same width as the journal entries. You are looking for this coding:

.box {
padding: 5px 5px 5px 10px;
margin: 0px;
text-align: left;
clear: left;
background-color: #ffffff;
}

form div.box {
text-align: left;
background-color: #ffffff;
}

In this case there is no width issues. It will simply be adjusting itself to accommodate your changes but in some cases you'll see width coding which can be changed to match #10 or simply removed. The comment section should contain itself.

Still having issues? Please comment