Avatar daniel.mintz asked

How do you get the Copy ike the Infinite Slideshow Demo

Hi there,

I really like your slideshow demo on the Infinite template.

What i like most is the way you have the title "Websites, Brands and Campaigns" and the caption "Full Service Agency" displayed i.e. the copy..

The styling is great. I have played with the widgetkit settings in the admin panel but can't seem to emulate it. How do you do this?

Many thanks?

Daniel

  • Widgetkit
  • General Question
  • Infinite

Edited

53 Answers

27

Avatar mustaq Yootheme answered

We created slides with background image style, ie: we loaded each slide image via CSS in the templates css/custom.css file , here in the example of one of the slides content ;

    <div class="frontpage-teaser1">  
      <img src="images/yootheme/demo/slideshow/teaser_blank.png" alt="Teaser" width="1200" height="459" />  
    </div>

and the controlling CSS form the css/custom.css

.frontpage-teaser1 {  
    background-image: url(../../../images/yootheme/demo/slideshow/infinite_teaser1_default.jpg);  
    background-position: 0 50%;  
    background-repeat: no-repeat;  
    background-size: cover;  
}

The WIdgetKit is using the Infinite Slideshow Style ( is is a Install Bonus Styles )

We then displayed the slideshow by entering the following into the text area of an HTML module ,

    <div style="margin: -30px -10px; ">  
    [widgetkit id=AAA]  
    </div>

You will notice that we wrapped the WidgetKit shortcode on a special custom div that has some specific margin style.
We also set the Module Class Suffix for this module to style-blank .

Important

The Module was set to display in the templates top-a module position .
In the theme settings >> profiles page, we set the layout of this module position to 100% .
Make sure your profile is also using a 100% width for the top-a .


Update:


Can you please give some feedback ?


Update:

If you have issues setting up the Demo slideshow, please open a new Question.
The guides provided here are not hacks, but the way that must be followed to set up a slideshow like the demo one, not all slideshows are create in this way.

YOOgards

Edited

35

Avatar matthew.marson answered

This is an absolute joke.

Why advertise a theme that does not do as presented with ease? The theme should be presented as a demo before all of this wizardry and trickery is carried out by YooTheme developers.

I have now wasted a whole day trying to get this to work - guess what... it doesn't. I might not have following things exactly, its difficult with so many conflicting tutorials from support and from the forums (I'm not talking about users who have kindly provided work arounds etc).

The theme should be updated and a patch given to solve these issues or a refund provided.

I am not cheap, and I have a 1000 & 1 things to do, very very disappointed. If I get another support message pointing me to the ridiculous tutorial I will switch to another theme provider.

17

Avatar mirko.herrmann answered

Come on guys. You deliver nice templates, but the special things about it - such as the slideshow on frontpage - is so complicated. It sucks. Download this, put it by ftp here, change CSS, integrate it with certain div-style. Sorry,

Edited

14

Avatar pawel answered

As so many users have difficulty to set up the frontpage slideshow of the infinite theme we create a small tutorial for better understanding how we implement the slideshow.

How to set up the frontpage slideshow in the Infinite Theme like on the Demo site (100% width)

Including a picture in the Infinite Theme to the frontpage slideshow is a bit different as usually.
This is because we got the possibility to set a width of 100% to each section.

The problem now is that 100% that we don't know how wide 100% is on every single device.
In our solution we needed to consider following ascpects:

  • Image covers the whole width (even on a resolution of 2550x1660px)
  • Correct scaling of an 100% image for responsive

Step 1:

So, to make sure the images we use for the frontpage slideshow cover the whole width, we need to implement all images with CSS and not directly in the widgetkit backend.
You need to add this code for each slide in your widgetkit slideshow backend.

// e.g. Slide 1  
<div class="frontpage-teaser1">  
    ...  
</div>

// e.g. Slide 2  
<div class="frontpage-teaser2">  
    ...  
</div>

...

Step 2:

Now we need to implement the images with CSS.
The CSS code for this is located in the custom.css. Attention: The styles includes also a custom.css, which overrides the default {template}/css/custom.css.

We recommend to use your own style for customization.
Here is a tutorial about creating new styles.

