Hi,

For next release 4.8.8.1 I added this feature:

add_theme_support( 'avia_options_extended_typography' );

replaces the selectboxes with plain input fields where you can add any valid CSS (there is no check).

To skip your ALB settings for responsive fonts there is a filter:

https://github.com/KriesiMedia/enfold-library/blob/master/actions%20and%20filters/Layout/avf_el_styling_responsive_font_size_skip.php

If you want to have a beta version for testing let us know.

Best regards,
Günter

Hey,

Thanks for contacting us!

Please add following code to Quick CSS field in Enfold theme options > General Styling tab

input, select { font-size: 100%; }

Best regards,
Yigit

Hey hitrev,

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

@media only screen and (max-width: 767px) {
.av-subnav-menu .avia-menu-text {
  font-size: 12px; 
}
}

Best regards,
Rikard

Hey rob,

I could not see any selector that is deprecated but there are some things you can do with options instead of using CSS codes.

For example, you have following code to make borders rounded on button element with “rounded-button” class

#top .rounded-button a.avia-button {
border-radius: 30px;
}

You can edit button elements and adjust their border radius in Styling > Borders now – https://i.imgur.com/7rCORiZ.png

Instead of using following code

.main_menu ul:first-child > li > a { font-size: 18px; }

You can go to Enfold theme options > Advanced Styling and edit “Main Menu Links” to increase main menu font size

Instead of using following code

p.toggler.av-inherit-border-color {
background-color: #002348;
color: #ffffff

}

You can edit Accordion element and use custom color options

Instead of following code
h1, h2, h3, h4, h5, h6 { text-transform: none !important; }
You can go to Enfold theme options > Advanced Styling and edit “All Headings (H1-H6)” to change text transform

That seems to be it :)

Regards,
Yigit

Hi Tim,

Thanks for your feedback.

ad 1)

That makes sense. I took px because Kriesi did in his default setting (and also in the Advanced Styling tab).
I will change it to plain input fields with a default of px (if no other unit is specified).

ad 2)

For elements that support post css files (like ‘Special Heading’ does) the responsive handling for font sizes in in aviaElementStylingResponsive::add_responsive_font_sizes(…).

What I would suggest is to extend the parameter list with a reference to the shortcode object and add a filter to supress generating the media queries.
That will allow more flexibility without touching any other core code.

ad 3)

Yes, Advanced Styling has priority. Selectors are e.g.

#top #wrap_all .all_colors h1

Selectors from typography tab are simple e.g.:

h1

Best regards,
Günter

Hi,

You can use css media queries to adjust the style of the elements including its font style on mobile view or any screen sizes.

// https://css-tricks.com/a-complete-guide-to-css-media-queries/

If you need more help, please feel free to open another thread.

Best regards,
Ismael

Hi,
Thank you for the link to your site, please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

#top #socket {
    font-size: 16px;
}

you can adjust the number 16 to suit your needs, then clear your browser cache and check.

Best regards,
Mike

Hi,
I see that your trioIcon div is missing your icon html:
<i class="bi bi-pin-map-fill" style="font-size: 1.25rem; color: white;"></i>
Please use the code block element instead of the text block element to display html code.

Best regards,
Mike

Hey Julio,

Thank you for the inquiry.

You can actually use the Image element to open the video as an external link, just make sure to apply the “noLightbox” class name in the Advanced > Developer Settings > Custom CSS class field to prevent lightbox from opening. For the play button, you can try this css code.

.avia-image-container:hover .avia-image-overlay-wrap:before {
    content: 'Play Button Here';
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    z-index: 1000;
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
}

Just replace the content value with an actual play button image or a font icon.

Best regards,
Ismael

Hey limedrop,

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

.av-submenu-container li a .avia-menu-text {
  font-size: 20px;
}

.av-submenu-container li.current_page_item a .avia-menu-text {
  color: red;
}

Best regards,
Rikard

Hi,

Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

1.

.cart_dropdown_link span:before {
    font-size: 25px;
}

2.

@media only screen and (max-width: 767px) {
.template-shop.avia-content-slider .products .product {
    width: 49%;
}
}

Best regards,
Rikard

Hey Corina,

Thank you for the inquiry.

This css distorts and disaligns the logo on screens narrower than 1284px.

