CSS inline style question

  • Resolved pullman

    (@pullman)


    16 years, 3 months ago

    Hi everybody

    I hope someone can give me some pointers here.

    I use Slidepress in WordPress to publish content on my site through SlideshowPro, which is a flash gallery. Slidepress includes an option to display a message in browsers without flash or java script. It says one can “Display custom html content” in a box.

    The default html content in the box is:

    <p>This SlideShowPro photo gallery requires the Flash Player plugin and a web browser with JavaScript enabled.</p>

    I am trying to insert a background image (or just an image) together with the message.

    The box accepts inline css. For instance:

    <p style="background: blue; color: white;">This SlideShowPro photo gallery requires the Flash Player plugin and a web browser with JavaScript enabled.</p>

    …will make one line of white text against a blue background on that line.

    So I thought that I need to expand the element and added width:950px;height:633px to the inline style. And sure enough, the blue background then covered the container on the site (inside the 1px border).

    But no image appears when I add it. Perhaps I do it wrong? I’ve tried so many ways:

    background: url('.get_bloginfo('template_url').'/images/marasunsetbgr.jpg

    background-image (rest as above)

    I’ve also tried simpler links to the image, like

    url(/images/marasunsetbgr.jpg)

    But nothing works.

    Can someone assist – could it be that the box is limited to the type of html/css it accepts or am I simply linking to the image incorrectly?

    The image is located in the “images” folder of my template’s folder.

    Thanks for any help
    /p

Viewing 5 replies - 1 through 5 (of 5 total)
  • danielgrieve

    (@danielgrieve)

    16 years, 3 months ago

    Hi pullman,

    You’re nearly there, you just need to make sure you use get_bloginfo() within PHP tags. Try this:

    background: url('<?php bloginfo('template_url'); ?>/images/marasunsetbgr.jpg');

    Usually only use get_bloginfo() if you want to store the value, if you want to just echo it to the browser use bloginfo().

    Thread Starter pullman

    (@pullman)

    16 years, 3 months ago

    Hi Daniel

    Thanks very much for the quick reply and also for the tips re usage of get_bloginfo().

    When I try to implement it as you suggest, which I understand is like this:

    <p style="background: url('<?php bloginfo('template_url'); ?>/images/marasunsetbgr.jpg');left top no-repeat">

    …then the image still doesn’t show up. What could be the problem?

    cheers
    /p

    Michael

    (@alchymyth)

    16 years, 3 months ago

    one small problem could be with the semicolon ; after .jpg') before left – there should be a space instead.

    you could also try and nail the image url really hardcoded absolute path – no php – using the same url that you would use to get the image to show in the browser window ( something like http://www.yourwebsite.com/wordpress/wp-content/themes/yourthemename/images/marasunsetbgr.jpg ).

    and then don’t forget to relaod the browser after the changes or to press CTRL F5 (together at the same time) to refresh the browser cache.

    Thread Starter pullman

    (@pullman)

    16 years, 3 months ago

    Hi alchymyth

    Thanks very much for the reply. I’ve tried both your suggestions but the image doesn’t show up.

    Could it be that the form doesn’t accept all types of styling (or would that be unlikely?)?

    Or could it be that, since the default size and width are one line (see my first post above), I have to also include a fuller style with, for instance, also a container etc?

    Could I link to an external style sheet perhaps and what would it have to include?

    Cheers
    /p

    Thread Starter pullman

    (@pullman)

    16 years, 3 months ago

    Hi again
    This is the code that ultimately worked. I had to move the image to another folder, too.
    <p style="width: 950px; height: 633px; background: url('http://philipus.com/images/aberdarebuffaloswtxt.jpg') left top no-repeat"></p>
    /p

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

The topic ‘CSS inline style question’ is closed to new replies.