Step 2.1: (If you are using the default Theme style)

So if you are using the default themes style just copy:

{template}/css/custom.css

to your own style folder (create your own folder):

{template}/styles/your_style/css/custom.css

Step 2.2: (If you are using a different style than the default)

If you want to use a different style duplicate the style folder you are using:

e.g. brown

{template}/styles/brown/

and rename it like you want:

{template}/styles/your_style/

Open the {template}/styles/your_style/css/custom.css

If you used the default style you can see that from line 26 there are already 3 predefined images from our demo content.
Just replace the image-url with your own one.

If you used another style there should be only .frontpage-teaser1 defined in your {template}/styles/your_style/css/custom.css
In this case you can also use this code and replace the image-url:

// Slide 1  
.frontpage-teaser1 {  
    background-image: url(../../../images/yootheme/demo/slideshow/infinite_teaser2_default.jpg);  
    background-position: 0 50%;  
    background-repeat: no-repeat;  
    background-size: cover;  
}

// Slide 2  
.frontpage-teaser2 {  
    background-image: url(../../../images/yootheme/demo/slideshow/infinite_teaser2_default.jpg);  
    background-position: 0 50%;  
    background-repeat: no-repeat;  
    background-size: cover;  
}

// Slide 3  
.frontpage-teaser3 {  
    background-image: url(../../../images/yootheme/demo/slideshow/infinite_teaser3_default.jpg);  
    background-position: 50% 50%;  
    background-repeat: no-repeat;  
    background-size: cover;  
}

Step 3:

Usually we implement slideshow images directly in the widgetkit backend like this:

// e.g. Slide 1  
<img src="..." alt="..." title="..." height="..." width="....">

If you make it like this, how do you get the image to 100%? You could implement a image which has a width of 2500px. This way you could cover almost all resolutions.
But there is another problem. Which height do you want to have the image? Lets say you want an image height of 450px, you could add this code to widgetkit:

<img src="..." alt="..." title="..." height="450px" width="2500px">

On a resoltuon to max 2500px this would look great, but how it would look on a even bigger resolution or a smaller resolution? If the resolution is bigger than 2500px the image won't strech up.
But on a smaller resolution the image would be scaled down and will stay in its proportion. That means our 2500x450px image would have on a device with a width of 1600px a proportion of 1600x252px.
To prevent the scaling on all resolutions over 1200px we need to implemented a insivible image (teaser_blank.png) in the markup of Step1. The image has the same height of our images we use in the CSS. In this case 450px.

// Slide 1  
<div class="frontpage-teaser1">    
    <img src="images/yootheme/demo/slideshow/teaser_blank.png" border="0" alt="Teaser" width="1200" height="450" />    
</div>

This way our slideshow images will start to scale down at a resolution smaller than 1200px. If you want to change the starting point of streching just change the width of teaser_blank.png.

Step 4:

Activate your style in the Template Manager / Theme Options

Edited

6

Avatar derek.antonievich answered

Infinite Template Documentations

Home Slideshow.

To make the home slideshow work just as the demo template does you need to do the following.

Step 1:
Create a widgetkit slideshow.

Step 2:
Make the slideshow style “infinite”
To do this you need to download the bonus widgetkit styles from the yootheme website.

After downloading open the zip fill and find the folder called infinite by going to the following: “bonus/widgetkit_bonus_styles/slidshow/styles/infinite

Now ftp this folder over to: www/media/widgetkit/widgets/slideshow/styles

Now you can select the style infinite.

Step 3:
Go to www/images/yootheme/demo/slideshow on a previous installation and gather all images inside of this if you do not have one skip to step 4

Then go to your new site ftp and create the appropriate folder structure and ftp the files that you just got from the previous installation into it.

Step 4:
In the html panel of your slideshow copy and paste the following code into the editor with the editor off (turn your editor off by using the icon that looks like this <>)

<div class="frontpage-teaser1"><img src="images/yootheme/demo/slideshow/teaser_blank.png" alt="Teaser" width="1200" height="459" />
</div>

Note if you do not have a previous installation make a blank png to the size and width of the code above name it exactly the same and place it into the same folder as above. If you don’t have the folders then you will need to make them and the are under www you will need images/yootheme/demo/slideshow

