Return to previous page

Dark Theme Colour Defects - by JamieG - on WordPress WooCommerce support

This topic has 11 replies, 2 voices, and was last updated 7 years, 8 months ago ago by Robert Hall

JamieG

Participant

August 1, 2016 at 19:30

Hi,

I’ve just noticed my theme has some defects compared to your demo of the black version. For example, if you add an item to the cart, the shopping cart price is red so you can’t see the text?

Here are my colour scheme settings: https://i.gyazo.com/969b20718f22e8940fbb910bb9ceb119.png

There’s nothing in the documentation on how to change these other colours around. Another example can be seen on the basket page whereby the text is nearly blending in with the background?

On a side note too, is there a way to collapse the ‘8theme subcategories list’ widget by default so pages like this – http://www.buypokemongoaccounts.co.uk/about-us/ doesn’t seem so long?
Also, is there a way I can change the action of clicking on the ‘Pokemon Finder’ text so it expands the accordion, rather than taking you to the Pokemon Finder category page?

Thanks!
Jamie

#135293 Copied Theme version: Latest WooCommerce version: Latest

10 Answers
Robert Hall

Support staff

August 2, 2016 at 08:27
Hello,

I’ve just noticed my theme has some defects compared to your demo of the black version. For example, if you add an item to the cart, the shopping cart price is red so you can’t see the text?

Try to add this code in custom.css file.
```
#top-cart .amount {
    color: #fff;
}
```
There’s nothing in the documentation on how to change these other colours around. Another example can be seen on the basket page whereby the text is nearly blending in with the background?
```
.cart_item .product-name a{
    color: #fff;
}
```
On a side note too, is there a way to collapse the ‘8theme subcategories list’ widget by default so pages like this – http://www.buypokemongoaccounts.co.uk/about-us/ doesn’t seem so long?

Please try to comment out this code in wp-content/themes/idstore/js/script.js file on line 341.
jQuery('.categories-group.has-subnav:first').addClass('opened').find('ul').show();

Also, is there a way I can change the action of clicking on the ‘Pokemon Finder’ text so it expands the accordion, rather than taking you to the Pokemon Finder category page?

Sorry, but we don’t have such feature in our theme.

Regards,
Robert Hall
#135331 Copied
JamieG

Participant

August 2, 2016 at 13:39

Hi Robert,

Thanks for the code.

I have applied them all but noticed there are still a lot of colour defects in the dark theme when it comes to the shopping cart area.

Here is mine: https://i.gyazo.com/2d753c8d88b7baff8b4417b1b114cbca.png
Here is the demo: https://i.gyazo.com/315dd4a40737eee41ad5e39bfc78cdd2.png

I have highlighted the issues that are different. Is there a fix for this please?

When it comes to ‘commenting out a piece of code’ – I’m not exactly sure what you want me to change on this line? I can find the line fine within that file, I just don’t know which bit of it to change? Please could you help?

Many Thanks!
Jamie

#135384 Copied
Robert Hall

Support staff

August 2, 2016 at 14:19
Please use this code in custom.css file
```
#top-cart ul li{
    background: initial;
}
#top-cart .button.view-cart{
    background-color: #fc5b5b;
}
#top-cart .button.view-cart:hover{
    background-color: #e83636;
}
.cart-summ .total:hover{
    color:#fff;
}
#top-cart .cart-popup{
    top: 29px;
}
```
You need to add two slash // before this code. See screenshot: http://prntscr.com/c0nksh

Regards,
Robert Hall
#135394 Copied
JamieG

Participant

August 2, 2016 at 14:26

Hi Rob,

Thanks that custom code worked well!

For the second point, I’ve added the two slashes as seen here: https://i.gyazo.com/8400479ef3ba2d46a8797f8f910a6d52.png

But unfortunately it doesn’t seem to close the accordion by default when you open a page e.g. http://www.buypokemongoaccounts.co.uk/how-to-buy-pokemon-go-accounts/

Thanks again for your help!

Jamie

#135395 Copied

Robert Hall

Support staff

August 2, 2016 at 15:05

As I see it’s closed now – http://prntscr.com/c0o863

Please clear cache and check it again.

Regards,
Robert Hall

