Background Image ( Wordpress theme) not showing in Xampp

Problems with the Windows version of XAMPP, questions, comments, and anything related.

Background Image ( Wordpress theme) not showing in Xampp

Postby rake » 27. January 2011 08:06

Hello everyone!


Sorry I posted this in wrong section earlier...

I am pulling my hairs now.. please help me, I am little new to this..


I built a wordpress theme in Dreamweaver. It all went fine. I created all required files and style.css
All fonts are styled according to css. I see background image in dreamweaver.. BUT when I view it in xampp, I can see only fonts are placed accordingly to style.css but I CAN NOT see background image anywhere on my page

I thought I had path problem, but I tried with another theme downloaded and yet same problem, no background images..

What I am doing wrong? Please have patience with me and suggest me soon.

Kind Regards
Rake
rake
 
Posts: 4
Joined: 27. January 2011 07:52

Re: Background Image ( Wordpress theme) not showing in Xampp

Postby Sharley » 27. January 2011 08:38

Sounds like a path issue.

If your paths start with a slash then they will give error in XAMPP as they will try and be found in the htdocs (DocumentRoot) folder not your wordpress folder.

Check the \xampp\apache\logs\error.log file for clues which paths may be affected.

You will need to rectify these in DreamWeaver and Wordpress so they are relative to the folder that calls them and not absolute paths that start in the root folder.

Also I suspect that the Wordpress forums may have had many posts on this issue.

DreamWeaver may be a Google search for others who have had this issue.

One possible solution without changing the paths is to create a VirtualHost and then you will be able to select the DocumentRoot and Directory you will use for WordPress.

Advance Search these English XAMPP for Windows forums for help with vhosts

Good luck and best wishes.
User avatar
Sharley
AF Moderator
 
Posts: 3316
Joined: 03. October 2008 05:10
Location: Yeppoon, Australia Time Zone: GMT/UTC+10
Operating System: Win 7 Pro 32bit/XP Pro SP3

Re: Background Image ( Wordpress theme) not showing in Xampp

Postby rake » 27. January 2011 09:31

Hi Sharley,

Thank you for your time. I did everything.

Here is the css file.

Code: Select all
body {
   font: 75%/150% "Trebuchet MS", Tahoma, Arial;
   color: #333333;
   background: #FFFFFF url(images/main-bg.gif);
   margin: 0px;
   padding: 0px 0px 40px;
}
a {
   color: #CC6600;
   text-decoration: none;
}
a:visited {
   color: #CC6633;
   text-decoration: none;
}
a:hover {
   color: #FF6600;
   text-decoration: underline;
}
p {
   padding: 0px 0px 15px;
   margin: 0px;
}
h1 {
   margin:0px;
   background: url(images/header-icon.gif) no-repeat;
   padding-left: 70px;
   height: 60px;
   font: bold 36px/100% "Trebuchet MS", Tahoma, Arial;
   color: #c9eefe;
}
h1 a{
   color: #c9eefe;
   text-decoration: none;
}
h1 a:visited{
   color: #c9eefe;
   text-decoration: none;
}
h1 a:hover{
   color: #ffffff;
   text-decoration: none;
}
h2 {
   color: #59770e;
   margin: 0px 0px 2px;
   border-bottom: 1px dotted #CCCCCC;
   letter-spacing: -1px;
   font: normal 190%/100% "Trebuchet MS", Tahoma, Arial;
   padding-bottom: 3px;
}
h2 a, h2 a:visited {
   color: #59770e;
   text-decoration: none;
}
h2 a:hover {
   color: #FF6600;
   text-decoration: none;
}
h3 {
   font: normal 140%/100% "Trebuchet MS", Tahoma, Arial;
   color: #758d38;
   margin: 10px 0px 5px;
}
form {
   margin:0px;
   padding:0px;
}
#page {
   margin: 0px auto;
   width: 760px;
   border-bottom: 5px solid #d5e6eb;
   border-left: 5px solid #d5e6eb;
   border-right: 5px solid #d5e6eb;
   background: #FFFFFF url(images/content-bg.gif) repeat-y;
}
#header {
   background: #0FACEA url(images/header-bg.jpg) no-repeat;
   height: 170px;
   border-bottom: 3px solid #59780a;
   position: relative;
}
#headerimg {
   position: relative;
   padding: 30px 0px 0px 40px;
   height: 60px;
}
#headerimg .description{
   position: absolute;
   left: 110px;
   bottom: 3px;
   color: #c9eefe;
   font-size: 14px;
}
#nav {
   list-style: none;
   margin: 0px;
   position: absolute;
   right: 10px;
   bottom: 0px;
}
#nav li {
   float: left;
   margin-left: 5px;
}
#nav a {
   color: #ffffff;
   text-decoration: none;
   background: #6b9a11 url(images/nav-button-bg.gif) repeat-x;
   padding: 5px 15px;
   font: bold 14px/100% Arial, Helvetica, sans-serif;
   border-top: 1px solid #AFCD69;
   border-left: 1px solid #AFCD69;
   border-right: 1px solid #AFCD69;
   display: block;
}
#nav a:visited {
   color: #ffffff;
   text-decoration: none;
}
#nav a:hover {
   color: #000000;
}
#content {
   padding: 10px 0px 30px 20px;
   float: left;
   width: 485px;
   overflow: hidden;
}
.post {
   clear:both;
   padding-top: 10px;
}
.post-date {
   width: 45px;
   height: 49px;
   float:left;
   background: url(images/date-bg.gif) no-repeat;
}
.post-month {
   font-size: 11px;
   text-transform: uppercase;
   color: #FFFFFF;
   text-align: center;
   display:block;
   line-height: 11px;
   padding-top: 2px;
   margin-left: -3px;
}
.post-day {
   font-size: 18px;
   text-transform: uppercase;
   color: #999999;
   text-align: center;
   display:block;
   line-height: 18px;
   padding-top: 7px;
   margin-left: -3px;
}

