WordPress.org

Forums

Virtue
Editing Virtue.css? (9 posts)

  1. blastblast
    Member
    Posted 1 year ago #

    Hi there, I'd like to edit assets/css/virtue.css

    I made a child theme folder and had success editing the php files by making the identical directory in my virtue-child folder. But I tried the following: virtue-child/assets/css/virtue.css - and it would not respond.

    I also tried making the change in my virtue-child/style.css folder but it would not work.

    Any instruction on editing the virtue.css file without modifying the original would be much appreciated!

    Thanks

  2. Kadence Themes
    Member
    Theme Author

    Posted 1 year ago #

    Well stylesheets don't work like the template files, they are enqueued so if you wanted to remove the parent virtue.css file and replace with your own you would add a function to do that.

    <?php
    wp_dequeue_script('kadence_theme');
    wp_enqueue_style('my_kadence_theme', get_stylesheet_directory_uri() . '/my-virtue.css', false, "221");?>

    But I don't recommend this route, Your better off just overriding the virtue style sheet with your own css file, not replacing but overriding by copying and changing only the css to want to override.

    Kadence Themes

  3. blastblast
    Member
    Posted 1 year ago #

    Hi,

    Thanks for responding.

    Your better off just overriding the virtue style sheet with your own css file, not replacing but overriding by copying and changing only the css to want to override.

    I would like to do this, as I am just learning wordpress and coding, could you explain how I can do this in details? What folder and/or files would I need to make in my virtue-child theme folder?

    To be precise, the change I would like to make in virtue.css is to delete all the css properties from "a.added_to_cart"

    When I delete all the property from a.added_to_cart and it literally is "a.added_to_cart{}" in assets/css/virtue.css ...it works for my customized page.

    Can you show me how I can make that change in my virtue child theme?

    Thanks

  4. Kadence Themes
    Member
    Theme Author

    Posted 1 year ago #

    Here is a good information on child themes: http://codex.wordpress.org/Child_Themes

    Here is what the theme adds for a.added_to_cart

    a.added_to_cart {
    display: block;
    position: absolute;
    top: 50%;
    right: 50%;
    margin-right: -60px;
    margin-top: -30px;
    width: 120px;
    height: 60px;
    background: #fff;
    background: rgba(255,255,255,0.65);
    line-height: 60px;
    font-size: 14px;
    font-weight: 800;
    z-index: 100;
    }

    So You would go through and just change what you want to change. For example, if I wanted the height to be auto instead of 60px I would use this css in the theme options or my child theme:

    a.added_to_cart {
    height: auto;
    }

    Kadence Themes

  5. blastblast
    Member
    Posted 1 year ago #

    I've been using that instruction to make a child theme for previous sites before but for the style.css...I suspect that I might be having trouble with this one is because I'm trying to modify a css file that's not the style.css.

    However, here's what I did, perhaps some troubleshooting:

    In my theme folder, I made a new folder "virtue-child"

    make a new css file title "style.css" which I add:

    /*
     Theme Name:   virtue Child
     Description:  virtue Child Theme
     Template:     virtue
     Version:      1.0.0
     Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
    */
    
    /*
    For older themes, and themes that do not use wp_enqueue_style() to enqueue their stylesheet, use the following line where twentyfourteen is the name of the directory where the theme resides:
    
    Make sure you uncomment out this import line below if you want to include the parent CSS and the wp_enqueue_style() is not working. If you do not then you will not have any styling in your child theme from the parent theme.
    */
    
    /*
    @import url("../virtue/style.css");
    */
    
    /* =Theme customization starts here
    -------------------------------------------------------------- */
    
    a.added_to_cart {
    }

    No response. So I try copying that file, name it "virtue.css", change the import to
    /*
    @import url("../css/virtue.css");
    */
    add the code and still no response.

  6. Andrew
    Forum moderator
    Posted 1 year ago #

    This doesn't look right:

    /*
    @import url("../virtue/style.css");
    */

    How come that's commented out?

  7. Kadence Themes
    Member
    Theme Author

    Posted 1 year ago #

    FYI you don't need to import with this theme. It's built for child themes and loads all the css already. so this is all you need at the top:

    /*
     Theme Name:   virtue Child
     Description:  virtue Child Theme
     Template:     virtue
     Version:      1.0.0
     Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
    */

    As for overriding the css. This:

    a.added_to_cart {
    }

    does nothing. It's not overriding anything. You have to override with your own css so like the example above if you want to change all the css you would override all the css with what you want. An empty css style does nothing.

    Kadence Themes

  8. blastblast
    Member
    Posted 1 year ago #

    Okay so the virtue-child/style.css is working with the code as suggested:

    /*
     Theme Name:   virtue Child
     Description:  virtue Child Theme
     Template:     virtue
     Version:      1.0.0
     Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
    */

    http://i.imgur.com/yaRcose.jpg
    Currently: left
    After deleting the a.added_to_cart properties: right

    I assume that after it is deleted, it was using the woocommerce.css style which is the only other place a.added_to_cart is found.

    Leaving the virtue.css as default, I added the woocommerce.css property to my child theme style.css

    a.added_to_cart
    {padding-top:
    .5em;
    white-space:nowrap;
    display:inline-block}

    No response - The virtue.css property is still in tack.

    So, I think it's still at square one. Is there anyway I can remove the following property from virtue.css through my child theme?

    a.added_to_cart {
    display: block;
    position: absolute;
    top: 50%;
    right: 50%;
    margin-right: -60px;
    margin-top: -30px;
    width: 120px;
    height: 60px;
    background: #fff;
    background: rgba(255,255,255,0.65);
    line-height: 60px;
    font-size: 14px;
    font-weight: 800;
    z-index: 100;}
  9. Kadence Themes
    Member
    Theme Author

    Posted 1 year ago #

    In short, you would prefer that the view cart button was below the product? Correct?

    Add this css to your child theme:

    a.added_to_cart {
    display: block;
    position: static;
    top: 0;
    right: 0;
    margin-right: 0;
    margin-top: 0;
    width: auto;
    height: auto;
    line-height: 25px;
    font-size: 14px;
    font-weight: 400;
    }

    Kadence Themes

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic