WordPress.com is an easy way to start blogging. Get a blog, check out our features, read the latest announcements, choose from great themes, or learn about the team behind it.
Need help? Check out our Support site, then
RE: http://www.fayence.wordpress.com
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?
Thanks
The blog I need help with is fayence.wordpress.com.
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. http://en.support.wordpress.com/slideshows/#additional-information
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:
http://wpbtips.wordpress.com/2010/04/16/custom-frame-around-slideshow/
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 WordPress.com) 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.
[slideshow]
<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 http://www.fayence.wordpress.com
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:
[slideshow]
<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.
Thanks.
I'm seeing the original WP frame here:
http://fayence.wordpress.com/
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 fayence.wordpress.com
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 http://www.fayence.wordpress.com 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.
Edit: "vice" was meant to be "nice"
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 don't know of any workarounds. Perhaps another Volunteer will have a workaround that they can share. I only know that many web developers and web designers have an extremely dim opinion of IE browsers.
IE is a bad browser because it continues to ignore various web standards.
I'm a Mac user, so I cannot check how things look in IE. If you mean you're seeing a little bit of the original at the top and the bottom, as timethief reported, you can increase the negative top margin and the height till you cover it completely. If you mean you're seeing the whole original frame, there's nothing you can do about it till Microsoft decides to conform.
@panaghiotisadam
Hello there,
What I see using IE8 is a black border band approximately 1/4 inches deep both above and below the slides. I do not see any black on either side.
Yes thanks TT. If that's the case then you're seeing the white mask and it only needs to be made larger the way I suggested above. But we don't know which version of the creature fayence is using: maybe an older version won't show the mask at all.
I'm using IE-8.
On IE-8 - I tried changing the top margin to -520 (instead of -500) and got a black area between the slideshow and the text beneath it. The black area at the top of the slide show didn't change. As TT says, there is no black border on the left/right sides.
Back to Google Chrome - I tried to figure out the 2 third-party slideshows that WP.com says will work but got nowhere. One of them keeps asking for a picture after I up-loaded a few. The other just sat there.
Sounds like IE won't accept moving the white rectangle any higher. Try adding this before the slideshow shortcode to move the slideshow lower:
<div style="height:30px;visibility:hidden;">-</div>
Then continue with the adjustments in the other code.
As it turns out, I upgraded to Internet Explorer version 9, the most current version, and the black border at the top and bottom disappeared.
Now it works the same on IE as Google Chrome.
Thanks.
You're welcome. Yes, IE9 is better than previous versions, but unfortunately many users still use those earlier versions, so you should try to take care of things as I suggested.
This topic has been closed to new replies.
fayence
raxacollective