.post-title {
   float: left;
   margin-left: 10px;
   width: 430px;
}

.entry {
   clear: both;
   padding-top: 10px;
}

.post-cat {
   background: url(images/mini-category.gif) no-repeat left center;
   padding-left: 18px;
   float:left;
   font-size: 95%;
   color: #999999;
}
.post-comments {
   background: url(images/mini-comments.gif) no-repeat left center;
   padding-left: 18px;
   float: right;
   font-size: 95%;
}
.post-calendar {
   background: url(images/mini-calendar.gif) no-repeat left center;
   padding-left: 18px;
   float: right;
   font-size: 95%;
   color: #999999;
}
.post-content {
   clear: both;
   padding-top: 10px;
}
.navigation {
   clear: both;
   padding: 10px 0px;
}
.navigation a, .navigation a:visited {
   color: #59770e;
}
.previous-entries {
   float: left;
   padding-left: 18px;
   background: url(images/mini-nav-left.gif) no-repeat left center;
}
.next-entries {
   float: right;
   padding-right: 18px;
   background: url(images/mini-nav-right.gif) no-repeat right center;
}
#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: #f1fedb;
}
.commentlist cite, .commentlist cite a, .commentlist cite a:visited {
   font-weight: bold;
   font-style: normal;
   font-size: 120%;
   color: #CC6600;
}
.commentlist small {
   margin-bottom: 5px;
   display: block;
   font-size: 87%;
}
#commentform {
   margin-top: 10px;
   font: 110% Arial, Helvetica, sans-serif;
}
#commentform p {
   padding: 6px 0px;
   margin: 0px;
}
#commentform label{
   font-weight: bold;
   color: #666666;
   font-size: 100%;
}
#commentform input{
   width: 153px;
   background:#f1fedb;
   border: 1px solid #bdd77f;
   padding: 3px;
   margin-top: 3px;
}
#commentform textarea{
   width: 478px;
   height: 115px;
   background:#f1fedb;
   border: 1px solid #bdd77f;
   padding: 2px;
   margin-top: 3px;
}
#commentform textarea:focus, #commentform input[type="text"]:focus {
   background: #ffffff;
}
#commentform #submit{
   background: url(images/btn-bg.gif) no-repeat;
   font: bold 12px Arial, Helvetica, sans-serif;
   color: #FFFFFF;
   border: none;
   float:right;
   width: 144px;
   height: 29px;
}
#sidebar {
   float: right;
   padding: 0px 10px 20px 0px;
   width: 220px;
}
#searchform {
   background: #bcd67e url(images/searchform-bg.gif) repeat-x;
   width: 220px;
   padding: 10px 10px 10px 10px;
   float:right;
}
#searchform #s {
   border:1px solid #203346;
   width: 135px;
   height: 22px;
   padding: 2px 5px 0px 5px;
   border: 1px solid #bed881;
   background: #e9facc;
   vertical-align: middle;
}
#searchform #searchsubmit {
   background: url(images/search-btn-bg.gif) no-repeat;
   border: none;
   width: 28px;
   height: 24px;
   font: bold 12px Arial, Helvetica, sans-serif;
   color: #FFFFFF;
   vertical-align: middle;
}
#searchform label {
   font-size: 11px;
   color: #41550e;
}
#sidebar h3 {
   font: normal 140%/100% "Trebuchet MS", Tahoma, Arial;
   color: #758d38;
   margin: 10px 0px 5px;
}
.ul-cat {
   list-style: none;
   margin:0px 0px 15px;
   padding:0px;
   border-bottom: 1px solid #dceeb7;
}
.ul-cat li{
   margin: 0px;
   padding: 2px 0px 2px 20px;
   border-top: 1px solid #dceeb7;
   background: url(images/mini-category.gif) no-repeat left center;
}
.ul-cat li a, .ul-cat li a:visited{
   color: #495233;
   text-decoration: none;
}
.ul-cat li a:hover{
   color: #FF6600;
   text-decoration: none;
}
.ul-archives {
   list-style: none;
   margin:0px 0px 15px;
   padding:0px;
   border-bottom: 1px solid #dceeb7;
}
.ul-archives li{
   margin: 0px;
   padding: 2px 0px 2px 20px;
   border-top: 1px solid #dceeb7;
   background: url(images/mini-monthly-archive.gif) no-repeat left center;
}
.ul-archives li a, .ul-archives li a:visited{
   color: #495233;
   text-decoration: none;
}
.ul-archives li a:hover{
   color: #FF6600;
   text-decoration: none;
}
#footer {
   clear: both;
   background: #048DB4 url(images/footer-bg.gif) no-repeat;
   color: #ACD7EE;
   font-size: 95%;
   line-height: 130%;
}
#footer a, #footer a:visited{
   color: #ffffff;
}
#footer .left-col{
   width: 240px;
   float: left;
   margin-left: 10px;
}
#footer .right-col{
   width: 220px;
   float: right;
   padding-right: 10px;
   padding-left: 10px;
   background: url(images/footer-right-bg.gif) no-repeat;
}
#footer h4 {
   font: normal 146%/100% "Trebuchet MS", Tahoma, Arial;
   color: #9cdbfb;
   margin: 10px 0px 5px;
}
.recent-comments {
   list-style: none;
   margin: 0px;
   padding: 0px;
   line-height: 110%;
}
.recent-comments li{
   background: url(images/mini-footer-comments.gif) no-repeat;
   padding: 0px 0px 10px 20px;
}
.recent-comments a{
   font-size: 105%;
   line-height: 130%;
   font-weight: bold;
}
.recent-posts {
   list-style: none;
   margin: 0px;
   padding: 0px;
   font-size: 92%;
   line-height: 110%;
}
.recent-posts li{
   background: url(images/mini-footer-post.gif) no-repeat;
   padding: 0px 0px 10px 20px;
}
.recent-posts a{
   font-size: 115%;
   line-height: 130%;
   font-weight: bold;
}
#credits {
   margin: 0px auto;
   width: 760px;
   color: #7a9299;
   font-size: 85%;
   line-height: 120%;
}
#credits a, #credit a:visited{
   color: #048db4;
}
.rss {
   background: url(images/mini-rss.gif) no-repeat left center;
   padding-left: 18px;
   padding-bottom: 2px;
   margin-left: 10px;
}
.left {
   float: left;
}
img.left, a img.left {
   float:left;
   margin: 4px 10px 5px 0px;
   border: 1px solid #bdd77f;
   padding: 3px;
   background: #FFFFFF;
}
a:hover img.left{
   border-color: #FF6600;
   background: #FF6600;
}
.right {
   float: right;
}
img.right, a img.right {
   float:left;
   margin: 4px 10px 5px 0px;
   border: 1px solid #bdd77f;
   padding: 3px;
   background: #FFFFFF;
}
a:hover img.right{
   border-color: #FF6600;
   background: #FF6600;
}
.clear {
   clear:both;
}
hr.clear {
   clear:both;
   visibility: hidden;
   margin: 0px;
   padding: 0px;
}
img.img_border, a img.img_border {
   border: 1px solid #bdd77f;
   padding: 3px;
   background: #ffffff;
}
a:hover img.img_border{
   border-color: #FF6600;
   background: #FF6600;
}


