Community

Forums » SEPHP Help and Tips

Editing the CSS for the photos page

    • 80 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
    • 3861 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
    • 3861 posts
    November 26, 2019 6:52 AM EST

    Are you looking for something like this? 

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

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

    • 80 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
    • 3861 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; } }
    • 80 posts
    November 26, 2019 7:13 AM EST

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

    • Moderator
    • 3861 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.