WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Images not showing on template (3 posts)

  1. FostinWD
    Member
    Posted 4 years ago #

    this is my very first wordpress theme, and I'm having a hard time getting the images to show.

    This is how it is supposed to look:

    PREVIEW

    but this is the way it looks: TEST SITE

    the header is missing...

    this is the code for the header.php:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    <meta content="text/html; charset=UTF-8" http-equiv="Content-type" />
    
    <title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
    
    <meta content="en-us" http-equiv="Content-Language" />
    
    <meta content="no" http-equiv="imagetoolbar" />
    
    <meta content="true" name="MSSmartTagsPreventParsing" />
    
    <meta content="Description" name="description" />
    
    <meta content="Keywords" name="keywords" />
    
    <meta content="Apricotsky Designs" name="author" />
    
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    
    </head>
    
    <body>
    
    <div id="page-container">
    
    <div id="header">
    
    	<div class="tagline">
    		<p class="tagline"><?php bloginfo('description'); ?></p>
    	</div>
    
    	<div class="branding">
    	<h1 id="branding""><img height="29" border="0" width="298" alt="Unknown.Minimal" src="../images/pngs/branding.png" /></h1>
    	</div>
    
    </div>
    
    <div id="main-nav">
    <ul class="menu">	
    
    <?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>
    
    </ul>
    </div>

    and this is the CSS:

    /*
    Theme Name: Unknown.Minimal
    Theme URI: htt://www.bla.com
    Description: A Theme by FLG.
    Version: 1.0
    Author: FLG
    Author URI: htt://www.bla.com
    */
    
    html, body {
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	font-family: Arial, Helvetica, Verdana, Sans-serif;
    	font-size: 11px;
    	text-align: center;
    	color: #666666;
    	background: #ffffff;
    
    }
    
    a:link {
    
    	color: #A00808;
    	text-decoration:none;
    }
    
    a:hover {color:#262626;} 
    
    .hidden {
    	display: none; /* para ocultar elementos cuando nos plazca */
    }
    
    h1 {
    	margin: 0;
    	padding: 0;
    	float: left;
    	margin-top: 25px;
    
    }
    
    h3 {
    	font-family: Georgia, "Times New Roman", Times, serifgeorgia;
    	font-size:11px;
    	font-style:italic;
    	color: #8A0202;
    	margin: 10px 0px 5px;
    }
    
    #header {
    	background-image: url('<?php bloginfo('stylesheet_directory'); ?>/images/jpgs/headerbg-702x56.jpg');
    	height: 56px;
    }
    
    #tagline {
    	background: transparent;
    	width: 150px;
    	float: left;
    }
    
    .tagline {
    	background: transparent;
    	font-size: 12px;
    	font-style: italic;
    	font-family: georgia;
    	padding-top: 25px;
    	float: right;
    	margin-top: 20px;
    	margin-bottom: 0px;
    	padding: 0;
    }
    
    #branding h1 {
    	background: transparent;
    }
    
    #page-container {
    
    width: 702px;
    margin: auto;
    text-align: left;
    
    }
    
    /* ----------------------------------------------------------------NAVIGATION-------------------------------------------------- */
    
    #main-nav { 
    
    	height: 33px;
    	width: 702px;
    	background: #fff;
    border-bottom:1px solid #8E8E8E;
    border-top:1px solid #8E8E8E;
    
     }
    
    ul.menu {
    
    display:block;
    font-size: 16px;
    font-family: Arial;
    font-weight:bold;
    height:0px;
    list-style-type:none;
    width:auto;
    position:relative;
    
    margin:0;
    padding:0;
    }
    
    ul.menu li {
    display:block;
    height:33px;
    float:right;
    margin:0;
    padding:0;
    }
    
    ul.menu li a {
    float:left;
    color:#7F1717;
    text-decoration:none;
    height:33px;
    padding: 7px 7px 0;
    }
    
    ul.menu li a:hover,.current {
    color:#A4A4A4;
    height:33px;
    }
    
    ul.menu .current a {
    color:#fff;
    height:33px;
    font-weight:700;
    }
    
    /* ----------------------------------------------------------------SIDEBAR-------------------------------------------------- */
    
    #sidebar-a {
    
    	padding-top:30px;
    	background: transparent;
    	float: right;
    	width: 258px;
    	line-height: 15px;
    	text-align: justify;
    
    }
    
    #sidebar-a .padding {
    	padding: 20px 0 20px 30px; /* para arreglar bug de ie con respecto al width del content */
    }
    
    #sidebar-a .padding h2 { 
    
    	padding-bottom: 3px;
    	padding-top: 15px;
    	border-bottom:1px solid #8E8E8E;
    	font-family: georgia;
    	font-size: 18px;
    	color: #7F1717;
    	font-style:italic;
    	text-align: right;
    
    } 
    
    ul.a {
    
    list-style: none;
    
    }
    
    ul.a a:link {
    
    font-family: arial;
    font-weight:bold;
    font-size:11px;
    color:#6A6A6A;
    text-decoration:none;
    text-transform:uppercase;
    
    }
    
    ul.a a:hover {
    
    font-family: arial;
    font-weight:bold;
    font-size:11px;
    color:#B9B9B9;
    text-decoration:none;
    
    }
    
    #searchform {
    	background: #fff;
    	width: 225px;
    
    }
    
    #searchform #s {
    	background: #fff;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:11px;
    	color: #A1A1A1;
    	text-align: left;
    	border:1px solid #8E8E8E;
    	width: 190px;
    	height: 20px;
    	padding: 0px 0px 0px 0px;
    	vertical-align: middle;
    }
    
    #searchform #searchsubmit {
    	background: #fff;
    	border:1px solid #8E8E8E;
    	color: #8E8E8E;
    	width: 28px;
    	height: 22px;
    	padding: 0px 0px 0px 0px;
    	font: bold 11px Arial, Helvetica, sans-serif;
    	vertical-align: middle;
    }
    
    /* ---------------------------------------------------------------- CONTENT -------------------------------------------------- */
    
    #content {
    
    	padding-top:30px;
    	background: transparent;
    	margin-right: 258px;
    	line-height: 15px;
    	text-align: justify;
    
    }
    
    #content .padding {
    	padding: 10px; /* para arreglar bug de ie con respecto al width del content */
    	padding-top: 20px;
    }
    
    #content .padding h2 { 
    
    	padding-bottom: 5px;
    	font-family: georgia;
    	font-style:normal;
    	font-size: 16px;
    	color: #7F1717;
    	font-style:italic;
    
    } 
    
    #content .padding p .date {	
    
    	font-family: Arial, Helvetica, Verdana, Sans-serif;
    	font-size: 11px;
    	color: #808080;
    
    }
    
    #post-cat-comments {
    
    	margin-bottom: 40px;
    
    }
    
    .post-cat {
    
    	padding-left: 0px;
    	float:left;
    	font-size: 100%;
    	color: #999999;
    }
    
    .post-comments {
    
    	padding-right: 0px;
    	float: right;
    	font-size: 100%;
    }
    
    .comment {	
    
    	font-family: Arial, Helvetica, Verdana, Sans-serif;
    	font-size: 11px;
    	font-weight: bold;
    	color: #7F1717;
    	float: left;
    }
    
    .tags {
    
    	font-family: Arial, Helvetica, Verdana, Sans-serif;
    	font-size: 11px;
    	color: #808080;
    	float: right;
    }
    
    #content h2 {
    	margin: 0;
    	padding: 0;
    	padding-bottom: 15px;
    
    }
    
    #content .page h2 {
    
    	padding-bottom: 15px;
    
    }
    
    #content p {
    	margin: 0;
    	padding: 0;
    	padding-bottom: 15px;
    
    }
    
    .post-navigation {
    	clear: both;
    	padding: 25px 7px;
    }
    
    .previous-entries {
    	float: left;
    	padding-left: 18px;
    }
    .next-entries {
    	float: right;
    	padding-right: 18px;
    }
    
    /* ---------------------------------------------------------------- IMAGE ALIGN ------------------------------------------- */
    
    img.alignright {float:right; margin:0 0 1em 1em}
    img.alignleft {float:left; margin:0 1em 1em 0}
    img.aligncenter {display: block; margin-left: auto; margin-right: auto}
    a img.alignright {float:right; margin:0 0 1em 1em}
    a img.alignleft {float:left; margin:0 1em 1em 0}
    a img.aligncenter {display: block; margin-left: auto; margin-right: auto}
    
    /* ---------------------------------------------------------------- SINGLE PAGE ------------------------------------------- */
    
    #comments, #respond {
    	border-bottom: 1px dotted #CCCCCC;
    	padding-bottom: 5px;
    }
    
    .commentlist {
    	margin: 10px 0px;
    	padding-left: 20px;
    	line-height: 130%;
    }
    .commentlist li{
    	padding: 5px 10px;
    	position: relative;
    }
    .commentlist .avatar {
    	position: absolute;
    	top: 5px;
    	right: 5px;
    	border: solid 1px #ededed;
    	padding: 1px;
    	background: #fff;
    }
    .commentlist .alt {
    	background: #FFFFFF;
    }
    .commentlist cite, .commentlist cite a, .commentlist cite a:visited {
    	font-weight: bold;
    	font-style: normal;
    	font-size: 11px;
    	color: #A00808;
    }
    .commentlist small {
    	margin-bottom: 5px;
    	display: block;
    	font-size: 11px;
    }
    #commentform {
    	margin-top: 10px;
    	margin-bottom: 10px;
    	font: 11px Arial, Helvetica, sans-serif;
    }
    
    #commentform p {
    	padding: 6px 0px;
    	margin: 0px;
    
    }
    
    #commentform label{
    	font-weight: bold;
    	color: #666666;
    	font-size: 11px;
    }
    #commentform input{
    
    	font-family:Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #666666;
    	width: 153px;
    	height: 15px;
    	background:#FFFFFF;
    	border: 1px solid #8E8E8E;
    	padding: 3px;
    	margin-top: 3px;
    }
    #commentform textarea{
    
    	font-family:Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #666666;
    	width: 400px;
    	background:#FFFFFF;
    	border: 1px solid #8E8E8E;
    	padding: 2px;
    	margin-top: 3px;
    }
    
    #commentform #submit{
    	background: #FFFFFF;
    	font: bold 11px Arial, Helvetica, sans-serif;
    	color: #8E8E8E;
    	border: 1px solid #8E8E8E;
    	float:left;
    	width: 144px;
    	height: 29px;
    }
    
    /* ---------------------------------------------------------------- FOOTER -------------------------------------------------- */
    
    #footer {
    	clear: both;
    	width: 702px; 	/* evita que los divs se superpongan */
    	font-family: Arial;
    	font-size: 11px;
    	color: #666666;
    	border-top: 1px solid #8E8E8E;
    	margin-top:20px;
    	padding: 10px 0px;
    	line-height: 18px;
    
    }
    
    #footer-links {
    
    	float: right;
    
    }
    
    #footer a:link {
    
    	color: #A00808;
    	text-decoration:none;
    }
    
    #footer a:hover {color:#262626;}
  2. alchymyth
    The Sweeper & Moderator
    Posted 4 years ago #

    no need to post this load of css; with a link to your site it easy to get from the browser.

    the image path is wrong; instead of the realtive path, which might just work on the home page (or not), you would use absolute image paths, and wordpress supports this with the 'bloginfo()' tag:
    http://codex.wordpress.org/Template_Tags/bloginfo

    <div class="branding">
    	<h1 id="branding""><img height="29" border="0" width="298" alt="Unknown.Minimal" src="<?php bloginfo('template_url'); ?>/images/pngs/branding.png" /></h1>
    	</div>
  3. FostinWD
    Member
    Posted 4 years ago #

    Oh thank you so much! I'm sorry to post the whole thing, I'm a total begginer.. thanks! It worked.

Topic Closed

This topic has been closed to new replies.

About this Topic