Another Test Site

gaufde · 2016-05-05 07:50:20

Hi Everyone,
I just thought that I would share my Backlight testing site.
http://release.gracesonaufderheide.com

Just like Rod, I have it set up in a subdomain. I don't have all off the different layout options set up like Rod, however, I have been playing a lot with custom CSS and phplugins. I am still fiddling with this site, so some things might be broken for a bit while I try new pieces of code.

Graceson

johnbrks · 2016-05-05 09:53:29

this is cool. could you share a copy of your css and phplugin files? it will make it easier to understand how they work in backlight.
thanks

rod barbee · 2016-05-05 10:00:59

You can directly view Graceson's css file by looking at the page source (right click and choose View Page Source (or similar wording) and looking for the link to his custom css. Click on that. Then look for the section he's marked as /*BACKGROUND*/

gaufde · 2016-05-05 11:15:08

To make it easy, here is the the current code for those two files. Keep in mind that some of doesn't work perfectly yet. I removed parts that I am still trying to figure out.

CSS:

figure:hover .album-title{
	color: #8BD56C;
	}
	
.album-title{
	font-size: 14pt;
	}
	
input[type="submit"], input[type="text"], button, textarea{
	-moz-border-radius: 0 !imortant;
	-webkit-border-radius: 0 !important;
	}
	
button, input[type="submit"] {
	font-weight: bold;
	}
	
button:hover, input[type="submit"]:hover {
	color: #8bd56c;
	}

.foot{
	padding-left: 10%;
	padding-right: 10%px;
	}


#primary-menu li.menu-item a{
	font-weight: bold !important;
	font-size: 12pt !important;
	}


/*HIGHLIGHT MENU*/
.selected {
color: #8BD56C !important;
}



	
/*FOOTER SEARCH*/	
.footsearch{
	max-height: 20px !important;
	line-height: 20px !important;
	max-width: 150px !important;
	font-size: 12px;
	padding-top: 0;
	}
	
/*HEADDER SEARCH*/
.headform{
	width: 120px !important;
	height: 20px !important;
	line-height: 20px !important;
	margin-top: 0;
	font-size: 12px !important;
	display: inline!important;
	}
	
.headbutton{
	width: 20px !important;
	height: 20px !important;
	line-height: 20px;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	padding-left: 5px !important;
	padding-right: 5px !important;
	font-size: 12px !important;
	text-align: center !important;
	display: inline!important;
	}
		
.headfloat{
	float: right;
	z-index: 1;
	position: relative;
	}

@media screen and ( max-width: 1024px ) {
	.headfloat {
		display: none;
	}
}


/*BACKGROUND*/
body {
	background-attachment: fixed, fixed;
	background-image: url("http://gracesonaufderheide.com/phplugins/images/tree.png"),url("http://gracesonaufderheide.com/phplugins/images/goldsmithbackgraound.png");
	background-position: bottom left, bottom right;
	background-repeat: no-repeat, no-repeat;
	background-color: #2f2f2f !important;

	}


/*GRID ICON BACKGROUND*/
#the-grid .grid-icons {
	background-color:rgba(47,47,47,.6);   
   }

phplugins:

 function ttg_navigation( $style, $path ) {
      echo '
      	<div class="headfloat">
	<div id="search" class="collapse clearfix">
	<form action="/backlight/search" method="GET">
	<input type="text" id="q" name="q" placeholder="Photo Search" class="headform" value=""/>
	<button type="submit" class="headbutton"><i class="fa fa-search"></i></button>
	</form>
	</div> <!-- #search -->
	</div>


'; return true;
}

function ttg_head_end( $style, $path ) {
echo '

<script>
$(document).ready(function() {
$("#primary-menu li a").each(function() {
if ($(this).prop("href") == window.location.href) {
$(this).addClass("selected");
}
});
});
</script>
';
} // END

//FOOTER
      function ttg_footer_top( $style, $path ) {
      echo '
        <div class="foot">
       <div id="search" class="collapse clearfix">
<form action="/backlight/search" method="GET">
<input type="text" id="q" name="q" placeholder="Photo Search" class="footsearch" value=""/>
<button type="submit" class="footsearch">Search</button>
</form>
</div> <!-- #search -->

<div>
		<div>	
<p>&copy; 2012-'.date("Y").' Graceson Aufderheide, All rights reserved.<br><a href="http://gracesonaufderheide.com/policies/">Terms, Conditions, and Policies</a></p><div></div>		
	</div>
	 <!-- #footer -->

'; return false;
}

johnbrks · 2016-05-06 11:01:59

thanks much. and thanks for the css viewing info. (i'm not much knowledgeable about css, so this is helpful)

rod barbee · 2016-05-18 02:04:16

Do you mean the navigation in the header? It looks like Graceson had done exactly that with a media query that hide the div he created to hold the search form.

pwpphoto · 2016-05-18 06:20:30

Rod,
I figured it out by looking at your hooks example. I needed to move it to the header area and out of the nav area as tray 1 also has a nav hook and that is what was causing the issue.

rod barbee · 2016-05-18 06:22:44

Graceson put his in a div in the navigation via phplugins. Then in the css he hides it for browser widths 1024px or smaller.

Community @ The Turning Gate

#1 2016-05-05 07:50:20

Another Test Site

#2 2016-05-05 09:53:29

Re: Another Test Site

#3 2016-05-05 10:00:59

Re: Another Test Site

#4 2016-05-05 11:15:08

Re: Another Test Site

#5 2016-05-06 11:01:59

Re: Another Test Site

#6 2016-05-18 02:04:16

Re: Another Test Site

#7 2016-05-18 06:20:30

Re: Another Test Site

#8 2016-05-18 06:22:44

Re: Another Test Site

Board footer