Move main blog area down? & Multiple backgrounds? « Support Forum | Kriesi.at

Support Forum » Habitat

Move main blog area down? & Multiple backgrounds?

6 posts from 3 voices

Started 2 years ago by t4group
Latest reply from Dude
This topic is resolved

Tags:

t4group
Member

Hello all,

I'm using Habitat theme. I'm looking to move everything in the white middle area down so that more of the background is viewable at the top of the website. This is so I can design a nice background image as a header. So basically everything in the white blog area 'main part', menu and sidebars etc will be moved down?

Is this possible by editing the style.css ? ?

The other thing I would love to be able to do is have a different background per page/Category? Is this possible?

Thanks for any help.

Posted 2 years ago #
James Morrison
Former Team Member
Hey,

You can adjust the spacing at the top of the page by adding this to the end of style.css:
```
#wrap_all {
margin: 50px auto 0;
}
```
Adjust 50px to whatever value you need depending on the image you have as the background.

For category specific background, you can use the body class to set the background on a per page basis. If you view the source of a page for example, http://www.kriesi.at/themes/habitat/category/infos/ the body classes set are archive, category and category-infos. In this case, the category specific tag is category-infos and this CSS could be used to specify a particular background:
```
.category-infos {
background: #0000FF;
}
```
James
Posted 2 years ago #
t4group
Member

Thanks for the reply but the first one doesn't work. I added the code to the bottom of style.css and tried different px values but nothing changed on the website? Any other suggestions?

I've not tried the different backgrounds yet but I'll let you know how that one turns out.

Thanks for your help.

Posted 2 years ago #

Dude
Dude

Just change the padding value of .boxed in style.css: At the moment it looks like:

.boxed{
position: relative;
margin:0 auto;
width:1000px;
padding:15px 0;
}

Set 15px to an higer value like:

.boxed{
position: relative;
margin:0 auto;
width:1000px;
padding:50px 0;
}

Posted 2 years ago #

t4group
Member

Thanks dude! That didn't work in style.css but I realised I was using style2.css and changed that so it works perfectly now. Thanks guys!

Posted 2 years ago #
Dude
Dude

Glad that I could help you.

Posted 2 years ago #