changing colours

I have been trying in different ways but I cannot seem to manage to change the colours and appearance of my product price button and add to cart buttons.
Can you please advise me on how to do this? I am using Instyle theme in Woocommerce.

I have tried changing them in the Stylesheet style.css and in the editor-style.css file but this didn't change anything....

Thanks for your reply.

Hello,

Please use css/override.css file (first enable this override option from Template Options -> Advanced tab), and next time please use the proper section - it's startup theme, I'll move this topic to the Instyle section.

Let me know if you'll have still problem with that.

Thank you for your help. This is the content of the override.css file.

/**
*
* -------------------------------------------
* Override
* -------------------------------------------
*
**/

/*
*
* 16. Override
*
*
------------------------------------ */

/* 16.1. Overrided elements
==================================== */


What do I add here in order to change colours in my lay out?

I will use the right forum page next time. Thanks again!

Inge van Dijk

I thought that you have css code, but don't know where you can add it. Ok in this case, you have to provide an URL to your website (here or via PM - direct link to the page with elements/buttons which you want to change). Then I'll try to help you with that.

Thank you for your help. I really appreciate it. I have been trying to learn how to make the following changes but I am stuck!

For example on this page:

http://test.pommedorange.com/?product_cat=purses

The prices are written in red, they need to be this colour: #dd927f
The font of the price and the size of the buttons are too big as well.

And on this page:

http://test.pommedorange.com/?product=p ... acelet-isa

I want the price (which is now red) changed to the following colour: #dd927f and for the font to be smaller. Background of the price is now light grey, I would like it to be white.
The 'add to cart' button is red. This needs to be: #96af63 When you hover over it, its is dark grey this needs to be #dd927f.
The font of the product title needs to be smaller.

Any help on how to change this is much appreciated.

Regards

Inge van Dijk

Add the following code into the theme’s css/override.css file (make sure to enable the “Use the override.css file” option in Template options > Advanced in the WordPress backend)

Code: Select all

.price .amount {
   color: #dd927f;
   font-size: 14px!important;
}

ul.products li.product > a {
   display: inline-block;
}

ul.products li.product .price {
   padding-bottom: 15px;
}

p.price {
background: transparent;
}

.single-product .single_add_to_cart_button {
   background: #96af63!important;
}

.single-product .single_add_to_cart_button:hover {
   background: #dd927f!important;
}

h1.product_title {
    font-size: 30px;
}


add this code at the end of override.css file after

Code: Select all

/* 16.1. Overrided elements
==================================== */


Thank you, I did exactly the above but nothing has changed.
Override has been enabled.
This is now the content of my css- override.css file on the server:

color: #dd927f;
font-size: 14px!important;
}

ul.products li.product > a {
display: inline-block;
}

ul.products li.product .price {
padding-bottom: 15px;
}

p.price {
background: transparent;
}

.single-product .single_add_to_cart_button {
background: #96af63!important;
}

.single-product .single_add_to_cart_button:hover {
background: #dd927f!important;
}

h1.product_title {
font-size: 30px;
}
/* 16.1. Overrided elements
==================================== */

I edited the file and upoaded it again but no change on the website.........

Hi,

your override.css file is empty, please check it again, and you should add your code at the end, here is the complete override.css file:

Code: Select all

/**
 *
 * -------------------------------------------
 * Override
 * -------------------------------------------
 *
 **/

/*
 *
 * 16. Override
 *
 *
------------------------------------ */

/* 16.1. Overrided elements
==================================== */

.price .amount {
   color: #dd927f;
   font-size: 14px!important;
}

ul.products li.product > a {
   display: inline-block;
}

ul.products li.product .price {
   padding-bottom: 15px;
}

p.price {
background: transparent;
}

.single-product .single_add_to_cart_button {
   background: #96af63!important;
}

.single-product .single_add_to_cart_button:hover {
   background: #dd927f!important;
}

h1.product_title {
    font-size: 30px;
}


I am very confused. How can you see that the file is empty? Where do I find this file in the admin system?
The override.css I have edited in Filezilla, it is not empty. But there is no change in the buttons.

Thank your for your patience

In other words I don't know where to find the override.css file so I can edit it.
Under appearances/editor/Instyle there is only the stylesheet.css or editor-stylesheet.css
I will be needing the override file I presume for many more things if I want to custimize my page.

Hello,

I have managed to overwrite the override.css file in Filezila and make the changes. I have overwritten it in instyle/css/override.css and it worked. However, this morning my site is unable to load and I don't know how to fix this. The connection with the server is fine.
Did I do this by overwriting files??? I don't know what to do now......
Thank you for your help.

I have to add that I do not have a childs theme for my site. Do I need this??

Please ignore all above posts. I have been able to make the necessary changes using the override.css file.

Then, I decided to make a child's theme as I wasn't using one. With the following code:
/*
Theme Name: InStyle Child
Theme URI: http://www.gavick.com
Description: Child theme for the InStyle theme
Author: GavickPro
Author URI: http://www.gavick.com
Template: InStyle
Version: 1.0
*/

*/import layout*/

@import url(../InStyle/style.css);


Now I have a big problem as my whole layout is messed up.
It looks like there is no Instyle layout anymore. Just Woocommerce ellements and other plugins.
When I change back to Instyle (parent theme) it is the same problem!

What can I do?
Or should I start a new thread on this topic?

Thanks.

Hi,

Try to remove this line:

@import url(../InStyle/style.css);

from your child's style.css file. if you want to add only css changes, there's no need to use child theme, you can add all your mofifications into override.css file. Please check this article:
http://www.gavick.com/documentation/wor ... ld-themes/

Thanks.
I removed the line, but no difference.
I switched back to Instyle (if I understand correctly I don't need childs theme.)
My whole website layout has gone! www.test.pommedorange.com

I have no idea what I did and how to repair this....

Could you please provide me with a URL to your website and back-end and FTP access via PM (click the “Private Message” text underneath my avatar) so that I may analyze it?. You probably lost your widgets configuration.

Thanks if you can take a look.

website: http://test.pommedorange.com/
wp-admin: username: *** password: ***

FTP
Hostname: ***
username: ***
password: ***

It's public forum, you can't post here this kind of informations because it's very unsecure. Next time send me a PM - click the “Private Message” text underneath my avatar, please change your passwords for the backend and FTP ASAP, then let me know.

Ok I understand I will PM you.