[SOLVED]Images in Templates and Stylesheet help

[beatonl]

I'm running CMS made simple 1.41 on localhost on my Mac as a development environment. I've been tinkering happily with the stylesheets and templates to change the colours and remove the news box.

But I cannot get an image to display  - either in the Layout: Left sidebar + 1 column stylesheet or in the Left simple navigation + 1 column template.

I *can* get the image to display in the body text of the page through the TinyMCE editor. I've read the documentation and searched through the forum - but either no-one's had the problem (unlikely) or I'm too stupid to recognise the problem described another way (entirely likely) so I'm throwing myself on your mercy for help...

The css code I'm using is

Code: Select all

/*** header ***
we will hide text and replace it with a image
we need to assign a height for it so that the image wont cut off
*/
div#header {
   height: 123px;    /* adjust according your image size */
   background: transparent;          
}

div#header h1 a {
/* you can set your own image here */  
   background: url(http://localhost/Radarlogo.jpg)  no-repeat 0 12px; 
   display: block  
   height: 123px;             /* adjust according your image size */
   text-indent: -999em;  /* this hides the text */
   text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

the url of the image is correct -  I can load the picture directly through that link. and of course it shows up fine if I just whack the link into a regular page.

I've tried tinkering with the "background" attribute - including

• background: transparent url(http://localhost/Radarlogo.jpg)  no-repeat 0 12px
  background-image: url(http://localhost/Radarlogo.jpg)  no-repeat 0 12px

With no success. I've run the code through the CSS validator - and it validates - so I'm totally stumped.

I did have a few problems with permissions when I first installed - but I thought I'd fixed them all.

Any help at all would be fab!

Thanks in anticipation.
Lindsay

[Russ]

Hi beatonl, is the image really in the root of your website?
http://localhost/Radarlogo.jpg
or in the 'uploads' folder somewhere?

What is your html for this?

[beatonl]

Yup - it's really in the root directory.. (long story - basically I wanted it to be as easy to find as possible and have as short an absolute url as possible)

the html I'm using in the body of the page is

Code: Select all

<h2>My Test</h2>

         <img src="../Radarlogo.jpg" alt="" />
<p>This is a test</p>
<p> </p>
<br /> <br />

(Note - replacing http://localhost/ with ../ didn't make any difference to the result)

[Russ]

Could you try just
1.
2. Check the image name and it's extension is exactly as described, e.g. not upper case.
3. Check your webserver logs for any errors

Russ

[beatonl]

Ok tried
Unsurprisingly - that made the image disappear - since it was now looking for a file that didn't exist

The image name and extension are exactly as described - As I mentioned I can get the image to appear on a page if I code the html into the page. I just can't get it to appear if I try to use the stylesheet or template to show the header image..

the Webserver error logs asay

Code: Select all

[Wed Sep 03 10:13:22 2008] [alert] [client ::1] /Applications/xampp/xamppfiles/htdocs/cms/images/.htaccess: order not allowed here, referer: http://localhost/cms/stylesheet.php?cssid=36&mediatype=screen

So I'm guessing that has *something* to do with it.

Thanks for all the help - I'm getting close to the solution I can feel it.

[Russ]

Looks like you don't have rights to it?

Russ

[beatonl]

Yup - and I've just fixed that problem. Now I can see images Yay! But only if I put them in the template - not in the stylesheet . But it's a huge step forward... Now I just need to keep repeating the steps until I figure out what else I'm doing wrong.

Thanks for all the help it's been great!

[Russ]

Glad to see your are getting somewhere, for the CSS it is usually paths to the image and they are relative to the CSS file

Russ

[beatonl]

Well - how it worked I don't know - but I just put the url in again - refreshed everything and now it's all working perfectly  Thanks for the tip about paths having to be relative - back in the bad old days I trained myself to always use absolute paths so I didn't have to worry about where files moved to - but changing to a relative url seems to have worked (probably because I had the url wrong before, and just didn't see it -  and now it's right)

Couldn't be happier - 'cause my image problems aside - it's sweet system to be using.

[Russ]

Glad it is all working
Russ

[twiz]

/* you can set your own image here */ 
   background: url(http://localhost/Radarlogo.jpg)  no-repeat 0 12px;

Also look at "quotation marks" for the URL:

/* you can set your own image here */ 
   background: url("http://localhost/Radarlogo.jpg")  no-repeat 0 12px;

Has caught me more than once.