CSS modification - best practice

Support
#1

I need to make a slight change to the x-btn class so that it will also include [type="button"] as well as [type="submit"].

What’s the best way of doing this without actually modifying the original X-Theme stylesheet?

My concern is that I don’t want to create a change to the CSS that would be overwritten if I updated the theme.

#2

Hi There,

Custom CSS added on Theme Options > Global CSS will not be overwritten on any theme update. That content is save on the database. For other modifications/customization on the theme, please use a child theme so it is safe from update too. See this guide on how to setup child theme. For more guidelines, check our knowledge base here.

Hope this helps.

#3

I already have a child theme setup.

Do I need to copy the x-btn styles into my child theme in order to modify them or is there a better way of adding [type="button"] to the x-btn style?

#4

Hi There,

You can add the the CSS to Theme Options > Global CSS which will overwrite the CSS and it will not affect even after theme update. This is the best way to manage the custom CSS.

If you want to add style for [type="button"] this is also fine and coping x-btn style and modify it in the global css also works well.

Hope this is clear.

Thanks

#5

Hello,

So I did as you suggested but something is not 100% right with the results.

I copied the following CSS into my global CSS on my staging server and then modified it:

.x-btn,.button,[type="submit"],[type="button"]{
    color:#ffffff;
    border-color:#c43e35;
    background-color:#c43e35;
    text-shadow:0 0.075em 0.075em rgba(0,0,0,0.5);
    border-radius:0.25em;
}
.x-btn:hover,.button:hover,[type="submit"]:hover,[type="button"]:hover{
    color:#ffffff;
    border-color:#df5048;
    background-color:#df5048;
    text-shadow:0 0.075em 0.075em rgba(0,0,0,0.5);

As you can see, I simply added the [type="button"] to the end of each class.

For some reason, the buttons still look different and I think it has to do with the padding and color not coming over.

Do you know what I’m doing wrong and why am I seeing different buttons?

Thanks and I look forward to your reply.

Aaron

#6

Hi,

Please change your code to this.

.x-btn,.button,[type="submit"],[type="button"]{ 
    color: #ffffff;
    background-color: #c43e35;
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
    border-radius: 0.25em;
    display: inline-block;
    position: relative;
    border: 1px solid #c43e35;
    padding: 0.563em 1.125em 0.813em;
    font-size: 16px;
    font-weight: inherit;
    line-height: 1.3;
    text-align: center;
}

.x-btn:hover,.button:hover,[type="submit"]:hover,[type="button"]:hover{
    color: #ffffff;
    border-color: #df5048;
    background-color: #df5048;
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
}

Hope that helps.

#7

Thank you for your help.

Just wondering, is there no alternative way of solving this problem without copying CSS from the following code: /wp-content/themes/x/framework/css/dist/site/stacks/renew.css?ver=5.2.5

#8

Hi There,

You can simply use the selectors and add the CSS rules according to your goals, it is not necessary if you can write your own CSS.

Hope it clarifies.

Cheers

#9

Thank you.

#10

You’re welcome.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.