.responsive .logo img, #top .logo {
    max-width: 35% !important;
    width: 35%!important;
}

And this one removes the space between the menu items.

.av-main-nav > li > a {
    font-weight: normal !important;
    font-size: 20px;
    text-transform: uppercase;
    padding: 0px!important;
}

We added a screenshot of the header in the private field after disabling the css rules above.

Best regards,
Ismael

Hey aruizhuidobro,
Please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

#top .av-tabs-trauma .av-section-tab-title .av-inner-tab-title {
font-size: 8px;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
To have a Scroll Up to Next Section Arrow try pasting this is a code block element at the top of your color section:
<a href="#intro" title="" class="scroll-up-link av-control-hidden" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></a>
adjust the link to the custom ID of the section above #intro please note that every ID can only be used once on a page, so every arrow needs a different link.
Then add this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

#top .scroll-up-link {
    height: 60px;
    width: 80px;
    margin: 0px 0 0 -40px;
    line-height: 60px;
    position: absolute;
    left: 49.85%;
    top: 0px;
    color: #FFF;
    text-align: center;
    font-size: 70px;
    z-index: 100;
    text-decoration: none;
    text-shadow: 0px 0px 3px rgb(0 0 0 / 40%);
    -webkit-animation: custom_fade_move_up 2s ease-in-out infinite;
    animation: custom_fade_move_up 2s ease-in-out infinite;
}
/*animated arrow animattion*/
@-webkit-keyframes custom_fade_move_up {
  0%   { -webkit-transform:translate(0,20px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -webkit-transform:translate(0,-20px); opacity: 0; }
}
@keyframes custom_fade_move_up {
  0%   { transform:translate(0,20px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { transform:translate(0,-20px); opacity: 0; }
}

Then clear your browser cache and any cache plugin, and check.
the expected results:

Best regards,
Mike

Hey Susanne,
Please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

#footer h3.widgettitle {
	font-size: 10px;
}

and adjust the font size to suit, then clear your browser cache and any cache plugin, and check.
If this doesn’t help please include the url to your site so we can take a closer look.

Best regards,
Mike

Hi,
Glad this helped, for simple bold you would use ‘montserrat’ with a font-weight of bold or 700, please note that in the theme the font is writen in small case:

#top #wrap_all .main_color h3 {
    font-family: 'montserrat';
    font-weight: bold;
}

but this is the regular font with bold applied, there is another ‘montserrat-bold’ that is available from Google Fonts that is wider without using a font-weight.

I assumed you might be looking for this one so I uploaded it to your Enfold Theme Options ▸ Import/Export ▸ Custom Font Manager as before and you can use css like:

#top #wrap_all .main_color h3 {
    font-family: 'montserrat-bold';
}

Then clear your browser cache and any cache plugin, and check.

Please note that I see you are trying to change your heading fonts with css by only using the heading, such as h3 {font-size: 24px; font-family: ‘Montserrat’}
I found this in your Quick CSS:

h1 {font-size: 50px}
h2 {font-size: 48px; font-family: 'Playfair Display'; color: #00469e;}
h3 {font-size: 24px; font-family: 'Montserrat'}
h4 {font-size: 20px; font-family: 'Montserrat'}
h5 {font-size: 14px; font-family: 'Montserrat'; color: #164991}
h6 {font-size: 12px; font-family: 'Montserrat'}

this will probably not be enough in some cases because the theme uses two IDs and a class for most headings, like this: #top #wrap_all .main_color h3 so the specificity is much higher, if you find you are having trouble overwriting a style try adding more specificity

Best regards,
Mike

Hi,

Thanks for the update. We’re not really familiar with the AMP plugins unfortunately, so it will be difficult for us to provide support for it. Maybe you could try reaching out to the plugin developers for further help? I’m not sure exactly why you feel that you need it, is your site mobile unfriendly if you do not use that plugin? If so, then in what way?

Font sizes; please click this button to reveal the options you are looking for: https://snipboard.io/wCMUPh.jpg

Best regards,
Rikard

Hi,

Thanks for that. I can’t see why your slider is not displaying unfortunately, could you try disabling all plugins to see if that makes any difference please?

Font type and size; where exactly are you not seeing those options?

Best regards,
Rikard