Jump to content

How to show shadow on blocks?


Recommended Posts

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

8501_otAfCk3VXyMHdigFsM31_t

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More