How do I change the background colour of text boxes?

Resolved

(@emmalouise001)

Hello. I’ve been trying to change the background colour of some text boxes that WooCommerce makes green by default. (I’m not even sure what to call these parts!) I’ve manage to change the colour of the buttons with CSS but really can’t work out how to change the remaining green. Ideally I’d like it changed to transparent/white.

My website isn’t public yet so I’ve uploaded screenshots of the pages in question here: https://www.flickr.com/photos/46844617@N08/

And below is my status report if it helps. Any help would be much appreciated so I can finally get rid of that horrible green!


### WordPress Environment ###

WordPress address (URL): https://houhoubakery.co.uk
Site address (URL): https://houhoubakery.co.uk
WC Version: 4.5.2
REST API Version: ✔ 4.5.2
WC Blocks Version: ✔ 3.1.0
Action Scheduler Version: ✔ 3.1.6
WC Admin Version: ✔ 1.5.0
Log Directory Writable: ✔
WP Version: 5.5.1
WP Multisite: –
WP Memory Limit: 256 MB
WP Debug Mode: –
WP Cron: ✔
Language: en_US
External object cache: ✔

### Server Environment ###

Server Info: nginx
PHP Version: 7.3.22
PHP Post Max Size: 2 GB
PHP Time Limit: 1200
PHP Max Input Vars: 6144
cURL Version: 7.72.0
OpenSSL/1.1.1d

SUHOSIN Installed: –
MySQL Version: 5.5.5-10.3.24-MariaDB-log
Max Upload Size: 2 GB
Default Timezone is UTC: ✔
fsockopen/cURL: ✔
SoapClient: ✔
DOMDocument: ✔
GZip: ✔
Multibyte String: ✔
Remote Post: ✔
Remote Get: ✔

### Database ###

WC Database Version: 4.5.2
WC Database Prefix: wp_
Total Database Size: 2.73MB
Database Data Size: 1.32MB
Database Index Size: 1.41MB
wp_woocommerce_sessions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_api_keys: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_attribute_taxonomies: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_downloadable_product_permissions: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_woocommerce_order_items: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_order_itemmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_tax_rates: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_woocommerce_tax_rate_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_shipping_zones: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_woocommerce_shipping_zone_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_shipping_zone_methods: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_woocommerce_payment_tokens: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_payment_tokenmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_log: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_actionscheduler_actions: Data: 0.02MB + Index: 0.11MB + Engine InnoDB
wp_actionscheduler_claims: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_actionscheduler_groups: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_actionscheduler_logs: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_commentmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_comments: Data: 0.02MB + Index: 0.09MB + Engine InnoDB
wp_links: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_options: Data: 0.16MB + Index: 0.06MB + Engine InnoDB
wp_postmeta: Data: 0.06MB + Index: 0.03MB + Engine InnoDB
wp_posts: Data: 0.30MB + Index: 0.06MB + Engine InnoDB
wp_termmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_terms: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_term_relationships: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_term_taxonomy: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_usermeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_users: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_wc_admin_notes: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wc_admin_note_actions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_category_lookup: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wc_customer_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_download_log: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_order_coupon_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_order_product_lookup: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_wc_order_stats: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_wc_order_tax_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_product_meta_lookup: Data: 0.02MB + Index: 0.09MB + Engine InnoDB
wp_wc_reserved_stock: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wc_tax_rate_classes: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_webhooks: Data: 0.02MB + Index: 0.02MB + Engine InnoDB

### Post Type Counts ###

attachment: 5
customize_changeset: 38
custom_css: 1
jetpack_migration: 2
nav_menu_item: 10
page: 12
post: 7
product: 10
revision: 53
wp_template_part: 2

### Security ###

Secure connection (HTTPS): ✔
Hide errors from visitors: ✔

### Active Plugins (12) ###

