Hi guys, how do I change the color of the white frames in picture gallery?

  • 1
  • Question
  • Updated 3 years ago
  • Answered
I want to have frame around my pictures in the gallery widget but I want to customize the color to something other than white. how do I do it? any code that can change this via HTML widget?
Photo of Negar

Negar

  • 97 Posts
  • 3 Reply Likes

Posted 3 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Negar,

You could try doing this with some CSS,  by adding it to your CSS over-rides. 

The gallery images for the polaroid style are superimposed on a rectangular white background image with a dimension of 128 x 124 pixels (height by width), with the file-name "polaroid.png". If you wish to have a border of a different colour then you will need to create that png image of the same dimension in the colour you wish. You would then store that image in your file manager and for easy traceability within a folder called "gallery"..

Then in your Site CSS over-rides add this style: This will be effective for your entire site.

span.item {
    background: rgba(0, 0, 0, 0) 
    url("resources/gallery/polaroid.png") 
    no-repeat scroll left top;
    display: inline-block;
    height: 128px;
    margin: 0 10px 20px;
    text-align: left;
    width: 124px;
}

Your other option is to use an Internal Style Sheet.
This CSS is added to an HTML widget anywhere on your page: The effect is limited to the current page only.

<style type="text/css" media="all">
span.item {
    background: rgba(0, 0, 0, 0) 
    url("resources/gallery/polaroid.png") 
    no-repeat scroll left top;
    display: inline-block;
    height: 128px;
    margin: 0 10px 20px;
    text-align: left;
    width: 124px;
}
</style>

Please try it in a test site first.
(Edited)
Photo of Negar

Negar

  • 97 Posts
  • 3 Reply Likes
thanks a lot for your great solution, the only thing non of them worked for me :(
any idea why?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Negar,

I wasn't sure of the selector(s) and classifiers as it seems to be quite a complex hierarchy within the original Yola CSS . Try this variation:

Site CSS

div.yola_gallery_widget div.polaroid span.item
{
    background: rgba(0, 0, 0, 0) 
    url("resources/gallery/polaroid.png") 
    no-repeat scroll left top;
    display: inline-block;
    height: 128px;
    margin: 0 10px 20px;
    text-align: left;
    width: 124px;
}


or


Internal CSS Style Sheet within an HTML widget:

<style type="text/css" media="all">
div.yola_gallery_widget div.polaroid span.item
{
    background: rgba(0, 0, 0, 0) 
    url("resources/gallery/polaroid.png") 
    no-repeat scroll left top;
    display: inline-block;
    height: 128px;
    margin: 0 10px 20px;
    text-align: left;
    width: 124px;
}
</style>

Goodluck and do try it on a test site first. Hate to hear that your site crashed  :(

If it works in outline you may need to subsequently tweek the rgba settings.
(Edited)
Photo of Negar

Negar

  • 97 Posts
  • 3 Reply Likes
I am really thankful. This time it removed the white frame but it didn't add the frame I made and looks like this.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
The image above: Is that the image you made for your background frame or is that what appears in your gallery after the modifications?

If you have published your site I can inspect the gallery and check what is working.
(Edited)
Photo of Negar

Negar

  • 97 Posts
  • 3 Reply Likes
That's the image I made, it appears no frame.
Photo of Negar

Negar

  • 97 Posts
  • 3 Reply Likes
I used both internal HTML widget and CSS of the site then it worked. Thanks a lot.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Negar,

I hear what you are saying but it doesn't make sense with respect to the 2 methods. I suspect that your first placement doesn't work but your second does. Check that you haven't omitted a bracket in the copy and paste, a common oversight!

 It's worthwhile identifying the failure and removing it since redundant coding just slows down your site loading. Let me know which one fails and I'll look into it for documentation purposes.

Job done well, Negar. Congratulations.
(Edited)