3 replies [Last post]
dontpanic's picture
Offline
Joined: 04/05/2009
Juice: 40
Was this information Helpful?

I am new to php, css, drupal, and ubercart. I've only ever designed a website in iWeb, but I am a fast learner.

I've got everything installed, updated, and functioning (first half of the learning curve is over), now I want to make the site look the way i want it to.

I am determined to learn, but need some basic direction.

1st question: Is it correct to edit the css files in the ubercart module folder? or should I be doing it in the theme css file? I read on some other forum posts that it isn't a good idea to change the css files in modules because they can get lost when updating. this makes sense, but I tried copying some rules from the catalog.css into my theme css, but it didn't work. If I am supposed to be doing the modifications in the theme css, how do I make the catalog page use it?

2nd question:
I have experimented with changing the code in uc_catalog.css and was successful at changing things like background and line colors. But when it comes to things like alignment, it doesn't work as I expected.

ie. I added "vertical-align: top;" to ".category-grid-products td" and the product title is now at the top as I wanted. But I have one product that has only 1 attribute, while the others have 2. This throws off the alignment of the add to cart button. So I tried adding "vertical-align: bottom;" to ".category-grid-products .add-to-cart", but it doesn't align to the bottom of the table cell. what did I do wrong?

If anyone has links to some good tutorials that can speed up my css learning curve, it would be greatly appreciated.

TR
TR's picture
Offline
Bug FinderFAQ ModeratorGetting busy with the Ubercode.
Joined: 11/05/2007
Juice: 3424
dontpanic wrote: 1st
dontpanic wrote:

1st question: Is it correct to edit the css files in the ubercart module folder? or should I be doing it in the theme css file? I read on some other forum posts that it isn't a good idea to change the css files in modules because they can get lost when updating. this makes sense, but I tried copying some rules from the catalog.css into my theme css, but it didn't work. If I am supposed to be doing the modifications in the theme css, how do I make the catalog page use it?

Never edit the module css files.

Add your own css to the end of the style.css file that comes with your theme. This theme style.css is loaded after the module css files, so anything you put in there will override the definitions in the module css files. css files are cached, so make sure to flush your cache when you make changes. If you install http://drupal.org/project/devel it will provide a handy link to flush your caches while you are working on the css.

dontpanic wrote:

2nd question:
I have experimented with changing the code in uc_catalog.css and was successful at changing things like background and line colors. But when it comes to things like alignment, it doesn't work as I expected.

Welcome to the wonderful world of css! And even when it does work as expected, chances are it may work differently in a different browser.

dontpanic wrote:

If anyone has links to some good tutorials that can speed up my css learning curve, it would be greatly appreciated.

The best advice I can give: http://getfirebug.com/

Download it. Use it.

<tr>.
dontpanic's picture
Offline
Joined: 04/05/2009
Juice: 40
Re: dontpanic wrote: 1st

Thank you for answering the css question.

I am using safari 4 and it has a similar feature to firebug.

I have also already installed devel, but wasn't aware that the css was cached.

Is there an easy way to disable the css cache while designing? It seems like a hassle to have to clear caches every few seconds as I brute force my way through learning css...

I guess the first thing to do is to move all the changes i made in the uc_catalog.css to my theme css.

TR
TR's picture
Offline
Bug FinderFAQ ModeratorGetting busy with the Ubercode.
Joined: 11/05/2007
Juice: 3424
Re: Re: dontpanic wrote: 1st

What I do is use Firebug to experiment with the css - you can type in changes and additions which modify the page in real time. Then when you have it the way you like it just save your changes in style.css.

<tr>.