How to Customize Soho Blogger Theme ?

Soho Blogger Theme Customization

Soho Blogger Theme is a new addition to Blogger’s official themes for blogger.com. It is simple, clean and efficient gallery built to showcase your latest photos, portfolio or designs. If you’re looking to start a portfolio blog on Blogger and looking for a much cleaner and professional gallery theme then Soho is just right for you. 

اردو میں پڑھنے اور مزید معلومات کے لیے فری سبسکرائیب کریں۔

Subscribe us and Get updates in your email box

Watch All about Live on TV

Blogger's new themes are responsive and you get a very little option to change the set width of the main area. The theme designer doesn't even an option to adjust the widths either. 

We will use custom CSS codes to customize the width of the Soho theme's blog area to stretch more than the default setting.

Currently the largest width Soho theme stretches is 1000px, if the screen is more than 640px the blog post area as well as header & footer will stretch as much as 1000px. The width of the parts of the theme is dependent on the available screen width, this is the nature of response web design. Nowadays everybody has screens larger than 1000px in width so it is a good idea to stretch the blog wider on larger screens than to leave empty areas.

CSS Snippet:
Following is what we need, you don't have to customize it, it works well with existing standard screen widths and stretches the areas as required. Copy the CSS code.

/* For screen widths less than 1280px */ /* For screen widths less than 1280px */ @media screen and (min-width:1280px) { .centered-bottom, .centered-top { width: 1180px; } body.item-view .widget.Blog .post { width: 800px; } } /* For screen widths less than 1400px */ @media screen and (min-width:1400px) { .centered-bottom, .centered-top { width: 1300px; } body.item-view .widget.Blog .post { width: 1060px; } }
After that You can customize the values according to your needs if you know what you are doing else it is suggested you post a comment down below explaining how you want it to be different for your use so that we can help.

Applying the CSS:

1. Open your Blogger Dashboard and choose the blog
2. Go to the Theme section
3. click on Customize
4. Navigate to Advanced  Add CSS
5. In the Add custom CSS text field enter the copied CSS code from the previous section. It should look like this

6. Click on Apply to Blog to save the changes and go to the blog to see it live. 

That's it. Once the CSS is applied you will start seeing the customized width live on the blog. 

Subscribe us to Get More Posts