Return to previous page

Changing the Background Colour and font of Add Cart

This topic has 14 replies, 2 voices, and was last updated 10 years, 3 months ago ago by Eva Kemp

cclooi

Participant

August 22, 2014 at 21:03

Hi,

have several questions pertaining to the theme.
I would like to follow some styles observed on this site http://www.luxola.com.
How can I go about it.

1. How do I change the background colour, hover colour and font of the Add to cart button.
2. How to change the font and colour of the product title, and product category as it looks totally different from the font for headings.
3. How to change the colour and font of prices indicated for products.
4. How do I shift the search option to elsewhere in the site, i.e. to the right of the page instead of top
5. For my layer slider, I had set the global settings for ‘Navigation’ to ‘Prev and next buttons on hover’. However, the prev and next buttons are not shown when I move my mouse cursor over the slider.
6. How can I follow the same black background and white fonts for the title of pages.
7. Is there anyway I can change the bottom of my page to also background with white fonts.
8. How can I add more 2-3 tier description for my products.

Thks

Please, contact administrator
for this information.

#13324 Copied

13 Answers
Eva Kemp

Support staff

August 22, 2014 at 21:55
Hello,

1. You need add the following code into custom.css file (change color and font values to yours):
```
a.button.etheme_add_to_cart_button.product_type_simple {
background-color: red;
font-family: monospace;
}
a.button.etheme_add_to_cart_button.product_type_simple:hover {
background-color: blue;
}
```
2. Add this code into custom.css to change the color and font for product title:
```
#product-page .product-shop h1 {
font-family: monospace;
color: red;
}
```
3. This code is for products price:
```
.amount {
color: green;
font-family: monospace;
}
```
4. You can move search form adding this code into custom.css file:
```
#search {
margin-top: 90px !important;
left: 350px;
}
```
5. Please provide us with wp-admin panel and FTP credentials to check the issue with LayerSlider.

6. Concerning the menu use this code:
```
#main-nav, #main-nav > ul > li.current_page_item {
background-color: black;
}
#main-nav > ul > li.current_page_item > a, #main-nav > ul > li > a {
color: white;
}
```
7. For footer background:
```
#footer {
background-color: black;
}
.footer-information ul li a {
color: white;
}
```
8. Sorry, but there is no such feature.

To create custom.css file you need rename default.custom.css to custom.css in wp-content/themes directory via FTP. Then enable it in Blanco – Theme Settings > tick “Enable Custom CSS”.

Regards,
Eva Kemp.
#13326 Copied
cclooi

Participant

August 23, 2014 at 18:45

Hi,

info as indicated. Apologies but have several follow up questions.

Please, contact administrator
for this information.

#13365 Copied

Eva Kemp

Support staff

August 24, 2014 at 08:42

Hello,

Please provide us with wp-admin panel login details and we’ll enable custom.css file for you.
Concerning the question 8 you have to contact Woocommerce support as this is related to their configuration.
To fix the question 9 you need go to Blanco – Theme Settings > Product Page box > Product Page Banner, and press “minus” icon to remove the banner or upload your own.
Don’t forget to save changes.

Regards,
Eva Kemp.

#13391 Copied

cclooi

Participant

August 24, 2014 at 20:50

Hi,

Has managed to enable the custom.css file, thanks.

Can you assist to take a look at question 5, have provided the details in previous link.

Other questions:
1. Specified my portfolio page to show 12 items per page. However, only 10 items are shown for my product pages.

2. Footer background: the background colour does not stretch out to cover the whole bottom footer page after using the code. Likewise, the menu background should stretch wide in alignment with my Layer Slider which is set to ‘wide’

3. In my menu, the colour of the fonts in menu becomes total white when I scroll down to the product categories. How to also change the font of the product caegories.

4. Again on footer background. After the changes, words such as ‘our offers’, ‘shipping account’, ‘site map’ etc are not visible. Also, what is the adjustment required to prevent the colour to be red when I want to highlight any portion of the page.

Thanks

Please, contact administrator
for this information.

#13410 Copied
Eva Kemp

Support staff

August 25, 2014 at 11:55
Hello,

1. To have 12 products per page you need change in wp-admin panel > Settings > Reading > Blog pages show at most, and select 12 posts.

