Jump to content
dev osCommerce
Forum
  • Checkout
  • Login
  • Contact Us
  • Get in touch

osCommerce

The e-commerce.

New Demo
Our Partners

giving 2.3.1 a white background wrapper?

toolman

By toolman
in General Support

Recommended Posts

toolman

toolman

Posted
Posted

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

Link to comment
Share on other sites
multimixer

multimixer

Posted
Posted

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

My community profile | Template system for osCommerce - New: Responsive |  Feedback channel

Link to comment
Share on other sites
  • 5 weeks later...
PupStar

PupStar

Posted
Posted

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.

Link to comment
Share on other sites
  • 4 months later...
multimixer

multimixer

Posted
Posted

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

My community profile | Template system for osCommerce - New: Responsive |  Feedback channel

Link to comment
Share on other sites
FabioW

FabioW

Posted
Posted

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??

Link to comment
Share on other sites
multimixer

multimixer

Posted
Posted

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;
}

My community profile | Template system for osCommerce - New: Responsive |  Feedback channel

Link to comment
Share on other sites
npn2531

npn2531

Posted
Posted
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

Link to comment
Share on other sites
FabioW

FabioW

Posted
Posted

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.

Link to comment
Share on other sites
npn2531

npn2531

Posted
Posted

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.

Oscommerce site:

 

 

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

Link to comment
Share on other sites
FabioW

FabioW

Posted
Posted

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.).

Link to comment
Share on other sites
npn2531

npn2531

Posted
Posted

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

Link to comment
Share on other sites
FabioW

FabioW

Posted
Posted

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

Link to comment
Share on other sites
multimixer

multimixer

Posted
Posted

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')) {

My community profile | Template system for osCommerce - New: Responsive |  Feedback channel

Link to comment
Share on other sites
FabioW

FabioW

Posted
Posted

This is what I have done:

 

In stylesheet.css I have add:

 

.banner_position {

text-align: center;

padding-bottom: 20px;

background: #d5fe74;

width: 960px !important;

}

 

in footer.php I have changed:

 

<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

}

?>

to:

 

<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 alpha omega banner_position">

<?php echo tep_display_banner('static', $banner); ?>

</div>

 

<?php

}

?>

 

 

And now I have green background and no margins. However I have no idea what are this "alpha omega"...

 

Many Thanks

Link to comment
Share on other sites
npn2531

npn2531

Posted
Posted

alpha and omega are classes use to balance out the margin spacing between columns. Use only one at a time. Use the alpha class for columns on the left, omega for columns on the right, and omit them for inside columns. Without alpha and omega you'll end up only being able to fit 23 columns in a 24 column layout (or 11 in a 12 column layout). With alpha and omega columns fit to the last pixel perfectly spaced horizontally.

 

 

Take out the omega class in your code above and you'll see the column scoot to the left exactly 5 (10?) pixels.

Oscommerce site:

 

 

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

Link to comment
Share on other sites
npn2531

npn2531

Posted
Posted

Actually since you have one column all the way across it will still fit without the alpha and omega, as if it were an inside column, but using the alpha or omega will shift the column left or right. Useful to line up the footer directly under the header and content container.

 

PS - link above is great, and graphically demonstrates this.

Oscommerce site:

 

 

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

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...