Crazy CSS image path problem using a relocated CSS file

  • Resolved ericcarl

    (@ericcarl)


    16 years, 10 months ago

    So let me try and explain this as clearly as I can.

    I am attempting to build a website that utilizes WordPress only for its home page and news archive. All the other pages of my site will be standard HTML with PHP includes for common elements like the header and footer. They won’t be WordPress powered, but I’ll be keeping them in the WordPress root directory for the sake of organization.

    Since these pages, WordPress powered or not, are going to look the same, I decided they should share the same style sheet. However, since WordPress requires its CSS file to exist in the theme’s folder, and I don’t want to be using a theme’s CSS file for all my other non-wordpress powered pages, I created a secondary CSS file in a folder called “styles” in the root WordPress install. I am keeping all my site’s styles in that CSS file and only using the theme’s CSS file so that WordPress recognizes my PHP files as a theme.

    I am also keeping all my site images in an images folder in the root WordPress install, as opposed to the theme’s images folders, because I don’t want all my non-wordpress pages to have to point to images in a themes folder.

    Now the problem I’m having lies in the file path to my images in my relocated CSS file.

    Early in my site development I had the CSS file in the theme folder, with image paths like “../../../images/header.gif” so it would point to the images folder in the root directory. Now that I’m moving all my site styles to this new style sheet file and out of the theme, I updated my image paths accordingly- to “images/header.gif”.

    However, it breaks my images! Even though the style sheet is located one folder into the root WordPress install, just like my images folder, it’s acting like it still exists in my Theme folder.

    What in the world is going on? The image path pointing three folders up should NOT be working. But it does!

    Does WordPress somehow alter CSS image paths even though I’m using a CSS file that isn’t technically part of the theme anymore?

    I’d really appreciate some help with this. Hopefully my explanation of what I’m trying to do makes sense. If not, ask me and I’ll try and clarify. Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter ericcarl

    (@ericcarl)

    Oh, and let me also add that any other file paths in that file, be them image src’s or href’s do NOT need to be pointed up 3 directories to work. It’s only a problem in the CSS file that the page is using. That makes no sense. This is on a unique, brand new html/php file sitting in the root WordPress directory that should be independent of any of the actual WordPress functions.

    Thread Starter ericcarl

    (@ericcarl)

    If it helps, here is a shot of my folder structure:

    https://www.sans-concept.com/images/wp_folders.gif

    Items highlighted are the new files I’ve added to the root WordPress install so that I can have other pages that aren’t running through the wordpress system but still be in the same directory as my home page (the news page/archive powered by WordPress).

    Again, the problem I’m having is that the styles.css file you see there requires an image path of “../../../images/logo.png” to reach the image, even though the images folder is NOT three folders up. It’s acting like that CSS file is buried down in the theme folder.

    Thread Starter ericcarl

    (@ericcarl)

    Sorry guys, so I figured it out and there is a completely logical explanation:

    Apparently those images will display no matter how many directories up I tell the code to look. I don’t understand it, but I can tell it to look up 10 directories and it still finds them.

    Earlier when it WASN’T working and I thought it was supposed to, it was because I wasn’t going up outside the styles directory. D’oh!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Crazy CSS image path problem using a relocated CSS file’ is closed to new replies.