Hi Rikard,

I haven’t made changes to the core file in the theme, I’ve only customised colours, fonts, sizes etc on the general layout/styling tab without playing with code and css…will an update retain the colours I’ve chosen and the font choices I’ve made on the ‘General Styling/layout’ tab?

Thanks,
Kali

Hi,

Sorry for the misunderstanding.
My main issue is the fact that images are streched (bad quality).
I started with an image 600×300 which was too small, so the quality was very bad when displayed.
Then I tried with an image 1500×750 and it was better, but the quality was still not optimal (still compression or strech don’t really know).
Then I tried with an image 2070×1035 and there, i had the best quality – but the image is now heavy (over 200kb).
That’s why I want to know if there is a default/standard image size to use with the layer slider ?

For the text, I have adapted the font to the image size by changing the font style settings (H6) – It works well now.
I wil go for 72 DPI then, thank you.

So my question is : what size of image should I use with the layer slider to avoid any loss in quality?

Thank you,

Caroline (GrafixDesigner)

Hi Yigit,
Unfortunately this effects the entire site dropping everything by 88px and the header loses transparency.
It is only needed for the Voucherpress page generated by clicking on the voucher:
http://walnut-tree-inn.co.uk/?voucher=950d609b81fbe7132fc80302a1a15de7

This is my css with your code (currently disabled):

/* stop force upper case */
body * {
 text-transform: none !important;
}
/* space header on voucher page */
.html_header_top.html_header_sticky #main {
    padding-top: 88px!important;
} 
.av-special-heading {text-shadow: 2px 2px 2px #000000 !important;}
.av_header_glassy.av_header_transparency #header_main {
    background-color: rgba(0, 0, 0, 0.4);
}
@media only screen and (max-width: 767px) {
.av_header_glassy.av_header_transparency #header_main {
    background-color: #ffffff;
}}
.av-subheading.av_custom_color {
opacity: 1;
}
h2 {text-shadow: 0px 0px 0px #000000 !important;}

.av-special-heading.av-special-heading-h1.custom-color-heading.blockquote.modern-quote.avia-builder-el-1.avia-builder-el-no-sibling.av-thin-font.av-inherit-size {
margin-top: 52px;
}

Thanks
Rob

Perfetct!

one more thing… I would like to change the font size of the title with the bold … Thank you !!

You can change the border color …? And the size of the font? And the color of the font?

Yes. I’d like to change the colors of the boxes.
Then I’d like to change the colors of the edges of the table.
I’d like to change the font size and enter the text in bold favorite.
I have included a test page only to this table, you can find it at the link in private.
Thanks for the support

Hello Ismael,

you can see working animated logo here (shrinking): http://dev.bogosavljev.com/ but there I’m running Enfold 3.2.3 version

I have customize logo markup with CSS:

/******* Animated LOGO ********/

*, *:after, *:before {
    box-sizing: border-box;
}

.logo a {
    font-family: 'Francois One', sans-serif;
    display: block;
    position: relative;
    text-transform: uppercase;
    width: 565px;
}

.logo a:before, .logo a:after {
    background: none repeat scroll 0 0 #fff;
    content: "";
    height: 1px;
    left: 0;
    opacity: 0.2;
    position: absolute;
    top: 0;
    transition: opacity 0.3s ease 0s, height 0.3s ease 0s;
    width: 100%;
}

.logo a span:first-child {
    display: block;
    font-weight: 400;
    z-index: 2;
}

.logo a span.front:last-child {
    opacity: 0;
    margin-top:-44px;
    padding: 8px 0 0;
    display: block;   
}

.logo a:before {
    background: none repeat scroll 0 0 transparent;
    color: #71CCE2;
    content: "ogosavljev";
    display: inline-block;
    font-size: 3.9rem;
    height: 23px;
    opacity: 0;
    top: -11px;
    transform: translateY(-20px);
    vertical-align: top;
    left: 170px;
}

.logo a span.front:after {
    background: none repeat scroll 0 0 transparent;
    content: "front-end designer & developer";
    font-size: 1.4em;
    font-family: 'Arbutus Slab', serif;
    font-weight: 400;
    transform: translate(71%,0px);
    transition: transform 0.3s ease 0s, opacity 0.3s ease 0s;
    z-index: 1;
    text-shadow: none;
    text-transform: none;
    text-decoration: none;
    color: #6FCCE1;
    display: inline-block; 
}

.logo a:hover::before,
.logo a:hover::after,
.logo a:focus::before,
.logo a:focus::after {
    opacity: 1;
    -webkit-transform: translate(0px);
    -moz-transform: translate(0px);
    transform: translate(0px);
}

.logo a:hover span:last-child,
.logo a:focus span:last-child {
    opacity: 1;
    -webkit-transform: translateY(-42%);
    -moz-transform: translateY(-42%);
    transform: translateY(-42%);
}

.logo a span, .logo a:before {
    transition: all 0.2s ease 0s;
}

.logo a:hover:before, .logo a:focus:before {
    opacity: 1;
    transform: translateY(42%,0px);
    transition-delay: 0s;
}

/**************************************************************************************/

And for shrinking logo to desire dimension I have change avia.js around line 1568 and 1580

if(st < el_height/4) // was 2
                {
                    newH = el_height - st;
                    header.removeClass('header-scrolled');
                }
                else
                {
                    newH = el_height/1.35; // was 2
                    header.addClass('header-scrolled');
                }

.main_menu {
    clear: none;
    position: absolute;
    z-index: 100;
    line-height: 30px;
    height: 100%;
    margin-top: 0px;
    margin-right: 38px;
    margin-bottom: 0px;
    margin-left: 0px;
    right: 0;
}

.html_main_nav_header.html_logo_left #top .main_menu .menu>li:last-child>a, .html_bottom_nav_header #top #menu-item-search>a {
    padding-right: 13px;
}

