Need help editing product list layout

[Sanneza]

Hello I have a couple of questions about altering my product list layout, I hope someone might be able to answer for me

 

1. How do I alter the size of the box in which my products are displayed?

2. How do I edit the (heading+price) font size of my products?

 

See attachment for illustration:)

 

Edit:

I might also want to make the image always center within the box, if anyone could give me a tip about how to, thanks

[phrasespot]

1. How do I alter the size of the box in which my products are displayed?

2. How do I edit the (heading+price) font size of my products?

styling rules you're looking for are in /themes/your theme/css/global.css (and friends). If you post an address I can give you more step-by-step. Turn off CCC for CSS if you do,

[Sanneza]

I have tried editing so many things to see if it changes the way the products are displayed, also in the global.css without results, I would be really happy if you could take a quick look, eventhough its probably staring me right in the face

I've turned off ccc as you suggested:

http://sba-portfolio...p?id_category=6

 

-Please excuse the looks, its my first webshop

[_matis_]

Try enable Force Compile and disable Caching under Preferences > Performance

[Sanneza]

Thanks for the advice matis, I tried enabling force compile and disabling cache, I then went through the entire global.css document, changing font sizes, colors and margins but only very few changes appeared on the website

[_matis_]

change font size for heading (product_list.css, line 23):

 

replace

ul#product_list li a {
color: #000000;
text-decoration: none;
}

 

with

ul#product_list li a {
color: #000000;
text-decoration: none;
font-size:14px;
}

 

 

change font size for price (product_list.css, line 82):

 

replace

font-size: 170%;

 

with

font-size: 14px;

 

 

For altering size of the box you must change (product_list.css, line 3):

 

width: 29%;

[Sanneza]

Thank you very much for your help! I've managed now to edit the things I mentioned and it looks better now

 

But I noticed that I cant make the add to cart button smaller, or center it, without changing other buttons too, not to mention the text on it, any pointers on how to do this? (should I open a new topic for this new question?)

 

Edit: and! @ _Matis_ I saw your webshop, it rocks!

[indus]

You can try making temporary changes via the firebug addon before commiting any changes to the css files. Its the easiest and the accepted way of altering any css files. Or just use the built in developer tools in chrome or even newer firefox versions.

[Sanneza]

I've downloaded Firebug and I'm really surprised how easy it is to use, it pretty much solves all the problems I've been talking about in this thread

Apart from the button issue, for an example I've changed my product listing to a permanent grid view, so that I need to move the 'add to cart' buttons to center within the grid rather than the list they where made to be in.

So if I move the buttons to match the grid, the same 'add to cart' button on the single products page is moved aswell