Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • January 22, 2020 at 6:45 pm #1177250
    peterolle

    Can you please share how to create a Translucent Button with a background image?

    Thanks.

    January 23, 2020 at 7:59 am #1177413
    Jordan Shannon

    Hey peterolle,

    Do you have an example of what you mean? I’m sure you can adjust the button opacity.

    Best regards,
    Jordan Shannon

    January 23, 2020 at 8:34 am #1177440
    peterolle

    Sure: https://kriesi.at/themes/enfold-2017/elements/buttons/

    Translucent Button Light, but instead of black background, use an image.

    Thanks.

    January 23, 2020 at 5:05 pm #1177750
    Jordan Shannon

    Hi,

    I would need to see the section where the button is. The css for the button would be:

    #top .avia-button.avia-color-light{
color: #fff;
border: 3px solid #fff;
background: transparent;
}

    But this can be set via the ALB.

    As for the background once I see the section class then the css would be something like:

    .ClassName{
background-image:url('linktobackgroundimage.jpg');
}

    Best regards,
    Jordan Shannon

    January 24, 2020 at 9:42 am #1178044
    peterolle

    So the elements in the demo are not real elements included?

    Translucent Button

    To create it add some code:

    <a class="translucent" href="url">link text</a>

    Then go to CSS and style it:

    .translucent{
color: #fff;
padding: 5px;
border: 3px solid #fff;
background: transparent;
}

    The problem here is that anything without any kind of limits can be done using code. Having a translucent button in the demo tells that I can go to builder, add a button, choose translucent and done.

    That is not the case and I have to do everything manually coding my complete site, with or without the theme and builder. If I have to code all the elements myself, why show them in the demo if those are not included?

    Thanks.

    January 24, 2020 at 4:16 pm #1178156
    Jordan Shannon

    Hi,

    The pre-styled button can be selected via ALB.

    Button

    Best regards,
    Jordan Shannon

    July 15, 2020 at 5:10 am #1230494
    peterolle

    Can you please point me to where in documentation I can see that?

    Add button
    Translucent Button
    Add text
    Select icon
    Done

    Thanks.

    July 15, 2020 at 7:16 am #1230517
    Guenni007

    yes – that is just the price for individual wishes. If the developers would consider every single wish here and integrate it into the theme, it would bloat unnecessarily as I think.
    This leaves room for own ideas and the pages do not all look the same. The pre-condition for this is, of course, that you have some basic knowledge.
    Take a look at the buttons I created based on the existing setting “light transparent”.
    I only have to set two classes to get this look. ( One class takes care of the styling and the other class takes care of the color )
    Or beneath those glassy buttons the pulsing gradient button – very easy with a bit of @keyframes instruction.

    https://webers-testseite.de/buttons/

    _____________

    PS: https://kriesi.at/documentation/enfold/button/#toggle-id-22
    and https://kriesi.at/documentation/enfold/button/#toggle-id-23

    • This reply was modified 4 years, 4 months ago by Guenni007.
    July 19, 2020 at 2:41 pm #1231555
    Mike

    Hi,
    Thank you @Guenni007 for your button example page, @peterolle I have a fresh install of the 2017 demo and for the Translucent Button on the button demo page it is created strictly with theme options.
    2020-07-19_075406.png
    In this demo the button element is inside of a column element which has the background color, you can replace it with an image strickly with column styling options.
    2020-07-19_080231.png
    2020-07-19_080516.png
    So since every thing up to here is done in the element options, I’m sure you have been able to do these, if not then there must be a conflict or an error that we should take a look at.
    But for the Translucent Button to contain the background image and not the column you will need to add a little css only to point to the image, this is not an option yet. So for example I removed the column background color and added a custom class to the button in the advanced options, I used “translucent_button_background”
    2020-07-19_075646.png
    then I added this css:

    .translucent_button_background > a.avia-button {
    background-image:url('https://test.test/wp-content/uploads/2020/07/cool-background.jpg');
    background-size: cover;
}

    for this result
    2020-07-19_082538.png
    From your posts I was not sure if you want the column to have the background image since that was were the black color came from, or if you wanted the button to have the background image, so I showed both.

    Best regards,
    Mike

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