Wordpress Template HTML CSS Layout Confusion

Posted by Jess McKenzie on Stack Overflow See other posts from Stack Overflow or by Jess McKenzie
Published on 2012-03-22T04:28:33Z Indexed on 2012/03/22 5:29 UTC
Read the original article Hit count: 390

Filed under:

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:

enter image description here

What I Manage To Get:

enter image description here

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>&copy; <a href="/"><?php bloginfo('name');?></a> | <?php echo date('Y');?></p>
        </div>

</div><!--end wrapper-->

</div>   
<!--Live Preview-->

</body>
</html>

Developer IT

Wordpress Template HTML CSS Layout Confusion - Developer IT

Wordpress Template HTML CSS Layout Confusion

html

css

Wordpress

wordpress-theming

Related posts about html

Install usblib package - Ubuntu

Prevent malicious vulnerability scan increasing load on a server

can't install psycopg2 in my env on mac os x lion

Bitnami redmine error SVN

Can the .htaccess file slow down a website to a crawl? If so, are there better ways to solve these problems with different rewrite rules and such?

Related posts about css

HTMLUNIT Facebook javascript warning

$this->headLink() includes duplicated script

How much multiple style sheets slow down to website?

mod_pagespeed is rewriting but not combining

CSS import or multiple CSS files

Categories cloud