How to make a theme wider?

Permalink
I recently bought a theme I really like, except I'd like it to be a bit wider.

I'm assuming if you know how to do this it would be pretty simple, like changing some CSS or HTML5 code from say 800 to 850 or whatever?

I have no idea which file to start looking, I have this theme on a test site so I can play around with it without worrying about screwing anything important up.

Can someone point me in the right direction, or is what I'm asking actually a really difficult thing to change?

dibbc
 
hawkagent replied on at Permalink Reply
This depends on how the theme is coded, but you can try this.

With Chrome Developers tool using the Select Element tool, try looking for the container of your width restricted content. This is the most outer element with this restricted width. It's usually a div with some kind of id (for example <div id='page_container'> ... </div>).

This width has been set in your css file, once you found your container, in the css file look for something like
#page_container{
    width: 800px;
}

Change it to your desires. Though when elements inside this container are also pixel restricted, you have to adjust that as well.
dibbc replied on at Permalink Reply
dibbc
I apologize for the wall of text below, this came from the file "ccm.default.theme.css"

I first looked in a file called "ccm.base.css" because the chrome tool you mentioned seemed to be pointing to that one, but that one didn't have any width variables in it that looked correct.

Looking at this, I see several width statements, but I may be in over my head trying to change them and have it work:

.clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;content:""}.clearfix:after{clear:both}.ccm-ui .hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.ccm-ui .input-block-level{display:block;width:100%;min-height:28px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.row{margin-left:-20px;*zoom:1}.row:before,.row:after{display:table;content:""}.row:after{clear:both}[class*="span"]{float:left;margin-left:20px}.container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:940px}.span12{width:940px}.span11{width:860px}.span10{width:780px}.span9{width:700px}.span8{width:620px}.span7{width:540px}.span6{width:460px}.span5{width:380px}.span4{width:300px}.span3{width:220px}.span2{width:140px}.span1{width:60px}.offset12{margin-left:980px}.offset11{margin-left:900px}.offset10{margin-left:820px}.offset9{margin-left:740px}.offset8{margin-left:660px}.offset7{margin-left:580px}.offset6{margin-left:500px}.offset5{margin-left:420px}.offset4{margin-left:340px}.offset3{margin-left:260px}.offset2{margin-left:180px}.offset1{margin-left:100px}.row-fluid{width:100%;*zoom:1}.row-fluid:before,.row-fluid:after{display:table;content:""}.row-fluid:after{clear:both}.row-fluid [class*="span"]{display:block;width:100%;min-height:28px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;float:left;margin-left:2.127659574%;*margin-left:2.0744680846382977%}.row-fluid [class*="span"]:first-child{margin-left:0}.row-fluid .span12{width:99.99999998999999%;*width:99.94680850063828%}.row-fluid .span11{width:91.489361693%;*width:91.4361702036383%}.row-fluid .span10{width:82.97872339599999%;*width:82.92553190663828%}.row-fluid .span9{width:74.468085099%;*width:74.4148936096383%}.row-fluid .span8{width:65.95744680199999%;*width:65.90425531263828%}.row-fluid .span7{width:57.446808505%;*width:57.3936170156383%}.row-fluid .span6{width:48.93617020799999%;*width:48.88297871863829%}.row-fluid .span5{width:40.425531911%;*width:40.3723404216383%}.row-fluid .span4{width:31.914893614%;*width:31.8617021246383%}.row-fluid .span3{width:23.404255317%;*width:23.3510638276383%}.row-fluid .span2{width:14.89361702%;*width:14.8404255306383%}.row-fluid .span1{width:6.382978723%;*width:6.329787233638298%}.container{margin-right:auto;margin-left:auto;*zoom:1}.container:before,.container:after{display:table;content:""}.container:after{clear:both}.container-fluid{padding-right:20px;padding-left:20px;*zoom:1}.container-fluid:before,.container-fluid:after{display:table;content:""}.container-fluid:after{clear:both}body{padding:0;margin:0;background-color:#fff;line-height:24px}body,div,td,input{font-family:"Helvetica Neue",Arial,Helvetica,sans-serif}h1{color:#888;margin:0 0 30px 0;border-bottom:1px dotted #888;padding-bottom:10px;font-size:32px}h2{color:#303030;margin:0 0 10px 0;font-size:18px}div#ccm-logo{border-top:3px solid #222;background:url(../images/bg_header.png) repeat-x}div#ccm-theme-wrapper{width:640px;margin:0 auto 0 auto;background:#fff;padding:20px}div.container{padding-top:50px}input.ccm-input-openid{background:#fff url(../images/icons/openid.gif) no-repeat scroll 2px 6px;width:284px;font-size:18px;color:#444;padding:4px 4px 4px 20px!important}
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi dibbc,

What is the theme?

What grid framework does the theme use?
dibbc replied on at Permalink Reply
dibbc
MrKDilkington replied on at Permalink Reply
MrKDilkington
The Corporate theme demo site is not available.

What is the link to your test site that uses this theme?
dibbc replied on at Permalink Reply
dibbc
This is my site with the theme:

http://myhax0r.net/

(this is just one of my "play" domains, hence the stupid name. I'm working on it here and then will move it over to therapyplayground.com once it's completed)
MrKDilkington replied on at Permalink Reply
MrKDilkington
The Corporate theme is using a fairly old version of Bootstrap that I am not familiar with.

I believe these styles control the desktop width.
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
    width: 940px;
}

packages/theme_corporate/themes/theme_corporate/css/bootstrap.css
dibbc replied on at Permalink Reply
dibbc
Thanks, appreciate it.