Hey northorie,
Thanks for the link to your site, I see that you have a Advanced Layout Builder (ALB) post that has been saved as a WordPress Block Editor post, to correct click the ALB editor button and then save again and edit in the ALB editor.

Best regards,
Mike

Hi,
To me your example page the popup:

is the same as our lightbox popup examples, I think this solution would be the best one to follow, it uses buttons but with a minor adjustment it could use plan text links, you can see that the popup has the “X” to close, in the screenshot there is only two words, but you can add as much text as you like:

In your example page there are five links and popups:

Are you going to use this in the same way? If so how many popups do you want to use?

Best regards,
Mike

Hi,

Please try the following in Quick CSS under Enfold->General Styling:

#top .avia-button:hover .avia_button_background {
  opacity: 0;
}

Best regards,
Rikard

Hey amyncuih,

Thank you for the inquiry.

You can adjust the default style of the Button elements in the Enfold > Advanced Styling panel, or you can use this css code:

#top #wrap_all .main_color .avia-button {
    color: red;
}

Best regards,
Ismael

Hi,
To make the logo link smaller for mobile try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 480px) { 
#top.page-id-11754 #header_main .logo {
	width: 60px;
	max-width: 60px;
}
}

but it also looks like you will need to make the button in the slider come to the fore ground with z-index, try around 99
I have not used the revolution sliderI’m not sure where this setting is, perhaps you do, or try checking the revolution slider documentation.

Best regards,
Mike

Hey amyncuih,

Thank you for the inquiry.

You can define a different font for the Button element in the Enfold > Advanced Styling panel. The Button element can be found under the Misc section. Please note that this will affect all buttons across the site. Unfortunately, you cannot assign a different font to a specific block in the builder.

Best regards,
Ismael

Hi,

Thank you for the update.

Try to replace the selector “.home” with “.page-id-362”.

.page-id-362 .av-image-caption-overlay-center p {
    border-radius: 3px;
    padding: 10px;
    font-size: 12px;
    text-decoration: none;
    display: inline-block;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    margin: 3px 0;
    line-height: 1.2em;
    position: relative;
    font-weight: normal;
    text-align: center;
    max-width: 100%;
    color: var(--enfold-main-color-button-font);
    background: var(--enfold-main-color-button-border);
    transition: all 0.4s ease-in-out;
    box-shadow: none;
    border: 0;
    padding: 25px 50px 23px;
    font-size: 28px;
    min-width: 200px;
}

Please make sure to purge the cache before checking the page.

Best regards,
Ismael

Hi,

Thanks for the update. If you only want the CSS to apply to the home page, then you can use this instead:

.home .av-image-caption-overlay-center p {
    border-radius: 3px;
    padding: 10px;
    font-size: 12px;
    text-decoration: none;
    display: inline-block;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    margin: 3px 0;
    line-height: 1.2em;
    position: relative;
    font-weight: normal;
    text-align: center;
    max-width: 100%;
    color: var(--enfold-main-color-button-font);
    background: var(--enfold-main-color-button-border);
    transition: all 0.4s ease-in-out;
    box-shadow: none;
    border: 0;
    padding: 25px 50px 23px;
    font-size: 28px;
    min-width: 200px;
}

Best regards,
Rikard

Hey Monika,

Thank you for the inquiry.

You can use this css code to adjust the style of the caption overlay.

.av-image-caption-overlay-center p {
    border-radius: 3px;
    padding: 10px;
    font-size: 12px;
    text-decoration: none;
    display: inline-block;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    margin: 3px 0;
    line-height: 1.2em;
    position: relative;
    font-weight: normal;
    text-align: center;
    max-width: 100%;
    color: var(--enfold-main-color-button-font);
    background: var(--enfold-main-color-button-border);
    transition: all 0.4s ease-in-out;
    box-shadow: none;
    border: 0;
    padding: 25px 50px 23px;
    font-size: 28px;
    min-width: 200px;
}

Best regards,
Ismael

Hi,
For the Separator / Whitespace element you use Short Separator position left

result

For the button it is large, no icon Theme Color Subtle

result

Best regards,
Mike

Hey Susanne,
1) do you mean the caching plugins were preventing your site from knowing that a update was available for the theme? I have not heard of this issue before, but you could try the WP Fastest Cache plugin, or when Envato (Theme Forest) notify you that an update is available you could disable your plugin and then check for the update.
2) In my demo the “blog” page is selected as the “blog”

and that page uses ALB elements to create the blog

please see our demo here
3) on your site it looks like you have custom css added causing the dark color, perhaps it is from a plugin:

a:visited {
                color: #333333;
            }

4) if you want to override the color for all buttons try this:

#top .main_color .avia-color-theme-color-highlight,
#top .main_color .avia-color-theme-color {
	background-color: red;
	border-color: red;
}

adjust to suit

Best regards,
Mike

Hey craig374,

Please try the following in Quick CSS under Enfold->General Styling:

#custom_html-2 button {
  background-color: var(--enfold-header-color-primary);
  color: var(--enfold-header-color-constant-font);
  border-radius: 3px;
}

#custom_html-2 button:hover {
  color: #000;
}

Best regards,
Rikard

Hey Tanja,
Try using the shortcode wand

which will let you use the button element to build your button like your others so they match.
Or you could use Avia Layout Builder Debugger so you can view the shortcode of the other buttons.
The shortcode that you used above doesn’t have all of the attributes for the colors, size, etc.

Best regards,
Mike

Hey birte5,
Thanks for your patience, with I check your video “Roar”, linked below, on Android mobile the video will play in screen with the fullscreen button, this video is not autoplay:



I don’t have a iPhone so I don’t know if it is different. Please check this page and see if this is the same for you.

Best regards,
Mike

Hey Anne,
I believe that you are referring to this highlighting button:

These will work on pages created with the WordPress Editor but not on pages created with the Advanced Layout Builder because it can not highlight text inside of elements.
I don’t know of any other plugins with this feature.
For some features you will need to ensure that the Enfold Theme Options ▸ SEO Support ▸ Preprocessing Shortcodes In Header ▸ allow to preprocess shortcodes is enabled.

Best regards,
Mike

Hey Tanja,

Thank you for the inquiry.

You can use this css code to adjust the style of the submit button in the footer widget:

#footer .field-wrap>div input[type=checkbox], #footer .field-wrap button, #footer .field-wrap input[type=button], #footer .field-wrap input[type=submit] {
    width: auto;
    border-radius: 3px;
    padding: 10px;
    font-size: 16px;
    text-decoration: none;
    display: inline-block;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    margin: 3px 0;
    line-height: 1.2em;
    position: relative;
    font-weight: 400;
    text-align: center;
    max-width: 100%;
    color: var(--enfold-alternate-color-button-font);
    border-color: var(--enfold-alternate-color-button-border);
    background-color: var(--enfold-alternate-color-primary);
    min-width: 180px;
}

Best regards,
Ismael

Hey schweg33,
Try this CSS in your <strong style=’color:#000′>Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 1224px) { 
#top.home .avia-button.avia-size-small {
	min-width: 100%;
} 
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
You can try and since most of these you are not using on your site you can disable them at Enfold Theme Options ▸ Performance ▸ Disable Template Builder Elements

Blue means that it is disabled, you should see text next to the button unused or in use to help you so you don’t disable elements in use:

Best regards,
Mike

Hey northorie,

Thank you for the inquiry.

You can add mew buttons for cookie bar in the Enfold > Privacy & Cookies > Cookie Handling > Buttons section. Simply click the green plus icon (+) to add a new button.

Best regards,
Ismael