What's the Best Way to Change a Theme Specific CSS Class

[Paddy]

Hi. When changing themes from WooThemes' Canvas to Genesis, what's the best way to deal with certain Woo specific CSS classes. For example, here's a Button that's originally styled with Woo's woo-sc-button class.

<a class="woo-sc-button fr" href="http://www.domain.dev/articles/ideas">
<span>More Ideas</span>
</a>

- Here's Chrome's Inspector's results for a.woo-sc-button.fr - http://i.imgur.com/UKaTLw9.png?1
- The .fr is a simple float: right;
- i've located a.woo-sc-button in the shortcodes.css file.

Is it possible to just rename the class and then copy over all the declarations, and if so, is this an ethical/acceptable move? Or is there a better approach?

Thanks for any suggestions.

[Victor Font]

The easiest way it to overrride the WooCommerce CSS in your child theme's style.css. The issue that you will encounter is that the child theme style.css loads in the browser before the WooCommerce css which gives the WooCommerce styles priority. You need to change the load order of the style sheets so the child theme style loads last, then you can override any of the WooCommerce styles. This will help you make the adjustment: http://victorfont.com/change-genesis-child-theme-style-sheet-load-order/

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Brad Dalton]

You have several options:

1. You can change the class manually in the HTML to button

2. You can add the CSS from Canvas style sheet to your Genesis child themes style sheet.

3. could try a SQL find and replace to change all instances if the class using phpMyAdmin

---

Tutorials for StudioPress Themes.

[Paddy]

@Victor I'm trying to change away from a Woo Theme rather than deal with a theme vs WooCommerce plugin CSS conflict. Thanks for your insight on theme vs plugin CSS load priorities.

@Brad - please excuse these basic questions ...

1. "You can change the class manually in the HTML to button" - is 'button' a Genesis CSS class already, or it would need to be defined in style/custom .css?

2. "You can add the CSS from Canvas style sheet to your Genesis child themes style sheet." - is it allowed/ethical to simply copy the code like this?

3. "could try a SQL find and replace to change all instances if the class using phpMyAdmin" - would this be able to make changes in custom templates and other files such as home.php? I thought these files are separate from what's in the WP database.

[Brad Dalton]

1. The CSS rules for the button class are already included in genesis.

2. GPL code so there's no problem

3. You can use a code editor to search find and replace classes in theme files. To find and replace classes in HTML content, you would use a SQL Query in phpMyAdmin to change classes in your database if you have added HTML to your editor which includes your button class.

Which method you use depends pn how many times you have added button HTML in your content. If its only a handful and you which pages/posts then do it manually.

If its a large number use method number 2 or 3

---

Tutorials for StudioPress Themes.

[Paddy]

Got it. Thanks a lot Brad. Much appreciated.

[Author]

Posts