Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • November 27, 2013 at 7:31 pm #194025
    amp3rsand

    Hi, is it possible to modify the base.css in a child theme rather than just override it? I want to modify: bold indicates modification
    78: #top h1 a, #top h2 a, #top h3 a, #top h4 a, #top h5 a, #top h6 a { font-weight: inherit; text-decoration: none; color: inherit; border-bottom:0; }
    121: a:hover, a:focus, a:visited { outline: 0; border-bottom:1px dotted;}

    as you can see these mods are applied in sequence, and the following cascade also is in effect – just overriding them doesn’t work.

    I have tried to make a new enfold-child/css/base.css file in my child theme and copy the entire enfold/css/base.css content into it, then modify it as needed – but it doesn’t work.

    Is there a way to do this?

    November 28, 2013 at 1:46 am #194148
    Josue

    Hi amp3rsand!

    After you moved the base.css to your child theme folder you’ll also need to move the avia_register_frontend_scripts function from the main theme to the child one (you can find it functions.php:244).

    Then, simply edit the part where base.css is included:

    wp_register_style( 'avia-base' ,   $child_theme_url."/css/base.css", array(), '1', 'screen' );

    If this is too hard, feel free to use this child functions.php i created for you.

    Cheers!
    Josue

    May 19, 2017 at 4:45 pm #796659
    HuxburyQuinn

    Hi Josue,

    Is this script still valid to use with the current version of Enfolds?

    Page Speed Insights – is telling me to compress Enfold parent JS and CSS files.

    I have download the PageSpeed Insight generated compressed versions and temporarily replaced these files in the parent theme to see if anything breaks.

    All going well I’d like to add the compressed version of the JS and CSS files and enqueue them from the child Theme overriding the uncompressed version in the parent theme.

    THE REASON WHY
    If these files are Minified by BWP-Minify plugin – Theme visual elements and functionality start to break.
    So then these files need to be excluded (not Minified) via BWP-Minify Manage Enqueued Files.
    This leave the existing message in Page Speed Insights.
    I think it’s far better to fix these issues at the source – that way any Caching , speed optimisation is going to work much better.

    I look forward to your response to the usage of the above child functions.php code you created – and if there is an updated method.

    May 22, 2017 at 4:07 pm #797734
    Yigit

    Hi,

    You can add following code to functions.php file of your child theme

    add_action( 'wp_enqueue_scripts', 'wp_change_layoutcss', 20 );
function wp_change_layoutcss() {
   wp_dequeue_style( 'avia-base' );
   wp_enqueue_style( 'avia-base-child', get_stylesheet_directory_uri().'/css/base.css' );
}

    and then move Base.css file inside enfold-child/css/ folder

    Best regards,
    Yigit

    May 23, 2017 at 2:06 am #798018
    HuxburyQuinn

    Yigit,

    When using BWP-Minify – here is the complete list of css files that need to be excluded or precompressed.

    Most important
    avia-scs wp-content/themes/enfold/css/shortcodes.css
    avia-layout wp-content/themes/enfold/css/layout.css

    Less Important
    avia-grid wp-content/themes/enfold/css/grid.css
    avia-base wp-content/themes/enfold/css/base.css
    avia-dynamic wp-content/uploads/dynamic_avia/enfold_child.css
    layerslider wp-content/themes/enfold/config-layerslider/LayerSlider/static/layerslider/css/layerslider.css

    Can the code snippet example be extended like this…

    add_action( 'wp_enqueue_scripts', 'wp_change_layoutcss', 20 );
function wp_change_layoutcss() {
   wp_dequeue_style( 'avia-scs' );
   wp_enqueue_style( 'avia-scs-child', get_stylesheet_directory_uri().'/css/shortcodes.css' );
   wp_dequeue_style( 'avia-layout' );
   wp_enqueue_style( 'avia-layout-child', get_stylesheet_directory_uri().'/css/layout.css' );
   wp_dequeue_style( 'avia-grid' );
   wp_enqueue_style( 'avia-grid-child', get_stylesheet_directory_uri().'/css/grid.css' );
   wp_dequeue_style( 'avia-base' );
   wp_enqueue_style( 'avia-base-child', get_stylesheet_directory_uri().'/css/base.css' );
}

    let me know thanks!

    It would be nice if Enfolds had a theme option to use pretested / precompressed css and js sources.

    FYI.
    I tested the following plugins for the ability to compress and minify JS and CSS.
    Better WordPress Minify
    Autoptimize
    Merge + Minify + Refresh
    WP-Rocket
    Above The Fold Optimization

    All the above plugins with either CSS or JS minification turned on – produced complete loss of animation effect, css flickers and even no content in certain AVIA layout builder elements.
    Each plugin – works fine – however you have to go through and systematically excluded js and css files to keep full Enfold functionality.

    WPMU Humming Bird was the only plugin that was able to minify CSS and JS and keep if not all Enfold animation and CSS styles.

    May 24, 2017 at 1:35 pm #798880
    Ismael

    Hi,

    Thank you for the info. I’m sure this is going to be very helpful for other users. :)

    Best regards,
    Ismael

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘editing base.css in a child theme’ is closed to new replies.