Jump to content
Sign in to follow this  
JohnMagic

Customising of featured slider by CSS in iBlog Pro

Recommended Posts

JohnMagic

Hi. I need to customize one featured item in the iBlog Pro slider. I need to put one youtube/vimeo video in the first slide using all available space. I guess I will need to hide one of the right/left sides with display:none, but which part of the featured slider should I keep, the left or the right ? I`m sure some of you have done this before and may give some advice, or even better a full solution example ;) Cheers: John

Share this post


Link to post
Share on other sites
Rob
John, on the individual feature setup, use the embed code from youtube or vimeo (preferably the older one) and modify it to the actual size of your slider. The optimized slider for iBlogPro4 is 450 x 350px. Keep in mind that both video services provide different types of embed links. The older ones provide you with more specific options. Add it to the Feature Media section. As for deleting things like overlays, they won't appear if they're blank, so just remove the content on that slider setup for title, description and any link you have.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
JohnMagic
Hi rangelone. Thanks for answering, but my question s about how to customize, with css, to have a video covering the whole featured slider area.

Share this post


Link to post
Share on other sites
Rob
Well, that was quick, so I presume you worked with great speed to try that and it didn't work.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob
The point John is that you do not require CSS to do this, but you use the embed code to fill the full space. I did provide you with specifics about keeping the other parts of the feature slider blank to make sure you do not get the sides. I'm not sure why you're insisting on using CSS, but it seems rather pointless to reinvent the wheel when it works as it is.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
JohnMagic
Didnt try. You suggest your solution work if I set video size to 800 px ?

Share this post


Link to post
Share on other sites
JohnMagic
Using the embed code in Featured Media will only show in the div on the right side. Using embed code in Fetured Text works partly.

Share this post


Link to post
Share on other sites
Rob
The solution will work to over 800px, however, I cannot guaranty how it will look. Your question wasn't about the appearance, but about the customization of the feature slider by CSS. Whether you embed video by CSS or by the settings, if the size is the same, the appearance will be the same.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
JohnMagic
Are you sure rangelone ? A common issue with answers here are that solutions which may work with Platform Pro are given as solutions to IBlog Pro etc. I have tested, and the only way to show a video in the feature slider with "full page width" is to customize css for the "slide". How it will look is essential, and it doesnt help to be able to put 800px content in a 450 px container if it doesnt show. Thats why I look for a Css solution.

Share this post


Link to post
Share on other sites
JohnMagic
Ok. It seems to work to use Featured Media if I set #feature .fmedia { width: 958px; How do I target the css for a Featured Slider with the name "test" ?

Share this post


Link to post
Share on other sites
JohnMagic
Hi Catrina. I may send you a link as PM, and temporarily make the slider active if you need to see it. Work-in-progress are not online :)

Share this post


Link to post
Share on other sites
catrina
#feature should be the selector for it. A feature slider isn't given a more specific selector since it's a feature area (not a website element contained within something else).

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
JohnMagic
The second part of your answer dosnt make any sense to me, did you check your PM ? Have you looked at the site ?

Share this post


Link to post
Share on other sites
Danny
Hi, Could you give me the same details as Catrina, so I can take a closer look?

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
alargeau
If I got it right, you want to display a video using the whole feature container. If you only have one feature page on your website, you can edit template_feature.php (wp-content/themes/iblogpro/pro/) and replace: [code]
[/code] by: [code]
[/code] Then you only need to change the [code]"http://www.youtube.com/v/4oAB83Z1ydE&hl=en&fs=1&showinfo=0"[/code] value to a link to your video (there are two values to be changed). Do not forget that since your video appears in the php file, any other page that will be set to the default Feature template will display the video, and that you don't need to fill the feature option under iBlogPro > Feature Setup. Hope that was clear enough, and that my code is correct.

Share this post


Link to post
Share on other sites
JohnMagic
Thanks. However i have to target only one of several slides in the Feature Slider. The other slides are deafult.

Share this post


Link to post
Share on other sites
alargeau
You don't need to target a feature slide since the video is set within the php file. And you can still have other feature slides since the rest of the code is still here.

Share this post


Link to post
Share on other sites
Rob
The one thing that concerns me about this whole thing is the timing. If the slider has any timing set, which it will need for other slides, then the slider will transition, perhaps in mid video watch. We've had other folks complain about this and we've generally recommended a separate slider or video viewer for this purpose unless the video is of equal or shorter length (duration) than the time set for the transition speed. Has anyone pondered that issue?

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
alargeau
Personally, I've never seen a slider with a video and a timing set. What's possible though is to set the video on auto play and to set the correct timing. So when the video has played, the slide will change. You can even modify the code so you can set different timings. I think that's the best solution. Because if you put another slider only for the video, and if you still want the other slider, then I guess you will have two sliders, which would look quite awkward.

Share this post


Link to post
Share on other sites
Jenny
With the mention of the timing, I do remember someone accomplishing this successfully but I don't remember how they did it. Have you tried searching the forums?

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
JohnMagic
alargeau: Thanks for a working theme code hack, that buys me some time. The solution suggested does work, but it also has some drawbacks. Feature titles get shiftet in order by +1, and the last feature slide gets a number as title by default. It will also be neccesary to hack theme core files for the feature titles buttons. I just switched over to numer titling as for now. Thanks ;) I still look for the CSS solution though as its not ideal to hack core template files to achieve one feature in one slide, and will appreciate suggestions on how to. Regarding timing I have set the timing to the length of the video + 5 secs, and it kinda works, but ideally I should set the slider with one interval for the video and normal interval for the other slides. I guess I must have to hack the javascript to to this ? Thanks again. John

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×