Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • March 5, 2014 at 9:02 am #232607
    markofwits

    I would like a button to appear on my page the way it looks in the Avia Layout Builder.

    In the builder, it looks like this…
    buttons 1

    But on my page, it looks like this…
    buttons 2

    Any reason for the different font color, drop shadow, border, padding, etc, and how I can have the same style from editor?

    Thanks!

    March 5, 2014 at 8:53 pm #232915
    Yigit

    Hi markofwits!

    Can you post the link to your website so we can take a look if there is another class interfering?

    Cheers!
    Yigit

    March 6, 2014 at 12:07 am #232993
    markofwits

    Hi Yigit,

    Link to page with button and tabs is here:
    http://www.finalsmoke.net/

    Regards.

    March 6, 2014 at 12:49 am #233004
    Yigit

    Hey!

    Please add following code to Quick CSS in Enfold theme options under Styling tab and adjust as needed

    .avia-button.avia-color-orange, .avia-button.avia-color-orange:hover { color: red; }

    Cheers!
    Yigit

    March 6, 2014 at 1:28 am #233027
    markofwits

    If possible, I would simply like the button to appear the way it’s shown in the editor, without having to patch the css.

    Were you able to find out why it appears differently on the live page?

    Same issue with the tabs as I explained here:
    https://kriesi.at/support/topic/tabs-look-different-on-live-page/

    Text inside tabs in editor is red in first tab, blue in second tab, purple in third tab. But on live page, all tabs show only black text.

    Same issue with button inside Promo Box. Button is missing border color, gradient background, font color, etc.

    Any ideas?

    March 6, 2014 at 3:40 am #233036
    markofwits

    You will notice below how the buttons appear differently in the editor (image 1), than on the live page (image 2).

    Also notice how text which is styled with colors in editor (images 3 & 4), is black on the live page (image 2).

    This behavior includes Tabs and Accordion elements.

    Any thoughts?

    editor_buttons

    live_buttons

    tabs_red

    accordion_green

    March 7, 2014 at 3:50 am #233530
    Yigit

    Hey!

    Do you mind creating a temporary admin login so we can take a look? You can post it here privately

    Regards,
    Yigit

    March 7, 2014 at 4:32 am #233559
    markofwits
    This reply has been marked as private.
    March 8, 2014 at 12:41 am #234062
    markofwits

    Hi Yigit,

    Would appreciate knowing how to get my buttons to appear as they do in the Layout Builder.

    Something is overriding the styles and making them look more plain.

    Thanks!

    March 8, 2014 at 9:52 pm #234249
    Ismael

    Hey!

    There is a plugin that blocks editing on the page editor. Please disable that. We can’t inspect the website with that enabled.

    Best regards,
    Ismael

    March 8, 2014 at 10:19 pm #234263
    markofwits

    Hi Ismael,

    Not sure what plugin you are referring to.

    Can you be more specific?

    March 10, 2014 at 3:44 am #234470
    Ismael

    Hi!

    I’m not sure what is that plugin that makes you choose if you want to edit the page or something. It has been disabled now, I guess. Anyway, you can add this on Quick CSS to get the gradient style for the button:

    body div .avia-button {
background-image: url("http://www.finalsmoke.net/wp-content/themes/enfold/config-templatebuilder/avia-template-builder/images/bg-button.png");
background-repeat: repeat-x;
background-position: 0 0;
}

    Change the text color using this on Quick CSS:

    .avia-button.avia-color-orange, .avia-button.avia-color-orange:hover {
color: black;
}

    Best regards,
    Ismael

    March 10, 2014 at 3:48 am #234476
    markofwits

    Hi Ismael,

    I simply want my buttons to appear as they to in the Layout Builder, without having to patch the css.

    Something is overriding those styles, but I have not, to my knowledge, modified button styles.

    March 10, 2014 at 7:18 am #234537
    Ismael

    Hi!

    Kriesi removed the gradient overlay on the latest version of the theme but he forgot to erase it on the Advance Layout Builder. You need to use css to apply the gradient again then change the color of the text. Did you add something like this on style.css?

    .avia-button.avia-color-orange, .avia-button.avia-color-orange:hover {
color: red;
}

    Please remove that. For further modifications, please visit Werkpress.

    Regards,
    Ismael

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.