Jump to content
Sign in to follow this  
yemoonyah

Remove product description border in Jigoshop

Recommended Posts

yemoonyah

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.

div#tab_description.panel {border:"none" !important}

http://bronwynsherman.com/shop/necklaces/honey-calcite/ 2. I would also like to edit the heading (Product Description) in the panel and the one above the related products section (Related Products). http://bronwynsherman.com/shop/necklaces/honey-calcite/ 3. How do I change the color of the 'buy now' button to #909d58 http://bronwynsherman.com/shop/necklaces/honey-calcite/ 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? http://bronwynsherman.com/shop/ 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.

Share this post


Link to post
Share on other sites
batman

Hi You can try this

#page div.product #tabs .panel {border-width: 0px;}


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
James B

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 :)


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
yemoonyah

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?

Share this post


Link to post
Share on other sites
batman

Hi You can try

.jigoshop #page a.checkout-button, .jigoshop #page .button-alt {
	    background: -moz-linear-gradient(center top , rgb(144, 157, 88) 0%, rgb(144, 157, 88) 100%) repeat scroll 0% 0% transparent;
	}
For mouse hover
.jigoshop #page a.checkout-button:hover, .jigoshop #page .button-alt:hover {
	    background: -moz-linear-gradient(center top , rgb(144, 157, 88) 0%, rgb(144, 157, 88) 100%) repeat scroll 0% 0% transparent;
	}

You can modify rgb (#,#.#) for gradient and mouse hover If you want change #909d58 to rgb you have this link: http://hex2rgba.devoth.com/


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
batman

For left align

#page div.product #tabs .panel {margin-left: -10px;}

Try to adjust "-10px" as you like


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
yemoonyah

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:

#page div.product #tabs .panel {margin-left: -10px;}
	
	.jigoshop #page a.checkout-button, .jigoshop #page .button-alt {
	margin: 0.1em 0 0 0;
	background: #909d58;
	background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#909d58),color-stop(100%,#909d58));
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#909d58',endColorstr='#909d58',GradientType=0);
	box-shadow: none;
	color: #F7F7F7 !important;
	text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
	}
	
	.jigoshop #page a.checkout-button:hover, .jigoshop #page .button-alt:hover {
	margin: 0.1em 0 0 0;
	background: #70794a;
	background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#70794a),color-stop(100%,#70794a));
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#70794a',endColorstr='#70794a',GradientType=0);
	box-shadow: none;
	color: #F7F7F7 !important;
	text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
	}

Share this post


Link to post
Share on other sites
batman

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


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×