Styling the Shop is chaotic

qwalk · April 19, 2013, 18:30:34 PM

Hi! I'm new to Joomla and VirtueMart. I have installed Joomla 2.5.9, and VirtueMart 2.0.20b.

I need a bit of help with styling VirtueMart. I have many years of experience with CSS so it's not the styling per se I need help with.

The thing is, that I don't understand the styling logic in VirtueMart.

When I skim for example a product detail PHP page, I see a lot of classes and ID's that I cannot locate in any .css file provided with VirtueMart. Do I really need to do a style everything from scratch.? Isn't there some kind of "basic" template that I can base my style on, and work with?

Also in the configuration of the shop, under Templates/CSS all checkmarks are enabled. But somehow the .css files are not integrated in my Joomla template, I had to locate every single .css file and insert them in the template header. But still a looot of classes and ID's are not matched in any .css file.

Thanks in advance and kind regards

jenkinhill · April 19, 2013, 19:16:38 PM

Let's clear up one thing first. VirtueMart is a Joomla component, and as with any other Joomla component that has its own css files, these files will not be published/incorporated into the Joomla template unless you have a Joomla main menu link to VirtueMart, eg to VirtueMart » Front page

The exception to this for VirtueMart, is that where the VM modules are published to a main menu item, then the css required by that module will be loaded into the template.

So to start with styling you should make that main menu link.

qwalk · April 19, 2013, 19:31:35 PM

Quote from: jenkinhill on April 19, 2013, 19:16:38 PM
Let's clear up one thing first. VirtueMart is a Joomla component, and as with any other Joomla component that has its own css files, these files will not be published/incorporated into the Joomla template unless you have a Joomla main menu link to VirtueMart, eg to VirtueMart » Front page

The exception to this for VirtueMart, is that where the VM modules are published to a main menu item, then the css required by that module will be loaded into the template.

So to start with styling you should make that main menu link.

Hi thanks for your reply.

I've already linked a menu item to the VirtueMart Front Page, but maybe I've done something wrong?

In the main menu, I've created a front page and selected the Item Type "VirtueMart Front Page" That shows all the categories that I've crated (See screenshot). Then I've made 8 categories and created a menu link to each category (Item Type "Category Layout" then selected the category in right box).

Although I've done all this, there are still no link to .css files. Have I done anything wrong?

[attachment cleanup by admin]

jenkinhill · April 19, 2013, 20:45:45 PM

If that is your template then you are already in trouble, as the normal Joomla header is not loading. Your template's index.php should have at the very minimum this code:

Code Select



<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
</head>

I suggest you start learning how Joomla/VirtueMart works with a standard Joomla template, such as Beez, and build up from there. On this page is how to make a minimalist Joomla 2.5 template: http://docs.joomla.org/Creating_a_basic_Joomla!_template

You asked about the many classes & ids in the VirtueMart view templates, not all of these are used, leaving them available for the site designer to style. but also there are many there for JavaScript & <form> purposes. Usually css is used in conjunction with template overrides to provide the required layout, together with language overrides to set up the text to suit the site function..

For basic override help see http://www.ostraining.com/blog/joomla/overrides and also http://docs.virtuemart.net/tutorials/33-templating-layouts.html

qwalk · April 21, 2013, 13:42:51 PM

Hi, actually that screenshot was from the browser to illustrate that the css weren't loading.

But you were right about me didn't include the head jdoc. After I read the documentation you linked to, I included that and all CSS's are loading now. Thanks for your help.

I guess I was rushing a bit too fast into styling that I forgot Joomla template basics.

But yes, as you write as well, there are still a lot of divs and classes that are unstyled before hand. Do you know about any "basic" completed stylesheets that are available for download, that I can work on?

Thanks.

jenkinhill · April 21, 2013, 16:20:41 PM

Use the default VM one, vmsite-ltr.css and then test your own edits/additions.

News:

Styling the Shop is chaotic

qwalk

jenkinhill

qwalk

jenkinhill

qwalk

jenkinhill