Akismet Anti-Spam: by Automattic – 4.1.6
AMP: by AMP Project Contributors – 2.0.3
CoBlocks: by GoDaddy – 2.3.2
Crowdsignal Forms: by Automattic – 1.1.1
WordPress.com Editing Toolkit: by Automattic – 2.5
Gutenberg: by Gutenberg Team – 9.0.0
Jetpack by WordPress.com: by Automattic – 8.9.1
Layout Grid: by Automattic – 1.3
Page Optimize: by Automattic – 0.5.1
WooCommerce Stripe Gateway: by WooCommerce – 4.5.2 – Installed version not tested with active version of WooCommerce 4.5.2
WooCommerce Services: by Automattic – 1.24.3 – Installed version not tested with active version of WooCommerce 4.5.2
WooCommerce: by Automattic – 4.5.2

### Inactive Plugins (1) ###

Classic Editor: by WordPress Contributors – 1.6

### Dropin Plugins (2) ###

advanced-cache.php: advanced-cache.php
object-cache.php: Memcached

### Must Use Plugins (1) ###

WP.com Site Helper: by  –

### Settings ###

API Enabled: –
Force SSL: –
Currency: GBP (£)
Currency Position: left
Thousand Separator: ,
Decimal Separator: .
Number of Decimals: 2
Taxonomies: Product Types: external (external)
grouped (grouped)
simple (simple)
variable (variable)

Taxonomies: Product Visibility: exclude-from-catalog (exclude-from-catalog)
exclude-from-search (exclude-from-search)
featured (featured)
outofstock (outofstock)
rated-1 (rated-1)
rated-2 (rated-2)
rated-3 (rated-3)
rated-4 (rated-4)
rated-5 (rated-5)

Connected to WooCommerce.com: –

### WC Pages ###

Shop base: #47 - /shop/
Cart: #48 - /cake-cart/
Checkout: #49 - /checkout/
My account: ❌ Page visibility should be public
Terms and conditions: ❌ Page not set

### Theme ###

Name: Karuna
Version: 1.2.10-wpcom
Author URL: http://wordpress.com/themes/
Child Theme: ❌ – If you are modifying WooCommerce on a parent theme that you did not build personally we recommend using a child theme. See: How to create a child theme
WooCommerce Support: ✔

### Templates ###

Overrides: –

### Action Scheduler ###

Complete: 2
Oldest: 2020-09-16 00:01:20 +0100
Newest: 2020-09-16 00:09:19 +0100

The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

Plugin Support RK a11n
(@riaanknoetze)

3 years, 7 months ago

Hi there,

The green areas in your screenshots look like table elements and div’s. It’s definitely possible to change those with custom CSS but the exact CSS varies from one theme to the next. Practically speaking, this means we’d need to access that site to craft the CSS for that site specifically. Are you able to make that page publicly accessible at all?

Thread Starter emmalouise001
(@emmalouise001)

3 years, 7 months ago

Hi,

Thanks for your thoughts. I’ve just made the site temporarily public. (I’ll password protect it once I’ve got this issue solved though!). If it helps to know, the theme I’m using is Karuna.

Thread Starter emmalouise001
(@emmalouise001)

3 years, 7 months ago

Hi,

Can I ask what the table elements and div’s are referred to as in the CSS? I thought I’d found the right parts in the Theme Editor (by searching for the hex code of that green colour) but when I copied and pasted those bits of code as additional custom CSS but a different colour in place of the green, the colour didn’t change. Is it something to do with that CSS not able to ‘override’ almost identical code in the original theme code?

Plugin Support con
(@conschneider)

Engineer

3 years, 7 months ago

Hi there,

> Is it something to do with that CSS not able to ‘override’ almost identical code in the original theme code?

Most likely, yes.
What CSS do you use?

Kind regards,

Plugin Support con
(@conschneider)

Engineer

3 years, 6 months ago

Hi there,

We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.

Kind regards,

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘How do I change the background colour of text boxes?’ is closed to new replies.

Tags