Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Remove Footer Image Border


jeu4328

Recommended Posts

Posted

Hello:

 

I would like to remove the border around the footer image in my shop.

 

In the past I had added a command to the css Stylesheet that successfully removed the border around my Logo image and Footer image. The command is:

 

#storeLogo img, div.grid_24 > a > img {

border: none;

}

 

However, after unsuccessfully trying to install an add-on I noticed that the border was back.

 

Because I was not able to successfully install the add-on, I restored all the files as they were before the attempt … but I still see a border around my footer image. It appears that I must have missed one (or more) files that need to be corrected.

 

Can anyone tell me which files would contain code which controls the border image around the footer image? I’d like to check each of them to make sure they are restored to previous versions.

 

Thank you very much,

Jewell

Posted

Hi Jewell, I have modded my store completely so I can't remember about this specific stylesheet, but FYI using the developer tools in FireFox (and other browsers but I like FireFox's tools the best) will help you loads. Just right click on the element you are wanting to change, select inspect element, and view the styles set up for it and the container it is located in to find out what style is responsible, you can even edit the styles inside the developer tools which will update the browser window and test out the settings until you get it how you want. Then just go to the corresponding style sheet and make your changes final, and upload. This way you don't have to guess about which style on what sheet, you can mess with the styles to your heart's content and then go make your final changes once you are sure what style needs to be modified. How this helps.

Posted

I just looked at your shop, and I don't see any borders. After your last change, when looking at your webpage did you do a Ctrl+F5 to force a complete reload of all the files?

Posted

Thank you for your feedback, Sherry. I appreciate it. :)

Hi Jewell, I have modded my store completely so I can't remember about this specific stylesheet, but FYI using the developer tools in FireFox (and other browsers but I like FireFox's tools the best) will help you loads. Just right click on the element you are wanting to change, select inspect element, and view the styles set up for it and the container it is located in to find out what style is responsible, you can even edit the styles inside the developer tools which will update the browser window and test out the settings until you get it how you want. Then just go to the corresponding style sheet and make your changes final, and upload. This way you don't have to guess about which style on what sheet, you can mess with the styles to your heart's content and then go make your final changes once you are sure what style needs to be modified. How this helps.

 

I have installed FireBug in FireFox because I am hearing so many wonderful things about it. However, I'm just not understanding how to use it. I've been looking for videos on YouTube and other source to teach me about the program. It will take me some time to really understand it.

 

When I right click on the footer element of my website, the box pops up. In the HTML section of the box I get this code:

<img width="958" height="110" title="transparent footer" alt="transparent footer" src="images/newfooterstore.png">

 

In the right column under Style tab I get the following code:

img {

 

 

border: 1px solid #F7EDA7;

}

 

stylesheet.css (line 179)

 

 

 

element.style {

 

 

text-align: center;

}

 

body {

 

 

color: #000000;

font-family: 'Times New Roman','Lucida Grande','Lucida Sans',Verdana,Arial,sans-serif;

font-size: 12px;

}

 

I had set my image border to be 1px, but I do not want to have a border around the Logo or Footer images, so I added this code to my StyleSheet:

 

#storeLogo img, div.grid_24 > a > img {

border: none;

}

 

That did the trick. However, I had been trying to install and Add-on to my website, and was not successful. I noticed at that time that the border around my Footer image was back! Ugh! (w00t)

 

I have no idea what file I changed to make this happen. I'm so frustrated!

 

By looking at the Style files shown above, I am not seeing in FireBug what file needs to be changed ... and I am not trained in coding so I have no idea what I need to add to the Stylesheet to make it right.

 

Do you know what osC files contain the code that can affect the border around the Footer image?

 

Thanks again for your help!

Jewell

Posted

Hi, Phil: Thank you for your feedback as well. :)

 

I just looked at your shop, and I don't see any borders. After your last change, when looking at your webpage did you do a Ctrl+F5 to force a complete reload of all the files?

 

I have set the image border to be a color as close as possible to the background color so that the image no longer shows up. That is why you are not seeing any borders.

 

I am not happy with it because I prefer a black border around my product images, and no border around the Logo image, Footer image, and the Contact Me image at the top right of the screen.

 

I have not figured out how to eliminate the border around the Contact Me image because I can't figure out what code needs to go into the Stylesheet ... or where to put it. The same goes for the Footer image.

 

I'm almost tempted to re-install a clean version of osC and start fresh, but I have made so many changes to my store that it would take me forever to get it to where I'd like for it to be again. It is hardly worth the effort it will take ... although I may end up doing that because it is driving me nuts that I can't figure it out! (It is like vacuuming a room and not moving the furniture. No one else can see the dust under the sofa, but I know it is there so I can't rest until I've tipped the sofa up and vacuumed under it.) Knowing that my borders aren't right and that some of my Add-ons are not working as they should is causing me to feel so frustrated. :huh: Oh dear ... my OCD is showing! :blink:

 

I'm not sure what you mean by doing Ctrl+F5? Does that upload a complete new copy of all osC files and replace the existing ones?

 

Thank you again,

Jewell

Posted

Hi,

 

are you sure, that this definition

 

#storeLogo img, div.grid_24 > a > img {

border: none;

}

worked proper? I have my doubts :unsure:

