Zenphoto: playing around with the css

So I have used gallery3 project as my gallery portal since 2013, though
the developers have stepped back from it and I was left reluctantly
dragging my feet to find a new method for displaying the gallery section
of soft-graphix.

Zenphoto is an option on my host, and after a quick bit of research, I
decided to give them a try. Reviews looked promising, the community was
active and there are some nice examples of what their gallery is capable
of. In fact, the more I use it, the more excited I am about using it
(although at this point, I’m knee-deep in migrating the existing files
from the gallery3 project to zenphoto – that and my daily life leaves me
with very little time!).

So this post is primarily my learning process in minor css editing to
change the general look of my new gallery page. First, it should be
noted that I copied the default theme page (make sure you activate this theme in http://YOUR-WEB-SITE.com/zp-core/admin-themes.php); we’ll be working off of that.

Here’s a snippet of code from the index.php file:
========================================================

<body>
<?php zp_apply_filter(‘theme_body_open’); ?>

=========================================================
The css for this is located in:
/clickandbuilds/ZenPhoto/themes/YOUR FOLDER*/styles
In my case, “YOUR FOLDER” is copy_of_default

zenphoto-folder

I’m using the default light.css theme. Here’s the default style for:

#main {
text-align: left;
margin: 20px auto;
width: 685px;
background: #fff;
padding: 20px 30px 70px;
border-top: 1px solid #E6E6DF;
border-right: 1px solid #E6E6DF;
border-bottom: 5px solid #E6E6DF;
border-left: 1px solid #E6E6DF;
}

orig-gallery
==========================================================

Lets see what happens when we change the width:
#main {
text-align: left;
margin: 20px auto;
width: 100%;
background: #fff;
padding: 20px 30px 70px;
border-top: 1px solid #E6E6DF;
border-right: 1px solid #E6E6DF;
border-bottom: 5px solid #E6E6DF;
border-left: 1px solid #E6E6DF;
}

100percent
==========================================================

Awesome. So I have located the css to make style changes. At this point, I’m going to end this post (and hopefully remember to continue to the next step) and eat dinner.

My next step is actually going to be to head back to step one and start fresh on ANOTHER complete over-do of my main page as well as continue down the path of migrating images and adding title, tags & descriptions.

So here I leave it, a mess as usual. Setting a deadline for myself: have site redone by this weekend, including styling new gallery page.

Advertisement