Step 5:
To make the text hover over the image like the default does enter into the caption are of your slideshow the following code and edit the text within it as you wish. Editable text is highlighted in red.

<h1>Websites, Brands and Campaigns.</h1>
<span>Full Service Agency.</span>

Step 6:
Save and close your widgetkit slideshow, Note remember the number of the widgetkit id.

Go to your module manager and create a custom html module.

Select the position top-a:

Insert the following code into the html area with the editor turned of ( click the <> icon to turn of editor)

<div style="margin: -30px -10px;">[widgetkit id=56]</div>

Replace the highlighted in red area above with your widgetkit id that you remembered. ( you did remember didn’t you)

In the advanced options change the module class suffix to be: style-blank

If you where lucky enough to do step 3 then save the module and have a peak at your banner. If this is you skip to step 7.

Step 7:
The banner images are background images placed in the folder mentioned in step 3. I’m not sure exactly sure which image displays in which default colour style, but it would be assumed by the names bellow that they would be labled appropriate to the default style chosen.

The names of the images are as followed and their dimensions ae all the same being 2500 x 45-.

infinite_teaser1_brown.jpg
infinite_teaser1_default.jpg
infinite_teaser1_green.jpg
infinite_teaser1_grey.jpg
infinite_teaser1_lightblue.jpg
infinite_teaser1_plum.jpg
infinite_teaser1_red.jpg
infinite_teaser1_turquoise.jpg
infinite_teaser2_default.jpg
infinite_teaser3_default.jpg

To be safe you could make one of each and see which one displays for you after placing them into images/yootheme/demo/slideshow

You should be able to see your banners working now as the code in the custom css file makes the right image for the right default appear behind your blank png slideshow.

Step 8:
Last of all go to your template manager and make sure that the position top-a is set to 100%

Hope that I could help at least one or 2 people figure this out as it has been torture for me.

6

Avatar ilse answered

Dear Yootheme management,

A customer asked us to make a website using the Infinite template and wants the front page slideshow to look exactly as the demo shown in http://www.yootheme.com/demo/themes/joomla/2013/infinite/
Sure we told them in our ignorance that won't be a problem…

So we download and installed the Infinite template and Widgekit. Someone else starts with the content and another one is making pictures. Now it all should come together for a first review, but I seem not to be able to tweak Widgekid to have the front-page look and respond ok, as on the Yootheme demo page. Well, I must be really stupid I think, because I want no change or tweaks, just the exact same as in the demo, so how hard can it be? I really expect it to work with out of the box settings, but I can't seem to find the right 'buttons'. Now we know it is a problem for a large number of your Yootheme customers to reproduce the demo front-page style because it does not work out of the box at all! http://www.yootheme.com/support/question/30379.

We strongly feel it should not be a hassle to reproduce the standard demo display of a commercial template. I have been a happy Yootheme customer for 5 years and have paid your template club fee for 5 years. Picture yourself as your own customer in our shoes. Now when I see a Yootheme demo I like, I wonder what hassle and series of hacks will I need to implement before I have it up and running as displayed in your Yootheme demo...

We cannot easy switch to another template, a number of people decided this should be the look and feel. The hacks by Mustaq are not a real solution because for instance it must be easy to update Widgekit and the template and to add new future pictures without a hassle.

We feel it would be correct to take these remarks seriously and provide a real customer friendly solution. We look forward to shortly receive an Infinite template / Widgekit version where in the demo-look is implemented.

Kind regards,
Ilse de Vries

5

Avatar eliezervanner answered

I gave up. The best solution is to ignore this and use another theme. YOOtheme, please do not over do it.

3

Avatar mkkli88 answered

I spent DAYS trying to resolve my problem everything works excellent except for IE8 not spanning across completely (DOH!) but other than that everything works great! My problem was that my images did not work according to the yootheme demo, too big, white space at the bottom, not aligning correctly, demo image showing in the background etc... you name it I probably experienced it. This is what I did.

Firstly my images were 1200px x 459px lets not be silly about it and have 2550 x 459 there is simply limited choices let alone the size of the file! So I had 5 images.. jpg.

