Images not showing on template

  • Resolved fostinwd

    (@fostinwd)


    16 years, 2 months 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;}
Viewing 2 replies - 1 through 2 (of 2 total)
  • Michael

    (@alchymyth)

    16 years, 2 months 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>
    Thread Starter fostinwd

    (@fostinwd)

    16 years, 2 months ago

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

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Images not showing on template’ is closed to new replies.