• Author
  • #750572



    Is it possible to COMPLETELY fill the “black square” of the slide show area with an image?

    Is there a specific image size or ratio of length/width that I should use to completely fill the area?

    I have an image re-sizer so I could re-size them, but to what dimensions/pixels?


    The blog I need help with is



    Please see here:

    How do I adjust the size of a slideshow?
    Slideshows are set to fill up the full content width of your theme. Resizing them is not currently possible but if you try different themes you will find that the size of slideshows varies.



    To find out the what maximum displayed image size on your theme Comet is click this link.


    The design of the WP slideshow is:
    • dark grey frame = minimum 20px around each side of the images.
    • height = 450px;
    • width = width of the main column of the theme (in your case, 480px).
    So the image size that would best fill your slideshow, leaving the minimum frame, is 440x410px (or anything larger than that but in the same aspect ratio).

    If you wish to display a different frame around the images, or display no frame at all, you can use this workaround:
    To display no frame, use the hex code for white (000).



    Will the new carousel slide show feature update older posts, or will this only work on future posts? Thanks!



    See the answer to my question:

    For clarity: Does this mean that every Gallery we have previously made no matter what theme we use will now become a Carousel?



    I tried the “workaround” that panaghiotisadam suggested and it didn’t work.

    I’m a real novice at HTML (that’s why I like so I may not have entered the code correctly.

    I was in Page Edit and clicked on the HTML tab. I deleted what was there. I then copied/pasted what was in the suggested workaround article (below) and changed all of the #’s to 000 which I thought would change everything to white…but the dark square remained.

    <p style=”width:100%;height:450px;margin-top:-475px;color:#HEXF;background-color:#HEXF;border:1px solid #HEXB;position:relative;z-index:1;”>-</p>



    I just noticed that I sent the prior message while logged into my other blog. Sorry for any confusion.

    I am referring to

    When I tried to get rid of the black square on the slideshow by pasting the HTML code shown in the previous message, the black square now is on top of the picture in Visual mode and I can’t Preview the change after Updating.

    I used FFFFFF for the hex code for white. Is that the # I am supposed to use in place of HEFX and HEXB? (I mentioned I used 000 before, but later saw the chart for hex codes).

    This sure is confusing. Thanks in advance for additional help


    1) First of all sorry, I must have been absent-minded or something and made a ridiculous mistake in my previous reply: pure white is fff, not 000; 000 is pure black!
    2) So changing “all of the #’s to 000” would give you a pitch black square frame around the images. If you saw no such thing, then you made some mistake too!
    3) As I’m saying in the post I linked to, to cover the original frame completely you may need to tweak the height and margin numbers (depending on the theme).
    4) The workaround was primarily designed for a colored frame with a colored border around it. Since you don’t want that but just want to mask the original frame, the border part of the code isn’t needed.
    So in all the code you need to paste in the HTML editor is this:
<p style="width:100%;height:460px;margin-top:-500px;color:#fff;background-color:#fff;position:relative;z-index:1;">-</p>



    Some progress!

    Now the “black square” is gone

    But the pictures are not rotating and the first picture I Inserted seems to be covered over by a white area. A bit of the picture sticks out of the bottom. The 2nd and 3rd pictures show nicely,but aren’t rotating.

    I really appreciate your help…hoping you can help further.



    I’m seeing the original WP frame here:
    Are you talking about a different blog or page?



    No…I am referring to fayence.

    I was using a “Test Page” to see what would happen.

    Whether it’s magic or a full moon, the pictures now seem to be rotating and the black border is gone.

    The only issue now is at the bottom of the page part of the black border seems to be sticking out. Did you say I should adjust the “height” number? It appears to be about 1/4 of an inch showing.



    I added “TEST PAGE” to the Menu across the top of the page so you can see that black line under the pictures…and hopefully advise on how to get rid of it.

    I assume (but am not sure) that it means making the “white” area taller.

    Thanks for the help and support.


    My workaround deals with the frame only: it won’t (actually cannot) affect the function of the slideshow. If the images didn’t rotate before, then you probably had some temporary browser or connection issue.

    And yes you’re right, what my code does is place a white rectangle behind the images and in front of the grey frame, so if the version I suggested doesn’t completely cover the lower part of the grey frame, increase the height number till it does; you’ll need around 480 instead of 460.

    (You have to learn to think in pixels! 1/4 of an inch doesn’t mean anything when you speak web, as the perceived length depends on each user’s screen resolution.)



    Thank you…the problem is resolved and the front page is just the way I want it.

    Thanks again.


    You’re welcome!



    As a follow-up question…regarding

    I was able to successfully implement the fix above, but now have a “new” problem.

    I’d like to add some text beneath the slide show area.

    When I open the editor, the word “slideshow” is partly covered by the white mask and when I try to add text a few lines down, the text is clipped off.

    No matter how many lines I add, the text is always clipped.

    Any ideas?


    Switch the editor to HTML and add the text there.



    Thanks. Simply entering it as HTML works fine.

    Your earlier suggestion of a way to mask the black border of the slideshow is working fine on Google Chrome.

    But, when I looked at in Internet Explorer, the black border is still there.

    Is there a workaround for IE? I know…don’t use it, but some of the site visitors use it, so I have to consider it.



    I’m using Firefox 8 and the black border is gone. The slideshow looks vice and I’ll be using this workaround to get rid of the black border in my slideshows too.

    I also viewed the blog using IE8 in compatibility mode and without it and there are black borders both at the top and bottom of the slideshow. That didn’t surprise me as IE browsers are odd-ball browsers.

The topic ‘SLIDESHOW IMAGES’ is closed to new replies.