Identifying/locating css styles

[baggeler]

Ok, let me lay down how I got so far as this may be useful for any others starting at the same point as I am right now:

First of all I installed following tools

• Firebug in order to be able to analyze the life css and find out where and what to change. Firebug is an extremely useful extension to Firefox for anybody working on modifying just wanything like CSS, PHP ec in templates/views etc.
  
• FireFile in order to connect Firebug to my server
• FirePick in order to get a color picker in it

Fireebug is a wonderful tool and although I just started to work with I can already recomend it to anybody working on the web as it helped me to identify the exact place where the values are which I need to modify. In my case I started with the background value of the popup window when adding a product to the cart (I found out this is called "facebox") and the corresponding css entry in the vmsite-ltr.css is:
#facebox .content {
    background:none repeat scroll 0 0 #b9298b;
    border-radius:4px 4px 4px 4px
    display:table;
    padding:10px;
    width:auto;
}

Thats where I got until now. I can change the value there and it will be the right change I want (we have dark template and VM is instead using a hardcoded white backround mixed with inherited light fonts from template.. Not compatible at all.. :-()

Now I am stuck with the following elements that seem to go beyond my understanding as dispite using Firebug I still can´t identify the right properties and where they get them from. Looks like they work with some images but even checking those images do not match what is on the screen. E.g. like in:

Table Header in the cart:
table.cart-summary tr th {
    background:url("/components/com_virtuemart/assets/images/vmgeneral/backgrounds.png") repeat-x scroll center top #E8E8E8;
    border-bottom:1px solid #E9E8E8;
    padding:6px 0 3px;
}
Can anybody explain to me how this works and where I can modify this to override with the correct background color of my template?

In fact I think it´s a design bug as in my view it should take as much as possible from the underlying template, this is especially true for any background, font and button colors... I see absolutely no benefit in having those hardcoded as this is what templates are for, to define the basic layout and typography of the whole website. So I hope this will be fixed in future versions...

Same is true for:

• Green buttons like "Add to cart" button, Save button of adress, Finalize Button of cart
• White buttons like "Product details" button, "Ask a question" button

[jenkinhill]

I split this off from the long thread it was posted in as others may find it easier...

The styles are not hardcoded and can be over-ridden. Look in components/com_virtuemart/assets/css/vmsite-ltr.css  - around line 109 you will see the definition:

table.cart-summary tr th{background:#e8e8e8 url(../images/vmgeneral/backgrounds.png) top repeat-x;border-bottom:solid #E9E8E8 1px;padding:6px 0 3px;}

The graduated colour background is provided by the image, using a change in background-position or actual image to show a difference on hover. The same image can be used for 3 different button colours just by setting its displayed position.

Two ways to change the colours, one is to edit the image itself, or remove the image reference and just use a background colour, at the moment set to #e8e8e8

When you have decided on the right style to suit your template add the code to your Joomla template css file to provide an override. If changing the image then also change the name of it, eg myredbackgrounds.png and save it to the same directory as the original or to your Joomla template image directory, in either case remember to change the path in the image url.

Similar treatment for the other buttons.

A good tool to add to your collection is Agent Ransack to make it easy to find code snippets in a local copy of VM files, easier than using grep on the server.

(the line number was obtained from the VM2.0.5rc fileset, your version may differ)

[baggeler]

Thanks a lot Kelvyn!!

I learned something new on CSS now... will dig into it and find the best solution to aproach this.

The styles are not hardcoded and can be over-ridden.

The definition of Wikipedia about hardcoding is:

Hard coding (also, hard-coding or hardcoding) refers to the software development practice of embedding what may, perhaps only in retrospect, be regarded as input or configuration data directly into the source code of a program or other executable object, or fixed formatting of the data, instead of obtaining that data from external sources or generating data or formatting in the program itself with the given input.

Best practice of programming will allways try to avoid such hardcoding and retrieve any possible variables as indirect reference, so the variables can be changed easily while the program code would not have to be modified at all. This is done by defining constants, which associate names with the values, and using the names of the constants for each appearance within the code.

If you let the user adapt such variables directly in the admin configuration, you will save a lot of headaches for both, users AND programmers, reduce support, improve flexibility and much more without a single disadvantage.

Just my 5 cents worth...

[jenkinhill]

For css, ever since its introduction, embedding is the use of in-line styles hard coded within html or php source files, not as provided by an external or cascading style sheet which can be easily edited or over-ridden.

I remember starting to use my first linked css  back in the summer of 2000 when it started to reach mainstream browsers and thought it to be difficult, but after a dozen or so sites created and reading Hakum & Lie's first CSS book it became really easy.  CSS3 is a little more complex, but retains the same sort of logic.