Hi,

Thank you for the update.

You can use this css code to adjust the vertical position of the phone number.

#header_main .phone_number a {
    top: -10px;
    position: relative;
}

Also I edited the size but it is not reflecting. Did I do something wrong?

Did you adjust the font-size value in this css rule?

#header_main .phone_number a p {
    font-size: 64px;
}

Best regards,
Ismael

Hey diefleischerei,
Thanks for your question you can create a print button with this code in the page:
<button class="print" onclick="window.print()">Print This</button>
and this css:

button.print {
    background-color: #0366d6;
    color: #ffffff;
    border-radius: 3px 3px 3px 3px;
    border: none;
    border-width: 1px 1px 1px 1px;
}

This would be the results:

You will probably also want to use the print media query to set which elements print and which ones to avoid, for example:

@media print { 
	p {
	font-size: 18px;
	line-height: 1.1em;
	}
        .sidebar {
	display:none;
	}
	.single-post #content {
	text-align: center;
	top: unset;
	left: unset;
	transform: none;
	position: relative;
	background: none;
	width: 100%;
	padding: 0;
    }
}

Best regards,
Mike

Hey A,
Thanks for your patience and the link to your site, to make your header transparent only on your homepage and make the menu items white when the header is transparent so you can see them I added this css:

.html_header_top.html_header_sticky #header.av_header_transparency {
    background: transparent;
}
#top #header.av_header_transparency .av-main-nav > li > a {
    background-color: transparent;
}
#top #header.av_header_transparency .av-main-nav > li > a .avia-menu-text {
    color: #fff
}
#top #header.av_header_transparency .av-main-nav > li#menu-item-search > a {
	color: #fff;
}
#top #header.av_header_transparency .av-main-nav li:hover .avia-menu-fx, 
#top #header.av_header_transparency .current-menu-item > a > .avia-menu-fx, 
#top #header.av_header_transparency .av-main-nav li:hover .current_page_item > a > .avia-menu-fx {
    background-color: #fff;
}

To remove the social icons I removed them at Enfold Theme Options ▸ Social Profiles, none of them had links so they would not do anything on click anyways.
Then I added this css to make your phone number larger and move the menu over to make room:

#header_main .phone_number a p {
	font-size: 47px;
}
#header_main .avia-menu.av_menu_icon_beside {
    margin-right: 336px;
}

If you want the phone number smaller feel free to adjust
please clear your browser cache and check.

Best regards,
Mike

Hi Tilman,

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

/* No capitals */
.avia-toc-style-elegant a {
  text-transform: none;
}
/* Font size for level 1 */
.avia-toc-style-elegant .avia-toc-level-1 {
  font-size: 20px;
}
/* Font size for level 2 */
.avia-toc-style-elegant .avia-toc-level-2 {
  font-size: 18px;
}
/* Style toggle button */
.toc-toggle {
  background: transparent;
  border: none;
  font-size: 20px;
}

Then add following code to bottom of functions.php file of your child theme to add toggle button to TOC

add_action('wp_head', 'toggle_toc');
function toggle_toc(){
 ?>
 <script>
 jQuery(window).load(function(){
	var $input = jQuery('<input class="toc-toggle" type="button" value="≡" />');
    $input.prependTo(jQuery(".avia_auto_toc"));
	 
	jQuery( ".toc-toggle" ).click(function() {
	jQuery( ".avia-toc-container" ).toggle();
});
	 
});
 </script>
<?php 
}

Best regards,
Yigit

Hi,

Thank you for the update.

Have you tried adjusting the font size values in the Customize Typography Settings ? You can adjust the default font size and specify different values for small, medium and very small screens. You may need to add custom css media queries for other screen sizes that are not covered by the typography settings.

Best regards,
Ismael

Hey Arobazinfo,

Thank you for the inquiry.

Which elements are you using? You can specify font sizes for different screen width in the Enfold > General Styling > Advanced Options: Customize Typography Settings section. You can also edit certain elements in the Enfold > Advanced Styling panel and use css media queries in the Enfold > General Styling > Quick CSS field to further adjust the style of certain elements. Please check the article below for more info about css media queries.

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

Best regards,
Ismael

Hi,

You can upload screenshots to a service like Google Drive, Dropbox or similar, then link to it here.

I doubt that the update caused this though, since the styling is coming from your child theme:

