Forum Replies Created
-
Posts
-
Hey Josue,
I disabled the autoplay for the layerslider. unfortunately it does not work. Since the partner element should be on autoplay the only way would be to change the layer slider e.g. to the standard slider, which I wouldn’t prefer.
Would be great if there’s a fix in the next update ;)
Thanks again Josue!Thanks Josue!
I updated “Styles with shortcodes”.
There is one thing left, which strangely only seems to occure using chrome:
http://roberthunecke.com/mmt/On this client page there is a partner element at the bottom of the site. If I scroll to the site’s end the partner element just disappears. If I scroll back and forth, it is visible again as long as there is some room left to scroll.
FF works fine, it just happens using chrome, as far as I can see.
Thanks again for your work, everything else works great so far :)
Hi Ismael,
as I wrote in the first post I already knew about the template manager. What I would like to accomplish is a partner-element on a draft-page, where I can then edit this element at anytime and add or delete clients. I thought I would get an ID or special shortcode for this element using the advanced layout editor’s debug mode which I could then use on different pages to show the same partner element.
If I’m using the template manager I would have to create a new template everytime I change the partner element and the go through all the pages I’m using it on and insert it again.
I would like to change it on the draft page described before and have it automatically updated on the other pages, since I use it’s shortcode from the debug mode, which seems to doesn’t word.
I hope I could make myself clear this time. Please tell me if there is a chance to get this done. Thanks for your support.
Got it, using the revision-system. Thats where I found the Shortcode. I understood the original thread the way, using the debug mode would give me a shortcoe, which I could use to show the same element on different pages. Now I see, it would only create a Shortcode using parameters to add settings e.g.
[av_partner columns='5' heading='' size='no scaling' border='av-border-deactivate' type='slider' animation='slide' navigation='no' autoplay='true' interval='5'] [av_partner_logo id='1651' attachment='' hover='' link='page,1836' linktitle='' link_target=''] [av_partner_logo id='1648' attachment='' hover='' link='page,1830' linktitle='' link_target=''] [av_partner_logo id='1647' attachment='' hover='' link='page,1833' linktitle='' link_target=''] [av_partner_logo id='1646' attachment='' hover='' link='page,1843' linktitle='' link_target=''] [av_partner_logo id='1644' attachment='' hover='' link='page,1845' linktitle='' link_target=''] [av_partner_logo id='1649' attachment='' hover='' link='page,1852' linktitle='' link_target=''] [av_partner_logo id='1645' attachment='' hover='' link='page,1854' linktitle='' link_target=''] [av_partner_logo id='1642' attachment='' hover='' link='page,1857' linktitle='' link_target=''] [av_partner_logo id='1643' attachment='' hover='' link='page,1859' linktitle='' link_target=''] [av_partner_logo id='1650' attachment='' hover='' link='page,1862' linktitle='' link_target=''] [/av_partner]This is quite useless for me, since I thought I would get a single page to edit the element and using the shortcode on different pages to keep it up-to-date.
Is there any chance to get this done?
Slide should look exactly as it looks at the moment, concerning the position, but it should not be excluded of the trasitions (Fade/Slide). Since there is no way to postion a slide’s background inside the Advanced Layer Slider, I had to leave it blank inside the backend and had to combine the slide ID with extra css defining a background, where normally the advanced layer slider defines the background as “div img”.
In the meantime I came up with:
#slide-coffee { background-image: url(https://www.roberthunecke.com/redesign/wp-content/uploads/2013/09/coffee_beans_rendering.jpg); background-repeat:no-repeat; background-size: 100% auto; background-position:50% 15%; }Unfortunately the slide will no longer be part of any transition :(
Any advice?
I tried to create my own progress bars by customizing this tutorial: http://www.red-team-design.com/stylish-css3-progress-bars
using this in my custom.css:
.progress-bar {
background-color: #fcfcfc;
height: 25px;
padding: 1px;
width: 100%;
margin: 5px 0;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 0 1px 5px #e1e1e1 inset, 0 1px 0 #f4f4f4;
-webkit-box-shadow: 0 1px 5px #e1e1e1 inset, 0 1px 0 #f4f4f4;
box-shadow: 0 1px 5px #e1e1e1 inset, 0 1px 0 #f4f4f4;
}
.progress-bar span {
display: inline-block;
height: 100%;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
-webkit-transition: width .4s ease-in-out;
-moz-transition: width .4s ease-in-out;
-ms-transition: width .4s ease-in-out;
-o-transition: width .4s ease-in-out;
transition: width .4s ease-in-out;
}
.blue span {
background-color: #00b6f1;
background-image: -webkit-gradient(linear, left top, left bottom, from(#00b6f1), to(#058ff2));
background-image: -webkit-linear-gradient(top, #00b6f1, #058ff2);
background-image: -moz-linear-gradient(top, #00b6f1, #058ff2);
background-image: -ms-linear-gradient(top, #00b6f1, #058ff2);
background-image: -o-linear-gradient(top, #00b6f1, #058ff2);
background-image: linear-gradient(top, #00b6f1, #058ff2);
}
.orange span {
background-color: #fecf23;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fecf23), to(#fd9215));
background-image: -webkit-linear-gradient(top, #fecf23, #fd9215);
background-image: -moz-linear-gradient(top, #fecf23, #fd9215);
background-image: -ms-linear-gradient(top, #fecf23, #fd9215);
background-image: -o-linear-gradient(top, #fecf23, #fd9215);
background-image: linear-gradient(top, #fecf23, #fd9215);
}
.green span {
background-color: #a5df41;
background-image: -webkit-gradient(linear, left top, left bottom, from(#a5df41), to(#4ca916));
background-image: -webkit-linear-gradient(top, #a5df41, #4ca916);
background-image: -moz-linear-gradient(top, #a5df41, #4ca916);
background-image: -ms-linear-gradient(top, #a5df41, #4ca916);
background-image: -o-linear-gradient(top, #a5df41, #4ca916);
background-image: linear-gradient(top, #a5df41, #4ca916);
}
and this, to call a bar inside e.g. a text-element:
<div class="progress-bar blue">
<span style="width: 40%"></span>
</div>
<div class="progress-bar green">
<span style="width: 60%"></span>
</div>
<div class="progress-bar orange">
<span style="width: 80%"></span>
</div>
Works great on any device tested so far. Also I would suggest to create a Shotcode for the skill-bars, since the code got changed everytime I tried to re-adjust it inside my textbox, so I had to type it in again to work.
Thanks for sharing.
unfortunately it seems, this won`t work on mobile devices, at least not on my Galaxy S3.
Somehow my Skill Bars ( http://roberthunecke.com/redesign/about ) are showing up blank on it.
Thanks. I already thought about that too.
Unfortunately I’m using the same pictures more than once, so it would look strange on other spots. I would prefer some CSS-Voodoo to get those items positioned horizontal inside of my post-slider.
Any thoughts on that?
Thanks.
