(and customization inspiration from our customers!)
When we launched <em>press, we were very excited to see how our customers would make our themes and plugins their own, through the various customization options we gave them. What we weren’t expecting is for our customers to take such a huge interest in what we lovingly refer to as “Code Hacks”—short snippets of CSS that can be customized with minimal code knowledge for a truly unique look.
It started with one simple request, one simple tweak. And as more and more customers wrote to our Help Desk and swapped ideas in our customer Facebook group—sharing their own creative ideas for tweaking our themes—our private database of code hacks grew. So we published them on our website as our Code Hacks Library. Now it has become a special part of what we do here at <em>press. Today we’re sharing our current favorite Code Hacks from our library, and some customization inspiration from our customers.
Theme Hacks
Our best-selling theme is Presidio, and it shows, as most of our code hack requests are specifically for that theme. Most of the code hacks featured below are for Presidio, but we’ll point you to the same code hacks for other themes where applicable!
Customize the featured post
One of our favorite features of our Presidio theme is the ability to feature a post — whether it’s always your latest, or one you want to highlight from your archives. Many of our customers have taken this feature a step further and made it a truly unique part of the design of their blog. Try adjusting the featured image to suit your photography perfectly, or customize the post details with a new background color or border.
See it in action: Strawberry Chic, My Style Vita, Sarah Joy, Tara Carr, Essellesse
Add borders to widgets
We love the look of swapping out widget backgrounds for borders instead. It’s a fun way to add a pop of color but still keep the overall look light and airy. Experiment with different border widths, and use 0to255.com to find lighter shades of your accent color that could work well for borders.
See it in action: Sophisticaition
Update background colors
We use a light gray background site-wide for various details — widgets, interstitials, and scrolling navigation, all of which can be adjusted using one of our favorite code hacks. If you want to add a pop of brighter color to your site, try adjusting just one, like Amanda did with her scrolling navigation. Or, choose a lighter color and switch them all out for a unique look. (Swap the navigation bar and footer background colors in Brevier, over here!)
See it in action: Everyday Life on Wheels, My Style Vita, Tara Carr, Sarah Joy, Strawberry Chic, Essellesse, Dani Thom
Add a background to the header
Want your header to stand out a bit more? We love the idea of adding a background color! This one has a few more pieces to pay attention to, but we think the end result is worth it. (We’ve got one for Miramar, too!)
See it in action: Sarah Joy, Dani Thompson
Change the Read More button color
Though our One Color Pack and Two Color Pack plugins can help you swap out the Read More button color (among other things!), there’s only so many color options we can code in. Maybe you’re looking for a specific color, and you just want it for your buttons. This code hack will help you do just that! We have similar code hacks for Miramar and Archer as well.
See it in action: Kolyssa Teal
Plugin Hacks
Most of our code hacks for plugins are for our customers who aren’t using a theme created by<em>press. Since we have control over our own themes, we’re able to add styling as needed to make sure our plugins look pixel perfect across our own themes and inherit the styling we want. With other themes, our plugins simply have to inherit the existing styling from that theme. Sometimes, it looks great, while other times, fonts and sizing need to be tweaked a little. Enter our code hacks!
Shop the Post
The best place to start if you want to customize our Shop the Post plugin is our tutorial on styling the plugin with CSS. It will walk you through making it your own step by step! For something a little more plug-and-play, try out our code hacks for changing or removing the border and editing the title.
See it in action: A Sparkle Factor
Newsletter Pop Up
Have you seen pop ups with a photo on the side that spans from top to bottom? By default, our pop up has some padding around the entire box, but with our code hack, you can move it to the edges of the box. A small change, but we love the look! This works best when your image is taller than the content on the right.
See it in action: Victoria McGinley
Grid
This one is for Grid users who aren’t using a theme by <em>press. By default, Grid will inherit styling from your theme based on heading and paragraph styling, but it may not be the specific fonts you want. You can use our code hacks to change the filter menu styling, and you can hide the page title — or swap out the provided CSS with your favorite fonts instead.
See it in action: A With Love
Have you used our Code Hacks Library to create something amazing on your blog? Share your link below in the comments — we’d love to see! Is there anything you want us to add to our library, or a coding tutorial you want to see on our blog in the future?
