How to show shadow on blocks?

[Guest]

How can I show shadows on bottom and right side of blocks (such as Categories, Cart, Information and New Products) to make the blocks appear to stand out from the page?


Thank you, Dan Brouwers

[guitarplayer]

Hi,


You have to modify/Photoshop these images block_footer.gif - block_exclusive_footer.jpg - and the account footer block image in your current themes img folder.


Best,

Guitar Player.

[Guest]

Thanks Guitar Player, I'll give it a try!

Dan Brouwers

[SotEW]

for the right side of blocks, you will have to replace the border-right by a picture with a repeat-y;

[Guest]

SotEW,

If I understand you and Guitar Player correctly,

I need to edit those three images in the themes/img folder to show a shadow on the bottom of the blocks.
(block_footer.gif, block_exclusive_footer.gif, block_footer_myaccount.gif)

And then in order to show a shadow on the right side edge of those blocks,
I need to create a shadow image and ftp it also to the themes/img folder.

And then I need to place the code into the global.css file that will call on that right side shadow image.
Is this correct?

If so, what I don't understand is how my code should read and where I should place that code into the global.css file.

Is there any chance you can give me an example of how my code should look and explain exactly what part of the global.css file it should go in to?

I would really appreciate it!
Thanks, Dan Brouwers

[Guest]

And also, I'm not sure what has just happened in the last 30 minutes................

but when I use IE8 to view my website the blocks are crowded up under the logo and the user info block is hanging too low over the top right corner of the logo.

The website looks normal when I view it with FireFox but not with IE8.
And I haven't made any adjustments or ftp any files for a couple of hours now.

Got any ideas or suggestions why this would be happening?

Thanks, Dan Brouwers

[SotEW]

And then I need to place the code into the global.css file that will call on that right side shadow image.
Is this correct?

No, you just have to replace the old images with the new ones.

[guitarplayer]

Hi Dan,

Can you upload a screenshot of the problem? because I don't have IE8 as i'm using mac.

Best,

Guitar Player.

[Guest]

That must be the images block_bg, block_exclusive_bg, and block_bg_myaccount.

Ok, I understand now..............


Would you look at my other post above this for me also?
I've been adding margins to the global.css file for left_column, center_column and right_column, so they now show correctly in IE8. But I still can't fix the top_of_page_user_info........... it is still hanging low.
I'm not sure what happened, I don't remeber making any changes to it since yesterday.

Anything is possible when I stay up for 48 hours at a time lately.
Here is that part of global.css so, you can see if I've messed it up somehow.

/* block top user information */
#header #header_user {
   width: 98%;
   text-align: right;

   margin: 0.4em 0.3em 0 0;
}
#header_user p { color: #595a5e; }
#header_user span { font-weight: bold; }
#header_user ul { margin-top: 0.3em; }
#header_user li {
   float: right;
   line-height: 2em;
   margin-left: 0.5em;
   white-space: nowrap;
}
#header_user #shopping_cart, #header_user #your_account { font-size: 0.9em; }
#header_user #shopping_cart a, #header_user #your_account a {
   background-repeat: no-repeat;
   background-position: top left;
   padding: 2px 0 4px 26px;
   height: 20px;
   text-decoration: none;
}
#header_user #shopping_cart a { background-image: url('../img/icon/cart.gif'); }
#header_user #shopping_cart span.ajax_cart_quantity { padding-right:0.5em; }
#header_user #your_account a { background-image: url('../img/icon/my-account.gif'); }

Thanks for all the help!
Dan Brouwers

[Guest]

I don't know how to upload a screenshot yet.
I've included a link in my previous post though.

If you tell me how to upload a screeshot, I will give it a try.

Dan Brouwers

[guitarplayer]

ok you fixed it as I was typing, no problem.

[guitarplayer]

Hi Dan,


At the moment on an Apple using Firefox and Safari your site looks like the image attached.

You have a background image which is white with 2 black lines, you can get this effect with css instead of that image, would you prefer that?


Best,

Guitar Player.

[Guest]

I fixed the left, center and right columns...but the user info is still hanging down onto my logo (on my pc) with IE8.

I just checked the website with my [spam-filter]'s pc with IE8 and also on my pc with FireFox and it looks perfect.

I'm not sure what is going on with my pc/IE8.
Maybe I'll shut it down for a while.



Hey Guitar Player, yes that would be the ideal way to do it but I wasn't sure so I improvised for now.

Thanks, Dan Brouwers

[guitarplayer]

empty the cache and history on your browser

[guitarplayer]

Ok now for the css, is the space in between the 2 black lines the width you want your entire site?

if yes, it is probably best to just have 1 modules column either right or left, as the product pages are going to be a squeeze. So move your modules from right to left or left to right using the transplant modules in the Back Office.

if no, how wide do you want your site? and any other info so I can help.

Best,

Guitar Player.

[Guest]

Guitar Player,

Ok now for the css, is the space in between the 2 black lines the width you want your entire site? 

No.

My entire site width is 967.
The logo image, footer image and the page background image are all 967px wide.
The part that you see is only 747px wide.

