Hi,

Thank you for the update.

I can’t seem to change them without also changing every other icon on the page!

You may have to apply a custom css class name or ID to the icon box element. Please edit the icon box, go to the Advanced > Developer Settings panel, look for the Custom CSS Class field and input the name “av-pencil-iconbox”, without the quotation marks. You can then use this class name to target that specific iconbox element and adjust its style.

#top .av-pencil-iconbox .iconbox_icon {
    float: none;
    position: absolute;
    left: 50%;
    top: -46px;
    margin: 0 0 0 -46px;
    padding: 30px;
    font-size: 50px;
    line-height: 50px;
}

#top .av-pencil-iconbox .iconbox_icon:before {
    position: absolute;
    left: 50%;
    top: 50%;
    right: auto;
    transform: translate(-50%, -40%);
}

Adjust the values of the css properties as you wish.

Best regards,
Ismael

Hey pelgrimrat,

Thank you for the inquiry.

You should be able to use the following css code to adjust the style of the iconbox icons.

#top .iconbox_top .iconbox_icon {
    float: none;
    position: absolute;
    left: 50%;
    top: -46px;
    margin: 0 0 0 -46px;
    padding: 30px;
    font-size: 50px;
    line-height: 50px;
}

#top .iconbox_top .iconbox_icon:before {
    position: absolute;
    left: 50%;
    top: 50%;
    right: auto;
    transform: translate(-50%, -40%);
}

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

Best regards,
Ismael

Hi,

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

.avia-table td {
  font-size: 18px; 
  background: red;
}

Best regards,
Rikard

Hi,
Thanks for the screenshots, try adding this css to your EN Quick CSS field in the theme options:
Enfold Theme Options ▸ General Styling ▸ Quick CSS field

#top #wrap_all .avia-slideshow .av-slideshow-caption.av-l2g3x00n-d3eb9544f049e85bc61e9272b95ae46b__0 .avia-caption-title {
    font-size: 58px;
    color: #fff;
}
#top .avia-slideshow .av-slideshow-caption.av-l2g3x00n-d3eb9544f049e85bc61e9272b95ae46b__0 .avia-caption-content p {
    font-size: 28px;
}

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

Best regards,
Mike

Hey KvarngardenMedia,

Thank you for the inquiry.

Try to add this script in the functions.php file to initially hide some of the categories and create a toggle button.

function ava_add_custom_script(){
	?>
	<script>
	(function($) {
		$(".product_meta").prepend("<a class='prod_category_toggle cat_hidden' href='#'>toggle</a>");

		$(".prod_category_toggle").on("click", function() {
			var toggle = $(this);
			
			if( toggle.is(".cat_hidden") ) {
				show_categories(); 
			} else {
				hide_categories(); 
			}

			toggle.toggleClass("cat_hidden");
		});

		function hide_categories() {
			var posted_in = $(".product_meta .posted_in").html();
			var posted_in_replaced = posted_in.replaceAll(", ", "<span class='sep'>, </span>");
			
			$(".product_meta .posted_in").html(posted_in_replaced);
		
			$(".product_meta .posted_in a").each(function(i) {
				if (i > 10) {
					$(this).css("display", "none");
					$(this).next(".sep").css("display", "none");
				}
			});
		}

		function show_categories() {
			$(".product_meta .posted_in a").each(function(i) {
				$(this).css("display", "inline");
				$(this).next(".sep").css("display", "inline");
			});
		}

		hide_categories();
	})(jQuery);
	</script>
	<?php
}
add_action('wp_footer', 'ava_add_custom_script');

You can adjust the style of the toggle button with this css code.

.prod_category_toggle {
    position: absolute;
    background: #555555;
    padding: 10px 15px;
    font-size: 15px;
    border-radius: 2px;
    color: #ffffff;
}

Best regards,
Ismael

Hi,

The widget title on your staging site is taking its colour from this CSS:

h3 {
    font-size: 1.5em;
    line-height: 1.1em;
    margin-bottom: 8px;
    font-weight: 300 !important;
    color: #5C9EA6 !important;
    text-transform: none;
    line-height: 1.15em;
    padding-top: 10px;
}

It’s added in the file in private. If you use !important, then that will override regular CSS declarations.

Best regards,
Rikard

Hi,

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

h3.grid-entry-title a {
    font-size: 18px;
    font-weight: 600;
}

Best regards,
Rikard

Hey Kate,
Please try this css instead:

#top .av-masonry-entry .av-masonry-entry-content {
font-size:12px;
font-family: 'Encode Sans Expanded', sans-serif;
color: #ffffff;
font-weight: bold;
text-transform: uppercase;
}

After applying the css, please clear your browser cache and check.
Please see the screenshot in the Private Content area.

Best regards,
Mike

Hey Alwin,
I believe that you are referring to the Masonry Gallery, if so this css will change the button text:

#top #main a.av-masonry-pagination.av-masonry-load-more {
	font-size: 0px;
}
#top #main a.av-masonry-pagination.av-masonry-load-more:before {
	content:"See all photos";
	font-size: 13px;
}	

adjust to suit, then clear your browser cache and check.
If this is not the gallery you ment please link to your page so we can correct.

Best regards,
Mike

Hi,
Thanks for your patience, the slider on the site that you are copying is the REVOLUTION SLIDER with a Contact Form 7 form, so you will need these for exactly the same design, as you posted above, but if you wish you could probably get very close to this with the built-in Layerslider. This is the css for the form, you will need to adjust the element classes for the contact form that you use on the new site as these are not default classes:

.banner form {
    background: rgba(0,0,0,0.5);
    padding: 50px;
    border-radius: 0
}

#top input[type="text"]-webkit-appearance:none;border:1px solid #e1e1e1;padding:8px 6px;outline:none;font:1em "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;color:#777;margin:0;width:100%;display:block;margin-bottom:20px;background:#fff;border-radius:0px}

.banner input {
    padding: 6px 12px !important;
    font-size: 14px !important;
    font-family: arial !important;
    border-color: rgb(225,225,225) !important;
    border-radius: 5px !important;
    margin-bottom: 0px !important
}

.banner form {
    background: rgba(0,0,0,0.5);
    padding: 50px;
    border-radius: 0
}

.banner form {
    margin-bottom: 0px !important
}

.new-form p:last-child {
    margin: 0 !important
}

.banner textarea,.banner select,.banner input {
    padding: 6px 12px !important;
    font-size: 14px !important;
    font-family: arial !important;
    border-color: rgb(225,225,225) !important;
    border-radius: 5px !important;
    margin-bottom: 0px !important
}

.banner label {
    color: #000 !important;
    font-size: 16px !important
}

.banner textarea {
    height: 70px !important
}
@media only screen and (max-width: 425px) {
    .banner_slid .flex_column_table {
        margin:50px 0 !important
    }
}
@media only screen and (min-width: 1025px) {
    .banner_slid .ban_imag {
        display:none !important
    }
}

@media only screen and (max-width: 1100px) {
    .banner_slid {
        background-position:right center !important
    }
}

Best regards,
Mike

Hi,

Thank you for the inquiry.

You may need to modify the style of the subtext element a bit.

#top .logo .subtext {
    font-size: 14px;
    font-weight: 400!important;
    color: #1a1a18;
    position: relative;
    width: 100%;
    left: 0;
    top: -20px;
    display: block;
}

We set the position of the subtext to relative and adjusted the value of the top position a bit.

Best regards,
Ismael

Hey gfriend70,

You have this CSS in the WordPress customiser:

h1 {
    font-size: 50px!Important;
}

Please try to remove or adjust it, to see if that helps.

Best regards,
Rikard

Hi,
Thank you for your patience, I tested this function in my functions.php:

add_filter('avf_logo_subtext', 'kriesi_logo_addition');
function kriesi_logo_addition($sub) {
	$sub .= '<span class="bloginfo name">' .get_bloginfo( 'name', 'display' ).'</span>';
	$sub .= '<span class="bloginfo description">' .get_bloginfo( 'description', 'display' ).'</span>';
	return $sub;
}

it gets the site title and description from the WordPress settings, and I uploaded a small 80px red logo as the regular logo and small 80px white logo as the transparent logo in the theme options:

Then I added this css:

#top .logo,
#top .logo a {
  overflow: visible;
	display:flex;
	max-height: 80px;
	color:red;
	text-decoration: none;
}
@media only screen and (min-width: 990px) { 
#top #header.av_header_transparency .logo a {
	color:#fff;
}
}
.logo .subtext {
  font-size: 20px;
	padding-left: 20px;
    font-weight: 600;
	display: flex;
  flex-direction: column;
  align-items: flex-start;
	justify-content: center;
}
.bloginfo {
line-height:22px
}
@media only screen and (max-width: 820px) { 
.logo .subtext {
	font-size: 12px;
}
.bloginfo {
line-height:14px
}
}
@media only screen and (max-width: 610px) {
.responsive #top #wrap_all #header_main .main_menu {
    display: flex;
    position: relative;
    width: 100%;
    justify-content: center;
}
.responsive #top #header_main .logo {
    display: flex;
    width: 100%;
    justify-content: center;
}
#header_main .inner-container {
	display: flex;
    flex-direction: column;
    align-items: flex-start;
}
}

my header size is the default “Slim”, with a “Sticky Header”

Desktop before and after scroll:

Laptop:

For mobile (425px) I stacked the logo & text over the mobile menu and centered them, this seems to work better than making the text so small that I couldn’t really read it:

This is how the smallest mobile (375px) looks:

Please give this a try, I linked to my test site below.

Best regards,
Mike

Hey Manuela,

Thank you for the inquiry.

Try to use this css code to adjust the size of the icons in the iconlist element.

.avia-icon-list .iconlist_icon {
    font-size: 20px;
}

This is the default style of the icons.

.avia-icon-list .iconlist_icon {
    height: 64px;
    width: 64px;
    line-height: 64px;
    font-size: 30px;
    text-align: center;
    border-radius: 500px;
    position: relative;
    float: left;
    margin-right: 30px;
    margin-left: 2px;
    z-index: 5;
    color: #fff;
    font-size: 20px;
}

Best regards,
Ismael

Hey Manuela,

Thank you for the inquiry.

You can use this css code to adjust the style of the icon beside the iconbox title.

.iconbox_icon.heading-color {
    font-size: 50px;
    left: -20px;
    top: 0px;
}

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

Best regards,
Ismael

Hi,

Thanks for the clarification. This CSS in your child theme seems to be overriding the element settings:

.avia-data-table.avia_pricing_minimal td, p {
    font-style: normal;
	font-size: 15px;
}

Please try to remove the paragraph part:

.avia-data-table.avia_pricing_minimal td {
    font-style: normal;
	font-size: 15px;
}

Best regards,
Rikard

Hi,
Glad to hear this is helped, to add the icon before the “language” text I added this css to the WordPress ▸ Customize ▸ Additional CSS field:

#av-burger-menu-ul>.wpml-ls-menu-item>a>.avia-menu-text>.wpml-ls-native:before {
  content: "\e821";
  font-family: "entypo-fontello";
  font-size: 18pt;
  display: inline-block;
  margin-right: 0.3em;
}

please clear your browser cache and check.

Best regards,
Mike

Hey mavlab,

Thank you for the inquiry.

1.) You can use this css code to adjust the font size of the category sort.

#js_sort_items .sort_by_cat a {
    font-size: 16px;
}

2.) To remove the portfolio grid image overlay, add this css code.

.grid-entry .image-overlay {
    display: none !important;
}

Best regards,
Ismael