Hey Katja,
Thank you for the link to your site, on your first level menu items they are blue until mouse-over then they are yellow, but the backend of the second level is already yellow so what colors do you want the mouse-over and active page second level menu items to be?
mobile devices don’t have a mouse-over function, if you want the first level active menu items to have a yellow background you could try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top #wrap_all #av-burger-menu-ul li.current-menu-item a {
    background-color: #fff236;
}

but second level mobile menu items all share the same background color.
To add the header image to your category pages try the Unique Headers plugin.
For your search field try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top .header_color .avia-search-tooltip input[type='text']#s {
	background-color: #fff;
	color: #30302f;
}

Fot your widget item, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top #wrap_all .main_color .tribe-events-widget-events-list__header-title {
    color: #c3512f;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
}
#top .main_color .tribe-events-widget-events-list__header-title {
    border-style: solid;
    border-width: 1px;
    border-color: rgb(235, 232, 226);
    padding: 10px 0;
    border-left: none;
    border-right: none;
    margin-bottom: 15px;
}

For your last question, some items have text some don’t they are not the same.
Please note that we kindly ask that each thread is for a single topic, it is hard to manage threads with many questions, typically it causes confusion when other Mods try to help or when clients answer but are not so clear, Thank you for your patience and understanding and for using Enfold.

Best regards,
Mike

Hey Jason,
Thanks for your patience, the blog element layout is dependent on the Enfold Theme Options ▸ Blog Layout ▸ Blog Styling
it looks like you are using the Modern Business

you also could use Elegant

and Default (Business)

So I recommend choosing the one that is closest to your overall goal, which in this case seems to be Default (Business) and then adjust from there. So in this example it looks like we only need to move the date above the title, I recommend using jQuery in your child theme functions.php instead of customizing the element php file in your child theme, \enfold\config-templatebuilder\avia-shortcodes\postslider\postslider.php, because future features may not work correctly if you use an older version of the file.
For example:

function custom_move_time_script() { ?>
  <script>
(function($){
  $( '.slide-entry' ).each(function() {
  $( this ).find( 'time.slide-meta-time' ).insertBefore( $(this).find('header'));
  });

})(jQuery);
</script>
  <?php
}
add_action( 'wp_footer', 'custom_move_time_script', 99 );

Then you can make the rest of the adjustments with css, like hiding the comments, making the date larger & gold, adding top padding, making the read more gold, etc.

.slide-content .slide-meta {
	display: none;
}
.slide-content .slide-meta-time {
	font-size: 14px;
	color: gold;
}
.slide-content .slide-entry-title {
	font-size: 28px;
	padding-bottom: 10px;
}
.slide-content {
	padding-top: 20px;
}
.slide-content .read-more-link a {
	color: gold;
}

So give this a try and if you need further help please create a test page so we can examine your element and offer more help.

Best regards,
Mike

Hey jmjwebsites,

Thank you for the inquiry.

Are you referring to the links within the socket container? If that’s the case, you can use this css rule to adjust the style of the menu items.

#socket .sub_menu_socket li {
    float: left;
    display: block;
    padding: 0 10px;
    border-left-style: solid;
    border-left-width: 1px;
    line-height: 10px;
    font-size: 18px;
}

For the copyright text, please add this code:

#socket .copyright {
    float: left;
    font-size: 18px;
}

Best regards,
Ismael

Hi,

Thank you for the update.

Are you referring to the h3 tags in the Text Block element? The font size of the heading element is set to 30px when we checked the site on Chrome and Safari. Please check the screenshot in the private field.

Best regards,
Ismael

Hey Andrea,

Thank you for the inquiry.

The cells of the table do not respond or resize correctly on mobile view due to the height adjustment in the following css code:

.pricing-table>li {
    border-color: var(--base1-color)!important;
    font-size: 18px!important;
    font-weight: bold!important;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    resize: vertical;
    margin: 0 auto;
}

Please adjust the height property from 100px to auto and make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings afterward.

Best regards,
Ismael

Hey LUISCANAL,
Try a back slash before the icon number:

.my-custom-tabs .toggle_icon:before {
    font-family: 'entypo-fontello';
    content: '\e817';
    position: absolute;
    font-size: 18px;
    top: 50%;
    transform: translateY(-50%);
    left: 0px;
    line-height: 0;
    color: red;
}

