Where does the compiled CSS for the Avada WordPress theme originate?

Question

Where does the compiled CSS for the Avada WordPress theme originate?

We recently made the switch from our old Wordpress e-commerce theme to Avada, and rebuilding everything in Fusion Builder was a breeze. Tweaking with custom CSS has been straightforward as well.

However, there is one issue that I just can't figure out.

There seems to be a WooCommerce element that is being styled somewhere:

.product .entry-summary div .price{}

No matter what I try, I can't seem to override it (even tried using !important), and I can't pinpoint where the original rule is coming from.

When inspecting it with browser tools, it appears that the rule is located in
"

.../wp-content/uploads/avada-styles/avada-1069.css

".
Opening that CSS file reveals an entire section at the top stating:
"

/********* Compiled - Do not edit *********/

"

There are numerous "Avada-###.css" files in that directory,
all containing similar compiled rules.

My question is, where is this being compiled from?
Where can I find the source file to make the necessary edits?

NOTE:

I've reached out to theme-fusion support (the authors of the Avada theme) twice now without receiving any response.
It's been weeks, and I'm running out of options.

css woocommerce wordpress-theming

Answer 1

Answer №1

The /avada-1069.css file serves as the main source.

/*** Compiled - Do not edit ***/ indicates that this file is an integral part of the theme's core. Modifying it may result in changes being replaced during Avast updates, potentially causing functionality issues.

If you require modifications beyond what the theme's Custom CSS field allows, consider creating a simple child theme. The provided functions.php and styles.css code templates are sufficient:

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'parent-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

and

/*
 Theme Name:   Avast Child
 Theme URI:    http://example.com/avast-child/
 Description:  My First Child Theme :)
 Author:       John Doe
 Author URI:   http://example.com
 Template:     avast
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         whatever, blah
 Text Domain:  avast-child
*/

.product .entry-summary div .price{ ... }

Changes made in the child theme's CSS file will take precedence over those in the parent theme. This ensures that your customizations remain intact even after theme updates.

Prior to proceeding, it would be beneficial to review the Specifics on CSS Specificity, which outlines the hierarchy of precedence in CSS overrides. Consider sharing both your rule code and the original rule for others to evaluate before making changes.

Answer 2

The /avada-1069.css file serves as the main source.

/*** Compiled - Do not edit ***/ indicates that this file is an integral part of the theme's core. Modifying it may result in changes being replaced during Avast updates, potentially causing functionality issues.

If you require modifications beyond what the theme's Custom CSS field allows, consider creating a simple child theme. The provided functions.php and styles.css code templates are sufficient:

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'parent-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

and

/*
 Theme Name:   Avast Child
 Theme URI:    http://example.com/avast-child/
 Description:  My First Child Theme :)
 Author:       John Doe
 Author URI:   http://example.com
 Template:     avast
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         whatever, blah
 Text Domain:  avast-child
*/

.product .entry-summary div .price{ ... }

Changes made in the child theme's CSS file will take precedence over those in the parent theme. This ensures that your customizations remain intact even after theme updates.

Prior to proceeding, it would be beneficial to review the Specifics on CSS Specificity, which outlines the hierarchy of precedence in CSS overrides. Consider sharing both your rule code and the original rule for others to evaluate before making changes.

Answer 3

Answer №2

It appears that the theme is generating stylesheets dynamically, making direct editing an impractical option due to frequent changes.

If uncertain about the content of the dynamic stylesheet being loaded, the recommended WordPress approach would be to first implement a child theme and then:

Include overriding styles in your child theme's style.css, or
Completely remove the parent theme's stylesheet from your child theme's functions.php file and replace it with your own styles in the child theme's style.css:

(Assuming that avada-dynamic-css is the handle registered by the theme)

function yourname_unhook_parent_style() {
  wp_dequeue_style('avada-dynamic-css');
  wp_deregister_style('avada-dynamic-css');
}
add_action('wp_enqueue_scripts', 'yourname_unhook_parent_style', 20);

Answer 4

It appears that the theme is generating stylesheets dynamically, making direct editing an impractical option due to frequent changes.

If uncertain about the content of the dynamic stylesheet being loaded, the recommended WordPress approach would be to first implement a child theme and then:

Include overriding styles in your child theme's style.css, or
Completely remove the parent theme's stylesheet from your child theme's functions.php file and replace it with your own styles in the child theme's style.css:

(Assuming that avada-dynamic-css is the handle registered by the theme)

function yourname_unhook_parent_style() {
  wp_dequeue_style('avada-dynamic-css');
  wp_deregister_style('avada-dynamic-css');
}
add_action('wp_enqueue_scripts', 'yourname_unhook_parent_style', 20);

Where does the compiled CSS for the Avada WordPress theme originate?

NOTE:

Answer №1

Answer №2

Similar questions

Struggling with getting basic CSS to work with React's MUI framework

What is the best way to position divs side by side?

I noticed that the Div element automatically resizes whenever I click anywhere on the page using Chrome

Is there a way to trigger the opening of a new file or page when a CSS animation comes to an end?

Styling Images with Gradient using CSS

Tips on positioning a dropdown item to the far right of the page

I am interested in altering the font color

Seeking a jQuery Carousel with a Blizzard-inspired design

When a condition fails, the default style in the CSS media query does not apply

Struggling to figure out the right way to make a CSS selector for the Yahoo stocks page

Implement a line below the text using CSS

What are the best ways to expand image mapping?

HTML structure consisting of a 3 by 3 grid

Can CSS variables replace Bootstrap 4 Sass variables?

Switch the Ionic Slide Box to the "does-continue" setting

Issue with Internet Explorer: Unable to view Drop Down menu

The mobile menu is not responding to the click event

Precise placement of images inside a div container

Customize your Bootstrap navbar dropdown to showcase menu items in a horizontal layout

Having trouble with your Bootstrap 4 layout when incorporating forms?