OpenCart Community

HI ALl,

Ok I am struggling to see where I can allign the images, text, prices and buttons in modules. As you can see from the screen shot they are left alligned

Can anyone point me in the right direction ?

In stylesheet.css , find class

.box-product > div

to align to center the button, name and price , simply add an align center

text-align: center;

The easyest way to display allmost centert the product box in sidebar is to change , in the same class, that margin-right to margin-left

by default is
margin-right: 20px;
change it to
margin-left: 20px;

The better way to set up the box product in sidebars , is by assiging it different props for the sidebar position

So , in general , the module product box is ".box-product{props}"
If you want the box-product with different styling in sidebars , make it like this
#column_left .box-product, #column_right .box-product{props}

I hope this is helpfull

Hi ,

thanks so much, I have done the featured box as per your instruction but cant figure out where to put the text-allign and change margins for the left coumn.

I cant see in the stylesheet what area might corespond to that

an you point me in the right direction please.

Thanks so much for everything so far

Use Firefox browser and install the Developer plug-in, it will allow you to click any area of the page and show you the exact CSS styling information being used.

I have firefox, where do I get the plug in from ?

Many thanks

Use Notepad++ for edditing

Open the stylesheet.css in n++

Search for

.box-product > div

When you will find it , all class and props will look like this

.box-product > div {
width: 116px;
display: inline-block;
vertical-align: top;
margin-right: 20px;
margin-bottom: 15px;
}

Notice the margin right line , simply change the word right to left. And in here add the text-align too.

Here's how it should look then

.box-product > div {
width: 116px;
display: inline-block;
vertical-align: top;
margin-left: 20px;
margin-bottom: 15px;
text-align: center;
}

And that is how you change them or add new properties.

After that change , the product box , will have the name , price , button and image align to center , and the margins betwwen boxes will be to the left instead of right.

Hi,

Yes I followed these instructions and got the botton to allign but not the side column, see image.

Thanks

You allready did this?

#column_left .box-product, #column_right .box-product{props}

No, I didnt understand this bu=it. Do I need to add this somewhere?

Thanks

You should include a link to your website.

HI The site is mugsnmore.co.uk

I have alligned the featured products

but need the latest products more central withing the box, the images as well as the text.

I have no idea where to enter the other code you mentioned. I have searched the stylesheet for it and cant find it

Thanks.

In the atachement below is an archive with stylesheet.css (yours with some alterations).

Replace you actual one with that one , and you should be fine.

BTW: Backup you actual stylesheet.css first.

All the respect!

Wow, thanks for that, but unfortunately as you can see it isnt working.

The latest module on the left side, the images are to the left and the text etc is left alligned?

Sorry to be a pain, you help has been amazing

As I see , you didnt uploaded it.

I have uploaded yours....