That is completely different than what I’m suggesting and really we are not able to walk you through creating it. We don’t have an open book for every effect possible with the LayerSlider.

What that appears to be is a LayerSlider slideshow set to autorotation with multiple slides of the same image repeated and animated on top of itself 8 times.

So this image: http://clientbased.com.au/wp-content/uploads/2013/07/CBS-client-logos.jpg is in the LayerSlider 8 times and each is animated to get that effect.

The exact details of it are unknown without seeing it live.

For the above settings, if you have multiple images in your slideshow and they are not animating you are probably on WordPress 3.6 but not Enfold version 1.9.1. If you are not, then you need to add multiple images in order for the slider to animate.

On your Advanced Layout Editor layout drag and drop an Easy Slider into your layout. Next, click the button to add an image and add your image(s) into the slideshow.

Now that your images are in the slideshow you can adjust the options to make it transition, autorotation, autorotation duration and that is all there is to it.

To see an example of adding an Easy Slider watch this video at the marked time where I add one in and modify its settings: https://vimeo.com/64927358#t=183

Hi jmr7877,

I believe what that user did was create a strip of logos that were a single image. Not each logo individually but one wide image with all of the logos on it.

You then add that as a “slide” for any of the sliders and make it auto rotate with similar images showing multiple inline logos.

Regards,

Devin

Hi,

You are using version 1.6 of the theme while the current version is 1.81 , please update since quite a lot has improved.

—-

I looked at your code. you have links with this js onclick=”window.open(this.href,’livedealer_popup’,’height=500,width=500,scrollbars=yes,menubar=no,resizable=0,status=0,titlebar=0′);return false”

That will look bad on smart phones since height is in there.

—

Ok I will show you here briefly how to target the table and use media queries to resize it. We will take control away from html so your 100% width tag will be ignored, and give it to css. We will be targeting 4 screen sizes (you can add more yourself since this isn’t rocket science exactly): monitor, tablet landscape, table portrait / smartphone landscape, and smartphone portrait. Just add the code below to /css/custom.css … If your pages are pretty much the same format as this one, the code i will give will work for all pages.

.entry-content tr:nth-child(odd) {

background-color: #fbfbfb !important;

}

/*odd*/

.entry-content tr:nth-child(even) {

background-color: #e8ecee !important;

}

/* even*/

.entry-content tr:hover {

background-color: #fffbae !important;

}

/* hovering */

.entry-content table {

display:inline-table;

border:collapse;

width: auto;

}

/*

*/

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

.entry-content table {

font-size:.7em;

}

.entry-content table tr td {

font-size:1.2em;

}

.responsive .container {

width:97%;

}

.responsive .container .twelve.units {

width: 99%;

}

}

/*

*/

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

.entry-content table {

font-size:.6em;

}

.entry-content table tr td {

font-size:1.1em;

}

.responsive .container {

width:77%;

}

.responsive .container .twelve.units {

width: 79%;

}

}

/*

*/

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

.entry-content table {

font-size:.6em;

}

.entry-content table tr td {

font-size:1.1em;

}

.responsive .container {

width:67%;

}

.responsive .container .twelve.units {

width: 69%;

}

}

/*

*/

You need to play with the numbers while at different screen sizes to get it just right, but you have enough there to get you started.

But I think on smartphone screen sizes, the only viable thing would be to remove about 1/2 the columns and only leave the 3-4 most relevant ones. That can also be done with css.

Thanks,

NIck

Hi,

A non-fixed header is the type of header that this page has, so when you scroll, the header disappears. The fixed header shrinks but stays on top of the page when you scroll down.

Your question is about a non-fixed header (like the header on this page you are reading now) though I think you are asking about the fixed header.

The fixed header shrinks by 50% including the logo by use of jQuery. I don’t think opacity is used. Logo size on the demo site ( kriesi.at/themes/enfold is 231w/116h and it shrinks down to 116w/58h automatically via jQuery. The code is located in /js/avia.js in the function that starts on line 809 called avia_header_size()

Thanks,

Nick

Hi,

Ohh, I thought that was the design, lol.

Ok in that case:

1) replace the button code you are using with this (i trimmed some of the fat off it, and lot more can go i think, but ok for now):

.menu #menu-item-2193 a {

-webkit-backface-visibility:hidden;

-webkit-perspective:1000px;

background:#a1ce5e url(https://d7uu0v95k7d3j.cloudfront.net/wp-content/themes/enfold/images/layout/bg-button.png?6c6f23) repeat-x;

border-bottom:1px solid #a1ce5e;

border-bottom-left-radius:3px;

border-bottom-right-radius:3px;

border-image-outset:0;

border-image-repeat:stretch;

border-image-slice:100%;

border-image-source:none;

border-image-width:1;

border-left:1px solid #a1ce5e;

