Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #26696

    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

    #131280

    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

    #131281

    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

    #131282

    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

    #131283

    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

    #131284

    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

    #131285

    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.

    #131286

    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?

    #131287

    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:

    b4yxx5.png

    If you re-uploaded 1.8 but didn’t re-add in that function then it wouldn’t show up.

    #131288

    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

    #131289

    No, it does not. As indicated in the change log and in the post above by Ismael here http://www.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.

    #131290

    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

    #131291

    Brilliant,

    once I had got my head around the language you were using it became obvious. You guys rock man!

    Thanks

    Andy

Viewing 13 posts - 1 through 13 (of 13 total)

The topic ‘Flat Button Rollover’ is closed to new replies.