Jump to content


Hosting Developers Payment Shipping Accounting Templates Marketing Books

Our Partners


Latest News: (loading..)

- - - - -

giving 2.3.1 a white background wrapper?

Started by toolman, Nov 30 2010 10:31 PM

This topic has been archived. This means that you cannot reply to this topic.
25 replies to this topic

#-19   toolman

toolman
  • Members
  • 184 posts

Posted 30 November 2010 - 10:31 PM

Hi,

I am trying to change the colour of my main store (960 width) to white. I have changed the page background, but it has changed the whole page.

I have tried giving #bodyWrapper a background of white, but it only changes the top header bar to white.

Is there a way to give the 960 with a wrapper and a background?

Thanks

#-18   multimixer

multimixer

    Lemons or Melons ?

  • Partner
  • 4,400 posts

Posted 01 December 2010 - 07:54 AM

View Posttoolman, on 30 November 2010 - 10:31 PM, said:

Hi,

I am trying to change the colour of my main store (960 width) to white. I have changed the page background, but it has changed the whole page.

I have tried giving #bodyWrapper a background of white, but it only changes the top header bar to white.

Is there a way to give the 960 with a wrapper and a background?

Thanks

In file includes/template_bottom.php floats need to be cleared before the "bodywrapper" div close

<?php require(DIR_WS_INCLUDES . 'footer.php'); ?>

<div class="clear"></div>

</div> <!-- bodyWrapper //-->
and css
.clear {
  clear: both;
}

Look here
Community profile | Partner page | NEW : Feedback Chanel

#-17   toolman

toolman
  • Members
  • 184 posts

Posted 01 December 2010 - 10:26 AM

Thanks very much, it worked!

#-16   PupStar

PupStar
  • Members
  • 559 posts

Posted 01 December 2010 - 04:50 PM

View Posttoolman, on 01 December 2010 - 10:26 AM, said:

Thanks very much, it worked!

Yes thank you as I have to been struggling with this!
My Contributions (so far):

How to install jQuery Nivo Slider in osCommerce 2.3.3
Join Us On Facebook & Twitter Infobox

#-15   14steve14

14steve14

    STORE OWNER NOT CODER

  • Members
  • 3,080 posts

Posted 31 December 2010 - 10:47 AM

not wishing to hijack this thread, but is there a small mod also requires to get the footer background to change
REMEMBER BACKUP, BACKUP AND BACKUP
I am not a coder, so dont bother sending PMs asking for help as you wont get any.  

OSC has a steep learning curve, but in general the program does work.  If it doesnt work, the chances are it is something you have done.

#-14   PupStar

PupStar
  • Members
  • 559 posts

Posted 31 December 2010 - 01:28 PM

View Post14steve14, on 31 December 2010 - 10:47 AM, said:

not wishing to hijack this thread, but is there a small mod also requires to get the footer background to change

Steve,

An easy way of changing the footer background color is in includes/footer.php find 

<div class="grid_24 footer">

change to:

<div class="grid_24 footer footer_background">

then add this to your stylesheet

.footer_background {
	background:#f6f6f6;
}

and change the color to the color you require.
My Contributions (so far):

How to install jQuery Nivo Slider in osCommerce 2.3.3
Join Us On Facebook & Twitter Infobox

#-13   FabioW

FabioW
  • Members
  • 22 posts

Posted 06 May 2011 - 04:43 AM

How to remove the white frame around the footer?

#-12   multimixer

multimixer

    Lemons or Melons ?

  • Partner
  • 4,400 posts

Posted 07 May 2011 - 04:11 AM

View PostFabioW, on 06 May 2011 - 04:43 AM, said:

How to remove the white frame around the footer?

What white frame do you mean? I'm sorry but it is not clear to me, can you say a little more what you did and where the "white frame" appear? An url would be helpful
Community profile | Partner page | NEW : Feedback Chanel

#-11   FabioW

FabioW
  • Members
  • 22 posts

Posted 09 May 2011 - 07:32 PM

You can see it at http://www.barnsparadis.com
backgruond is green and there is a picture located in top center,
picture in header and i have removed white bars on sides of header by changing in includes/header.php <div id="header" class="grid_24"> to <div id="header">
I have changed bodywrapper to white using http://multimixer.gr/01/12/2010/how-to-set-backgrounds-in-oscommerce-version-2-3-1/
And now when I have changed footer color to green I have white bars on sides of the footer. How can I remove them or change to green??