Go into "template manager" and select "infinite theme". When you arrive there you should see Stylesheets. There you will find custom.css, open this up and edit the following.

ORIGINAL!
.frontpage-teaser1 {
background-image: url(../../../images/yootheme/demo/slideshow/infinite_teaser1_default.png);
background-position: 0% 50%;
background-repeat: no-repeat;
background-size: cover;
}

Place your image name and file extension exactly as your naming convention (includes capitals!).

EDITED!
.frontpage-teaser1 {
background-image: url(../../../images/yootheme/demo/slideshow/MY_SEXY_BOTTOM.png);
background-position: 0% 50%;
background-repeat: no-repeat;
background-size: cover;
}

Repeat this for teaser1, 2, 3 and create your 4 or more if you need more image slides on your site.

The images are loaded from custom.css and not he widgetkit... when people try to take your images they end up getting the blank-teaser.png and not your actual images (quite smart). So do not included your images in the widget kit at all and see my following config below on widgetkit part.


In widget kit - create a new slideshow (does not matter the name), select style "infinite" at top right hand side. Height and Width should be "auto",

In title - you can have anything really it does not affect how it works but more naming convention e.g. Slide 1,2,3 and onwards should be fine

In content - I have the following, this is same for every slide! But change the frontpage-teaser1 according to your custom.css!!! So if your second image you have frontpage-teaser2 then its just common sense~...

<div class="frontpage-teaser1"><img src="images/yootheme/demo/slideshow/teaser_blank.png" alt="Teaser" width="1200" height="459" />
</div>

If you selected Infinite Style (as I mentioned earlier) then you should have a comments box below each slide. In there I did the following... to get the caption text over my images...

<h1>Welcome to (your_site).</h1>
<span>I can do it all night long - Slogan.</span>

Ensure your widgetkit is the latest version I heard it causes problems for some browsers?

In widget kit - slideshow, create a slide for each custom.css images you have.

I moved all my teaser files into a folder all except the blank-teaser.png and ensured I reset and cleared my cache before you tested my site again... seems to work great in Chrome, Firefox, IE9 but IE8 does not span across the full screen for some reason? I have not found a solution for that but everything else works.

So widget kit does not hold your actual image slides... its the custom.css... I read this somewhere and though I should share my kinda 95% success story.

2

Avatar bernd.guenter.75 answered

Picture size: I think height of 459 is good and width should be 1.280 or 1.366 (which is currently the most used resolution worldwide).
Width of 2.500 would fit ALL resolutions, but a) is it hard to find/create pictures in that format 5.1 and b) are the files getting too big.

The size of teaser_blank.png in WidgetKit slideshow should be 1.200 x 459 as described.

If you use a different style than default don´t forget to change or delete the definition ".frontpage-teaser1" in the custom.css of your STYLE (eg. "grey", because otherwise all pictures will work, but NOT the first one.) ;-)

2

Avatar kreshna.aditya answered

This is a very-very complicated themes I've ever installed, why should like this, the theme is good and nice looking but useless, because I can't use it and confusing.

2

Avatar leland.hicks answered

Hello YooTheme Administration:

I too have been a YooTheme member for a few years now, and after downloading the Infinite template, I have never experienced such a time wasting endeavor. The primary allure of this template is the full screen showcase capability, but alas, getting this to work properly seems to be alluding even highly skilled developers. I spent over 4 hours this morning on just the slideshow and it still does not work.

Lest I remind you, the whole point of purchasing template designs from a manufacturer is the time factor. Gone are the days for businesses to be burdened with code development that can take forever. We are living in a nano-second world where clients want their sites in a relatively short amount of time.

Nonetheless, for ease of use and less hassle with templates not working properly, or difficult coding problems, Rockettheme is currently eating your proverbial lunch overall. I would highly recommend that YooTheme upgrade its mission statement with the following:

  1. Let CSS involvement be limited to real customization and the let the flow of a template in its shipped stage be autonomous. In other words, the client's we have turn these templates over to, should be able to make their changes with minimal effort after being trained.

  2. Provide specific training within the template for new technological approaches so developers can follow an exact process to duplicate what they are seeing and purchasing.

  3. Provide more detailed explanations of the template features and how you build them.

  4. Invest in videos for developers to learn the ins and outs of your templates.