.row_courses a {
    color: #003087;
    font-family: 'open_sansbold';
    font-size: 20px;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 75px;
}

.row_courses a {
    font-size: 17px;
    bottom: 35px;
}

The row_courses class is not a theme class either, so it’s something that has been added by someone else.

Best regards,
Rikard

Hey seo-systeme,

Thank you for the inquiry.

In the code below, we modified the parallax banner function a bit to include the category title and re-registers the template hooks. Please create a site backup, then add the code below in the functions.php file.

function avia_woocommerce_big_cat_banner_mod()
{
	if(is_product_category())
	{
		global $wp_query, $avia_config;

		if(isset($wp_query->query_vars['taxonomy']))
		{
			$term = get_term_by( 'slug', get_query_var($wp_query->query_vars['taxonomy']), $wp_query->query_vars['taxonomy']);
			if( ! empty( $term->term_id ) )
			{
				$description 	= term_description() ;
				$style		= avia_get_woocommerce_term_meta( $term->term_id, 'av_cat_styling' );
				$attachment_id 	= avia_get_woocommerce_term_meta( $term->term_id, 'thumbnail_id' );

				$overlay 	= avia_get_woocommerce_term_meta( $term->term_id, 'av-banner-overlay' );
				$font 		= avia_get_woocommerce_term_meta( $term->term_id, 'av-banner-font' );
				$opacity 	= avia_get_woocommerce_term_meta( $term->term_id, 'av-banner-overlay-opacity' );

				if(!empty($style))
				{
					remove_action( 'woocommerce_before_shop_loop', 'woocommerce_taxonomy_archive_description', 11 );
					echo avia_woocommerce_parallax_banner_mod($attachment_id, $overlay, $opacity, $description, $font);
					$avia_config['woo-banner'] = true;
				}
			}
		}
	}
}

function avia_woocommerce_shop_banner_mod()
{
	global $avia_config;

	if(is_shop() || (is_product_category() && avia_get_option('shop_banner_global') == 'shop_banner_global') && !isset($avia_config['woo-banner']))
	{
		$options = avia_get_option();

		if( isset( $options['shop_banner'] )  && ( $options['shop_banner'] == 'av-active-shop-banner' ) )
		{
			$bg 		= $options['shop_banner_image'];
			$overlay 	= $options['shop_banner_overlay_color'];
			$opacity 	= $options['shop_banner_overlay_opacity'];
			$description= wpautop( $options['shop_banner_message'] );
			$font 		= $options['shop_banner_message_color'];

			echo avia_woocommerce_parallax_banner_mod( $bg, $overlay, $opacity, $description, $font );
		}
	}
}

function avia_woocommerce_parallax_banner_mod( $bg, $overlay, $opacity, $description, $font )
{
	if( is_numeric( $bg ) )
	{
		$bg = wp_get_attachment_image_src($bg, 'extra_large');
		$bg = ( is_array( $bg ) && $bg[0] != '' ) ? $bg[0] : '';
	}

	if( $font )
	{
		$font = "style='color:{$font};'";
	}

	if( $bg )
	{
		$bg = "background-image: url({$bg});";
	}

	$output  = '';
	$output .= '<div id="av_product_description" class="avia-section main_color avia-section-large avia-no-border-styling avia-full-stretch av-parallax-section av-section-color-overlay-active avia-bg-style-parallax container_wrap fullsize" data-section-bg-repeat="stretch" ' . $font . '>';
	$output .=		'<div class="av-parallax avia-full-stretch" data-avia-parallax-ratio="0.3">';
	$output .=			'<div class="av-parallax-inner av-parallax-woo" style="' . $bg . ' main_color background-attachment: scroll; background-position: 50% 50%; background-repeat: no-repeat;">';
	$output .=			'</div>';
	$output .=		'</div>';

	$output .=		'<div class="av-section-color-overlay-wrap">';

	if( ! empty( $overlay ) )
	{
		$output .=		'<div class="av-section-color-overlay" style="opacity: '.$opacity.'; background-color: ' . $overlay . '; "></div>';
	}

	$output .=			'<div class="container">';
	$output .=				'<main class="template-page content av-content-full alpha units">';

	if( $description )
	{
		$title = get_the_archive_title();
		$output .=				"<h1>{$title}</h1>";
		$output .=				"<p>{$description}</p>";
	}

	$output .=				'</main>';
	$output .=			'</div>';
	$output .=		'</div>';
	$output .= '</div>';

	return $output;
}

