Community Forums › Forums › Archived Forums › Design Tips and Tricks › What's the Best Way to Change a Theme Specific CSS Class
Tagged: theme migration
- This topic has 5 replies, 3 voices, and was last updated 8 years ago by Paddy.
-
AuthorPosts
-
March 9, 2016 at 3:15 am #180981PaddyMember
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.
March 9, 2016 at 9:26 am #181011Victor FontModeratorThe 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?March 9, 2016 at 12:35 pm #181032Brad DaltonParticipantYou 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
March 9, 2016 at 9:50 pm #181092PaddyMember@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.
March 9, 2016 at 10:32 pm #181093Brad DaltonParticipant1. 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
March 9, 2016 at 11:17 pm #181095PaddyMemberGot it. Thanks a lot Brad. Much appreciated.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.