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

#websitefail – aughh

Balancing family, work, home, hobbies and anything else into your daily life can be a challenging task. In an ideal world, those things would all mesh together like bread and butter – In an ideal world. In reality, you tend to drop at least one of those things because 24 hours just simply is not enough. My ‘hobby’, for lack of a better term at the moment, is what I’ve left on the floor for a few weeks, or maybe months. So when a bit of inspiration collide with a quick ‘fashonable’ thought, I jump to it (causing my list of ‘things to do today’ to drop into chaos might I add). I’m sure you have all been there too. You get this grandiose  idea that in hindsight is not so grandiose after all.

websitefail

And all this babble leads us to the main context of this post, my incomplete website that I wrote gleefully about last post (check it out here: http://soft-graphix.com/2015sgx.html) The only thing I have left to do that I originally envisioned is the fonts; however I’m so displeased with the result that I think I’m just going back to the drawing board and in a whole new direction.

I did want to share this with you though. Even though I’m going to scrap it and start from scratch I still learned some very cool technique and wanted to share that in case this attempted site inspires anyone else.

Have you had a #websitefail you want to share?

New site: Thoughts and so sorry, it’s been awhile

 So it’s been awhile since my last post… Sorry! I feel like life has been keeping me busy, so busy in fact that I think a whole year has swept past and I’ve neglected WordPress and blogging in general.

Completely unhappy with my google analytic results I’m back to the drawing board on my site – this time working with a responsive layout (not completely unfamiliar with it).

As for my idea of a new layout I would like to remove my current navigation. I do not have alot to offer in terms of pages on my site so instead I would like to have the ‘buttons’ be more images – large images/buttons on a desktop that scale down considerably on a mobile device.

Here’s the desktop draft:

newsite-desktop

I’ve been hitting a wall trying to figure out how to scale the div’s within a container to 100% height with pure css (though I’ve read flexbox is a solution, still wrapping my head around it). At this point I have decided to have large screens display a height in px while the mobile will automatically respond – this probably is not the ‘recommended’ way for a responsive design, but it will work for the time being.

drafted mobile
newsite-smscreen
Here’s the css for desktop view:
@media only screen and (min-width: 768px) {
/* resize height of div */
.dtH350 {
height: 350px;
}
.dtH175 {
height: 175px;
}
}
and the html

< div class=”row” >
< div class=”col-3 dtH350″ >Free Photos< / div >
< div class=”col-6″ >
< div class=”col-6 dtH175″ >Illustrations< / div >
< div class=”col-6 dtH175″ >Nature< / div >
< div class=”col-12 dtH175″ >bottom< / div >
< / div >
…..
< / div >

What that does is size the divs at 350px (or 175px) height on screens with a min-width of 768px and drops that rule for anything smaller.
I’m going for something flashy, fingers are crossed that I can do it as envisioned.
Aside from that, I’ve also set seo goals for my page:
I would like to see at least a 10% increase in organic traffic within 45-60 days after this next update. The web market is actually very saturated with free photo sites. Hopefully once the search engines see my site is more mobile friendly, they will give me a slight boost in position.
I have also tried to be social some of the major social networks.
Will also add more content to my existing pages as well as toss in a few additional (at least that’s the current plan).