add_action('after_setup_theme', function() {
    remove_action( 'ava_after_main_container', 'avia_woocommerce_shop_banner', 11 );
    remove_action( 'ava_after_main_container', 'avia_woocommerce_big_cat_banner', 11 );
    add_action( 'ava_after_main_container', 'avia_woocommerce_shop_banner_mod', 11 );
    add_action( 'ava_after_main_container', 'avia_woocommerce_big_cat_banner_mod', 11 );
}, 999);

Best regards,
Ismael

Hey gabrimore98,

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

.av-tab-section-container .avia-content-slider .slide-entry-title {
    font-size: 18px;
}

Best regards,
Rikard

Hi,

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

#top .av-logo-container .social_bookmarks li a {
  font-size: 20px;
}

Regards,
Yigit

Hey AuroraArcus,
Thanks for the link to your page, I see the text overlap began at 1350px and below 400px the padding was adding to the problem so I recommend this css:

@media only screen and (max-width: 1350px) { 
#top .av-catalogue-title-container {
    font-size: .8em;
    line-height: 1em;
}
}
@media only screen and (max-width: 420px) { 
.responsive #top #wrap_all #av-layout-grid-1 .flex_cell {
    padding: 40px 20px !important;
}
}

After applying the css, please clear your browser cache and check.
For tablet and below the font change seems appropriate:

and for very small mobile devices the added padding change also helps:

Best regards,
Mike

Hey schwabino,

Thank you for the inquiry.

You can use this css code to adjust the style of the social icons in the top header.

#top #header_meta .social_bookmarks li a {
    width: 60px;
    line-height: 60px;
    min-height: 60px;
    height: 100%;
    font-size: 20px;
}

#header_meta .container {
    min-height: 60px;
}

Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css.

Best regards,
Ismael

Hi,

Thank you for the update.

You can upload a custom svg file to the uploads folder or use the Media > Library to upload a media file, then use the following css code to adjust the style of the video controls.

.mejs-button>button {
    background: transparent url(mejs-controls.svg);
    border: 0;
    cursor: pointer;
    display: block;
    font-size: 0;
    height: 20px;
    line-height: 0;
    margin: 10px 6px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    text-decoration: none;
    width: 20px;
}

Replace the value of the background property with the custom svg file.

Best regards,
Ismael

Hey Mark,
Thanks for your question, have you added this css in the Quick CSS:

.pagination a,.pagination span {
    display: block;
    float: left;
    font-size: 11px;
    line-height: 13px;
    padding: 2px 9px 1px 9px;
    text-decoration: none;
    width: auto
}

If you have please remove it, if not please include admin login in the Private Content area so we can investigate.

Best regards,
Mike

Hi Franz,

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

.av-sort-by-term {
    font-size: 22px;
}

.av-sort-by-term a {
    color: red;
    font-family: verdana; 
}

.av-sort-by-term a.active_sort {
    color: blue;
}

Best regards,
Rikard

Hi,

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

#top .fullsize .template-blog .post-title {
    font-size: 20px;
    color: #003185;
}

Best regards,
Rikard

Hey Eleina,
Thanks for the link to your example, try adding this code to your Enfold Theme Options ▸ Header ▸ Extra Elements ▸ Phone Number or small info text

<ul class="topbar-contact"><li class="map"><span class="inline"><a href="#">[av_font_icon icon='ue842' font='entypo-fontello' size='20px'][/av_font_icon]Pet Street 123 - New York</a></span></li>  <li class="phone"><span class="inline"><a href="tel://1-555-555-5555">[av_font_icon icon='ue854' font='entypo-fontello' size='20px'][/av_font_icon]555-555-5555</a></span></li>  <li class="mail"><span class="inline"><a href="mailto: (Email address hidden if logged out) ">[av_font_icon icon='ue805' font='entypo-fontello' size='20px'][/av_font_icon] (Email address hidden if logged out) </a></span></li></ul>

and add this css to your Enfold Theme Options ▸ General Styling ▸ Quick CSS field

#header_meta .inline {display: inline-block;}
#header_meta .topbar-contact ul {list-style: none; list-style-type: none;}
#header_meta ul.topbar-contact li {display: inline;}
#header_meta ul.topbar-contact li a {vertical-align: middle;}
#header_meta ul.topbar-contact {margin-bottom: 0;}

this is the expected results:

Best regards,
Mike