#-10   multimixer

multimixer

    Lemons or Melons ?

  • Partner
  • 4,400 posts

Posted 10 May 2011 - 04:40 AM

What you call the "white frame" are the default left and right margins of the 960 grid system

You can do following changes
1) In your file catalog/includes/footer.php find
<div class="grid_24  footer footer_background">
change to
<div class="grid_24 alpha omega footer footer_background">

2) In file catalog/stylesheet.css find
.footer_background {
	background: none repeat scroll 0 0 #D5FE74;
}
change to
.footer_background {
	background: #D5FE74;
	width: 960px !important;
}

Edited by multimixer, 10 May 2011 - 04:41 AM.

Community profile | Partner page | NEW : Feedback Chanel

#-9   FabioW

FabioW
  • Members
  • 22 posts

Posted 10 May 2011 - 06:46 PM

It works, thanks.

1 Where can I change color or put some background picture of place under the footer where is banner?

http://www.barnsparadis.com/

Regards, FabioW

Edited by FabioW, 10 May 2011 - 06:57 PM.

#-8   FabioW

FabioW
  • Members
  • 22 posts

Posted 10 May 2011 - 07:49 PM

and how to remove margins? :)

Regards, FabioW

#-7   npn2531

npn2531
  • Members
  • 1,055 posts

Posted 10 May 2011 - 07:56 PM

Quote

What you call the "white frame" are the default left and right margins of the 960 grid system

This is saying the same thing,  but perhaps more accurately or usefully would be to say that this white frame is  the  background color of  #bodyWrapper id (set in stylesheet.css) in the first <div> tag inside the <body> tag. The width of this border is the default 960 grid system margin (.container_(variable) class in the same div, which is set in ext/960gs/960.css or ext/960gs/960_24_col.css     or rather the admin.)

In others words to deal with that margin you need to go two places, unless you just change the background color.
Oscommerce site:


OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

#-6   FabioW

FabioW
  • Members
  • 22 posts

Posted 11 May 2011 - 04:49 PM

so, what you wanna say is that I can not remove this margins on the bottom of the page without removing margins of the bodywrapper? and the same with colour?
And there is nothing I can do to make this white spot green??

PS.
I have tried to set margins in ext/960gs/960_24_col.css to 0 but then everything has moved left.

#-5   multimixer

multimixer

    Lemons or Melons ?

  • Partner
  • 4,400 posts

Posted 11 May 2011 - 05:24 PM

Don't touch the 960 css file at all, you will only mess things up. Place the original file back

Everything can be done, post your includes/footer.php file here

Edited by multimixer, 11 May 2011 - 05:25 PM.

Community profile | Partner page | NEW : Feedback Chanel

#-4   npn2531

npn2531
  • Members
  • 1,055 posts

Posted 11 May 2011 - 06:05 PM

Multimixer is right, don't change anything in the 960 css files. If you make one change you have to make a lot of compensating changes.

There will be a variety of ways to change the look of margins in the html and/or stylesheet.css. Are you familiar with the developer tools on Firefox? Try looking at, in Firefox, tools>webdeveloper>information>id and class details. Lots of good stuff.

Edited by npn2531, 11 May 2011 - 06:05 PM.

Oscommerce site:


OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

#-3   FabioW

FabioW
  • Members
  • 22 posts

Posted 11 May 2011 - 06:29 PM

includes/footer.php:

<?php
/*
  $Id$

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright © 2010 osCommerce

  Released under the GNU General Public License
*/

  require(DIR_WS_INCLUDES . 'counter.php');
?>

<div class="grid_24 alpha omega footer footer_background">
  <p align="center"><?php echo FOOTER_TEXT_BODY; ?></p>
</div>

<?php
  if ($banner = tep_banner_exists('dynamic', '468x50')) {
?>

<div class="grid_24" style="text-align: center; padding-bottom: 20px;">
  <?php echo tep_display_banner('static', $banner); ?>
</div>

<?php
  }
?>

<script type="text/javascript">
$('.productListTable tr:nth-child(even)').addClass('alt');
</script>





