php code inside `<style></style>` definitions

  • why the next code works outside of wordpress, in my localhost directory (www) and when i place the same file inside my wordpress template directory it isn’t able to show the background-image of the /div:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>
    <head>
    <title>Untitled</title>
    <style type="text/css">
    <!--
    #chest{color:red;
    background:yellow;
    background-image: url(<?php echo 'screenshot.png' ?>);
    }
    -->
    </style>
    </head>
    <body>

    <div id="chest">
    <p>mama</p>
    </div>

    </body>
    </html>

    in fact i want to change with php the background of the div accordingly to what cathegory is on.
    can u give me some advice?

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

  • first, and most simply (which is likely the problem), you can’t re-declare the same ID within the same document with css, so for example if you have more than one #content div in the same document, they’re all going to display the same background. (I assume you do since you want to change the background depending on category, unless you’re talking about individual post pages with only one #content div)

    either way, take a look at how something like the default WP theme handles alternating comment div boxes, then work from there, using category template tags if you’re working on a page with more than one post, if it’s a page with one post at a time, it looks like it’s a problem with the path to your image.

    Put the full uri to the image. as in, start with h ttp://domain.com/wordpress/wp-content/themes/yourtheme/screenshot.png

    also, I recommend you use bloginfo(‘template_url’) to get the url to your theme, and then add screenshot.png to that. oh, and most people will put images inside an image dir in the theme, but that’s not going to bork if you don’t.

    Thread Starter da_silva

    (@da_silva)

    ok i can’t find the problem; i created a new theme just for test. I told it ‘testtheme’ i created an index.php,a style.css (empty but it is neccesaryso that activating the theme is possible)and a file.png (anything).

    the index.php is:

    <html>
    <head>
    <title>title</title>
    <style type="text/css">
    #img{background-image: url(file.png);color:orange;}
    </style>
    </head>
    <body>
    <div id="img">some text here
    </div>
    </body>

    it doesn’t load the image but when i put the index.php and file.png outside wordpress (www) the div has as background the image.

    i tried with the bloginfo(‘template_url’) and the full uri it doesn’t work inside the wordpress. Outside it does. Can u make this test on your wordpress and see what’s wrong? Could it be some setting in wordpress?

    ah, and about the duplicating thing, i don’t want to duplicate anything i just want that some definitions of divs to be in the header.php so i can alter them with php and the rest in the style.css. I only tried with the #chest{background-image:<?php echo file.png ?>}, nothing in the main template, just as a test of css, in a file simple as the one above.

    can you provide a link to your site?

    I recommend you not use img for an ID, just because it’s an html tag.

    assuming that file.png is in the theme’s dir, try this:
    <html>
    <head>
    <title>title</title>
    <style type="text/css">
    div#testid { background-image: url(<?php blogurl'template_url'); ?>/file.png); color: orange; }
    </style>
    </head>
    <body>
    <div id="testid">some text here
    </div>
    </body>

    Thread Starter da_silva

    (@da_silva)

    wow, can’t believe it…(unfortunately my site isn’t online ) i seem to get it bit by bit. I tried the following: i placed the file.png in the base wordpress directory, where the directory wp-content resides in. and it works although the index.php is in wordpress\wp-content\themes\test\. Why does this happen? When placed in the style.css the code works. Does it have anything with some global path defined for style.css?

    I could stop here the quest but i’m curious why the index.php from my template can’t take the files from the template directory if css is defined inside it?

    …back again: so this path works :
    wp-content/themes/test/images/file.png and it’s relative with the base directory wordpress is in.
    WI can’t get it…anyone? :”>

    If you use an external stylesheet, the image URLs are relative to the stylesheet’s URL. So if you specify “background.png” in a stylesheet, that means https://domain/wp-content/themes/testtheme/backgroung.png

    If you embed the style information inside a template (and therefore in the HTML document) the URL will be relative to the document’s URL. So it looks for the image at https://domain/background.png

    Therefore you need to specify the full path to the image, i.e. “/wp-content/themes/testtheme/background.png”

    The leading slash means it always treats it as an absolute path. (I’m assuming your site is in the server root directory).

    As suggested above, you can use the bloginfo template tag to produce this path automatically.

    jrawle is right, if your image and css file both in the same dir, url(youimage.jpg) is OK. If outside, should use url(../youimage.jpg).

    Thread Starter da_silva

    (@da_silva)

    it worked finally with the bloginfo() tag but it’s good i went through the whole problem as i’ve learned a few things ;).
    Thanks a lot guys, your suggestions helped a lot.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘php code inside `<style></style>` definitions’ is closed to new replies.

Tags