Content box width

Sparkling
1
  1. How can I make content and side boxes wider and less space in between?
  2. How can I use image carousel within content box of a page? This carousel need to show different images on every page with their own set of images.
2
  1. This code will make the entire content area 100px wider. You can make it even wider if you want to.
@media (min-width: 1200px) {
    .container {
        width: 1270px;
    } 
}

Add this code to Theme Options - Other - Custom CSS.

  1. Slider that comes with theme is not meant to work that way and you will have to use some slider plugin. Any slider plugin should work with this theme. It depends on which one you like the best.
3

Thanks for the prompt answer for 1. It does work very nicely with full width page template.

If I wanted to use side bar (left) and wanted to change width of side bar and content and remove space between them what do I need to change?

for 2 I have researched and liked Tiny carousel horizontal plus.

4
  1. Code given above will work for left/right sidebar or full width page. It is general solution and applies to everything.

To change the gap between those elements there is only hacky solution which is never recommended. Bootstrap itself dictates those paddings and margins and there is no clean way to eliminate them

You can use code like this (only if you use left sidebar)

.main-content-inner.col-sm-12.col-md-8 {
    padding-left: 0;
}
.widget-area.col-sm-12.col-md-4 {
    padding-right: 0;
}

If you want to make sidebar narrower then you have to change all classes for content and sidebar from .col-md-8 to .col-md-9 and from .col-md-4 to .col-md-3. These changes should be made in header.php file and sidebar.php

5

Hi Aigars,

On header.php i change <div id="content" class="main-content-inner col-sm-12 col-md-8 pull-left"> to <div id="content" class="main-content-inner col-sm-12 col-md-9 pull-left">

and my sidebar from <div id="secondary" class="widget-area col-sm-12 col-md-4" role="complementary"> to <div id="secondary" class="widget-area col-sm-12 col-md-3" role="complementary">

but in the full width pages the sidebar area still there, with no sidebar. When i change back to col-md-8 the full width goes 100% as expected. Why? Where i change to get my full width pages 100% on col-md-9 layouts?

Thank you