Best regards,
Mike

Hi,
I see that whenever a page is edited there is a permissions error for core WordPress files:

one is for a plugin “easy pricing” and I see and error that your Rest API has been disabled, so you made have other plugin conflicts.
comparing the wayback page with your current one, I only see the your headings have a color of #666 now and were #222 but the font sizes is the same, and you icon element font was 21px and now 16px. The problem is that the wayback page uses the Autoptimize cache and now you are not, Autoptimize often breaks the cache styles due to multiple minifying, typically people notice the error and the disable Autoptimize to correct, so I’m not sure if you didn’t realize the error until now when Autoptimize has been disabled and the cache cleared.
When I examine your general style you are using the font color #666 so this leads me to believe that this color is correct and the Autoptimize version was wrong.
I recommend disabling the above plugin and any others that are causing the permissions & Rest API errors.

Best regards,
Mike

Hey MiaShia,

Thank you for the inquiry.

We encountered an error when we tried to access the site. The password for the specified username is incorrect.

Fehler: Das eingegebene Passwort für die E-Mail-Adresse REDACTED@gmail.com ist nicht korrekt. Passwort vergessen?

Please check the info provided or post an alternative account. In the meantime, please provide a screenshot of the element that you’d like to adjust.

If you want to adjust the font size of the portfolio gird title, please use this css code.

#top #wrap_all .all_colors h3.grid-entry-title {
    font-size: 30px;
    font-weight: normal;
}

Or edit the h3 element in the Enfold > Advanced Styling panel.

Best regards,
Ismael

Hi,
Glad to hear that you find this helpful, thanks to Guenni007 for pointing out that the needed css may not always be loaded correctly, so I added the css into the shortcode and I changed the date attribute to include a time so you can better choose a start date & time. I also added a format attribute so you can choose what will show, like the “Smallest time unit” and “Largest time unit”
So the shortcode to use on the page is now like this: [custom_countup date=”2024-03-01 00:00:00″ format=”weeks,days,hours,minutes,seconds” color=”#000″ background=”#f8f8f8″] you can remove the time units that you don’t want to show.

But please note that if you only show hours & days, the day element will only show up to 7 days even if you have the week element hidden, so you will not see “13” days, the same is for the calculation on all of the elements. This is the new code:

function wp_custom_countup_shortcode($atts) {
    $a = shortcode_atts(array(
        'date' => '2020-01-01 00:00:00',
        'color' => 'black',
        'background' => 'white',
        'format' => 'weeks,days,hours,minutes,seconds', 
    ), $atts);

    $uid = uniqid('countup_');
    wp_enqueue_script('jquery');

    $formatParts = array_map('trim', explode(',', $a['format']));
    $htmlParts = array();

    foreach ($formatParts as $part) {
        if (in_array($part, ['weeks', 'days', 'hours', 'minutes', 'seconds'])) {
            $htmlParts[] = "<span class='av-countdown-cell av-align-center' style='color: {$a['color']};'><span class='av-countdown-cell-inner' style='background-color: {$a['background']};'><span class='av-countdown-time {$part}'></span><span class='av-countdown-time-label'>" . ucfirst($part) . "</span></span></span>";
        }
    }

    $html = "<div id='{$uid}' class='av-countdown-timer-inner'>" . implode("\n", $htmlParts) . "</div>";

    $serverTimeAtPageLoad = current_time('timestamp', true) * 1000;

    $jsParts = [];
    foreach ($formatParts as $part) {
        $jsParts[] = "'{$part}': Math.floor(" . ($part == 'weeks' ? "distance / (1000 * 60 * 60 * 24 * 7)" : ($part == 'days' ? "(distance % (1000 * 60 * 60 * 24 * 7)) / (1000 * 60 * 60 * 24)" : ($part == 'hours' ? "(distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)" : ($part == 'minutes' ? "(distance % (1000 * 60 * 60)) / (1000 * 60)" : "(distance % (1000 * 60)) / 1000")))) . ")";
    }

    $html .= "<script>
                jQuery(function($) {
    var countUpDate = new Date('{$a['date']}').getTime();
    var serverTimeAtPageLoad = {$serverTimeAtPageLoad};
    var x = setInterval(function() {
        var now = new Date().getTime();
        var elapsedTime = now - serverTimeAtPageLoad;
        var serverNow = serverTimeAtPageLoad + elapsedTime;
        var distance = serverNow - countUpDate;

        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);

        var weeks = Math.floor(days / 7);
        days -= weeks * 7; 

        var timeParts = {
            'weeks': weeks,
            'days': days,
            'hours': hours,
            'minutes': minutes,
            'seconds': seconds
        };

        Object.keys(timeParts).forEach(function(key) {
            $('#{$uid} .' + key).text(timeParts[key]);
        });
    }, 1000);
});
</script>";

    $html .= "<style>
    .av-countdown-timer-inner { display: table; width: 100%; table-layout: fixed; }
    .av-countdown-cell { display: table-cell; }
    body .av-align-center { text-align: center; }
    .av-countdown-cell-inner { display: block; vertical-align: baseline; border-style: solid; border-width: 1px; margin: 2px; padding: 20px; }
    .av-countdown-time { display: block; font-size: 40px; line-height: 1em; font-weight: 100; text-decoration: none; }
    .av-countdown-time-label { display: block; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; line-height: 1.65em; }
    @media only screen and (max-width: 767px) {
        .responsive .av-countdown-cell-inner { padding: 12px 7px; }
        .responsive .av-countdown-time { font-size: 30px; }
        .av-countdown-time-label { text-transform: none; }
    }
    @media only screen and (max-width: 989px) {
        .responsive .av-countdown-cell-inner { padding: 10px 10px; }
    }
    </style>";

    return $html;
}
add_shortcode('custom_countup', 'wp_custom_countup_shortcode');

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

