Hello, I have some button CSS I want to use in my site. However, when I target the Button element with these styles, I get something that is a combination of my code and the theme’s default styling.
I also tried making a global block and making the button by hand using HTML and CSS, but that distorted badly and still combined my styles with the theme default.
What should I target with my CSS to get but button to look like the parallelogram example here:
Hi Sarah,
Thank you for reaching out to us. I’d recommend you to use the Button element settings to make it similar to your design. For example set the background-color to #bb0a1e, set the box-shadow to 10px 10px 0 rgba(0,0,0,.5) and set the padding and font settings according to your custom CSS.
The settings which are not available in the Button element settings can be given using your custom CSS. To do that you need to assign a class parallelogram to the Button element:
Now the only difference I see is the class skew-fix which can’t be assigned to the button but you can use the following class .parallelogram .x-anchor-text-primary instead of .skew-fix in your custom CSS.
The above steps will also avoid the issue of theme’s default styling overriding your custom CSS. By following the above steps you should see the following on the front-end:
Hope this helps!
Thanks - I was thinking I could do it with all CSS but I see how it’s useful to work with the settings built in here. The one last thing, though – I can’t get the button to center. I set margin to auto, which works with other elements, but not this one. Any ideas?
Figured out the centering part! awesome! thanks!
Hey Sarah,
We are just glad that you have figured it out a way to correct the said issue.
Thanks for letting us know!
Best Regards.
Hi @ruenel, for some reason the text is no longer de-skewing/skewing the other way. The text is now skewing with the rest of the button. I’ve tried several things to add specificity, but it doesn’t seem to be working. I also moved my custom CSS to Pro > Theme Options > CSS instead of on the Home page CSS but that doesn’t seem to be doing it either. Any ideas?
Hey Sarah,
I’m sorry that you’re expecting for us to investigate. We do not provide support for custom codes including integrating a custom code to any parts of our theme.
With that said, you need to inspect the custom code yourself or you can consult with a 3rd party developer.
Because you’re new to this, I’d provide a one-time demonstration of how to integrate the custom code in our builder. Please closely watch the video below. Slow the playback down if it’s fast and/or pause and play to follow along.
You see that provided all custom codes don’t have errors, it should work out of the box.
If you still have a hard time integrating custom codes, please consider signing up to our One service where we provide answers to custom development questions.
Hope that helps and thank you for understanding.
Thanks, Christian. I didn’t realize you could use a content block to add the buttons using the CSS and HTML I had written already. I was not looking for CSS help, I was looking for help on making my custom code work in this theme, where the theme had been interfering with the styling, which I now understand is because a different block would let me do that. The previous suggestion I had received was to use a button block, which has been conflicting with the styling I was trying to use. If I had known the tip about the content block, I could have done that from the start. Thanks for your help.
You are most welcome Sarah.
If you need anything else we can help you with, don’t hesitate to open another thread.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.