border-right:1px solid #a1ce5e;

border-top:1px solid #a1ce5e;

border-top-left-radius:3px;

border-top-right-radius:3px;

color:rgba(0,0,0,0.5);

cursor:auto;

font:normal normal 600 14px 12px 'Open Sans',HelveticaNeue,'Helvetica Neue',Helvetica,Arial,sans-serif;

height:30px !important;

line-height: 19px !important;

margin-left:0;

margin-right:0;

min-width:90px;

outline:rgba(0,0,0,0.5) none 0;

padding:5px 16px 10px;

text-align:center;

text-decoration:none;

text-shadow:rgba(255,255,255,0.09) 0 1px 0;

top:-10px;

vertical-align:text-top;

zoom: 1

}

2) open up /js/avia.js and find block of code between lines 809-846 and replace it with this one below, they should look nearly identical but for 3 lines:

function avia_header_size()

{

var win	            = $(window),

header          = $('.fixed_header #header'),

logo			= header.find('.logo img'),

elements        = $('#header_main .container, .main_menu ul:first-child > li > a:not(.avia_mega_div a)'),

element_button	= $('.menu #menu-item-2193 a'),

el_height       = $(elements).filter(':first').height(),

isMobile        = 'ontouchstart' in document.documentElement,

scroll_top		= $('#scroll-top-link'),

set_height      = function()

{

var st = win.scrollTop(), newH = 0, newTopMargin =0;



if(st < el_height/2)

{

newH = el_height - st;

//header.removeClass('shadow');

newTopMargin = 52;

}

else

{

newH = el_height/2;

newTopMargin = 23;

//header.addClass('shadow');

}



elements.css({height: newH + 'px', lineHeight: newH + 'px'});

element_button.css({'margin-top': newTopMargin  + 'px'});

}



if(!header.length) return false;



if(isMobile)

{

return false;

}



win.scroll(set_height);

set_height();

}

Ok now if you ever change the menu, when you go to a live server, you need to remember to edit line 815 which has the menu-id hardcoded in there (#menu-item-2193) and to change it, as well as change it in the css, since any new website will obviously have new ID numbers.

Check you quick css, you have a block of css commented out, dont know if accidently or on purpose starting with this block below the button code –> /*blockquote {

Thanks,

Nick

Hi George,

After opening that slideshow go to the Global Settings tab and then scroll down to Slideshow. The first option needs to be set to be on (the green should show). It has the description “If enabled, slideshow will automatically start after loading the page.”.

Regards,

Devin

Hi,

You are using photon.js which is resizing your images. I think that is part of jetpack plugin. Please turn off jetpack as in my experience that plugin is responsible for a quarter of all support issues or at least turn off its image resizing.

I use duplicate and then I decouple the duplication http://www.clipular.com/c?6288338927484928=Lk87W4U0oBA-iq67-c5Afr7gGoE&f=.png

Have the 3 main plugins of WPML running. translation management, string translation + main plugin.

To use copy, when you make and save the original text, scroll down to the bottom of the page and you will see a number of radio buttons with 3 choices as seen below. Make sure that you set Copy for the ones i listed below and click Apply right next to the radio buttons

http://www.clipular.com/c?6348812067012608=RcNhuaYzAhgIfpLbTLLxtNiqp6c&f=.png

_thumbnail_id	 Don't translate   Copy   Translate

_wp_old_slug	 Don't translate   Copy   Translate

_aviaLayoutBuilder_active	 Don't translate   Copy   Translate

_aviaLayoutBuilderCleanData	 Don't translate   Copy   Translate

_avia_builder_shortcode_tree	 Don't translate   Copy   Translate

layout	 Don't translate   Copy   Translate

sidebar	 Don't translate   Copy   Translate

header



_portfolio_custom_link	 Don't translate   Copy   Translate

_portfolio_custom_link_url	 Don't translate   Copy   Translate

_preview_ids	 Don't translate   Copy   Translate

_preview_display	 Don't translate   Copy   Translate

_preview_autorotation	 Don't translate   Copy   Translate

_preview_columns	 Don't translate   Copy   Translate

_preview_text

When you now initially ho tosecond language page you should see something like this on top

http://www.clipular.com/c?5038743962517504=TSs6blsbN8gIk2NADgINR1ExqMg&f=.png

What’s interesting is that at that moment when you click copy content, even though nothing can be seen , it really is there. just click publish or save draft and when the page refreshes again you will see that indeed everything copies over.

So just remember to save as draft as first thing you do in order to make everything show up.

check the radio buttons for copy, thats the key to the whole copying business. I tested it and it copies perfectly, including the ajax bit.

http://www.clipular.com/c?6348812067012608=RcNhuaYzAhgIfpLbTLLxtNiqp6c&f=.png

Thanks,

Nick