Jump to content


Photo
- - - - -

Remove product description border in Jigoshop


  • Please log in to reply
7 replies to this topic

#1 yemoonyah

yemoonyah

    Super Member

  • Members

  • 143 posts
  • Framework Version:always the latest
  • Country: Country Flag

Posted 13 August 2012 - 11:41 PM

Hi,

I have some questions about Jigoshop:

1. I'm trying to get rid of the top bar (+ title in it) and the borders that surround the product description panel on the Jigoshop single product pages. I just want the content to display.

I tried the following code but that didn't work.

Please Login or Register to see this Hidden Content


Please Login or Register to see this Hidden Content



2. I would also like to edit the heading (Product Description) in the panel and the one above the related products section (Related Products).

Please Login or Register to see this Hidden Content



3. How do I change the color of the 'buy now' button to #909d58

Please Login or Register to see this Hidden Content



4. The color of the product titles on the shop page seem to automatically linked to the header colors set in Pagelines. This is a problem as they are now the same color as the site background color and therefore unreadable. How can I change them?

Please Login or Register to see this Hidden Content




I'm learning how to use Chrome developer tools and I managed to make most changes myself but these are the things I just couldn't figure out. Any help would therefore be very much appreciated.

Thank you.

#2 batman

batman

    Bat Learning

  • Members

  • 2027 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 14 August 2012 - 12:08 AM

Hi
You can try this

Please Login or Register to see this Hidden Content



#3 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 14 August 2012 - 12:38 AM

Hi there, I've not used Jigo Shop so will only be able to assist you on what I can see in Firebug.

I've never used Chrome dev tools but I would advise you to get firebug for performing these kind of customizations. You can find out more about firebug here at www.getfirebug.com/

1) To remove the top-bar
div.product #tabs ul.tabs { background-color: transparent; }

To remove the border
div.product #tabs .panel { border-width: 0px;}

Remove/Hide Active Tab
div.product #tabs ul.tabs li.active a { display: none; }

Question 2, I would imagine you can change these via Jigoshop, otherwise they are coded into the software and you'll have to edit the core files. A dev might be able to shed some more light on the that for you.

Question 3, I can see three 'add to cart' buttons but no 'buy now'.

Question 4, they will be linked through the typography control but you can alter with CSS as below

table.shop_table th, .products li strong { color: #2C2A26; }

Hope that helps :)

#4 yemoonyah

yemoonyah

    Super Member

  • Members

  • 143 posts
  • Framework Version:always the latest
  • Country: Country Flag

Posted 14 August 2012 - 08:41 PM

Thank you, thank you, thank you!!! It all worked :) Question 3: I meant the blue 'add to cart' button. Sorry for that. And one new question: how do I left align the product description title and text so it's in line with the image above and the related products box below?

#5 batman

batman

    Bat Learning

  • Members

  • 2027 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 14 August 2012 - 09:22 PM

Hi
You can try

Please Login or Register to see this Hidden Content


For mouse hover

Please Login or Register to see this Hidden Content


You can modify rgb (#,#.#) for gradient and mouse hover

If you want change #909d58 to rgb you have this link:

Please Login or Register to see this Hidden Content



#6 batman

batman

    Bat Learning

  • Members

  • 2027 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 14 August 2012 - 09:34 PM

For left align

Please Login or Register to see this Hidden Content


Try to adjust "-10px" as you like

#7 yemoonyah

yemoonyah

    Super Member

  • Members

  • 143 posts
  • Framework Version:always the latest
  • Country: Country Flag

Posted 14 August 2012 - 10:19 PM

Thanks Batman,

left align worked beautifully, the color adjustment didn't.
But I figured it out by myself. I'm slowly getting the hang of Chrome Dev Tools (which is kind of the same as Firebug). Here is the code I used:

Please Login or Register to see this Hidden Content



#8 batman

batman

    Bat Learning

  • Members

  • 2027 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 14 August 2012 - 10:34 PM

HI yemoonyah I take note of your code to keep learning. I??m glad to help a little and thank for the "Thanks"