Responsive Design Wordpress Site
This week I have been upgrading a client's site to use a responsive design template, in order to make the site mobile- and tablet-friendly. Now that there are so many awesome professional themes out there, I usually spend my time customising one of these instead of building from scratch for clients. This time, I chose to use the Avada theme. My job was to exactly replicate the client's existing site design, just make it responsive.
Luckily, the Avada theme was a pretty close fit, but I had to do a lot of customisations to get it from looking like this:
to this:
There are pros and cons to starting from an existing template, rather than building from the ground up, especially a template such as this one which has lots of stuff hard-baked into the theme. Although the developers have tried to make many customisations available through an in-browser interface, sometimes this actually makes life harder for those of us who don't mind tinkering with CSS and PHP templates. Sometimes it's actually easier to start from more of a blank canvas, or to start with a basic theme and add stuff myself rather than try to unpick what the theme devs have done.
Avada Theme: PrettyPhoto Lightbox Theme Custom Mod
In the case of the Avada theme, they have chosen to hard-bake the PrettyPhoto lightbox into the theme, with very limited customisation options. My client had already been using PrettyPhoto via the plugin route, and they wanted to keep the minimalist style that we had already applied to the old version of the site. As the Avada theme does not allow users to choose and apply the different PrettyPhoto lightbox styles directly, I ended up having to do a bit of a hack to get the lightbox to display without the rounded white borders and the raised rounded buttons. This was easier than trying to unravel all the references to PrettyPhoto in the Avada CSS and templates.
So if anyone out there is looking for a way to do it, I'm posting my modifications here so you can use them on your site, too. There are 2 components to this:
1. Paste this code into your Custom CSS
div.pp_default .pp_content, div.light_rounded .pp_content { background-color: transparent !important; }
and then, using your fave FTP program:
2. Upload these images to replace the contents of Avada > images > prettyPhoto > default
You can have a look at the difference by viewing any image from my client's photo gallery and compare it to the Avada photo gallery. Click on images and you'll see that my version has eliminated a lot of the clutter, and just left a clean, simple photo viewer.
Enjoy, my fellow Wordpress fiddlers!