2013 theme – title and description, z-index, image display

  • Hi,
    I picked up a book on 2013 (not much on specifics), I’ve done Joomala and Drupal before, but certian parts of this?????!!??

    Any help would be appreciated:

    I have not been able to get the title and description up where I had it before (centered and to the right of the logo), when I put in the header logo, it threw everything off. I thought I had the z-indexes right, but???? The header is supposed to be 130px in height (Max!), with the dark blue bar on the bottom of it (overlapping it), with the social icons above the blue bar, horizontally (like I have them)

    In addition to all the problems with the title and description;
    How do you get rid of the border on the header?
    How do you get the social icons to actually display?
    and
    How do you get rid of the little square in the upper-left corner of the header and also on the left of the blue bar?
    And the link on the header?

    This is in the style.css file

    .site-header {
    position: relative;
    background-color: rgb(153,204,255);
    z-index: 1;
    }

    .site-header .home-link {
    color: #141412;
    display: block;
    margin: 0 auto;
    max-width: 1080px;
    max-height: 130px;
    padding: 0 5px;
    text-decoration: none;
    width: 100%;
    }

    .site-title {
    font-size: 40px;
    font-weight: bold;
    line-height: 1;
    margin-top: 10px;
    margin-left: 41%;
    padding: 5px 0 10px;
    z-index: 1;
    }

    .site-description {
    font: 300 italic 24px “Source Sans Pro”, Helvetica, sans-serif;
    margin-top: 0;
    margin-left: 41%;
    z-index: 1;
    }

    AT BOTTOM OF FILE….

    .entry-title {
    font-size: 12px;
    }

    header#masthead {
    max-height: 130px;
    z-index: 1;
    }

    .site-header {
    position: relative;
    background-color: rgb(153,204,255);
    max-height: 130px;
    z-index: 1;
    }

    .site-header .home-link {
    color: #141412;
    display: block;
    margin: 0 auto;
    max-width: 1080px;
    max-height: 130px;
    padding: 0 5px;
    text-decoration: none;
    width: 100%;
    }

    header#masthead div#logo img.header-logo {
    float:left;
    background-image: url(images/LogoADig.png);
    margin-top: 20px;
    height: 87px;
    width: 198px;
    border: 0;
    z-index: 999;
    }

    .site-footer {
    float: left;
    background-image: url(images/FooterA.png);
    background-color: #e8e5ce;
    color: #686758;
    font-size: 14px;
    text-align: center;
    max-height: 180px;
    width: 90%;
    }

    header#masthead div#bar img.header-bar {
    float:left;
    background-image: url(images/BlueBar.png);
    margin-top:100px;
    height: 30px;
    width: 980px;
    z-index: 99;
    }
    #header_icons {
    position:relative;
    left:700px;
    bottom: 27px;
    padding-left: 10px;
    padding-right: 10px;
    }
    #header_icons li {
    display:inline !important;
    list-style-type: none;
    float:right;
    margin-right: 35em;
    }

    h1.site-title {
    margin-top: 5px;
    z-index: 1;
    }

    h2.site-description {
    margin-top: 40px;
    z-index: 1;
    }

    .social {
    margin-left:56em;
    margin-top: 5em;
    }

    ====================================================

    THIS IS WHAT I CHANGED IN THE BODY OF THE HEADER.PHP FILE

    <body <?php body_class(); ?>>
    <div id=”page” class=”hfeed site”>
    <header id=”masthead” class=”site-header” role=”banner”>
    ” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”>
    <div id=”logo”>
    <img class=”header-logo” img src=”images/LogoADig.png”/ width=”198″ height=”87″>
    </div>
    <div class=”clear”></div>
    <h1 class=”site-title”><?php bloginfo( ‘name’ ); ?></h1>
    <h2 class=”site-description”><?php bloginfo( ‘description’ ); ?></h2>

    <div id=”bar”>
    <img class=”header-bar” img src=”images/BlueBar.png”/ width=”980″ height=”30″>
    </div>
    <div class=”clear”></div>
    <div id=”header_icons”>
    <img src=”images/FBook.png” width=”28″ height=”24″>
    <img src=”images/Twitter.png” width=”28″ height=”24″>
    <img src=”images/Utube.png” width=”28″ height=”24″>
    </div>
    <div class=”clear”></div>
    <div id=”navbar” class=”navbar”>
    <nav id=”site-navigation” class=”navigation main-navigation” role=”navigation”>
    <button class=”menu-toggle”><?php _e( ‘Menu’, ‘twentythirteen’ ); ?></button>
    “><?php _e( ‘Skip to content’, ‘twentythirteen’ ); ?>
    <?php wp_nav_menu( array( ‘theme_location’ => ‘primary’, ‘menu_class’ => ‘nav-menu’ ) ); ?>
    <?php get_search_form(); ?>
    </nav><!– #site-navigation –>
    </div><!– #navbar –>
    </header><!– #masthead –>

    <div id=”main” class=”site-main”>

    THE PAGE IS AT https://thai.ggvasia.com

  • The topic ‘2013 theme – title and description, z-index, image display’ is closed to new replies.