Otherwise, at the rate you are going, you may not be able to compete in the long run.

Best,

Leland

2

Avatar pedro.sanchez.41 answered

Solution for dummies, like me:

We can do this without messing with the [custom.css], putting all the css inline. On each slide you had to put the code like This:

<div style="background-image: url(/images/headers/infinite_teaser2_default.jpg); background-position: 0 50%;    
    background-repeat: no-repeat; background-size: cover;">    
      <img src="/images/headers/teaser_blank.png" alt="Teaser" width="1200" height="459" />    
    </div>  

(Make sure the image url is pointing to your image folder)
Then we only need to change the code for the background image to show the appropriate image that we will show.

And for the caption text, on the caption area put this code:

<h1>Websites, Brands and Campaigns.</h1>  
<span>Full Service Agency.</span>

And follow the rest of Mustak's indications, about the style on the widgetkit and the html module parameters (style-blank and the others...)

1

Avatar lucio.dattaro answered

This does not work for me, the images are not displayed correctly and there's a white space between image and caption

1

Avatar david.small answered

I had a problem (even though I had followed the demo instructions) with white space sometimes being added below the slideshow module and sometimes not, almost as if the page had not been fully loaded, even though it had. The problem was noticed by me using Firefox, IE9, IE10 and Safari for Mac and iPad. The solution that worked for me was to add extra style definitions to my image declaration in the widgetkit content field. For example, before, when it did not work I had:

<div class="frontpage-teaser1">  
<img  src="images/teaser_blank.png"  width="1500" height="459" alt="Teaser" />    
</div>

and afterwards:

<div class="frontpage-teaser1">  
<img  src="images/teaser_blank.png"  style="width: 1500px; height: 459px;"  width="1500" height="459" alt="Teaser" />    
</div>

The second approach works 100% of the time for me in all the browsers I tested. I'm not saying that this is the correct answer for those with problems using the slideshow, but perhaps it might be worth trying and see what it does for you.

All of my images are exactly the right size so I do not understand why this makes such a difference.

I am not using 100% module width for top-a, I am using 60%, so a little deviation from the demo method.

Edited

1

Avatar jeff.faust answered

Thanks to those who took the time to add lengthy explanations. Followed directions and got slideshow to work. It did take a couple hours, but it was worth it to better understand the structure of the widget engine and theme. I will say that I appreciate Mirko's Frustration and think that there is some validity in the idea that previously a them could be installed from yootheme with dample content and all working parts from the demo version would be available for editing and reworking. I don't mind trudging through to get things to work, but for others, this is not why they pay for a membership to a them site for a turnkey CMS such as joomla or wordpress.

Anyway, Following the directions worked for me, and I feel more comfortable in the WidgetKit component as a result.

1

Avatar karen.vick answered

@matthe.marson, I agree with you from the client point of view... My fear is for the client and how they will be able to work with the theme AFTER I have handed it off to them. Yes, I train my clients but not all of them are tech savvy and after paying me to put a site together it shouldn't be a challenge for them to change an image or text in a slideshow or slideset etc.. This can end up costing a lot more than it does for the membership to Yootheme.

1

Avatar rafael.valles answered

add my site to the frustration list...

PLEASE FIX THIS STAFF!
Just buy the full year subscription and already regretting it, considering there is no formal solution on this

1

Avatar ryan.butterfly answered

@gregory.brickner

What problems are you having? What did you try?

Edited

1

Avatar gregory.brickner answered

To clarify @mustaq's solution. Literally leave the first step in Warp as:

<div class="frontpage-teaser1">    
<img src="images/yootheme/demo/slideshow/teaser_blank.png" alt="Teaser" width="1200" height="459" />    
</div>

You will only edit it for each teaser image 1, 2, 3.....n in the div class reference.

Then in custom.css edit your image path as he describes. Maybe everyone else understood this. I'm humble enough to admit it alluded me and maybe this will help others.

1

Avatar terrabit answered