----------------------------------
I created a site in Dreamweaver, and everything added in order, zipped it and installed on Wordpress and run through xampp... I think the file path is okay, all images are inside the folder images

Here is index.php

Code: Select all
<?php get_header(); ?>

   <div id="content">

   <?php if (have_posts()) : ?>

      <?php while (have_posts()) : the_post(); ?>

      <div class="post">
         <div class="post-date"><span class="post-month"><?php the_time('M') ?></span> <span class="post-day"><?php the_time('j') ?></span></div>
         <div class="post-title">
            <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
            <span class="post-cat"><?php the_category(', ') ?></span>
            <span class="post-comments"><?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></span>
         </div>
         <div class="entry">
            <?php the_content('Read the rest of this entry &raquo;'); ?>
         </div>
      </div>

      <?php endwhile; ?>

      <div class="navigation">
         <span class="previous-entries"><?php next_posts_link('Older Entries') ?></span>
         <span class="next-entries"><?php previous_posts_link('Newer Entries') ?></span>
      </div>

   <?php else : ?>

      <h2>Not Found</h2>
      <p>Sorry, but you are looking for something that isn't here.</p>

   <?php endif; ?>

   </div>
   <!--/content -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>


----

I hope I will sort out this soon before I totally give up on this...
I searched in Google few hours ago, but tried everything.. :(
rake
 
Posts: 4
Joined: 27. January 2011 07:52

Re: Background Image ( Wordpress theme) not showing in Xampp

Postby Sharley » 27. January 2011 09:44

Just glanced through that CSS and the paths look fine.

Silly question but did you clear your browser cache (temporary internet files)?

Someone here who is familiar with Wordpress may be able to help you further.

Best wishes.
User avatar
Sharley
AF Moderator
 
Posts: 3316
Joined: 03. October 2008 05:10
Location: Yeppoon, Australia Time Zone: GMT/UTC+10
Operating System: Win 7 Pro 32bit/XP Pro SP3

Re: Background Image ( Wordpress theme) not showing in Xampp

Postby rake » 27. January 2011 12:04

EDIT:


Made it, installed the wordpress but got this error

Code: Select all
/** The name of the database for WordPress */ define('DB_NAME', 'wordpress_db'); /** MySQL database username */ define('DB_USER', 'wordpress_user'); /** MySQL database password */ define('DB_PASSWORD', 'typeyourpasswordhere'); /** MySQL hostname */ define('DB_HOST', 'localhost');
Fatal error: Call to undefined function wp() in D:\xampp\htdocs\wordpress\wp-blog-header.php on line 14
rake
 
Posts: 4
Joined: 27. January 2011 07:52

Re: Background Image ( Wordpress theme) not showing in Xampp

Postby piyushkumar » 24. May 2011 07:26

hey rake,
I had similar problem, but in xampp for ubuntu. I found that lampp as unable to access the image (like back.jpg) due to permission issues of the image. Changing access permissions of the image did it for me. Maybe that can help..
piyushkumar
 
Posts: 1
Joined: 24. May 2011 07:18


Return to XAMPP for Windows

Who is online

Users browsing this forum: No registered users and 41 guests