Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

How to get block background to continue across full width of screen Rate Topic   - - - - -

 
  • m33
  • Member
  • Members
  • Join Date: 05-Dec 11
  • 37 posts

Posted 08 December 2012 - 05:00 AM #1

Hello,

I'm trying to work out how to make the background colour / images of the various blocks in my web pages, continue to the full width of the screen. An example of what I am trying to achieve is http://www.youknowwhodesign.com/ where Sarah Parmenter continues the blocks of colours horizontally across the screen.

When I try with blocks, they only go as far as the 960 grid. I want to push outside of the grid but only on one page of the site (maybe more later).

Apologies if this is covered elsewhere in the forum, but I don't know the correct terminology for what I am trying to do and therefore have not been able to find any helpful discussions.

Let me know if this is possible using custom HTML blocks or divs. If Divs, be clear as my CSS skills are novice at best.

Thanks

 
  • Triplets
  • Senior Member
  • Members
  • Join Date: 23-Sep 08
  • 1179 posts

Posted 08 December 2012 - 01:03 PM #2

http://kb.cs-cart.co...yout-with-960gs

 
  • m33
  • Member
  • Members
  • Join Date: 05-Dec 11
  • 37 posts

Posted 08 December 2012 - 07:23 PM #3

Thanks, Triplets. I replaced the old CSS 960 file the new css file but I'm still not sure how to get the block to go full width. Any ideas?

 
  • m33
  • Member
  • Members
  • Join Date: 05-Dec 11
  • 37 posts

Posted 08 December 2012 - 07:31 PM #4

Update: now it makes everything full width (but not quite full width). I only wanted to do this on a few blocks. Any idea how to

1) get it to actually go full width of the page? Right now, it's going about 90%
2) how to keep the other blocks from going full width?

 
  • tbirnseth
  • CS Cart Expert
  • Authorized Reseller
  • Join Date: 08-Nov 08
  • 11429 posts

Posted 10 December 2012 - 10:16 PM #5

As an example for the footer, you might try css similar to:
#ci_bottom_wrapper {
  width: 100%;
  background: url(../images/footerrepe.jpg) repeat-x 0 0;
}

EZ Merchant Solutions: Custom (USA based) B2B Development, Consulting, Development and Special Projects (get a quote here).
Commercial addons, payment methods and modifications to meet your business and operations needs.


 
  • AR-Cart
  • Junior Member
  • Authorized Reseller
  • Join Date: 22-Feb 07
  • 38 posts

Posted 13 December 2012 - 04:09 AM #6

Hello,

Yo could make it by creating a custom background, and overriding the body background in the block by inserting a style tag like:

<style type="text/css">
body {background: #fff url(skins/basic/customer/images/my_custom_body_bg.png) 0 0 repeat-x;}
</style>


 
  • adam2012
  • Newbie
  • Trial users
  • Join Date: 20-Dec 12
  • 6 posts

Posted 20 December 2012 - 08:55 PM #7

Hi All,

I am looking to do the same as m33. I installed the new 690.css and then got a little lost. How did it work out ??

So, I need to put a complete background in throughout the site and wanted some help on doing this. I'm running V3 CS Cart

Anyone had any luck doing this yet ?

 
  • m33
  • Member
  • Members
  • Join Date: 05-Dec 11
  • 37 posts

Posted 21 December 2012 - 08:55 PM #8

Hi guys, thanks for your response. @tbirnseth Where would I put that css? I tried it in the actual block but it didn't work. also, I tried using the inspect element feature in chrome and tried pasting it around different areas of the css but it didn't really work out for me. I know I'm close but I can't figure it out.

@ web2arab, I tried that solution too. I just created the image, put it in the path shown in the URL but when I copied that code and put it into an HTML block, nothing happened.

 
  • tbirnseth
  • CS Cart Expert
  • Authorized Reseller
  • Join Date: 08-Nov 08
  • 11429 posts

Posted 21 December 2012 - 09:07 PM #9

On my client's site, it is the wrapper that surrounds the bottom container. I.e. you have ci_top_wrapper, ci_central_wrapper and ci_bottom_wrapper. There is no standard style property set for this id. Hence whatever you define there should work properly. You'll have to use the appropriate imagery for your site. The background url() is specific to the site I pulled this from.

EZ Merchant Solutions: Custom (USA based) B2B Development, Consulting, Development and Special Projects (get a quote here).
Commercial addons, payment methods and modifications to meet your business and operations needs.


 
  • m33
  • Member
  • Members
  • Join Date: 05-Dec 11
  • 37 posts

Posted 21 December 2012 - 09:25 PM #10

Thanks, Last question, where do I find the code for these wrappers? What file is located in?

 
  • m33
  • Member
  • Members
  • Join Date: 05-Dec 11
  • 37 posts

Posted 21 December 2012 - 09:57 PM #11

Ok, I partly figured it out. in style.css, I put
#ci_central_wrapper {
  width: 100%;
  background: url(images/my_custom_body_bg.png) repeat-x 0 0;
}


This is great as it does overide the grid with my custom background image. However, how would I now only call this overide where I need it? I only want some pages to display it and I'm trying to get multiple sections to overide on one page. Like they way they did it here http://www.youknowwhodesign.com/


 
  • tbirnseth
  • CS Cart Expert
  • Authorized Reseller
  • Join Date: 08-Nov 08
  • 11429 posts

Posted 21 December 2012 - 10:21 PM #12

Template where the div is created is:
views/block_manager/render/location.tpl

I would make the css an included file and then in that included file I would set whatever conditions you want it to display.
I.e.
{assign var="use_this" value=true}
{if <whatever conditions to negate including> }
{assign var="use_this" value=false}

{if $use_this}
#your_id { your_property: your value;}
{/if}

I would not alter styles.css but instead use a my_changes.css file done with the styles.post.tpl hook. If it were done this way, then the logic for whether to include it for a particular controller/mode would be done in the styles.post.tpl file.

EZ Merchant Solutions: Custom (USA based) B2B Development, Consulting, Development and Special Projects (get a quote here).
Commercial addons, payment methods and modifications to meet your business and operations needs.