Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

so I have this in my CSS ...

  #mainnav li:after {
content: url('images/nav-divider.png');
}

obviously I need to have it link to 'bloginfo('template_directory'); /images/nav-divider.png' instead but how do I link that correctly seeing as there is PHP in it?

Thanks,

Josh

share|improve this question
3  
This is a PHP/CSS question, that is not specific to WordPress. –  Chip Bennett Apr 3 at 17:41
    
You could accomplish it using wp_add_inline_style() to alter the #mainnav li:after style once your stylesheets have loaded. –  Pat J Apr 3 at 18:14
1  

2 Answers 2

You can use wp_add_inline_style().

Let's assume you enqueue your css like so

add_action( 'wp_enqueue_scripts', 'add_my_style' );

function add_my_style() {
   wp_enqueue_script( 'my_style', get_template_directory_uri() . '/mystyle.css' );
}

Then you can change the function like so:

function add_my_style() {

   wp_enqueue_script( 'my_style', get_template_directory_uri() . '/mystyle.css' );

   $style = "#mainnav li:after { content: url('{theme_url}/images/nav-divider.png'); }";
   $style .= "#another-example { content: url('{theme_url}/images/example.png'); }";

   $data = str_replace( '{theme_url}', get_template_directory_uri(), $style );

   wp_add_inline_style( 'my_style', $data )
}
share|improve this answer

You can just use a relative path. For example, if your stylesheet is in /wp-content/themes/mytheme/css/mystyles.css and your image is in /wp-content/themes/mytheme/images/nav-divider.png, then your path would be ../images/nav-divider.png.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.