Best regards,
Mike

Hi,

You can add this css code to adjust the width of the color section container on mobile view.

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

  /* Add your Mobile Styles here */
  #section-container-width .container {
    width: 80% !important;
    min-width: 80% !important;
  }
}

You may need to adjust the styles of the following elements on mobile view. Instead of adding the styles inline, assign a unique class name to the < span > tag and define the css rules separately. This should allow you to adjust the style of the element for different screen sizes.

<span style="color: #ffffff; font-size: 34px; font-weight: 600; padding-left: 20%;">Online translation services</span>

Best regards,
Ismael

Hey joschro,

Thank you for the inquiry.

Have you tried adjusting the color values in the Enfold > General Styling > Main Content tab? To adjust the default font size of the body text, go to the General Styling > Typography tab, then adjust the values of the Default Content Font Size.

Best regards,
Ismael

Hi,
Thanks for the login, I found that you had the font size set to 13px:

since the demo uses 16px, I changed it for you, please clear your browser cache and check and if you want it larger please adjust.

Best regards,
Mike

Hey Eduardo,

Thank you for the inquiry.

1.) You can edit the Accordion element and adjust the colors in the Styling > Colors toggle.

2.) To adjust the style of the toggler, you adjust can the values in this css rule:

.js_active .toggler, .avia-admin-preview-container .toggler {
    padding: 9px 3px 9px 35px;
    line-height: 1.65em;
}

3.) You can also adjust the font styles in the Styling > Font Sizes toggle.

Best regards,
Ismael

Hi,

Thank you for the update.

To adjust the left or right icon, you can use this css rule:

#top .iconbox_left_content .iconbox_icon, #top .iconbox_right_content .iconbox_icon {
    width: 74px;
    height: 74px;
    font-size: 80px;
    line-height: 72px;
    border-style: solid;
    border-width: 1px;
    border-radius: 500px;
    text-align: center;
    margin-right: 22px;
}

You may need to remove the previous css code.

.iconbox_icon[data-av_icon]:before {
    font-size: 50px!important;
}

Best regards,
Ismael

Hey khrntanya,

Thank you for the inquiry.

The following css code overrides your modification:

.iconbox_icon[data-av_icon]:before {
    font-size: 50px!important;
}

You might have added it in the Quick CSS field.

Best regards,
Ismael

Hi,

I set them all to 13px.

The current font size is already set to 13px. Have you tried using a larger value? Please provide the login details in the private field so that we can check the settings properly.

Best regards,
Ismael

Hey omnicnc,

Thank you for the inquiry.

The default font size is currently set to 13px. Have you tried to temporarily disable the Enfold > Performance > File Compression settings? If this doesn’t work, try to manually adjust the font size in the Enfold > General Styling > Typography panel.

Best regards,
Ismael