Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • November 6, 2013 at 9:04 am #185087
    Monsoon

    Add a blue button to a post (button has white text/icon and blue background and lighter blue background on mouseover)
    copy shortcode
    create text widget in sidebar
    add shortcode

    the resulting button in the sidebar has dark text instead of white.
    Mouseover changes text to white but it seems the default color for the button text is controlled somewhere else.
    Internal site so no links but that should be easy to reproduce

    EDIT: the button on the page looks just like the shortcode demo, white text with colored background that changes slightly on mouseover.
    Taking the same code and putting it in the sidebar gives a different default text color

    November 7, 2013 at 3:43 am #185459
    Ismael

    Hey Monsoon!

    Can you please give us a link to the page with the button with dark text?

    Best regards,
    Ismael

    November 8, 2013 at 1:47 am #185936
    Monsoon

    As I mentioned this is an internal site so no links and that is why I gave the procedure to reproduce.

    I noticed that the font color for the buttons in the sidebar is taken from the Main content Font Color. Change the default font color to red in the Main Content Style tab and the button default color is now red.
    Does this help?
    If the button is in a page then it seems the button text color takes over, if the button is in the sidebar then the site Main Content Font Color is used instead
    I tested it both with the shortcode version and the html output version and both give the same results

    [av_button color='#FFFFFF' label='Click me' link='manually,http://www.google' link_target='' color='blue' custom_bg='#444444' custom_font='#ffffff' size='medium' position='center' icon_select='yes' icon='ue80c' font='entypo-fontello']

<div class="avia-button-wrap avia-button-center avia-builder-el-0 avia-builder-el-no-sibling ">
<a class="avia-button avia-icon_select-yes avia-color-blue avia-size-medium avia-position-center " href="http://www.google">
<span class="avia_button_icon" data-av_iconfont="entypo-fontello" data-av_icon="" aria-hidden="true"></span>
<span class="avia_iconbox_title">Click me</span>
</a>
</div>
    • This reply was modified 11 years ago by Monsoon.
    November 8, 2013 at 11:48 am #186088
    Ismael

    Hey!

    Please add this on your custom.css or Quick CSS:

    body .avia-button.avia-color-theme-color, body .avia-button.avia-color-theme-color:hover {
color: #fff !important;
}

    Regards,
    Ismael

    November 9, 2013 at 7:52 pm #186508
    Monsoon

    Sorry…did not work. The theme is rewriting on top of the custom css for this one.
    I ll try to install on an external site but that did not work, the sidebar still picks the theme font color and overides the button css

    November 12, 2013 at 9:51 pm #187463
    Devin

    Hey!

    You can pick the colors directly to prevent the button from inheriting that content sections overall style. Eg:

    
[av_button label='Click me' link='manually,http://google.com' link_target='' color='custom' custom_bg='#81d742' custom_font='#b100ed' size='medium' position='center' icon_select='yes' icon='ue83d' font='entypo-fontello']

    Best regards,
    Devin

    November 13, 2013 at 3:05 am #187593
    Monsoon

    Thanks Devin
    Just what I needed. I didin t know about the ‘custom’ option, this worked like a charm.
    I would strongly recommend adding your code as an example on this page http://kriesi.at/themes/enfold/shortcodes/buttons/ to let people know…unless I missed it in the docs.

    Thanks again

    November 13, 2013 at 4:53 am #187621
    Devin

    Its available from the pop up when editing the button code so you can add in the options window without having to just use the shortcode.

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Enfold Bug – Buttons in sidebar, text color issue’ is closed to new replies.