The definition of a div example in the stylesheet would be:

. example {

parameters

{

 

and not:

div example {.....

 

And a simple way to get rid of the border is to go to the footer.php, where you can find this code:

<div class="grid_24" style="text-align: center; padding-bottom: 20px;">. Add border:none; after 20px; and your border should disappear.

 

Greetz

J.J.

Posted

I'm not sure what you mean by doing Ctrl+F5? Does that upload a complete new copy of all osC files and replace the existing ones?

No, no, no, no, no. Pressing the Ctrl key and F5 at the same time in your browser orders the browser to request a fresh copy of everything for the current page -- the page HTML, the CSS files, the JS files, the images, everything, instead of using what's in the cache. If you changed anything, your browser might be using an old copy, not your latest and greatest. Always press Ctrl+F5 after changing any files, to ensure you've loaded the latest and greatest (of course, you have to call up the page first). Clearing the browser cache will have the same effect, but for all sites and all pages.

 

It does absolutely nothing to the files on your site.

Posted

Hi,

 

are you sure, that this definition

 

#storeLogo img, div.grid_24 > a > img {

border: none;

}

worked proper? I have my doubts :unsure:

The definition of a div example in the stylesheet would be:

. example {

parameters

{

 

and not:

div example {.....

 

And a simple way to get rid of the border is to go to the footer.php, where you can find this code:

<div class="grid_24" style="text-align: center; padding-bottom: 20px;">. Add border:none; after 20px; and your border should disappear.

 

Greetz

J.J.

 

Thank you for the suggestion. Yes, that code did work. However, something has been changed somewhere else and for the life of me I cannot find it.

 

I tried making the change in footer.php and it did not work. The border is still there. :(

 

Could you be more specific in your example? I'm not sure what you mean by:

 

The definition of a div example in the stylesheet would be:

. example {

parameters

 

{and not:

div example {.....

 

Thank you,

Jewell

Posted

Does anyone have any idea which files contain code which would affect the footer border?

 

Thank you,

Jewell

Posted

Hi Jewell,

 

You will probably need to add a new class just for that footer image as far as I remember you outlined all img / (class) so you need to open the footer file and change the class to example img1 and then add the no border to img1 in your stylesheet if that makes sense.

 

Regards

Joli

To improve is to change; to be perfect is to change often.

 

Posted

Hi, John: I appreciate your help.

I haven't taken the border out, I have just made it a color that closely matches the background.

I will definitely try what you suggested. Thank you so much! :)

Jewell

Posted

Hi, John: I appreciate your help.

I haven't taken the border out, I have just made it a color that closely matches the background.

I will definitely try what you suggested. Thank you so much! :)

Jewell

img {

border: 1px;

border-style: solid;

border-color: #F7EDA7;

border-width: 1px;

}

 

is what you have in your stylesheet

so open your footer.php and look for img change to imgfooter and then back to your stylesheet add

imgfooter {

BORDER NONE THING HERE

}

 

Regards

John

To improve is to change; to be perfect is to change often.

 

Posted

Hi, John: I really appreciate your detailed help. However, when I go into footer, there is no reference to img within the code.

 

This is what is in 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 footer">

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

 

I've tried adding the following to my stylesheet:

 

grid_24 footer {

border: none;

}

 

I've also tried:

 

grid_24 {

border: none;

}

 

I've also tried renaming grid_24 to imgfooter and adding that to my stylesheet as suggested.

I've also tried renaming grid_24 footer to imgfooter and adding it to my stylesheet as suggested.

 

No matter what I've tried, the border still exists.

 

Thanks again,

Jewell

Posted

Hi,

where is the image coming from is it a banner image?

To improve is to change; to be perfect is to change often.

 

Posted

Remove the banner or disable open your footer and at the bottom

 

<div class="grid_24 footer_image">

<?php echo tep_image(DIR_WS_IMAGES . 'newfooterstore.png'); ?></div>

 

 

<script type="text/javascript">

$('.productListTable tr:nth-child(even)').addClass('alt');

</script>

 

In your stylesheet you can put this to give control over the image but you probably will not need .

 

.footer_image {

color: #000;

padding-top: 0px;

padding-bottom:0px;

}

 

See you give the mouse a few days off :D

 

Regards

John

To improve is to change; to be perfect is to change often.

 

Posted

I did as you instructed, and the image still has a border, even with the code added to the stylesheet. :mellow:

I must have a command in another file someplace that is causing this.

Posted

John, do you think I should just scrap my store and start fresh?

 

Perhaps I should just go through each folder and replace every file that has had changes in October of this year, since that is when the error occurred?

Posted

No I am just looking your command is

img {

border: 1px;

border-style: solid;

border-color: #000000;

border-width: 1px;

}

 

Thats all do not understand why mine does not override for this one image try this

 

.footer_image img {

border: none; !important;

padding-top: 0px;

padding-bottom:10px;

}

To improve is to change; to be perfect is to change often.

 

Posted

I AM SO HAPPY!!! :lol:

 

And THANK YOU for cleaning up my file! :D

 

I really appreciate all your help!

Jewell

Posted

Well when the woman are happy we men are generally happy as well :P

To improve is to change; to be perfect is to change often.

 

Archived

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

×
×
  • Create New...