2. I’ve strengthen the container to make the content more wider using this code:
```
.containerInner {
    position: relative;
    width: 1263px !important;
    padding: 1px 0px 0px;
}

.page-template-frontpage-php .banner {
    margin-left: 100px !important;
}
.product-slider {
width: 98% !important;
}
```
3. Hover color of the menu items has been changed to black. Please check it now.
To change the font to menu subitems (product categories) you need add this code into custom.css file:
```
#main-nav > ul > li > ul > li a {
    font-family: font_name_you_need;
}
```
4. Footer links color is now changed to white. I’ve added this code into custom.css:
```
#footer .copyright .links li > a, .copyright p, .footer-information h5 {
     color: white;
}
```
If you want to change hover color from red to some other use this code:
```
a:hover {
color: red !important;
}
```
(change color value to yours).

Concerning the LayerSlider, try to disable 3rd-party plugins one by one. Perhaps some may cause incompatibility.

Regards,
Eva Kemp.
#13442 Copied
cclooi

Participant

August 25, 2014 at 16:11

Hi,

thanks for the help.

The menu and footer is fine as requested.
However appreciate if some adjustment can be made to the changes made to the width of the product.
Would still prefer them to be centred as per previous and not stretched to both ends. Tried changing the percentage of the width but this does not help much….

From mobile, the page has also become unresponsive.

How can I also centre the respective menu titles such that the right do not look so empty.

Thanks a lot

#13485 Copied
Eva Kemp

Support staff

August 25, 2014 at 18:30
Hello,

I’ve added the following code into custom.css:
```
.product-slider {
width: 80% !important;
margin: 0px 100px 15px;
}

.carousel .slider {
    width: 80% !important;
}
```
and for mobile device:
```
@media only screen and (max-width: 479px) {.containerInner {
    width: 280px !important;
}
.page-template-frontpage-php .banner {
    margin-left: 0px !important;
}
.product-slider {
    width: 220px !important;
    margin: 0px 0px 15px;
}
}
```
Please check the site now.

Regards,
Eva Kemp.
#13497 Copied
cclooi

Participant

August 25, 2014 at 19:08

Hi,

have tested adding new products and featured products but page display seems to stop at 3.

Would like to take reference from this site http://www.luxola.com with regard to footer text alignment and menu title alignment, ie the words on these 2 areas are aligned from centre onwards instead of presently skewed to the left.

The ‘new’ for featured products and some images are also appearing above the words featured products.

The alignment also seems ‘off’ when I click the scroll to right button for the latest products.

Thanks a lot

#13503 Copied

Eva Kemp

Support staff

August 26, 2014 at 13:22

Hello,

We’re sorry, but if you want to have the same customization as on the site http://www.luxola.com it requires a lot of modifications in the theme files. And it’s not for free. We recommend you to find some developer who will assist you on achieving all the desired features.
Thank you for understanding.

Regards,
Eva Kemp.

#13571 Copied

cclooi

Participant

August 26, 2014 at 17:17

Hi,

think there is a misunderstanding. The intention is not to customise as the same as luxola.com.
The adjustment had made the alignments to be severely ‘off’, if you get what I meant from the look of the previous site.

Anyway, I have earlier re-adjusted and reverted several of the changes such that the overall alignment is not hampered owning to the changes.

Will like to check how I can make changes to the widget with ‘Follow us’, ‘New Gift Card’, ‘TEL’.

How can I also get back ‘my checkout’ and ‘my wishlist’ from previous Blanco install demo pages.

Thanks

#13592 Copied

Eva Kemp

Support staff

August 26, 2014 at 18:11

Hello,

Could you please clarify what changes you want to make for ‘Follow us’, ‘New Gift Card’, ‘TEL’?
As you can see on our demo https://www.8theme.com/demo/blanco-wo there is no “My wishlist”.
Please clarify with more details what exactly you’re trying to achieve. You may show us screenshots for better understanding.
Thank you.

Regards,
Eva Kemp.

#13599 Copied

cclooi

Participant

August 26, 2014 at 19:26

Hi,

for ‘Follow us’, ‘New Gift Card’, ‘TEL’, am looking to increase the number of social buttons for ‘Follow us’, change or edit the words ‘New Gift Card’ and linking it/removing it atogether, plus changing the ‘TEL’ no.

i have a shareholic shortcode [shareaholic app=”share_buttons” id=”7338523″] to be placed in ‘Follow us’ if feasible.

#13607 Copied

Eva Kemp

Support staff

August 26, 2014 at 21:15

Hello,

‘Follow us’, ‘New Gift Card’, ‘TEL’ section can be changed in Prefooter widget area in Appearance > Widgets. You can drag Text widget into there and place your shortcode or some other widgets.

Regards,
Eva Kemp.

#13614 Copied
Viewing 14 results - 1 through 14 (of 14 total)

The issue related to '‘Changing the Background Colour and font of Add Cart’' has been successfully resolved, and the topic is now closed for further responses

Changing the Background Colour and font of Add Cart

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection