Hi,

Thank you for the inquiry.

Please try this css code:

#top .av-custom-form-color * {
    color: #333;
}

Result:

Best regards,
Ismael

Hey condonp,

Thank you for the inquiry.

This is possible but it will require some custom html and some css modifications. You can start with the following code:

<div class="av-custom-testimonial">
  <div class="av-testimonial-card">
    
    <div class="av-testimonial-left">
      <h3 class="av-testimonial-heading">What our clients say</h3>
      <div class="av-testimonial-stars"></div>
      <p class="av-testimonial-text">“Your testimonial text goes here.”</p>
      <div class="av-testimonial-client">Client Name</div>
      <div class="av-testimonial-client-meta">Client Title</div>
    </div>

    <div class="av-testimonial-right">
      <div class="av-image-wrap">
        <img src="image.jpg" alt="">
      </div>
    </div>
  </div>
</div>

Then add this code in the Quick CSS field:

.av-custom-testimonial .av-testimonial-card {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 24px;
  background: #fff;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.08);
  max-width: 880px;
  align-items: stretch;
}

.av-custom-testimonial .av-testimonial-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px 0;
}

.av-custom-testimonial .av-testimonial-heading {
  font-size: 1.25rem;
  line-height: 1.1;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px 0;
  display: inline-block;
  width: 50%;
}

.av-custom-testimonial .av-testimonial-stars {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 12px;
}

.av-custom-testimonial .av-testimonial-text {
  font-size: 0.98rem;
  color: #6b7280;
  margin-bottom: 14px;
}

.av-custom-testimonial .av-testimonial-client {
  font-weight: 600;
  font-size: 0.95rem;
  color: #08121a;
}

.av-custom-testimonial .av-testimonial-client-meta {
  font-size: 0.85rem;
  color: #6b7280;
  margin-top: 4px;
}

.av-custom-testimonial .av-testimonial-right {
  position: relative;
  min-height: 220px;
  overflow: visible;
}

.av-custom-testimonial .av-image-wrap {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 160px;
  height: 280px;
  overflow: hidden;
  border-top-left-radius: 140px 72px;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 12px;
  border-top-right-radius: 12px;
  background: #f3f4f6;
}

.av-custom-testimonial .av-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 760px) {
  .av-custom-testimonial .av-testimonial-card {
    grid-template-columns: 1fr;
  }

  .av-custom-testimonial .av-image-wrap {
    position: relative;
    width: 100%;
    height: 220px;
    border-top-left-radius: 48px 26px;
  }

  .av-custom-testimonial .av-testimonial-right {
    min-height: auto;
  }

  .av-custom-testimonial .av-testimonial-heading {
    width: 70%;
  }
}

Best regards,
Ismael

Hi,

Thank you for the screenshot.

Adding this css code should help adjust the heading fonts.

[lang="ar"] #top #wrap_all .all_colors h1,
[lang="ar"] #top #wrap_all .all_colors h2,
[lang="ar"] #top #wrap_all .all_colors h3,
[lang="ar"] #top #wrap_all .all_colors h4,
[lang="ar"] #top #wrap_all .all_colors h5,
[lang="ar"] #top #wrap_all .all_colors h6 {
    font-family: 'Cairo', sans-serif;
}

Best regards,
Ismael

Hi,

Could you link to other thread that you are referring to please? As far as I can see, you have only started a single thread on the support forum: https://kriesi.at/support/profile/spiderlabz/topics/

Best regards,
Rikard

Hi,

Thank you for the update.

We just tested the code again and it seems to be working as it should.

Have you tried removing this css code?

#top #header.header-scrolled a {
    color: #ffffff !important;
}

Please provide a screenshot of the element that you’d like to change. You can use platforms like Savvyify, ImgBB, PostImages or Dropbox.

Best regards,
Ismael

Hey collinsfgc2025,

Thank you for the inquiry.

You have to look for the View icon in the top right corner of the editor. Please check the screenshot below:

Let us know if you have more questions.

Best regards,
Ismael

Hey ti2media,
Try adding this snippet to your child theme functions.php:

function add_sticky_info_box() {
    ?>
    <style>
        .sticky-info-box {
            position: fixed;
            bottom: 120px;
            right: 20px;
            width: 300px;
            height: 300px;
            background: #ffffff;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 9999;
            display: flex;
            flex-direction: column;
            padding: 20px;
            box-sizing: border-box;
            transition: opacity 0.3s ease;
        }
        
        .sticky-info-box.hidden {
            display: none;
        }
        
        .sticky-info-box-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 15px;
        }
        
        .sticky-info-box-title {
            font-size: 20px;
            font-weight: bold;
            color: #333;
            margin: 0;
            flex: 1;
        }
        
        .sticky-info-box-close {
            background: none;
            border: none;
            font-size: 24px;
            color: #999;
            cursor: pointer;
            padding: 0;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color 0.2s ease;
        }
        
        .sticky-info-box-close:hover {
            color: #333;
        }
        
        .sticky-info-box-message {
            flex: 1;
            color: #666;
            font-size: 14px;
            line-height: 1.6;
            margin-bottom: 20px;
            overflow-y: auto;
        }
        
        .sticky-info-box-button {
            background: #0073aa;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            text-align: center;
            transition: background 0.2s ease;
        }
        
        .sticky-info-box-button:hover {
            background: #005a87;
        }
        
        .sticky-info-toggle {
            position: fixed;
            bottom: 120px;
            right: 50px;
            width: 50px;
            height: 50px;
            background: #0073aa;
            color: white;
            border: none;
            border-radius: 50%;
            font-size: 24px;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 9998;
            display: none;
            align-items: center;
            justify-content: center;
            transition: background 0.2s ease;
        }
        
        .sticky-info-toggle:hover {
            background: #005a87;
        }
        
        .sticky-info-toggle.visible {
            display: flex;
        }
    </style>
    
    <div class="sticky-info-box" id="stickyInfoBox">
        <div class="sticky-info-box-header">
            <h3 class="sticky-info-box-title">Important Information</h3>
            <button class="sticky-info-box-close" id="closeInfoBox" aria-label="Close">×</button>
        </div>
        <div class="sticky-info-box-message">
            <p>This is your information box! You can customize this message to display any content you'd like to share with your visitors.</p>
        </div>
        <a href="/your-page-url" class="sticky-info-box-button">Learn More</a>
    </div>
    
    <button class="sticky-info-toggle" id="infoToggle" aria-label="Show information">ℹ</button>
    
    <script>
        (function() {
            var infoBox = document.getElementById('stickyInfoBox');
            var closeBtn = document.getElementById('closeInfoBox');
            var toggleBtn = document.getElementById('infoToggle');
            
            // Close the info box
            closeBtn.addEventListener('click', function() {
                infoBox.classList.add('hidden');
                toggleBtn.classList.add('visible');
            });
            
            // Show the info box again
            toggleBtn.addEventListener('click', function() {
                infoBox.classList.remove('hidden');
                toggleBtn.classList.remove('visible');
            });
        })();
    </script>
    <?php
}
add_action('wp_footer', 'add_sticky_info_box');

Then adjust the title, message, buttone text & link to suit. You can also adjust the CSS to change colors, etc.
It places the box & info button 120px from the bottom so they are above the scroll-top button, ratio than have them move if the scroll-top shows, which would not be so good.

Best regards,
Mike

Hi,

Please continue here: https://kriesi.at/support/topic/color-section-not-showing-color-or-image-background/#post-1492088

Best regards,
Ismael

Hi,

Thank you for the link.

Add this code in the functions.php file to load the Cairo font:

function av_load_google_fonts() {
    wp_enqueue_style(
        'google-fonts-cairo',
        'https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&display=swap',
        array(),
        null
    );
}
add_action('wp_enqueue_scripts', 'av_load_google_fonts');

After that, add the following css to make the font the default body text:

#top, body, p, span, li, a, h1, h2, h3, h4, h5, h6, input, textarea, button {
    font-family: 'Cairo', sans-serif;
}

Let us know the result.

Best regards,
Ismael

Hey ti2media,

Thank you for the inquiry.

The color of the email field is different due to this css code:

#top .kontaktformular input[type='text'] {
    background-color: #ffffff !important;
    border: none !important;
    color: #0d3c63 !important;
}

To correct it, please replace it with the following css:

#top .kontaktformular input[type='text'], #top .kontaktformular input[type='email'] {
    background-color: #ffffff !important;
    border: none !important;
    color: #0d3c63 !important;
}

Then add this css code to adjust the width of the form fields:

#top fieldset {
    margin-bottom: 20px;
    overflow: hidden;
}

Best regards,
Ismael

Hey ti2media,

Please try this CSS as well:

#scroll-top-link.avia-svg-icon svg:first-child {
  margin-top: 7px;
}

Best regards,
Rikard

Hey jimmiemoreland,

Thank you for the inquiry.

You can add this css code to make the header sticky on mobile. Make sure to adjust the top padding based on the header’s height.

@media only screen and (max-width: 989px) {

  /* Add your Mobile Styles here */
  .responsive.html_mobile_menu_tablet #top #wrap_all #header {
    position: fixed;
  }

  .responsive.html_header_top #top #main {
    padding-top: 120px !important;
    margin: 0;
  }
}

Let us know the result.

Best regards,
Ismael