HOW TO PUT A LAYOUT UP:
Jul. 29th, 2013 01:25 pm![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
ashwicktutorialThis tutorial will teach you how to put up a layout on your site and even some manipulations of the site.
Step One:
Go to 'organize' then 'select style'. It should look like [this]
Step Two:
In the search box, you will choose whatever layout type the layout code suggests. For this tutorial, we are going to use [this] layout. Read the directions on the layout, they will be helpful and make your layout work best. Layouts require a certain 'style layout'. This one suggests using 'tabula rasa'. I picked tabula rasa -- plain.
NOTE: It's IMPORTANT to choose your layout style before working on your layout and settings because they will erase when you choose a new layout style. The best bet, if you are putting up a new layout, is to keep you old layout code open and your custom text open as well so that you can copy paste these when and if you lose them.
Step Three:
Now, look at the 'current theme section' (it's the pink box). Select 'customize your theme'. You can also go to 'organize' ... 'customize style'. It should look like [this]
Step Four:
Click on 'Custom CSS'. In the large white box labeled 'use embedded CSS' paste in the given code. Scroll down and save.
Step Five:
Before you go to look at your new layout, at the bottom of the screen after you save. You will see [this]. The directions to the layout say to choose '2 columns (sidebar on the right)'. Click 'apply page setup' and it should look like [this]
Step Six:
Scroll back up and on the left side, you will choose 'modules'. Under the 'Main Module Section'. Uncheck everything and then click 'custom text' [This] is what it should look like. I highlighted the spot that should be checked. Don't forget to save changes!
Step Seven:
Scrolling back up, click 'text'. It is just under 'module'. You may change the 'custom text heading'. Personally, I like to delete it. Now, in the 'text for the 'custom text' box. You can put in a picture or whatever you choose. Save Changes when you're finished.
Step Eight:
After you do all of that, go to presentation. Under 'additional options' you will see 'Set the width of a single sidebar. Ensure that the value is given in em or px.' and 'For a setup of two sidebars on the side, set the width to twice the value of a single sidebar (also in em or px). ' I forget the values they had but it was something like 15em and 30em. I changed them to pixels. I changed them to [this], but you will want to play around to make the picture center on your module. On other layouts I put 200px where I have 50px for this layout. SAVE CHANGES.
Step Nine:
Enjoy your layout! I hope this was helpful. You can go back to the Custom CSS and change colors and such, I'm sure. CSS is basically html.. so the same color codes apply.
Step One:
Go to 'organize' then 'select style'. It should look like [this]
Step Two:
In the search box, you will choose whatever layout type the layout code suggests. For this tutorial, we are going to use [this] layout. Read the directions on the layout, they will be helpful and make your layout work best. Layouts require a certain 'style layout'. This one suggests using 'tabula rasa'. I picked tabula rasa -- plain.
NOTE: It's IMPORTANT to choose your layout style before working on your layout and settings because they will erase when you choose a new layout style. The best bet, if you are putting up a new layout, is to keep you old layout code open and your custom text open as well so that you can copy paste these when and if you lose them.
Step Three:
Now, look at the 'current theme section' (it's the pink box). Select 'customize your theme'. You can also go to 'organize' ... 'customize style'. It should look like [this]
Step Four:
Click on 'Custom CSS'. In the large white box labeled 'use embedded CSS' paste in the given code. Scroll down and save.
Step Five:
Before you go to look at your new layout, at the bottom of the screen after you save. You will see [this]. The directions to the layout say to choose '2 columns (sidebar on the right)'. Click 'apply page setup' and it should look like [this]
Step Six:
Scroll back up and on the left side, you will choose 'modules'. Under the 'Main Module Section'. Uncheck everything and then click 'custom text' [This] is what it should look like. I highlighted the spot that should be checked. Don't forget to save changes!
Step Seven:
Scrolling back up, click 'text'. It is just under 'module'. You may change the 'custom text heading'. Personally, I like to delete it. Now, in the 'text for the 'custom text' box. You can put in a picture or whatever you choose. Save Changes when you're finished.
Step Eight:
After you do all of that, go to presentation. Under 'additional options' you will see 'Set the width of a single sidebar. Ensure that the value is given in em or px.' and 'For a setup of two sidebars on the side, set the width to twice the value of a single sidebar (also in em or px). ' I forget the values they had but it was something like 15em and 30em. I changed them to pixels. I changed them to [this], but you will want to play around to make the picture center on your module. On other layouts I put 200px where I have 50px for this layout. SAVE CHANGES.
Step Nine:
Enjoy your layout! I hope this was helpful. You can go back to the Custom CSS and change colors and such, I'm sure. CSS is basically html.. so the same color codes apply.
