Wordpress Template HTML CSS Layout Confusion
- by Jess McKenzie
I am having huge confusion with a template that I have purchased and I am trying to modify to handle a widget contact form. I am getting close with this but I have now muddled up the CSS or I have a feeling every page has a different CSS structure.
The General Layout:
What I Manage To Get:
HTML View Source:
<div id="innerright">
<div id="home" class="page">
<div id="homeslides">
<div class="welcomeslide">
<h1 class="large">Welcome</h1>
</div>
</div><!-- end home slides -->
</div><!-- end page -->
<div id="portfolio" class="page">
<div class="verticalline">
<div class="scrollprevnext"></div>
</div>
<div class="pageheader">
<h3><span>P</span>ortfolio</h3>
</div><!--end pageheader -->
<div id="portfolioscroller" class="scrollerenabledpage">
<div class="content">
<h5>Recent Work</h5>
<ul class="thumb">
<li><a rel="precision_gallery" href="" title=""><img alt="" src="" /></a></li>
</ul>
</div>
</div><!--end v scroll inner-->
</div><!-- end page -->
<div id="contact" class="page">
<div class="verticalline">
<div class="scrollprevnext"></div>
</div>
<div class="pageheader">
<h3><span>C</span>ontact</h3>
</div><!--end pageheader -->
<div id="contactscroller">
<h5>Get In Touch</h5>
<div id="contactform">content</div>
</div><!--end v scroll inner-->
</div><!-- end page -->
</div><!--end innerright-->
CSS:
CSS
index.php:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title><?php bloginfo('name'); ?></title>
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/style.css" />
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<?php
// jquery will be included by wp_head function as well as scripts and styles by third party plugins
wp_head();
?>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/plugins.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/script.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<?php
// background image if one has been set via options
if (function_exists('get_option_tree')) {
$background_image = get_option_tree('precision_background_image');
//$background_image = '';
$background_color = get_option_tree('precision_background_color');
if ($background_color != '') {
echo '<style>body { background-color:'.$background_color.'; }</style>';
}
}
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.page').each(function(index, element) {
$(this).css('left', index * 500);
});
<?php
// if background is set via the OptionTree then load it first
if ($background_image != '') {
?>
$.vegas({
src:'<?php echo $background_image; ?>',
fade:1000,
complete:function() {
$("#wrapper").fadeIn(1000);
$("#bgpanel").fadeIn(1000);
$('#mainslide').crossSlide(
{
speed: 15,
fade: 1
},
[
<?php echo $slides; ?>
]
)
$('#homeslides').bxSlider({
mode: 'fade',
auto: true,
controls:false,
speed:1000,
pause:5000
});
}
});
<?php
}
else {
// if no background has been set then fade-in the page
?>
$("#wrapper").fadeIn(1000);
$("#bgpanel").fadeIn(1000);
$('#mainslide').crossSlide(
{
speed: 15,
fade: 1
},
[
//ENTER YOUR MAIN SLIDESHOW IMAGES HERE\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
<?php echo $slides; ?>
]
)
$('#homeslides').bxSlider({
mode: 'fade',
auto: true,
controls:false,
speed:1000,
pause:5000
});
<?php
}
?>
//BX SLIDER INNER PAGE SCROLLERS////////////////////////
$('.scrollerenabledpage').each(function(index, element) {
$('#' + $(this).attr('id')).bxSlider({
mode: 'vertical',
easing: 'easeInOutQuint',
auto: false,
controls: true,
prevImage:'<?php echo get_template_directory_uri(); ?>/images/up.png',
nextImage:'<?php echo get_template_directory_uri(); ?>/images/down.png',
infiniteLoop: false,
hideControlOnEnd: true,
pager: true,
pagerType:'short',
pagerShortSeparator:'of',
speed:800,
});
});
//END BX SLIDER INNER PAGE SCROLLERS/////////////////
$('#submit').click(function(e) {
e.preventDefault();
$('form').submit();
});
// contact form
$('form').submit(function(e) {
$('#main').append('<img src="<?php echo get_template_directory_uri(); ?>/images/loader.gif" class="loaderIcon" alt="Loading..." />');
$.post("<?php bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php",
{action:'precision_contact_form_handler', uname:$('input#uname').val(), uemail:$('input#uemail').val(), ucomments:$('textarea#ucomments').val()},
function(data) {
$('#main img.loaderIcon').fadeOut(1000);
if (data.status == "success") {
$('#response').html("Forum has been successfully submitted.");
}
else {
if (data.response != '') {
$('#response').html(data.response);
}
else {
$('#response').html("An error occurred while submitting the form. Please try again.");
}
}
}, "json");
return false;
});
});
//hides contact form labels when a field gets focus
function initOverLabels () {
if (!document.getElementById) return;
var labels, id, field;
labels = document.getElementsByTagName('label');
for (var i = 0; i < labels.length; i++) {
if (labels[i].className == 'overlabel') {
id = labels[i].htmlFor || labels[i].getAttribute('for');
if (!id || !(field = document.getElementById(id))) {
continue;
}
labels[i].className = 'overlabel-apply';
if (field.value !== '') {
hideLabel(field.getAttribute('id'), true);
}
field.onfocus = function () {
hideLabel(this.getAttribute('id'), true);
};
field.onblur = function () {
if (this.value === '') {
hideLabel(this.getAttribute('id'), false);
}
};
labels[i].onclick = function () {
var id, field;
id = this.getAttribute('for');
if (id && (field = document.getElementById(id))) {
field.focus();
}
};
}
}
};
function hideLabel(field_id, hide) {
var field_for;
var labels = document.getElementsByTagName('label');
for (var i = 0; i < labels.length; i++) {
field_for = labels[i].htmlFor || labels[i].getAttribute('for');
if (field_for == field_id) {
labels[i].style.textIndent = (hide) ? '-1000px' : '0px';
return true;
}
}
}
window.onload = function () {
setTimeout(initOverLabels, 50);
};
</script>
<?php
if (function_exists('get_option_tree')) {
$precision_font_family_1 = get_option_tree('precision_font_family_1');
?>
<link href='http://fonts.googleapis.com/css?family=<?php echo $precision_font_family_1; ?>' rel='stylesheet' type='text/css'>
<?php
}
?>
<style>
h1, h2 {
font-family:<?php echo $precision_font_family_1; ?>;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="innerleft">
<div id="header">
<?php
if (function_exists('get_option_tree')) {
$site_logo = get_option_tree('precision_site_logo');
?>
<a href="/" title="<?php bloginfo('name');?>"><img src="<?php echo $site_logo; ?>" alt="<?php bloginfo('name');?>" /></a>
<?php
}
?>
</div><!--end header-->
<?php
if (function_exists('get_option_tree')) {
$precision_slideshow_image = get_option_tree('precision_slideshow_image');
}
?>
<ul id="nav"><!--Navigation-->
<?php
//instead of using wp_nav_menu, we use wp_get_nav_menu_items so that we can store the data in array and re-use it again
//wp_nav_menu(array('theme_location' => 'precision-main-menu', 'container' => 'false'));
$slt_menuItems = wp_get_nav_menu_items( "precision-main-menu" );
$menusItems = array();
foreach ($slt_menuItems as $slt_menuItem) {
$page_title = $slt_menuItem->title;
$menuItem = new stdClass;
$menuItem->title = $page_title;
$menuItem->page_id = $slt_menuItem->object_id;
$menusItems[] = $menuItem;
?>
<li id="<?php echo strtolower($page_title); ?>nav"><a href="#<?php echo strtolower($page_title); ?>"><?php echo $page_title; ?></a></li>
<?php
}
?>
</ul>
<div id="socialMedia">
<ul class="social">
<?php
if (function_exists('get_option_tree')) {
$twitter_link = get_option_tree('precision_twitter_link');
$facebook_link = get_option_tree('precision_facebook_link');
$gplus_link = get_option_tree('precision_gplus_link');
$delicious_link = get_option_tree('precision_delicious_link');
$flickr_link = get_option_tree('precision_flickr_link');
$vimeo_link = get_option_tree('precision_vimeo_link');
$youtube_link = get_option_tree('precision_youtube_link');
$linkedin_link = get_option_tree('precision_linkedin_link');
?>
<!-- start linkedin icon -->
<?php
if($linkedin_link != ''){ ?>
<li><a href="<?php echo $linkedin_link;?>" title="Follow <?php bloginfo('name'); ?> on Linkedin"><img src="<?php echo get_template_directory_uri();?>/images/social-icons/linkedin.png" width="49" height="64" alt="<?php bloginfo('name'); ?> Linkedin"/></a><li>
<?php
}
?>
<!-- end linkedin icon -->
<!--start twitter icon-->
<?php
if ($twitter_link != '') {
?>
<li><a href="<?php echo $twitter_link; ?>" title="Follow <?php bloginfo('name'); ?> on Twitter"><img src="<?php echo get_template_directory_uri(); ?>/images/social-icons/twitter.png" width="49" height="64" alt="<?php bloginfo('name'); ?> Twitter" /></a></li>
<?php
}
?>
<!--end twitter icon-->
<!--start facebook icon-->
<?php
if ($facebook_link != '') {
?>
<li><a href="<?php echo $facebook_link; ?>" title="Follow <?php bloginfo('name'); ?> on Facebook"><img src="<?php echo get_template_directory_uri(); ?>/images/social-icons/facebook.png" width="49" height="64" alt="<?php bloginfo('name'); ?> Facebook" /></a></li>
<?php
}
?>
<!--end facebook icon-->
<!--start google plus icon-->
<?php
if ($gplus_link != '') {
?>
<li><a href="<?php echo $gplus_link; ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/social-icons/google_plus.png" width="16" height="16" alt="google+" /></a></li>
<?php
}
?>
<!--end google plus icon-->
<!--start delicious icon-->
<?php
if ($delicious_link != '') {
?>
<li><a href="<?php echo $delicious_link; ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/social-icons/delicious.png" width="16" height="16" alt="delicious" /></a></li>
<?php
}
?>
<!--end delicious icon-->
<!--start flickr icon-->
<?php
if ($flickr_link != '') {
?>
<li><a href="<?php echo $flickr_link; ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/social-icons/flickr.png" width="16" height="16" alt="flickr" /></a></li>
<?php
}
?>
<!--end flickr icon-->
<!--start vimeo icon-->
<?php
if ($vimeo_link != '') {
?>
<li><a href="<?php echo $vimeo_link; ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/social-icons/vimeo.png" width="16" height="16" alt="vimeo" /></a></li>
<?php
}
?>
<!--end vimeo icon-->
<!--start youtube icon-->
<?php
if ($youtube_link != '') {
?>
<li><a href="<?php echo $youtube_link; ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/social-icons/youtube.png" width="16" height="16" alt="youtube" /></a></li>
<?php
}
?>
<!--end youtube icon-->
<?php
}
?>
</ul>
</div>
</div><!--end innerleft-->
<div id="innerright">
<?php
if (function_exists('get_option_tree')) {
$precision_home_page_option = get_option_tree('precision_home_page');
$precision_home_page = strtolower(get_the_title($precision_home_page_option));
if ($precision_home_page == '') {
$precision_home_page = 'home';
}
$precision_contact_page_option = get_option_tree('precision_contact_page');
$precision_contact_page = strtolower(get_the_title($precision_contact_page_option));
if ($precision_contact_page == '') {
$precision_contact_page = 'contact';
}
}
foreach ($menusItems as $menuItem) {
?>
<div id="<?php echo strtolower($menuItem->title); ?>" class="page">
<?php
if (strtolower($menuItem->title) == $precision_home_page) {
?>
<div id="homeslides">
<?php
$page_data = get_page($menuItem->page_id);
$content = apply_filters('the_content', $page_data->post_content);
echo $content;
?>
</div><!-- end home slides -->
<?php
}
else {
?>
<div class="verticalline">
<div class="scrollprevnext"></div>
</div>
<div class="pageheader">
<h3><span><?php echo substr($menuItem->title, 0, 1); ?></span><?php echo substr($menuItem->title, 1); ?></h3>
</div><!--end pageheader -->
<?php
$classes = '';
if (strtolower($menuItem->title) == $precision_contact_page) {
?>
<div id="<?php echo strtolower($menuItem->title); ?>scroller">
<?php
$page_data = get_page($menuItem->page_id);
$content = apply_filters('the_content', $page_data->post_content);
echo $content;
?>
</div><!--end v scroll inner-->
<?php
}
else {
$classes = 'scrollerenabledpage';
?>
<div id="<?php echo strtolower($menuItem->title); ?>scroller" class="<?php echo $classes; ?>">
<?php
$page_data = get_page($menuItem->page_id);
$content = apply_filters('the_content', $page_data->post_content);
echo $content;
?>
</div><!--end v scroll inner-->
<?php
}
}
?>
</div><!-- end page -->
<?php
}
?>
</div><!--end innerright-->
<div id="footer">
<p>© <a href="/"><?php bloginfo('name');?></a> | <?php echo date('Y');?></p>
</div>
</div><!--end wrapper-->
</div>
<!--Live Preview-->
</body>
</html>
