Editing the CSS for the photos page

    • 303 posts
    November 26, 2019 5:56 AM EST

    Does anyone have a list of the exact CSS locations or snippets to edit the CSS for the photos page? I know there is a developer who knows exactly where I need to edit it but they won't tell me. Is there someone who will tell me? Or better tell me how to understand the structure so I can edit any page.

    • Moderator
    • 6923 posts
    November 26, 2019 6:08 AM EST

    I use inspect element in the browser to find what I need. This tut shows how to edit the CSS https://www.socialengine.com/support/article/5144902/se-php-creating-your-own-theme . If it's just the CSS, make a clone theme if you hadn't and work via admin panel on the theme.css. If you have a screenshot of exactly what you want to do, I can try to find the css in inspect element if I have time. 

    I also have a local install that I use for changing stuff for my live site. That way, I know what things look like before I make changes on live. It's not hard to install on local if you get Mamp Pro. It's inexpensive and works on both windows and mac and sets up all the "server" stuff you need. All you have to do then is install the script which is the same exact process as installing on a live server. 

     

    • Moderator
    • 6923 posts
    November 26, 2019 6:52 AM EST

    Are you looking for something like this? 

    • 303 posts
    November 26, 2019 6:57 AM EST

    More or less. I want to do it. I don't want to pay an "expert"

    • 303 posts
    November 26, 2019 6:59 AM EST

    And, I understand about backups and working on a live site and all. I have a month of backups. I have cloned the css.

    • Moderator
    • 6923 posts
    November 26, 2019 7:04 AM EST

    Ok my screen is smaller so you will need to tweak for different screen sizes most likely but this should get you started. I did this on my test site in the admin panel theme editor in the theme.css file. I added this to the bottom of that file and clicked both save buttons after.

    #global_page_album-index-browse-photos ul.thumbs.thumbs_nocaptions>li { margin: 3px; } @media (min-width: 1199px) { ul.grid_wrapper>li { width: 270px; } }
    • 303 posts
    November 26, 2019 7:13 AM EST

    You said screen size is an issue. Is this not responsive?

    • Moderator
    • 6923 posts
    November 26, 2019 7:15 AM EST

    It is responsive but I'm no responsive expert. My screen is a notebook computer so that is why I see it at the "media" CSS you see there. That is why you should test it with various devices after trying it. 

    • Moderator
    • 6923 posts
    January 16, 2020 5:55 PM EST

    As noted in our blog and forum post for the 5.0.0rc1 release, we have fixed and improved this. Photo browse now looks better and respects the number of photos set in admin for the album browse.