Hey Ramon,
Thank you for the link to your site, the closest I could come to your request is this script and css that shows the gallery image thumbnail alt tag on mouse-over:

which works ok if the alt tag doesn’t contain too much text, since the image needs to be clickable to view the larger image above if there is too much text you can’t click the image.
If you want to try this, add this code to the end of your functions.php file in Appearance ▸ Editor:

function custom_gallery_tooltip_script() { ?>
    <script>
(function($) {
	setTimeout(function(){
  $("#top.single-product .flex-control-thumbs>li>img").wrap('<div class="alt-wrap"/>');
  $(".alt-wrap>img").each(function() {
    $(this).after('<span class="tooltip">' + $(this).attr('alt') + '</span>');
  });
	},300);
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'custom_gallery_tooltip_script');

and this code in the General Styling ▸ Quick CSS field:

.alt-wrap { 
  display: block;
  position: relative;
  margin: 0px;
}
.alt-wrap span.tooltip {
  opacity: 0;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  color: #fff;
  padding: 5px;
  font-size: 10px;
  line-height: 12px;
  background-color: rgba(0,0,0,0.8);
  transition: all 300ms ease;
  transition-delay: 300ms;
}
.alt-wrap:hover > span.tooltip { 
  opacity: 1; 
  transition-delay: 0s;
}

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

Best regards,
Mike

Hey Julio,
It looks like the footer icons are html pasted into a text widget, is this correct?
If so please include an admin login and we can adjust the html to use the icon in the socket.
to increase the icons try this css:

#footer .social_bookmarks li a {
width: 50px!important; 
line-height: 50px!important; 
min-height: 50px!important; 
font-size: 30px;
}

#footer .social_bookmarks li {
height: 50px!important; 
width: 50px!important; 
}

#footer .social_bookmarks {
    height: 60px!important;
}

As to changing the green-yellow color of the icons, what color do you want them to be?

Best regards,
Mike

Hi,
Thank you for the login, to correct your mobile header I had to adjust your custom css for the social_bookmarks by putting it in a media query like this:

@media only screen and (min-width: 767px) { 
#top #header .social_bookmarks li a {
    font-size: 25px;
}
#top .social_bookmarks li {
     margin: 0 5px;
}
}

and I had to add your “make header larger & move over” css to another media query like this:

@media only screen and (min-width: 1440px) { 
	/* Make header larger & move over */
#header_main .logo, 
#header_main .logo a {
    overflow: visible;
}
#header_main .logo img {
    height: 90px;
    position: relative;
    max-height: none;
    right: -90px;
    top: 15px;
}
#top nav .social_bookmarks {
   float: right;
   left: auto;
   width: 10%;
}
}

But I notice your desktop your header widget is overlapping your social_bookmarks because you have it set to right: 300px;, I would recommend using right: 30%; instead.

Best regards,
Mike

Hey Julio,

Thank you for the inquiry.

As we mentioned in the previous thread, it is possible to apply a unique ID or class name to any elements in the builder including the Text Block and the Special Heading element. Just edit the element, then go to the Advanced > Developer Settings panel to apply the class name or the ID. You can then use those attributes as css selectors to adjust the style of the element.

Example:

.your-custom-class { font-size: 100px; }

Best regards,
Ismael`

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