Freelance Web/Graphic designer, photographer & community campaigner
Code Snippets

Phogra Theme – CSS Snippets

Various code snippets for the Phogra WordPress theme. The code below has all been used on a live site for a customer which you can view at: lauranewey.com.

Portrait image alignment for Album pages

The CSS code below re-aligns portrait images in the Albums for the Phogra theme, please note that this removes the full screen options in the slide show.

/* portrait alignment and sizing */
#slider img {
max-height: 110% !important;
max-width: 100% !important;
height: auto !important;
width:auto !important;
margin-top: 0px !important;
margin:auto !important;
}

Transparent Sidebar

Transform the sidebar so that it is transparent. Right-click the transparent PNG file (provided below) and upload to your media library. Once uploaded to your media library, copy and paste the URL to the file into the CSS code snippet below.

TRANSPARENT PNG

TRANSPARENT PNG

/* Transparent Sidebar */
#sidebar {
background: url(https://www.yourwebsite.com/wp-content/uploads/sidebar.png) left top repeat;
background: #;
box-shadow: inset 0px 0px 0px 0px #000;
float: left;
text-transform: uppercase;
position: fixed;
left: -244px;
bottom: 0px;
top: 0px;
width: 244px;
z-index: 3;

Turn off Paralax Effect

/* Remove Paralax */
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;

Article written by:

Tech geekery, blogging, volunteering, graphic/web design, photography, digital activism and community-based campaigns are some of the things that I am passionate about.

Leave a Reply

Your email address will not be published. Required fields are marked *