change background colour of image slider
-
I want to add an image gallery/slider but I do not like the black colour around the images. I want to change it to White. How do I do this?
my theme is Melody.
I want to add an image slider on the main page but with white instead of black, and have the buttons either a light grey or black.
The blog I need help with is: (visible only to logged in users)
-
Hi Anne-Marie,
Can you add the gallery code to your site so I can take a look? I can’t try it out on my test site as you’re using a premium theme and the demo site for Melody doesn’t seem to include a gallery anywhere.
You don’t have to add it to your homepage. If you prefer you can create a new test page, add the gallery and set it up how you’d do so on your homepage, publish it (without adding it to your menu so no other visitors stumble across it) and then post the page URL here so I can take a look.
I’m subscribed to this thread so if you reply with the page URL when you’re done I’ll get an email notification and let you know what CSS you can use.
-
Great Idea. I went ahead and created a test page, here is the link
https://amaudetphotography.com/test-gallery/I would love to change to colour to white, as mentioned, and also if possible make the gallery larger, or closer to the size of the featured images on the top of my pages.
:)Thanks!
-
You can change the background and border colour with the following code:
.slideshow-window { background-color: #fff; border: none; }You could also change the background and border of the buttons (let me know what colours you’d like) but the arrows inside are an image file so you can’t change the colours with CSS, you’d need to create your own image based on the default.
I’m not sure how well increasing the size will work, I think it might be somewhat constrained by the width of your content section which is 662px on a desktop.
I would suggest making all the images you include the same size, ratio and orientation rather than jumping between portrait and landscape etc. This way you’ll get the cleanest and most professional appearance and the images will appear as big and beautiful as possible.
-
OK I have tried to change the colour with the code, but it is not workiing. I am OK with the button colours as they are. I also changed the photos so all of them are in landscape orientation….but still trying to change the colour.
Also I see if I click on the option “don’t use theme’s original CCS” the image slider goes full width, which I really like….except the rest is no good. I am wondering if I can get this option for the image slider only and leave the rest as is.
-
Try this instead:
.entry-content .slideshow-window { background-color: #fff; border: none; }Also try adding a value to the Media Width box (say 1000px) and I’ll see if that helps increase the size of the gallery. Let me know when it’s done and I’ll keep trying. Unfortunately turning off the original theme CSS won’t help.
-
YAY the colour is white now. Looks much better.
I just still want to figure out how to make it wider, more like screen width without changing the other features. If you or anyone knows how please let me know
-
OK, give this a shot:
@media screen and (min-width:1024px) { .entry-content .slideshow-window { width: 150%; margin-left: -25%; height: 601px; padding: 0!important; } }With any luck it will increase the size of the slideshow without stretching the images, but only on large-ish screens so it doesn’t mess up on mobile or portrait-oriented tablets.
You’ll probably want to see if you can test it out on a few different browser/OS/device combinations to check none of them go weird.
-
- The topic ‘change background colour of image slider’ is closed to new replies.
WordPress.com Forums 
