Slideshow question

11 posts from 3 voices

• Started 4 months ago by elodie14
• Latest reply from elodie14
• This topic is closed
• This topic is resolved

Tags:

No tags yet.

1. 

   elodie14
   Member

   Hello,

   I am using the ken burns effect and I would like to get my slideshow larger than 930. I would like it to fit the screen like your Replete theme.

   How can I do that? I have try to change it in the index.php but nothing changed.

   Also, how can I change the opacity of the caption?

   Thank you very much for you help.

   Best,

   Elodie.

   Posted 4 months ago #
2. 

   Devin
   Moderator

   Hi Elodie,

   You'll need to look into a freelance developer to change the slideshow to be full width. The slideshow will need to be in its own full width (to screen) container and set to 100% width. Then the image size for the big slideshow images needs to be changed to something like 1500px wide to work with the new container size and not look too pixelated.

   To get working without any issue it'll probably take 4-6 hours of freelance work but it isn't something we are able to do via support.

   For the caption opacity, you can add the following to the custom.css file located in the css folder of your theme files:
   

   .ken_burns .slideshow_caption {
   opacity: .5 !important;
   }

   Regards,

   Devin

   Posted 4 months ago #
3. 

   elodie14
   Member

   Well, to bad. Thank you anyway.

   And one more question, how can I enlarge the caption block. I think there is to much space on the left and right side.

   Thak you.

   Best,

   Elodie.

   Posted 4 months ago #
4. 

   Nick
   Moderator

   Hi,

   Sorry, I haven't read the whole thing , i made it a bit larger, the slider, though not sure how it will look outside chrome. Could you add this please to the *end* of custom.css file
   

   #megaMenu.megaFullWidth {
   width: 940px;
   }
   #top.home .slideshow {
   width: 110% !important;
   left: -16.4%;
   }
   #top.home .template-fullwidth.content {
   width: 1200px;
   margin: 0;
   margin-right: 20px;
   }
   #top.home .arrowslidecontrolls {
   display: block;
   position: relative;
   right: 140px;
   top: -160px;
   }
   #top.home .ken_burns .slidecontrolls {
   display: block;
   position: relative;
   top: -50px;
   right: -880px;
   }
   #top.home .special_heading_container {
   margin-left: -50px;
   width: 950px;
   }

   I see it like this http://www.clipular.com/c?1734970=AydUaZwjVyvKJ1aDuErfmT_kBgw

   Thanks,

   Nick

   Posted 4 months ago #
5. 

   elodie14
   Member

   Hello Nick,

   Thank you for helping me out and providing me this code.
   It's close to what I expected but the slideshow on the home page and my 3 colums are on the left side. There is still a space on the right side and my colums have to stick center.

   Here is what it looks like: http://fermedelahautemaison.fr

   I hope it will work because the big image gives an awesome idea of the place.

   I look forward to your response.

   Thnk you.

   Elodie.

   Posted 4 months ago #
6. 

   Nick
   Moderator

   Hi,

   Please remove the previous code and add the one above that I modified. Please play around with those numbers yourself as well and install Chrome Developer Tools which will visually let you modify the css code visually without needing to know what everything means. On my laptop 1360 resolution, it looks fine. Hopefully the modification I made will take care of the bigger screen sizes as well.

   Thanks,

   Nick

   Posted 4 months ago #
7. 

   elodie14
   Member

   Hello Nick,

   Thank you very much. It looks fine for me.
   I love the impact.

   Do you know by any chance why now there is a white background behind my 3 columns? If not, don't worry, I don't want to bother you.

   Thank you again.

   Take care,

   Elodie

   Posted 4 months ago #
8. 

   Nick
   Moderator

   Elodie,

   Wow! It even works in IE , i wasn't at all sure it would. Looks almost like a digital animation scene/cgi from a movie, especially the 2nd slide. The white background in FF/Chrome and black background around images in IE are the consequences of using css as a club instead of as a paint brush.

   The first two mini-sliders on the bottom now look psychedelic. Alright, I'll do what I can. Please hang on. Ill post something shortly to get the forward and backward arrows on the two mini sliders in place, and I'll try to do something about the colors as well once i understand where they are coming from. Will post here shortly.

   Ok... Please add this *below* the previous code. Couldn't remove the white boxes so i shrunk them and put them behind the images, I am not sure what they even are. arrows look ok now. Sorry but I am css'ed out. There is a strange transition effect on the 2 small sliders and not all small slides have labels or did the code eat other labels? i am not sure.

   #top.home .grid4 {
   	margin-left:40px;
   	width:285px !important;
   }
   #top.home .grid4 img {
   	min-width:294px !important;
   }
   #top.home .slideshow_portfolio3.aviaslider:nth-child(n+1) {
   	margin-left:18px;
   }
   #top.home .slideshow_portfolio3 .arrowslidecontrolls:nth-child(n+1) {
   	margin-left:101px;
   }
   #top.home .slideshow_portfolio3 .arrowslidecontrolls .ctrl_back.ctrl_arrow:nth-child(n+1) {
   	margin-left:10px;
   	bottom:12px
   }
   #top.home .slideshow_portfolio3 .ctrl_arrow:nth-child(n+1) {
   	margin-left:230px;
   	position: relative;
   }

   Thanks,

   Nick

   Posted 4 months ago #
9. 

   elodie14
   Member

   Thank you Nick for getting back to me so quickly.
   The 3 columns images look great. I am gonna have a fix image anyway. Now they are well place and without the white border.

   You are really the boss.
   I don't have IE but I will try to check.

   If I can abuse of your kindness, do you think I can have this amazing slideshow on the fullwitdh page as well or is it only possible for the home page?

   I am very greatfull for you help.

   Best,
   Elodie.

   Posted 4 months ago #
10. 

    Nick
    Moderator

    Hi,

    I can not do more as it would not be fair to others waiting. However this code should work anywhere *if the slider is identical* . I restricted it to only the home page, Make a second copy of all the code I posted and change #top.home to #top.page and add so you have all the original and its duplicate but with .page instead of .home.

    Thanks,

    Nick

    Posted 4 months ago #
11. 

    elodie14
    Member

    Great, thank you. I will try.

    Good luck for the oher post.

    Best,

    Elodie

    Posted 4 months ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.