That way the header would look like it hung over both sides of the logo at the top.
And the left_column and the right_column appeared to float half way off the page.

I also planned on changing the logo, footer and background images to png for transparency and adding swf images to either side of the logo and body area for cool affect, counting on returning visitors.

The part of the logo and footer images that you see will remain with the same visibility.
I also plan on giving the left_column and right_column blocks a shadow effect, so they jump off the page at you.

If this can be done with css, I'm ready to learn. I hope I've explained myself well enough for you.

and by the way......how did you do that screenshot in your other post?
Thanks, Dan Brouwers

[SotEW]

The first thing that you can do for your background image (967*900) is reduce it (967 width, 1 height) and repeat-y it.

[Guest]

I edited the background image to 967*5 png.
5 is the smallest my software would go.

Now the lines run to close to the top of the page so I need to correct this.
How do I do that?

Dan Brouwers

[guitarplayer]

Yes thats the best way SotEW's method, also more reliable on different browsers.

Also have you changed the PDF Receipt generator because your logo which is more like a full-blown header will be put on peoples receipts when they make an order?

Maybe it's a good idea to install SotEW's adds module and put your current logo/header image in SotEW's modules Header position. You can find the module in his signature.

[Guest]

Also have you changed the PDF Receipt generator because your logo which is more like a full-blown header will be put on peoples receipts when they make an order?

Maybe it’s a good idea to install SotEW’s adds module and put your current logo/header image in SotEW’s modules Header position. You can find the module in his signature

Whooooa..hold my horses!!!!!!!!
PDF Receipt generator? I've not learned that yet! But there's no time like the present.

I remember reading something about SotEW's adds module when I was researching a different project for the website.
But I didn't get too deep into it at the time. I will download that and tackle that right away.
Knowing what to do with it is another story, so I will need to re-read his post on it and learn how to use it. and what for.

I'll be watching for your posts while I do that.
Dan Brouwers

[guitarplayer]

Ok online 195 in your current themes global.css

change it to this

#header 

{
float: left;
height: 50px;
width: 100%;
text-align: right;
background: #ffffff;
}

But please backup your files incase you make a mistake! for the part where I have written height: 50px; you may have to put 40px or 60px or something else depending on how much white overlaps your logo.

[guitarplayer]

You don't have to change your method at the moment, there is a simpler way. You can upload a smaller logo for the receipt generator and just call it logo2.jpg and change the receipt generator's code accordingly.

[Guest]

Ok Guitar Player, the changes to global.css are done.

I don't know if this question should be directed to SotEW about installing the adds module but here we go.
I'm sure your both still watching my posts.

I downloaded the zip / unzipped / and ftp sotewaddsmodule file to the modules file on my server.
When I look for it in the BO under the Modules Tab, I do not see it.
Is there something else that I need to do to it first?

Dan Brouwers

JUST CAUGHT YOUR POST ABOUT CHANGING MY METHOD. LET'S PLAY WITH THAT.
I'LL TRY RESIZING MY LOGO FIRST. WHAT WOULD BE A PROPER SIZE TO MAKE IT?

[guitarplayer]

Look on the modules page in BO, but not in the blocks part it is in the group of modules called advertisement, usually below the google adsense mod.

[Guest]

Ok, I just had to change permissions to 777 and I found it.
I clicked on the install button and I received a message that it installed successfully, but where did it go after that?
I don't see it know.

Dan Brouwers


SOMETHING IS RUNNING SLOW OR SOMETHING.......IT CAN NOW BE SEEN AFTER REFRESHING AGAIN.

[guitarplayer]

Something like 200x80 px and call it logo2.jpg then upload it to your shop directory and then go to classes/PDF.php and change where it is written logo.jpg to logo2.jpg, I can't tell you which line exactly because my Dreamweaver is currently uploading a huge file and it can't perform 2 things at once. I'll guess and say logo.jpg is written in between line 65 and 80.

But remember to make a backup of the file before modification!

[Guest]

When I upload it, should I upload it to "website/img" file or to "/new_theme/img" file?

Dan Brouwers

[guitarplayer]

Like this http://www.greatamericanclothing.com/img/logo2.jpg


Best,

Guitar Player.

[Guest]

Ok..............

The logo2.jpg image is uploaded to "website/img" file
and I renamed the logo to logo2 in "classes/PDF.php in two spots as shown below.

if (file_exists(_PS_IMG_DIR_.'/logo2.jpg'))
           $this->Image(_PS_IMG_DIR_.'/logo2.jpg', 10, 8, 0, 15);
       $this->SetFont(self::fontname(), 'B', 15);
       $this->Cell(115);

Your directions were perfect, Thanks!
Dan Brouwers

[Guest]

Please Disregard The Previous Post!

After experimenting with this template, Ive decided to start over.
After countless hours of drawing my webpages by hand, I didn't like how it looked as an actual website.
I will use the old global.css and etc files as guides, so I will remeber what you guys taught me.

Thanks goes out to Guitar Player and SotEW, you guys are GREAT!
I really appreciate all the time and work you have given me.
I hope that as I learn that I will be able to help others as you have me.

Thanks, Dan Brouwers