Changes in CSS seem to make no difference

aeromax · ‎10-26-2017

So I inserted some custom HTML to make a customizeable button for myself, and ended up styling it all inline since I cannot get any changes in the theme editor CSS files to happen. I've tried altering the LESS files, and also creating a custom.css file and entering my own classes. Still nothing, although the inline styles work. I'd much rather code the styling in the CSS sheets, and have transitions and hovers etc.

Any thoughts?

Erin6 · ‎10-26-2017

Hi!

I'm no expert, but perhaps something that you can't see is overriding what you are adding. You could try also adding !important! to your CSS.

If that doesn't work, perhaps it would help to provide a bit of context about what you're adding.

Thanks,

Erin

aeromax · ‎10-27-2017

Well here is my custom HTML:

<a class="cta-button" href="#">
<span class="cta-button-inner">Contact us to find out how</span>
</a>

However, I want to add things like hover effects, and transitions and whatnot, so I can't do that inline. In my theme's CSS files, I created a "custom.css" in the "Assets" section, and I added:

.cta-button {
background-color: #bf1e2e !important;
padding: 10px 20px !important;
display: inline-block !important;

}

.cta-button-inner {
font-size: 16px !important;
color: #fff !important;
}

.cta-button:hover{
 background-color: #8e0a17 !important;
 padding: 25px 15px !important;
 transition: all .5s !important;
}

But this seems to have no effect, unless I do styles inline.

aeromax · ‎10-27-2017

Wait, I got it- I put a custom less file in the "styles" folder, and not a css file in the "assets" folder. Now it seems to have an effect.

Erin6 · ‎10-27-2017

Great to hear! I'm glad everything worked out. Please let us know if we can help with anything else.

Thanks, and enjoy your day.

Erin

Weebly Community Manager