Jump to content


Photo
- - - - -

Target a specific jigoshop product page is CSS


Best Answer Simon_P , 30 June 2014 - 06:33 PM

.term-dresses li a img {width:250px!important;height:250px!important }
.term-dresses .products li {width:250px!important}
Go to the full post


  • Please log in to reply
12 replies to this topic

#1 glynt

glynt

    Super Member

  • Members
  • 201 posts
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 29 June 2014 - 10:31 PM

Hi All,

 

Does anyone know how I can target a specific product page with pagelines (2.4.5) and jigoshop.  I want to target it like I would with an individual page or post (eg .page-id-42) but can't seem to work out how.  (The actual page I want to target it here: 

Please Login or Register to see this Hidden Content

 

Many thanks,

 

Glyn



#2 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 30 June 2014 - 04:56 PM

here are the classes for that page

<body class="archive tax-product_cat term-dresses term-42 custom responsive pagelines product_archive full_width jigoshop jigoshop-products jigoshop-product_cat">



#3 glynt

glynt

    Super Member

  • Members
  • 201 posts
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 30 June 2014 - 05:27 PM

HI Messer,

 

Thanks for your reply.  I found that class but it didn't work, i.e. when I added it to CSS that I already have to change the size of the images it stopped the code working altogether instead just targeting that page.  For example, the CSS below makes my product page images 250px square:

 

ul.products li a img {width:250px!important;height:250px!important }
.products li {width:250px!important}

 

but if I use the following then the images go back to their default size on all product pages:

 

archive tax-product_cat term-dresses term-42 custom responsive pagelines product_archive full_width jigoshop jigoshop-products jigoshop-product_cat ul.products li a img {width:250px!important;height:250px!important }

.products li {width:250px!important}

 

Is there another way to identify just that page?

 

Thanks

 



#4 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 30 June 2014 - 05:32 PM

.jigoshop-product_cat .term-dresses {}



#5 glynt

glynt

    Super Member

  • Members
  • 201 posts
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 30 June 2014 - 05:40 PM

No joy with that either I'm afraid... I have tried both the below and neither work:

 

.jigoshop-product_cat .term-dresses ul.products li a img {width:250px!important;height:250px!important }

 

ul.products li a img .jigoshop-product_cat .term-dresses {width:250px!important;height:250px!important }



#6 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 30 June 2014 - 05:51 PM

Looks like you figured it out, they are 250x250 now



#7 glynt

glynt

    Super Member

  • Members
  • 201 posts
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 30 June 2014 - 06:01 PM

HI Simon,

 

Yes they are but I want the images on that product page to be 375 x 250, that's why I'm trying to find the code to target just that page...



#8 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 30 June 2014 - 06:02 PM

ok, so why not post here the code you are using to make them 250x250



#9 glynt

glynt

    Super Member

  • Members
  • 201 posts
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 30 June 2014 - 06:10 PM

HI Simon,

 

It's the code I included before - I just need to be able to make this apply to one specific product page...

 

ul.products li a img {width:250px!important;height:250px!important }
.products li {width:250px!important}


#10 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 30 June 2014 - 06:15 PM

can you remove that css from your site then as it make it impossible to test with it there



#11 glynt

glynt

    Super Member

  • Members
  • 201 posts
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 30 June 2014 - 06:27 PM

Yep... the code has gone...



#12 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 30 June 2014 - 06:33 PM   Best Answer

.term-dresses li a img {width:250px!important;height:250px!important }
.term-dresses .products li {width:250px!important}

  • glynt likes this

#13 glynt

glynt

    Super Member

  • Members
  • 201 posts
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 30 June 2014 - 06:58 PM

You are literally awesome!  Thank you so much!!