AbanteCart Community

AbanteCart Development => Customization help => Topic started by: dante1 on February 16, 2016, 09:45:23 PM

Title: Homepage banner
Post by: dante1 on February 16, 2016, 09:45:23 PM
Hey Everyone,

I am a complete newbie to CSS and AbanteCart. I have been doing some reading and playing around with customizing the homepage banner but I was wonder how I can center the image in my banner? It seems like when I add an image, it always aligns to the right.

Thank you,

Title: Re: Homepage banner
Post by: soup-n-sandwich on March 10, 2016, 10:02:33 AM
I just asked myself the same question.  My answer is to not use the "Text Banner" in the Banner Manager and enable the Graphic Banner instead.  If you want text, use a image manipulation programs (PhotoShop, GIMP, etc.) and add the text on the actual image.  I usually blur the photo which give the text a chance to pop.  I've made a temple in GIMP to act as a container to my images for this banner.  The size that I found that works is 360H by 950W.  This is the container size only.  IF you have an image that large you can use it.  If not I drop the image into the contain and favor it to the left...adding my text to the right.

IMPORTANT:  for some reason all of the Graphic Banners are all linked together.  It was driving me nuts for an hour.  So when you click on the Image to change it (off to the right of the window) and it brings up the Resource Library choose of your new image BUT make sure you unlink this banner from the other ones.  Bottom left of this Resource Libary window there is a section that reads "Linked To:". Click the "Unlink from add/edit" link icon otherwise you'll see the same image for each slide.  Also you'll only be using a single image per banner image despite there being more places to add images.

Also make sure to disable all of the "Text Banner" items.

I'm still working through this but so far it's working.
The 950px wide is the max that can be displayed on a 15" monitor set to 1024 X 768.  I'm not sure how this will translate to smaller monitors with lower res.  You can also check the site/banners on an emulator for tablets and phones to make sure things are acceptable.   Check out double U, double U, double U dot mobiletest dot me/