WordPress.com

1. beyondthelastman
   Member
   Jul 13, 2012, 12:14 AM

   Hi there,

   The Chunk based blog I am putting together features predominantly short posts linking to longer articles each on their own pages. Within the Posts I have some relevant images for the subject displaying in a slideshow.

   All fine, the thing is I find the slideshow box size that is created a bit big, especially relative to the overall size of the containing post boxes as there is not a lot of text.

   So I was wondering if there is anything you can do in CSS that can alter the size of the slideshow window created, or it this a fixed module?

   Thanks,
   Craig

   The blog I need help with is onlyvictoryneedsnoexplanation.wordpress.com.

2. designsimply
   Staff
   Jul 13, 2012, 12:20 AM

   Changing the border and background color might work as a solution for this. Give the following a try:

   .slideshow-window {
   	background: white !important;
   	border: none !important;
   }
   .slideshow-controls {
   	width: 540px !important;
   }

3. beyondthelastman
   Member
   Jul 13, 2012, 12:34 AM

   Thanks for the very rapid response. It has certainly improved the look, taking away the standard black box around a slideshow makes it look a bit more organic and natural, so thanks for that.

   It is still the same size, would tweaking the 540 figure allow scope to increase or decrease the area in which the slideshow displays in?

   Thanks,
   Craig

4. designsimply
   Staff
   Jul 13, 2012, 2:43 PM

   There really isn't a reliable way to resize the slideshow that I know of.

   It might be possible with some very specific settings, and I came up with some CSS to get you started. Note that this is experimental, and you should check it in a few different browsers:

   .slideshow-window {
   	background:white!important;
   	border:none!important;
   }
   
   .slideshow-window,.slideshow-slide {
   	max-width:380px!important;
   	height:210px!important;
   	line-height:210px!important;
   }
   
   .slideshow-controls {
   	margin-bottom:-55%;
   }
   
   .slideshow-slide img {
   	margin:0 auto;
   	max-width:380px!important;
   	max-height:210px!important;
   }

5. beyondthelastman
   Member
   Jul 13, 2012, 4:06 PM

   Hi again,

   That smaller sizes certainly looks better, I get very irregular results between my 27" iMac and my 13" MacBook Pro it must be said with the former size looking absolutely enormous on the latter and just fine on the former.

   Oddly the white background is not showing now, it's back to the standard images within a black box. I can't see why that would have changed from your first snippet of CSS which seems to incorporate within the longer piece.

   Any thoughts?

   Thanks again for all your assistance,

   Craig

6. designsimply
   Staff
   Jul 13, 2012, 4:18 PM

   Different browsers maybe?

7. beyondthelastman
   Member
   Jul 13, 2012, 7:01 PM

   Safari for both. It's really odd that when I tested the shorter code last night you wrote above I got the different and nicer effect.

   Now that is just not working at all, with the longer piece it is reducing down the size of the window just fine, but neither short nor long code is changing the background to the slideshow to white from black anymore.

   Craig

8. designsimply
   Staff
   Jul 30, 2012, 11:22 PM

   Try checking your Appearance → Custom Design → CSS editor page for errors. I noticed you have some strange lines in there. For example, lines with just dash characters "-" by themselves shouldn't be there.

9. beyondthelastman
   Member
   Jul 31, 2012, 1:10 AM

   Good call on those. I didn't realise they would cause problems, just put them in to divide up the blocks of CSS changes for legibility purposes.

   The changes come through fine now, thanks a lot.

   Craig

10. designsimply
    Staff
    Jul 31, 2012, 1:52 AM

    Yay!

Topic Closed

This topic has been closed to new replies.