I'm deeply sorry, but I have'nt been able to make it work although I believe that I've followed the instructions from @mustaq and @pawel thuroughfully.
Even so, my images do not take the full width and remain at 980 píxels, the size of the template.
I compared my installation with a demo one and all seems the same but, of course, I should miss something.
Any more ideas?

@matthew.marson you seem to managed it to work...

Thanks in advance.

0

Avatar daniel.mintz answered

Thanks for the answer. I have not been able to try it yet. To be honest I found the answer quite complicated for a novice to follow. I think I would need the steps broken down much more bit by bit. But don't worry as a) it is a nice feature to have but more important fish to fry and b) I'm sure others will appreciate the info as well.

0

Avatar peter.haken answered

Hi what size should images be to recreate this slideshow?

0

Avatar derek.antonievich answered

are the slide images in template/images/yootheme....

or just www/images.....?

0

Avatar bernd.guenter.75 answered

you can put them wherever you want; simply define in custom.css, where they are located.

0

Avatar stamedia answered

Thank you for your docus! It still doesn't work on my site yet.

If you use a different style than default don´t forget to change or delete the definition ".frontpage-teaser1" in the custom.css of your STYLE (eg. "grey", because otherwise all pictures will work, but NOT the first one.) ;-)

What do I have to change exactly when I'm using not default style/profile or own pics?

I changed the code in custom.css to the following and see all pics except the first one. (I'm using default style but my default profile is lightblue.)

.frontpage-teaser1 {  
    background-image: url(../../../images/max/1.jpg);  
    background-position: 0 50%;  
    background-repeat: no-repeat;  
    background-size: cover;  
}  

.frontpage-teaser2 {  
    background-image: url(../../../images/max/2.jpg);  
    background-position: 0 50%;  
    background-repeat: no-repeat;  
    background-size: cover;  
}  

.frontpage-teaser3 {  
    background-image: url(../../../images/max/3.jpg);  
    background-position: 0 50%;  
    background-repeat: no-repeat;  
    background-size: cover;  
}  

.frontpage-teaser4 {  
    background-image: url(../../../images/max/4.jpg);  
    background-position: 0 50%;  
    background-repeat: no-repeat;  
    background-size: cover;  
}  

.frontpage-teaser5 {  
    background-image: url(../../../images/max/5.jpg);  
    background-position: 0 50%;  
    background-repeat: no-repeat;  
    background-size: cover;  
}

Thanks.

Edited

0

Avatar stamedia answered

ok I've found it. You have to delete it in template/yoo_infinite/stlyes/{your_style}/css/custom.css

thanks. That's complicated without help.

0

Avatar morten.rasmussen.19 answered

Hey stamedia

You have to delete it in template/yoo_infinite/stlyes/{your_style}/css/custom.css

Have to delete what?

0

Avatar gooru answered

Ugh, this is frustrating! Several edits, many hours and still the images do not span the area. Clearly I've screwed something up, but with so many places and things to edit, I'm not surprised.

Can you look at my site under DEV to see what I did or am doing wrong?

http://aha2.gooru.ca/

0

Avatar janet.kay answered

Hi All

Just in case if any one is interested i have stumbled across some strange behaviour that may explain why this is working for some and not for others.

I have spent a bit of time working through the steps and have noticed that when adding a caption to the slidshow if the text within the h1 & span tags contain a . (full stop) it breaks the css and mangels the slideshow.

Also another issue that has popped up for us on the front page in the slidshow is a wire frame sitting around the dimensions of the fake image width="1200" height="459" its always showing no matter what width the browser is.

The following code in the slideshow widget kit brings up this issue:

<div class="frontpage-teaser1">    
      <img src="images/yootheme/demo/slideshow/teaser_blank.png" alt="Teaser" width="1200" height="459" />    
    </div>

even tho the image is not meant to be there (as there is no real image being referenced) we still see the frame, this was driving me nuts so a workaround is to a use the following style in the image properties:

style="visibility: hidden;"

so it looks a little like this:

<div class="frontpage-teaser1">    
          <img src="images/yootheme/demo/slideshow/teaser_blank.png" alt="Teaser" width="1200" height="459" style="visibility: hidden;" />    
        </div>

I hope this little bit of info helps others :)