#header #text-2.widget {
    right: 38px;
    padding-top: 0;
    position: absolute;
    top: 26px;
    font-size: 30px;
}

#header #text-3.widget {
    right: 0%;
    padding-top: 0;
    position: absolute;
    top: 0px;
    font-size: 30px;
}

#header #text-3.widget:hover .main_menu {
    margin-right: 400px;
    -webkit-transition: all 0.4s cubic-bezier(0.46, 0.03, 0.52, 0.96);
    transition: all 0.4s cubic-bezier(0.46, 0.03, 0.52, 0.96);
}

And I have to header widget I used this guide:
http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/

At the moment the phone number (text-2 widget) is not visible because the main-menu background is white.

Thank you

well this is crazy – even though i dump the cache on my browser each time, NOW it is working again!

however, the “down arrow” on the full screen video is not transparent on Firefox. my last lingering problem. any ideas on this? previously i had been giving this by Kriesi tech support to make the arrow YELLOW for enhanced visibility, but on FF now its transparency has gone away:

.scroll-down-link {
    color: yellow !important;
    font-size: 200px !important;
}

thanks for your help.

Hi Andy,
I used the code with percentage, I had to use -115% to have it aligned on my screen. Unfortunately the menu is still losing the centered alignment once I change the window size. You can see this behavior at lindemanngroup.com/home
I place below the style.css used in my child theme, maybe there is something wrong there… can you please have a look ?
Thanks in advance

if(!is_admin()) add_action('wp_enqueue_scripts', 'avia_register_child_frontend_scripts', 100, 1);
function avia_register_child_frontend_scripts()
{
	$child_theme_url = get_stylesheet_directory_uri();

	//dequeue default scripts
	wp_dequeue_script('avia-popup');

	wp_enqueue_script( 'avia-popup',  $child_theme_url .'/js/jquery.magnific-popup.min.js', array('jquery'), 2, true);
}

/*SLIDESHOW CAPTION POSITION*/
.slideshow_align_caption {
    display: table-cell;
    vertical-align: middle;
    position: relative;
}

/*SLIDESHOW CAPTION FONT WEIGHT*/
.avia_transform .av_fullscreen .active-slide .avia-caption-title {
    font-weight: 300 !important;
}
.avia_transform .av_fullscreen .active-slide .avia-caption-content {
    font-weight: 300 !important;
}

/*LOGO ALIGNMENTO TO CENTER*/
.avia-menu.av-main-nav-wrap {
    left: -50%;
}

/*MENU LOGO*/
div .logo {
    display: none;
}

/*MENU FONT*/
.main_menu ul:first-child > li > a {
   font-size: 16px; 
   font-weight:300;
}

/*MENU FONT HIGHLIGHT COLOR*/
.header_color .main_menu ul:first-child > li.current-menu-item > a, .header_color .main_menu ul:first-child > li.current_page_item > a {
    color: #bbbbbb;
}

/*MENU TRANSPARENCY*/
#top .header_color .header_bg, #header_main {
    background-color: rgba(255,255,255,0.75);
}

/*MENU BORDER BOTTOM VISIBLE WHEN SCROLLING*/
#header_main {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-color: #e1e1e1;
    margin-bottom: -1px;
}

/*TOP BAR TRANSPARENCY*/
.header_color .container_wrap_meta {
    background-color: rgba(2242,242,242,0.2);
}

/*TOP BAR FONT*/
.sub_menu>ul>li>a, .sub_menu>div>ul>li>a {
    text-decoration: none;
    font-weight: 500;
    font-size: 12px;
    padding: 7px 0;
}

/*MASONRY BACKGROUND*/
.av-masonry-container {
    width: 100.4%;
    float: left;
    clear: both;
    background: #ffffff !important;
    position: relative;
}

.main_color .av-masonry {
    background: #ffffff !important;
}

.av-large-gap .av-masonry-sort {
    margin: 0 15px 15px 0;
    background: #ffffff !important;
}

/*MASONRY CAPTION BACKGROUND*/
.main_color .avia-arrow {
    background-color: #f2f2f2;
}
.av-fixed-size .av-masonry-entry .av-inner-masonry-content, .av-caption-on-hover .av-masonry-item-with-image.av-masonry-entry .av-inner-masonry-content {
    background-color: #f2f2f2;
}

/*MASONRY LOAD MORE BTN*/
.main_color .av-masonry-pagination {
    background-color: #f2f2f2 !important;
}
.main_color .av-masonry-pagination:hover {
    background-color: #f8f8f8 !important;
}

/*ICONS + CIRLE*/
.av_font_icon.av-icon-style-border .av-icon-char {
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    font-size: 50px !important;
    line-height: 70px !important;
    width: 70px !important;
    border-radius: 500px;
    border-width: 2px;
    border-style: solid;
    display: block;
    margin: 0 auto;
    padding: 30px;
    color: inherit;
    border-color: inherit;
    position: relative;
}

/*ARCHITIZER HOVER COLORS*/
#top #wrap_all .av-social-link-architizer:hover   a{color:#ffffff; background-color:#00a0fc; }
#top #wrap_all .av-social-link-houzz:hover   a{color:#ffffff; background-color:#7cc04d; }

/*HOT SPOT CUSTOMIZATION*/
.av-hotspot-container .av-image-hotspot_inner {
    color: #1c9bb7;
}

.responsive .av-image-hotspot{
    height: 15px;
    width: 15px;
    line-height: 15px;
}

.responsive .av-image-hotspot-pulse {
    width: 39px;
    height: 39px;
    line-height: 15px;
    top: -12px;
    left: -12px;
}