1

God Another Question regarding css the test site again was http://testpress.dramend.com/amend-2/, I currently have this main content as a fullwidth with white background:

enter image description here

But what I want to achieve was this kind of boxed layout with the same white background but it needs to be boxed like this sample:

enter image description here

I'm using wordpress optimized press latest versiom, it doesnt have any options of changing a section to boxed or fullwidth, There's an option to changed the background to an image but it would look like this once I've set it to the my background image:

enter image description here

Can I achieved the boxed layout on the second image just using plain css for the main content background?

HTML

//main container    
<div style="background:#ffffff; class="row one-column cf ui-sortable" id="le_body_row_4" >
   <div class="fixed-width">
      <div class="one-column column cols" id="le_body_row_4_col_1">
       // image html comes here
       .. some more html
      </div>
   </div>
</div>

Thanks

Raunak Kathuria
  • 3,185
  • 1
  • 18
  • 27
Dek Dek
  • 101
  • 1
  • 2
  • 10
  • show us your html, what you tried with css and a playground such as jsfiddle.net or jsbin.com . – Ravimallya Jan 09 '14 at 09:30
  • kinda new with it. Should I paste all js, css and html on boxes provided on jsfiggle.com? This is wordpress site that i'm doing. Thanks – Dek Dek Jan 09 '14 at 09:34
  • No. Just make a html replica of the part of the content where you wish to have background. – Ravimallya Jan 09 '14 at 09:36

2 Answers2

2

You can do it through css but the problem is whatever module you are using is adding inline style to it,for example

your container with class row one-column cf ui-sortable and id le_body_row_4 has inline style like this

background:#ffffff;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff),

Inline style is given preference over css file styles, if you can remove the inline style and add css to these classes one-column column cols

.one-column .column cols { background: #fff }

It will solve your problem

Raunak Kathuria
  • 3,185
  • 1
  • 18
  • 27
  • Thanks, so I need to manually change the module inline css then where would I put `.one-column .column cols { background: #fff }` Thanks – Dek Dek Jan 09 '14 at 09:44
  • You can add there also or If you have your css file then you can add it there as it does not have inline style. Adding in module will replace it when you want to upgrade – Raunak Kathuria Jan 09 '14 at 09:45
1

First of all you are using table so by default, table will take entire horizontal space, so make your container a fixed width and assign margin: auto; to that

.container {
   margin: auto;
   overflow: hidden;
   padding: 0;
   position: relative;
   width: 1000px;
}

and than use background-color: #fff; on div having id of #le_body_row_4

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
  • 1
    wow thanks again! this perfectly worked! learning things and adopting to your advises thankyou very much @mr. Alien – Dek Dek Jan 09 '14 at 09:49
  • 1
    @DekDek biggest advice you can take is learn how to make layouts without `table` and you will praise me a lot more :) also, `overflow: hidden;` is lil dirty way to clear your floats, you can learn more [here](http://stackoverflow.com/questions/12871710/why-clear-both-css/12871734#12871734) how to do that the correct way, also, you can search for clearfix, which will act similar like `overflow: hidden;` with `:after` pseudo, which is much better, but again, if you going to support legacy browsers, than forget this method and stick to `overflow: hidden;` – Mr. Alien Jan 09 '14 at 09:53
  • 1
    Yes i'll definitely will take note of that and will try to fix all tables in near future. Got it :) Bookmarked and add it as favorite :) You're the best @mr. ALien Cheers! – Dek Dek Jan 09 '14 at 10:07
  • @DekDek hehe thank you and no, don't use fixed tables, use other tags instead with CSS Positioning techniques, float, you can achieve a real good layout, use `table` only for tabular layouts – Mr. Alien Jan 09 '14 at 10:11
  • @ Mr. Alien, if you're not busy please see [link](http://stackoverflow.com/questions/22608800/css-small-screen-issue) It is still the code I use which you have provided but I'm having some issues regarding responsiveness. Would higly appreciate your response Thanks a lot! – Dek Dek Mar 24 '14 at 12:54