Need help? Check out our Support site, then


Removing black background from image slider

  1. Hey guys. Just wondering if there's a way to remove the black background from the image slider on my Watson theme blog? I'd like larger images with a clean white background if poss...

    http://guywilkinson.com/photos-4/

    thanks,
    Guy

    The blog I need help with is guywilkinson.com.

  2. Hey Guy,

    You would need the Custom Design upgrade in order to apply custom CSS rules to your website. You would then have access to the Customizer, where you could add the following CSS snippet:

    .slideshow-window {
        border-color: transparent;
        background-color: transparent;
    }
  3. Great thanks. Quick questions:

    1-If I switch themes at a later stage do I need to buy the Custom Design upgrade again or does it automatically translate to new themes?
    2-Can I also increase the size of the gallery images a bit? If so how?
    3-Where exactly do I put this code once upgrade is purchased?

    thanks,
    Guy

  4. 1. The Custom Design upgrade remains active for a full year, no matter how you choose to change themes.

    2. You can increase the size of your gallery images by using the two following CSS rules (use any size you'd like instead of 500px):

    .slideshow-window {
        height: 500px !important;
    }
    
    .slideshow-slide img {
        max-height: 500px !important;
    }

    3. Once the upgrade is purchased, you'll have access to the full Customizer tool, which includes CSS customization. Check it out at:
    http://en.support.wordpress.com/custom-design/#custom-css

    Hope this helps.

  5. Hi, I bought the CSS Upgrade. The code you gave to remove the black background isn't working, can you please check this is correct?

    .slideshow-window {
    border-color: transparent;
    background-color: transparent;
    }

  6. Hey,

    Yes, you're right. It's a matter of rule precedence. That rule I gave you is correct, but it's overriden by others from the theme. One may use the "!important" suffix to override this, but this is discouraged. The best way to rewrite these rules is:

    #container .slideshow-window {
    	border-color: transparent;
    	background-color: transparent;
    }
    
    #container .slideshow-window {
    	height: 500px;
    }
    
    #container .slideshow-slide img {
    	max-height: 500px;
    }

    Since this was an oversight on my part, I went ahead and applied these changes for you. :-)

  7. That's awesome thanks so much. Last thing, I tried increasing image size slightly but it doesn't work. How do I do this please?

  8. Hey again,

    You're right. Apparently, the code that powers the image gallery sets some special rules and this is one of those cases where we do need to use the !important suffix. I straightened it out for you. ;)

  9. Fantastic, thanks so much!

  10. Since paying for custom css I am now having issues with my "featured images" -the thumbnails beside the articles- which appear to be pixilated even when I add higher res versions. I have removed most of the images from my blog now (a huge hassle) and am not sure why this keeps happening. Check out the post, "the hanging hamlet" to see what I mean. Please advise best course of action.

  11. example of pixilated image. http://guywilkinson.com/page/2/

  12. I am now having issues with my "featured images" -the thumbnails beside the articles- which appear to be pixilated even when I add higher res versions.

    For reference, I checked http://guywilkinson.com/page/2/ just now and here it what I see: http://cl.ly/QF6n

    I used Firefox 22 on a Mac for this test.

    Here is a direct link to the image used in that example:
    http://nomadicscribe.files.wordpress.com/2013/05/dsc_0630.jpg?w=205&h=145&crop=1

    Here's how featured images work at WordPress.com: the sizes are set by the theme and the cropping is done by a WordPress.com function separate from the theme (and separate from the Custom Design upgrade). The developers have tried to strike a good balance between efficiency on the systems side and keeping load times as fast as possible while still keeping the images high quality, but there's still always a possibility that a little quality loss will occur when resizing images programmatically like that. Since featured images are cropped down to a smaller size, 205 x 145 pixels in this case, you would want to start with a nice but smaller sized image to get a better result, not upload a larger higher res one.

    If you look at the quick specs for the Watson theme on this page http://theme.wordpress.com/themes/watson/ you'll see that it says, "slider and featured images should be at least 608 by 400." So, one recommendation might be to upload images at exactly 608x400 to try to get the closest possible size before it's resized by the server. If you're concerned about keeping your images retina-friendly, then double the size to 1216x800, that way if new retina functions become available later, the images will be ready.

    However, even if you did resize the images to the theme's specs, you're still may get some changes to the images since they are being resized via the server. Note that it may also depend a little on how processed the image is or how high quality it is to start with—some images may just resize down more nicely than others. To figure out what works best for you, you may need to experiment a bit. If you're still concerned about the image quality, perhaps try sizing the images down instead of up and put a slight noise reduction filter on them before using them as featured images. Personally, I don't think steps like that are necessary though.

    Last note: if you were to use custom CSS to upsize the images, you will almost certainly see a loss in quality. If that's what you were doing, then getting a larger featured image size using custom CSS is a tradeoff between the size and the quality because featured images are sized by the server based on the theme settings and you cannot change the featured image size itself using CSS only.

  13. Hi. Thanks for your detailed message. I just re-uploaded the exact same images that were previously pixilated and they now appear to be fine: http://guywilkinson.com/

    Do they look fine at your end? I'm only using a small laptop screen.

    I cannot understand why for a couple of days they were definitely pixilated and then they appear normal again when the same images are re-uploaded a few days later? Could there have been a glitch with WordPress cms?

  14. I checked http://guywilkinson.com/ and the featured images look good to me. Anyone else want to take a quick look at the images and add a reply if they look good to you as well?

    I cannot understand why for a couple of days they were definitely pixilated and then they appear normal again when the same images are re-uploaded a few days later? Could there have been a glitch with WordPress cms?

    Not that I know of. Anything's possible though. :) What I can do is examine what's happening at the time the issue is reported and try to reproduce it based on the info. given. :)

  15. sgphotographyme
    Member

    Hi guys. May I ask a huge favour! I am trying to do the exact same thing on my page but unable to make any changes! My I implore you to help me make the changes? I have been stuck on this for weeks.. trying to understand how to apply CSS changes... but this Slideshow thingy does seem to work! Please check out sgphotography.me

    PS: He's featured images don't look pixelated. :)

    I really hope you can help!

    Josh

  16. sgphotographyme
    Member

    I have tried multiple ways.. The thing is I am not using Worpress (the program from wordpress.org). I am directly trying to change the CSS thru the webbased customisation tab. Is that the reason why it is not working? I have no previous HTML experience and I use a Mac. To use WordPress I have to download MAMP etc... which I have tried but I really can't start understanding how all this works.. I really hope you guys can help me! All i want to do is to customise my slideshow to a whitebackground...

  17. My I implore you to help me make the changes?

    You do need to make the changes yourself, but we can try to help guide you. You should be aware that CSS is theme-specific, so to get help, you should submit a separate, new help request at http://en.forums.wordpress.com/forum/css-customization/#postform and mention which theme you are using, include a link directly to an example on the blog your working on and add a clear, brief explanation of what you're trying to change.

    I am directly trying to change the CSS thru the webbased customisation tab.

    That's the right way to do it for a WordPress.com blog.

    To use WordPress I have to download MAMP etc...

    WordPress is web-based software that is installed on a web server. To edit an existing WordPress site, you don't need to download anything and can just use the web interface.

Topic Closed

This topic has been closed to new replies.

About this Topic