Templating for a real Dumbass!!!

[IntrepidClassChicken]

Hi Folks,

I have read the templating FAQ for about the hundredth time. I just can't make any sense out of it whatsoever.

Still using Joomla 1.5 since I got the mistaken information that 2.5 was so new it was not yet being supported... Yes I have whipped that advisor!!!
Not yet read up on how to upgrade.

Just updated to the latest version of VirtueMart, 2.0.1.4

Used Artisteer to create my templates.

Now can't for the life of me figure out which exact file in which exact location I need to modify in which exact way in order to make Virtuemart pages look like all my other articles.

In the Configuration section I have turned off using the VirtueMart CSS. That seems to get it the closest to what I need but the layouts are still all over the place.

In the opening Virtuemart page the word "Categories" is a heading but it is smaller than the category links. There is no heading bar and there is no gap between the category links and their picture.

In the Category pages the indents are not maintained, there is no heading bar and the fonts are too big.

In the individual product pages, the indents are not maintained, the product name has a strange line spacing and the product images exceed the column width.

Some very precise help would be very much appreciated.

[bytelord]

Hello,

Some tips for creating template overrides:

Use firebug to examine you site code and css styling: https://forum.virtuemart.net/index.php?topic=102850.0
Creating Template overrides: https://forum.virtuemart.net/index.php?topic=98505.0
Template System: https://dev.virtuemart.net/projects/virtuemart/wiki/Hints_for_the_use_of_the_template_system

btw, using artister is a bad solution, sorry for that, the joomla templates produced with artister is so messed up ... i think is not a good idea to use an artister template with other component that you need to create layouts.

Regards

[jenkinhill]

@IntrepidClassChicken one of the major issues with Artisteer is that it does not produce a full set of css styles that are normally required for a full Joomla site. All proper Joomla templates have these styles included as default, so show less severe styling/layout issues. If you are wanting to continue with using that template then you are going to have to look closely at the css for the layout and add the required styles to the end of your template css file.  Firebug is the best tool for examining the issues.

[IntrepidClassChicken]

Thanks Folks,

I tried using other templates in the past and kept running into implementation issues. I could never get any of them to work. Remember you are talking to a Dumbass here.

Artisteer is the most flexible way of developing a template I have found and the workflow is just fantastic. I can't see myself being able to change at this point.

I downloaded Firebug. Right clicked on the Categories heading on the VirtueMart front page and got the following:

<div class="category-view">
<h4>Categories</h4>
<div class="row">
<div class="category floatleft width33 vertical-separator">
<div class="spacer">
<h2>
<a title="Border Tiles" href="/index.php/tile-shop/border-tiles">
Border Tiles
<br>
<img alt="989_1292400132_89_989" src="/images/stories/virtuemart/category/resized/989_1292400132_89_989_90x90.jpg">
</a>
</h2>
</div>
</div>

I need to change the H4 to H2 and the H2 to H4 for starters. Probably best to not have the image bound by the H tags so that the BR registers and puts a space between the link and the image.

Any idea where I would find this code?

Silly questions:
What is a CSS style?
How do I assign them to the end of my template CSS?
Where do I find this template CSS? There are lots of them.

Sorry for being so Dumb. I am good at working the content of websites not the code behind them. Hence why I am using Joomla!!!!

[CDrosos]

http://www.w3schools.com/css/
this will help you understand what CSS is

[bytelord]

Hi,

The second was answer from Cdroros, for the template overrides i gave you before those posts to study

Creating Template overrides: https://forum.virtuemart.net/index.php?topic=98505.0
Template System: https://dev.virtuemart.net/projects/virtuemart/wiki/Hints_for_the_use_of_the_template_system

So the category page default template for example is located under joomla_folder\components\com_virtuemart\views\category\tmpl\default.php
To override it just copy the file to your_joomla_folder\templates\your_joomla_template\html\com_virtuemart\category\default.php
If the folders does not eixst on the destination, create them. This a template override and where the category pages are located.

Also if you start digging the site under templating & layouts section you will find tons of information regarding template overrides, code snippets, etc.

Also take a look on the fields usage:
Product Fields: http://forum.virtuemart.net/index.php?topic=92756.0
Category fields: http://forum.virtuemart.net/index.php?topic=97744.0
$this vs $product: http://forum.virtuemart.net/index.php?topic=100696.0

Regards,
Nikos

[IntrepidClassChicken]

Thanks folks,

I was having trouble with the volumes of reading you gave me as homework and the complication of the solutions offered but I was helped by being told that Artisteer doesn't produce a full set of CSS styles. So I posted a support request with Artisteer and they gave me a very neat work-around.

They told me to put the following code into the Template.css:

.category-view h4
{
background-color: #5E6266;
font-size: 43px;
font-variant: small-caps;
padding: 20px 40px;
}
.spacer h2
{
font-size: 25px;
}
.spacer h2 a img
{
margin-top: 10px;
max-width: 668px;
}

This very specific solution allowed me the opportunity to play with the code to get a result I could live with.

Using the Firebug software recommended, I was able to see the correlation between the code of type         class="category-view"
and the code      .category-view

This allowed me to hunt down the other CSS classes being affected and to input the exact code solutions required.

I noted that there was one class called "modal" which was used differently in different places. This taught me the lesson of needing to be careful to choose the specific CSS classes that were specifically bounding an item in the specific way I wanted to alter. Most of the CSS classes were bound by <div> tags which Firebug arranges using indent levels so I could find CSS classes that bound all of what I needed to change.

There may be other implications to this approach that you might point out. But this is a very precise solution that I find easy to implement.

For your interest, I have added the following code to the end of the Template.css

.category-view h4
{
background-color: #5E6266;
font-size: 43px;
font-variant: small-caps;
padding: 0px 0px;
}

.spacer h2
{
font-size: 25px;
}

.spacer h2 a img
{
margin-top: 10px;
max-width: 668px;
}

.orderby-displaynumber
{
background-color: #5E6266;
margin-left: 40px;
margin-right: 40px;
}

.product
{
margin-left: 40px
}

.browse-view h1
{
background-color: #5E6266;
font-size: 43px;
font-variant: small-caps;
padding: 10px 0px;
}

.productdetails-view h1
{
line-height: 100%;
}

.main-image img
{
max-width: 748px;
}


Thanks again for your assistance.

[IntrepidClassChicken]

BTW Nikos / bytelord,

Your file-path explanation for the template overrides helped me to interpret a different post about removing the "Sort by" block.

Thanks.

[bytelord]

Hello,

You are welcome, seems that you not a real Dumbass because you tried and you resolve your issues

Good luck with your project

Regards