The 960 css file is back like it was before.
I didn't know about the developer tools on firefox, but I will check that.

I was hoping that I will be able to edit this element like for example header in stylesheet.css (put backgroudn image, change height, etc.).

#-2   npn2531

npn2531
  • Members
  • 1,055 posts

Posted 11 May 2011 - 06:52 PM

Just a tip:
Put all the inline styling like that below into the stylesheet.css. 

style="text-align: center; padding-bottom: 20px;

create a new class if you have to. It puts all the styling in one place and easier to deal with, and reduces the chance of css conflicts.

for example change it to:
<div class="grid_24 new_class" >

and in the stylesheet.css add:
.new_class {text-align:center;padding-bottom:20px;}

Oscommerce site:


OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

#-1   FabioW

FabioW
  • Members
  • 22 posts

Posted 11 May 2011 - 08:25 PM

I am not sure where to create this new class. And I have no idea what changes will it make. I am just getting starting with all this stuff.
Anyway, I like the margins around "bodywrapper". All I want to know is how to make this white spot under the OSCOMMERCE banner green, change it height and maybe put there some picture.


If this will be usefull here are changes I have made:

Change Header - background picture, height.

#header {
  height: 218px;
  background-image: url('images/header7.jpg');
}


Remove Header margins:
In includes/header.php change:
<div id="header" class="grid_24">

To:
<div id="header">


Background Picture
In stylesheet.css:
body {
  background: #d5fe74;
  color: #000;
  background-image: url('images/tlo.jpg');
  background-repeat: no-repeat;
  background-position: center top;
  margin: 0px;
  font-size: 11px;
  font-family: Lucida Grande, Lucida Sans, Verdana, Arial, sans-serif;
}


Change Background and bodywrapper coluor
http://multimixer.gr/01/12/2010/how-to-set-backgrounds-in-oscommerce-version-2-3-1/


Change Footer color, hight and add image

In includes/footer.php find
<div class="grid_24 footer">

change to:
<div class="grid_24 footer footer_background">

then add this to your stylesheet
.footer_background {
        background:#d5fe74;
        height: 194px;
        background-image: url('images/footer.jpg');
}


Remove Footer margins:
1) In your file catalog/includes/footer.php find
<div class="grid_24  footer footer_background">

change to
<div class="grid_24 alpha omega footer footer_background">


2) In file catalog/stylesheet.css find
.footer_background {
    background: none repeat scroll 0 0 #D5FE74;
}

change to
.footer_background {
    background: #D5FE74;
    width: 960px !important;
}


Best regards, FabioW

#0   multimixer

multimixer

    Lemons or Melons ?

  • Partner
  • 4,400 posts

Posted 12 May 2011 - 04:52 AM

Now you have this
<div class="grid_24 alpha omega footer footer_background">
<p align="center"><?php echo FOOTER_TEXT_BODY; ?></p>
</div>

<?php
if ($banner = tep_banner_exists('dynamic', '468x50')) {
?>

<div class="grid_24" style="text-align: center; padding-bottom: 20px;">
<?php echo tep_display_banner('static', $banner); ?>
</div>

<?php
}
?>

Change it to this
<div class="grid_24 alpha omega footer footer_background">
  <p align="center"><?php echo FOOTER_TEXT_BODY; ?></p>

  <?php
  if ($banner = tep_banner_exists('dynamic', '468x50')) {
  ?>
	<div class="banner_position">
	<?php echo tep_display_banner('static', $banner); ?>
	</div>
  <?php
  }
  ?>

</div>

and to your stylesheet.css file
.footer .banner_position{text-align: center; padding-bottom: 20px;}

To put there "some picture", do to your admin>tools>banner manager make a new banner with the image you like and add this banner to group "468x50". You can also make a new group, like "kuku_banner", and then in footer.php change this
if ($banner = tep_banner_exists('dynamic', '468x50')) {
to this
if ($banner = tep_banner_exists('dynamic', 'kuku_banner')) {

Community profile | Partner page | NEW : Feedback Chanel
Back to General Support


  1. osCommerce Support Forum
  2. → osCommerce Online Merchant v2.x
  3. → General Support
  4. Privacy Policy
  5. Forum Rules ·