How to customize albums?

Hi @youknowmenot

Could you kindly share the page with the album so that I can have a look at it and your current design before I can advise on this? Thanks in advnace for doing so.

Kind regards,
Elvis.

My site is not public, I’m running it on xampp and can’t show you. Here is a screenshot:

View post on imgur.com

Each album is using 100% width, while I want them next to each other. I’m attaching the custom CSS that I use

#foogallery-album-1517 ul {
  list-style-type: none;
  background-color: transparent;
  border: 2px dashed #000000;
    }

#foogallery-album-1517 li a {
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
  opacity: 0.5;
}

#foogallery-album-1517 li {
  text-align: center;
  border-bottom: 1px dashed #000;
}

#foogallery-album-1517 li:last-child {
  border-bottom: none;
}

#foogallery-album-1517 li a.active {
  background-color: transparent;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  color: black;
}

#foogallery-album-1517 li a:hover:not(.active) {
  background-color: transparent;
  color: #172D3A;
  border-radius: 0px;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
  transition-duration: 0.5s;
  opacity: 1;
}

If that’s not how albums are meant to look then perhaps there is some CSS conflict from importing my site’s CSS into the album page? Without the custom CSS above the album page functions the same way so the conflict must come from my main site’s CSS. I don’t know how “Responsive Album Layout” is supposed to look but I doubt that’s it. For me this is strictly a listing problem.

Hi @youknowmenot

So I have created a simple album gallery with the Responsive Album Layout template and taken a screensnap to give you an idea of how the album page should look like: https://prnt.sc/3JLxyAQg38-b

Kindly note that I also added the Custom CSS you shared with us in the message above before taking the screensnap. As you can see from it, by default, when using that album layout, the galleries are not supposed to be stacked on top of each other with 100% width as in your case.

This shows me that – and just as you mentioned – there is some CSS conflict coming from some CSS from your theme files that’s causing it to have that particular layout. I’d advise you to use the Developer Tools to identify that particular CSS and edit or comment it out to resolve the conflict.

Kind regards,
Elvis.

My main CSS file has a “li a” (list anchor) with a “display: block” value, this might be it but I cannot change it because my menus will break. That’s why I wanted to know how I can customize the album page not to use lists as I fear this might be the problem.

To put it in another way. Your plugin first uses your own CSS, uls and lis. After that it fires up the custom CSS that I inject into it. Thus rendering my custom CSS useless. There should be a way to customize the first CSS that it fires up (the plugin’s), otherwise it’s pointless for me to try and customize it with my own CSS. The lists are already generated by the time my custom CSS is started. Thus my “customization” options are limited.

Fixed it by making a custom div in the theme that wraps the album before it fires up the plugin’s CSS and gave it these properties:

#photoalbum ul li {
	display:inline-block;
	list-style-type: none;
}

Hope it helps someone else too. But I still think there should be a better way to fix this.