widgets don't fit the sidebar

[bassjobsen]

See also http://skematiktheme.com/forums/topic/changing-the-background-color-of-the-content-containerbody/#post-3080

[bassjobsen]

This issue has to to with the number of columns and Bootstrap's Grid. See also: http://getbootstrap.com/css/#grid-options. By default the layouts leftsidebar and rightsidebar use 3 columns for the sidebar and 9 for the content.
On the large grid this give 95 x 3 = 285 width for the sidebar and on the medium grid 78 x 3 = 234 pixels, etc.

Changing the ratio content / sidebar become complex cause the relation with the default grid setting and grid float breaking point.

Adding this setting to the customizer will also give a complex view.

For now i only create some new theme mods:

content_span_xs, content_span_sm,content_span_md, content_span_lg
right_sidebar_xs, right_sidebar_sm,right_sidebar_md, right_sidebar_lg
left_sidebar_xs, left_sidebar_sm,left_sidebar_md, left_sidebar_lg

You can use this mods to set the column span of the content and sidebar, this will only effect the layouts with a left or right sidebar. Mods won't effect the three column layout for now.

Other notes

If you set left_sidebar_{X} or right_sidebar_{X} you also will have to set content_span_{X} and make sure
left_sidebar_{X} + content_span_{X} = 12 or / and right_sidebar_{X} + content_span_{X} = 12.
You don't have to set all mods, set only the ones your need.

Set the mods in your functions.php by adding for example:

set_theme_mod('content_span_sm',7);
set_theme_mod('content_span_md',8);
set_theme_mod('content_span_lg',8);
set_theme_mod('right_sidebar_sm',5);
set_theme_mod('right_sidebar_md',4);
set_theme_mod('right_sidebar_lg',4);

Note in fact you will have to run your site only once with this setting cause the theme mods are saved in the database. As a result, you will also have to remove them by adding (and run at least once):

remove_theme_mod('content_span_sm');
remove_theme_mod('content_span_md');
remove_theme_mod('content_span_lg');
remove_theme_mod('right_sidebar_sm');
remove_theme_mod('right_sidebar_md');
remove_theme_mod('right_sidebar_lg');

[ghost]

So if I use those mods, how the future thème updates will affect them ?
As I always backup my installation it's not a tough problem if I have to do a new mod to have compatibility or if it ovverides them, and having to set columns in new theme interface.
(I surely prefer the update to keep my settings, but no matter)
;)

[ghost]

So I read you worry about overloading visually the customizer interface.
Perhaps you could group all grids option (defaut grid, container, breakpoint) in a single "Grid" item and create a "Layout" item. Or using the theme options...
I don't know about technical restrictions...

[bassjobsen]

No problem, they are saved in the database, theme update overwrite them.
Yes options should be reorganized. Your suggestions seems good.

Question is, grid settings are layout (visible) -> customizer, are theme settings -> theme options? I doubt about that.

Fact, there are many options now, i havn't spent enough time for documentation.

1. the theme_mods (as discussed here, temporarily! )
2. predefined settings, useful for child theming ( optional disable the customizer)
   example in function.php of your child theme:

     function set_defaultoptions() {
/* navbar */
if(!defined('navbar_background_color'))define('navbar_background_color','white');
    }

3. customizer
4. LESS via (assets)/less/custom.less or LESS editor / compiler:
   - accepts CSS / LESS
   - can redefine all Bootstrap's variables, see: http://getbootstrap.com/customize/
   - make use of Bootstrap's and built-in mixins

example redefine bootstrap's variable:

@text-color: red;

example mixins:

/*.btn-custom {
  .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
}*/
// define a custom button:
.btn-custom {
  .button-variant(white; red; blue);
}
// overwrite JBST's default button style:
.btn-success {
  .button-variant(purple; yellow; green);
}

In the above 2(predefined) is overruled by 3(customizer), and 4 overrule 2 and 3 in most cases.

NOTE LESS can change the grid, but the side bar wide (number of columns) can't be set by less

[ghost]

It's better if number of columns are defined by theme option or customizer : non-coding users can adjust this visually.
And even for me it's time saving when I install the theme and establish my workflow. I think LESS edition is for overrule and customizer for common layout.
Other point of view : as a webdesigner, I tweak heavily some Bootstrap's defaults. As an exemple The logo position is often non convenient to me. I try the much to keep Bootrstrap structure, but I can totally rewrite the navbar markup. Then I need LESS edition.
So the idea is to build a base with the customizer (and theme option), then CSS/LESS editing for advanced modifications. What do you think ?

[bassjobsen]

@Linearis yes, thanks. Your workflow fits my idea. We use the same steps at Jamedo websites:

1. customizer
2. change with css / less only
3. edit function.php using hooks and action filters
4. add an custom post type
5. write a extension / plugin

I wrote a workflow document for child theming, if you are interested to read it, please send me a email bass@w3masters.nl