Edited

0

Avatar matthew.marson answered

@karen.vick

support seems to be very patchy. I made a complaint and was more or less told to read it all again.

I have carried out everything I was told to, and it still does not work sixthform.iss.sc

Any ideas?

0

Avatar karen.vick answered

@matthew, I can only try to tell you what I did and hope it helps you.

I essentially started with the demo site installed and basically left everything the same by creating my images in the same dimension as the demo images, named my images the same (infinite_teaser1_default.jpg etc.) and edited my captions in widgetkit.

My only issue is that the captions aren't positioned correctly on mobile devices.

If this doesn't help let me know and I will give you more details.

0

Avatar ryan.butterfly answered

@gooru

It looks like you're implementing your pics through Widgetkit? I got this to work by calling out the provided demo image in Widgetkit, and calling out my pics through the custom.css. Make sure your images are 2500px wide and 459 tall, and it will work perfectly.

You definitely will have to add some filler to the sides of your pics to get the focus on the subject of your pics to be front and center. Right click and view background image on the Yootheme Infinite demo to see what I mean. <you'll have to right click toward the edge of the screen to get to the background image>

@mustaq's explanation was pitch-perfect, as usual. Just follow step-by-step and you'll have no worries. I admit it's kind of counter intuitive, but the logic behind it makes sense.

http://ryanbutterfly.com

Edited

0

Avatar maurits.smit answered

Followed all the instructions but the the pictures aren't resizing when i change the size of my browser window.
The tag <UL> is not changing its value automatically .... and it is not in css I can find.

Edited

0

Avatar tansimedia answered

A couple of issues that I ran into that may assist some people.

  • My slideshow image wouldn't display (just a white bg) and nav buttons unless I put "quotations" around the url.

.frontpage-teaser1 {
background-image: url("/images/xxx/ss_main/slide_01.jpg");
background-position: 0 50%;
background-repeat: no-repeat;
background-size: cover;
}

  • I've had a problem with the template recognizing the correct custom.css file so I just placed the css within the style.css file for the time being. It worked fine, however I will give it another shot and configure it with the right custom.css later. I just killed an afternoon on this and have run out of time to do it right.

Edited

0

Avatar nettemor answered