#135403 Copied

JamieG

Participant

August 4, 2016 at 15:44

Hi Robert,

Sorry, just noticed another slight problem with colours on the checkout page. See the product description here: https://i.gyazo.com/8cbe16ef9b10e59482dce991d98ee4a3.png

Can we make it the same as the demo please?

On the order confirmation page, can we also make the download link in the theme’s red colour and underlined too please? See here, it just looks like normal text: https://i.gyazo.com/12438ec344cab4fb2f3648393e69b6f2.png

And is there a way that we can skip the whole ‘Shipping Address’ section of the checkout page as I really don’t need it?

Many thanks!
Jamie

#135668 Copied

JamieG

Participant

August 4, 2016 at 20:17

Hi Robert,

Sorry to bother you again. It seems like the products don’t have the same coloured background around the description area when you use the Woocommerce shortcode on a page, see: http://www.buypokemongoaccounts.co.uk/shop/elite-pokemon-go-accounts/

Compared to: http://www.buypokemongoaccounts.co.uk/shop/

Example code used: [product_category category="beginner"]

Is there a fix for this please?

Thanks!

#135691 Copied
Robert Hall

Support staff

August 5, 2016 at 08:08
Hello,

Sorry, just noticed another slight problem with colours on the checkout page. See the product description here: https://i.gyazo.com/8cbe16ef9b10e59482dce991d98ee4a3.png

Please use this code in custom.css
```
.woocommerce-checkout .cart_item .product-name{
color: #eee;
}
```
On the order confirmation page, can we also make the download link in the theme’s red colour and underlined too please? See here, it just looks like normal text: https://i.gyazo.com/12438ec344cab4fb2f3648393e69b6f2.png

I can’t find this section on your site. Please describe how to find it step by step. Thanks!

And is there a way that we can skip the whole ‘Shipping Address’ section of the checkout page as I really don’t need it?

Try to add this code in custom.css
```
#tab_4{
display:none;
}
```
It seems like the products don’t have the same coloured background around the description area when you use the Woocommerce shortcode on a page

Add this code in custom.css
```
.product-grid{
    background: #333;
    border-bottom: 1px solid #111;
}
```
Regards,
Robert Hall
#135715 Copied
JamieG

Participant

August 5, 2016 at 11:09

Hi Robert, thanks for that. All applied.

In order to test the order confirmation page, please checkout with this product: http://www.buypokemongoaccounts.co.uk/product/template/

Product Pages:
1) Is there a way to remove all the SKU and Categories from them? E.g. http://www.buypokemongoaccounts.co.uk/product/pokedex-complete-level-28/

2) Is there a reason as to why my theme only shows 2 and a half product gallery images and the demo shows 3 and a half?

Shop Page and Pages with a Woocommerce category code:
3) Can we centre the title and regular price please of each product? We’re not going to use the Sale options.
Shop page: http://www.buypokemongoaccounts.co.uk/shop/
Woocommerce category code page example: http://www.buypokemongoaccounts.co.uk/shop/elite-pokemon-go-accounts/ < Notice the title, price and button and all not aligned.

4) Whenever you hover over a product’s image, the image doesn’t ‘Swap’ like the demo does despite this option being enabled in the backend. See: https://i.gyazo.com/6aa94b9b10cc9cd0b8054b535e158fe9.png
Is there a way to fix this?

Thanks again!
Jamie

#135759 Copied
Robert Hall

Support staff

August 5, 2016 at 14:33
Hello,

Please use this code
```
.download-url a{
    color: #fc5a5a;
    text-decoration: underline;
}
```
1)
```
div.product_meta .sku_wrapper, div.product_meta .posted_in {
    display: none;
}
```
2) Please show us screenshot to understand what exactly you mean.
3) Use this code
```
.product-grid .price {
    text-align: center;
    width: 100%;
}
```
```
.product-grid .product-name-price {
    text-align: center;
}
.product-grid .btn-cont {
    width: 100%;
}
```
4) In this case you should upload the hover image in Products settings. See screenshot: http://prntscr.com/c1yx51
Regards,
Robert Hall
#135796 Copied
Viewing 11 results - 1 through 11 (of 11 total)