-
Posts
-
Hi there,
Im trying to create a flat button effect which removes the grad tint effect you use to make buttons look 3D.
Basically, I want to create a small “orange’ button (#cc3300) with ‘white’ text, no border or shadow with a 5px radius corners. When the user rolls over it the the orange button should change to “white” (#ffffff) and the text to dark grey/black color (242424).
I can create the flat button by altering things in the shortcode file but I cant make the rollover work effectively – at the moment your effect is too subtle
Cheers
Andy
Hi,
Edit functions.php, add this code:
add_theme_support('avia_template_builder_custom_css');This will allow you to add unique css selector for each avia elements.
Go to the Advance Layout Editor, insert a button then add a unique css selector “orange-button” for example.
Edit custom.css or Quick CSS, add this code:
.orange-button a {
background-image: none !important;
background-color: #cc3300 !important;
border-color: #cc3300 !important;
color: white !important;
}
.orange-button a:hover {
background-image: none !important;
background-color: white !important;
border-color: white !important;
color: #242424 !important;
}Regards,
Ismael
hi there,
just one slight confusion. If I create a button in the Avia Layout Builder there is no code unless I switch to the default layout and then the button is wrapped in [ ] which therefore makes me think that im setting up wrong.
Where am I going wrong?
Cheers
Andy
Hi Andy,
It will be at the bottom of the button options under the icon selection. This is where you add the name of your custom css class which Ismael outline above.
This will only work with 1.8+ so make sure you are up to date.
Regards,
Devin
Hi again,
ok this is wierd. I have 1.8 installed and v01 on the child theme. Would that make a difference? cant see how it would but it appears that whilst things like ‘color section’ do have the CSS code section my button shortcode panel doesn’t. Which explains why I was confused.
What should I do? i’m guessing something isn’t installed so some direction would be fab
Cheers
Andy
Hi,
If you don’t have the unique css selector, just inspect the button that you created and use its selector instead of the “.orange-button a” example.
Regards,
Ismael
You could also need to re-add the element to the page or create the new page entirely. It depends on how everything gets loaded in but I went through and tested it on a button specifically before posting previously.
Guys’ something isnt right here.
Firstly, Ive reinstalled the latest version of the theme and created a new test page to see if I could find this button css field you are talking about within the page builder/button shortcode and I cant get it to appear at all. Theres nothing under the icon selector if I scroll down.
What gives?
This is what you should be seeing if you’ve updated the theme to 1.8+ and added in the function correctly to your functions.php file:
If you re-uploaded 1.8 but didn’t re-add in that function then it wouldn’t show up.
Ok… getting somewhere now. Your very last line about having re-uploaded 1.8 but not having added that function makes sense however, I completely deleted the theme and reinstalled it from scratch (instead of just updating) so what am I doing wrong? Why isnt it showing up?
Where and how should I be adding this function? doesn’t it come as part of the theme update?
Cheers
Andy
No, it does not. As indicated in the change log and in the post above by Ismael here https://kriesi.at/support/topic/flat-button-rollover#post-127257
You need to re-do that step. There are a number of features that can be manually added in with code like this but are not on by default because if used improperly they can cause things to break.
Ah, sorry Devin.
I thought it only applied to those replacing files individually, not for a complete re-install. ill go through the thread and see if I cant get back on track. it may fix a few other issues at the same time. Sorry if I should have seen this. genuine mistake.
will let you know how i get on
andy
- The topic ‘Flat Button Rollover’ is closed to new replies.