I consider myselves as an experienced joomla user, but this is horrible. So much tweaking and twisting to make this work. One would expect that the version you install is the same as the demo. Thats why you choose that particular template, cause you liked the look. THE LOOK OF THE DEMO AND NOT THE LOOK OF THE VERSION YOU GOT INSTALLED :-(

0

Avatar karen.vick answered

@terrabit, can you post a link? Maybe I can help if I saw the link.

0

Avatar macrolific answered

Greetings, everyone.

I've read through all the responses to this question, and I'm grateful to all who have so generously given of their time to help the rest of us.

I've got this feature working in my site except for one thing: when resizing the browser page, the resizing of the images lags behind that of the rest of the page by between 500 and 1,000 milliseconds. I've looked at the web pages of some of those who have posted here, and none of them seem to have this problem, although I think it was alluded to by @gregory.brickner, who said: "if you resize the window in Chrome, Safari, Firefox, it then pops into place."

If someone would look at my site and tell me if you have any suggestions, I'd be grateful. Here is a temporary link.

Thank you!

Regards,
Jonathan

0

Avatar living.spaces answered

Hello,

I have previously had this slideshow working perfectly, per the instructions provided. This morning I installed the 2.5 Infinite template and widget kit updates. I've reviewed the settings throughout and cannot find what I'm missing. This is an intranet site, so I can't show it, but here are my settings:

Widget Kit/ Slideshow code:
<div class="frontpage-teaser1"><img style="width: 1200px; height: 459px;" src="images/front-page/blank.png" alt="Teaser" width="1200" height="459" />
</div>

Module:
position: top-a
<div style="margin: -30px -10px;">[widgetkit id=1]</div>
module class suffix: style-blank

custom.css code:
.frontpage-teaser1 {
background-image: url(../../../images/front-page/catalog-pillows.png);
background-position: 0 50%;
background-repeat: no-repeat;
background-size: cover;
}

These are the exact settings I had before I installed the updates.

Any help would be greatly appreciated!

UPDATE - 5/30/13

I'm not sure if this was the case on the previous version of the Infinite template, but I stumbled on another custom.css under the style I chose to use. I had to have my background image linked in both places:

yoo_infinite > css > custom.css
yoo_infinite > styles > grey > css > custom.css

This fixed my issue.

Edited

0

Avatar bryce.edmonds answered

Everyone,
I add this to the Infinite Theme fray:
http://www.yootheme.com/support/question/39959

As you can see, it is not only our builds causing the problem with the white space at the bottom. Their demo theme does it as well. I haven't heard back yet with an answer/fix, but I'm hopefully. (Not that the frustration on this page leads me to have hope.)

Good luck all!

0

Avatar rafael.valles answered

HI there The Powel Solution is the Best one (I believe). Now I have this problem.... I used 6 teasers all ready, today I need to add one more... The Widget let me create, I even put my text on it. I open my CSS file add the teaser info on it... but on the browser I only see the text and a white space for the photo.

At first I check if my photo was wrong, then my text, then the code. NOTHING
Create the widget again, NOTHING
Change the image of teaser and then I get the photo, but the one I exchange is not there.

Is the Limit 6 images?? Please let me know.

UPDATE
I believe that the Images Size has something to do... maybe 15,000 pixels is the limit amount, so If I need an extra slide I have to make it 2142 pixel wide. I will test and let you know.

Edited

0

Avatar eliezervanner answered

Friends,

I have a problem! Surely that's just a detail!

I've done several steps of the process so that the slideshow theme Infinite be perfect.

The only problem at the moment is that the image you use is 2550 wide and it seems that the bootstrap is redimencionando it on smaller screens.

What I want is just "not be resized" and is centered.

The link is this: http://www.silverboard.com.br/home/novo

I made every step described by our friend Pawel.

I appreciate the attention.

0

Avatar ilse answered

I have a "client" that choose this template because they liked the look and feel of the demo.

And I'm running into the same problems as you all that i can't get the same look.

Is there already a patch/update wich can do all this, or need I need to do all the customisations ?

@ support where can I find a complete working solution/ or manual for fixing this ?

I'm sorry to complain but I just choose yootheme to avoid all this "hacks" to make a nice website

0

Avatar alex.r.24 answered

This Infinite template has given us a few headaches but we have managed to make it as we want. However, there is only one thing that we cannot find a way to fix. The Inner Top position in the template options indicate it is Equal. However on the live layout it shows up as Double-inverse. Very frustrating. Where can we change it???

0

Avatar solarian answered

Solution:
just pus the code

<div class="frontpage-teaser1"><img src="http://www.yootheme.com/demo/themes/wordpress/2013/infinite/wp-content/uploads/yootheme/demo/slideshow/teaser_blank.png" alt="Teaser" height="450" border="0" width="1200" /></div>

in slideshow widgetkit (you may change 1,2,etc) and the teaser_blank.png url, to be load it from your server)

and in custom.css adress to .frontpage-teaser1, 2, 3,etc background-image: url(your_image_path/your_image.jpg);

hope this will save you.

of course, you shoud use black style for widget/module, 100% width for top-a possition.

0

Avatar karen.vick answered

@richard.bedenham maybe I can help. What is the issue that you are having?

Edited

0

Avatar pawel.pytka answered

I'm fighting with this more than 3 hours. Stil doesn't work.
Give my money back!

0

Avatar funkymonkey answered

Hey Guys!

I have a quick work around of this. I was using the "red" theme in this template and rather then creating a new stylesheet and all those advanced steps... I was able to just copy the .css for the red theme and then replace it with the default .css. I also did that required steps regarding adding the code directly into the widget. I know this is a hacked way of fixing this but it worked for me!

Good Luck!

0

Avatar osariase answered

I have tried everything on this instruction and i still didnt get anywhere, no success. I need helppppppppppppppppppppp!!!!!

-5

Avatar patrick.clark answered

I got this going in less than 15 mins. I really don't know why people are charging clients money when they can't manage simple css background rules.

Know someone who can answer? Share a link to this question via email or twitter.