Author Topic: Specific Category/Product Page CSS Override without new template  (Read 14692 times)

PRO

  • Global Moderator
  • Super Hero
  • *
  • Posts: 10272
  • VirtueMart Version: 3+
Specific Category/Product Page CSS Override without new template
« on: November 28, 2011, 23:36:43 pm »
There is no reason to create a new override template just to change SIMPLE css for specific categories, or product pages.

What you can do is wrap your category with a div class tag thats unique per the category id. Like this.
Place this code above where the html starts in your category default.php , or override file.
<div class="h<?php echo JRequest::getInt('virtuemart_category_id'); ?>">

THEN, make sure to close it at the bottom. </div>

You can also do the same with the product page.
<div class="h<?php echo JRequest::getInt('virtuemart_product_id'); ?>">

then you can just add specific styles like this.
.h11 .spacer{height:237px;}

^ where the 11 is the category id.
I do NOT do development work for hire.

maxispin

  • Jr. Member
  • **
  • Posts: 169
Re: Specific Category/Product Page CSS Override without new template
« Reply #1 on: March 04, 2012, 18:24:42 pm »
Could you please tell for a php noob, where .h1 .spacer{height:237px;} is inserted?
VM 3.0.17.6 | VM 2.0.24c | VM 1.1.9

PRO

  • Global Moderator
  • Super Hero
  • *
  • Posts: 10272
  • VirtueMart Version: 3+
Re: Specific Category/Product Page CSS Override without new template
« Reply #2 on: March 04, 2012, 20:21:18 pm »
Could you please tell for a php noob, where .h1 .spacer{height:237px;} is inserted?

.h11 .spacer{height:237px;}

IS the css. BUT thats what I use to make borders around products , and I want the product borders to be specific sizes for different categories.

What are you wanting to change?

All my code does is make a dynamic class to have the ability to change the category css, without doing a whole new template override
I do NOT do development work for hire.

maxispin

  • Jr. Member
  • **
  • Posts: 169
Re: Specific Category/Product Page CSS Override without new template
« Reply #3 on: March 04, 2012, 20:50:11 pm »
Basically I just need to fine tune product category font sizes and colors.

I understood that that line should be inside the css-file.   

I am not sure if this file is the "core" css file:  /public_html/components/com_virtuemart/assets/css/vmsite-ltr.css (?)

Overally, I am a bit confused with dozens of different files the system is constructed off. Possibilities are endless but it is a bit complecated if the user as me have no coding experience, and everything has to be done via trial and error.

Css files are something I am going to hack next.
VM 3.0.17.6 | VM 2.0.24c | VM 1.1.9

PRO

  • Global Moderator
  • Super Hero
  • *
  • Posts: 10272
  • VirtueMart Version: 3+
Re: Specific Category/Product Page CSS Override without new template
« Reply #4 on: March 04, 2012, 21:10:29 pm »
Basically I just need to fine tune product category font sizes and colors.

I understood that that line should be inside the css-file.   

I am not sure if this file is the "core" css file:  /public_html/components/com_virtuemart/assets/css/vmsite-ltr.css (?)

YES thats the file.

BUT::: my code is if you want to have different fonts per category. Or if you want o change just 1 category font.

http://forum.virtuemart.net/index.php?topic=90935.0
I do NOT do development work for hire.

maxispin

  • Jr. Member
  • **
  • Posts: 169
Re: Specific Category/Product Page CSS Override without new template
« Reply #5 on: March 05, 2012, 06:01:57 am »
Grazie!  :)

I continue "exercises" later this week.
VM 3.0.17.6 | VM 2.0.24c | VM 1.1.9