-
Posts
-
Hi,
I am a beginner who is creating self page, just to inform that I am not expert in CSS or other things. With this theme it is going really well and I like it. Especially I like it way more after the update :)
Anyway I got a problem with a custom button styling for the button row element. I am not using any DEMO, however I have inspired myself of your new made “Enfold elegant portfolio” demo footer. I would like to use those circled buttons which are in the footer as buttons. I have copied custom advanced styling from this DEMO which is in “Advanced styling -> Buttons”. I have set Border radius to 100px, Border width and opacity to 1px and full-transparent. The same is set in Advanced styling of this new demo. Then I have set the same parameters in Button row element settings which is not different from the element settings in DEMO.
So I did same Advanced settings for Buttons and I did same settings in the Button row element and it still does not work. It still shows big button with rounded corners and small icon in the middle of the button with a big space on left and right side.
I know it could be pretty easy issue to solve but I would be really grateful if you could help me. I want to use Button row element in my footer with circled buttons (follow me in my social networks) as is done in your theme DEMO. Which settings have I missed or what more should I do?
Thank you a lot.
Best regards,
Jakub.Hey katak97,
Thank you for using Enfold. Glad to hear that it’s going well.
Would you mind if we take a look at the test page? That is the button row element with omitted Button Label. Use this css code to make it round.
#top #wrap_all .avia-slideshow-button, #top .avia-button, .html_elegant-blog .more-link, .avia-slideshow-arrows a:before, #top .av-menu-button > a .avia-menu-text { border-radius: 100px; }Best regards,
IsmaelHi,
Please add the CSS to Enfold > General Styling > Quick CSS at the bottom
If you have already added the code here please refresh the page cache.
Check the Performance tab and disable merging and refresh the page and enable it back.
If you are using any caching plugin please empty cache from the plugin settings.Best regards,
VinayHi Guys,
I also wanted to do this but as the .avia-button class is included in that code it effects the buttons globally so you cannot set a radius on your standard site buttons. I’ve tried all kinds of ways to specifically effect only those button row buttons but I can’t figure it out… need your GENIUS on this one if possible please.
Hi,
Apply a unique css class attribute to the button row element. Append it to the default button selector above. Example.
#top .custom-css-class .avia-button { border-radius: 100px; }You can enable the custom css class field in the Enfold > Layout Builder panel.
Best regards,
IsmaelHi Tobias,
Thanks for the feedback. Please let us know if you should need any further help on the topic.
Best regards,
RikardI tried this, but the icons dont become a full circle. Could you maybe take a look please?
I used the CSS above in my Quick CSS.
I have the same problem: the buttons in the new button-row element are not a uniform size (round) even after implementation of the custom css as suggested above.
I would like them to look exactly as the demo referred to in the blogpost for Enfold 4.3.
Hi jeroenvandessel,
I could only see nice circles on your site, did you manage to get it working? If not then please post screenshots of the problem and in which browser you are seeing it.
Best regards,
RikardHi Hayek,
Could you post a link to the site in question so that we can take a closer look please?
Best regards,
RikardIf it helps, I found I had to add a line-height to get them completely round… Aswell as the border-radius, I needed to add a line-height definition:-
If you are using MEDIUM SIZE BUTTON:-
border-radius: 100px;
line-height: 18px;If you are using LARGE SIZE BUTTON:-
border-radius: 100px;
line-height: 42px;Hi Partecipant,
Please start a separate thread, describe your issue there and give us a link to your website.
Could you please attach a mockup of what you’re trying to achieve?
Best regards,
VictoriaHI,
the website is under construction, and here I can’t attach a image of my issue, I’m tring to build a new button with a border left arrow but i can’t…
could you help me?
Hi Partecipant,
You can upload screenshots to a service like Dropbox or http://imgur.com and give us the links here.
Best regards,
VictoriaHello!
I’m having an issue with custom styling of my buttons and it not updating on my page.
Style notes for regular and hover include:
Border: 3px, black, 0px radius
Text: 16px, black, h4 font styling
Background: white
Hover Background: #f8f8f8The icons that I have set when hovered over are also getting cut off at the bottom and I’d like them larger in size.
I think it may be because I don’t have a child theme installed? Just the initial Enfold theme. I originally had a different theme that used WP-Bakery and it was such a pain that I started over and restarted my WP, wiping everything. When I tried to install the child theme, it wasn’t working (an error about duplicates or something) and I didn’t need to work off of a direct template anyway so I just moved forward with building my site.
Hi,
Thank you for the update.
Looks like you have managed to adjust most the style for the button. To prevent the icon from getting cut off at the bottom, we could add add this css code.
.av-icon-on-hover .avia_button_icon { overflow: visible; }Please toggle or temporarily disable the Performance > File Compression settings after adding the code to see the changes immediately.
Best regards,
Ismael
- You must be logged in to reply to this topic.