Can anybody help with Options Framework and CSS with variables?

Hi everybody!

I want to use variables to output the background of certain divs, in that case it’s the body.

So, I’m including this to my header

<?php include ('dynamic-styles.php'); ?>

Nothing changes in the theme, but what’s strange is, as soon as I take a look at the output sourcecode of the site, it tells me that everything got included the right way, like so:

(black is what I chose in the options panel obviously)
I am really confused, because as soon as I type that in the header manually the background changes like it should… 

Can anybody help?
Thanks in advance!

Edit: I used images cause the code output is broken as I type it.

bump :/ Help!

It looks like some CSS issue.

Use webkit inspector and its Computed Style panel to see what’s wrong.

@Pranick – it’s not about Themeforest

@glossycat :

[...]if ($background != 'false') { [..]

Are you sure you need to test against a string and not a boolean?

Also, have you made sure that the CSS isn’t getting overwritten by other declarations?

digitalimpact said
@Pranick – it’s not about Themeforest

So? It’s just a screenshot to show the Computed Style panel.

Pranick said

digitalimpact said
@Pranick – it’s not about Themeforest

So? It’s just a screenshot to show the Computed Style panel.

Misleading, but maybe it’s just me. Now I see what you meant Cheers!

Hi and thanks for your help!

The php itself works, because it outputs the right code:

and as soon as I use it like that: it works (of course without the

<!-- --> 

@Pranick: As I go and inspect the values for body with firebug, this does not even show up in the CSS , but it is written correctly in the header, and as soon as I type it in manually (basically I copy the output that PHP gives me like above and paste it inside the head) it gets recognized and shows up in the CSS part of firebug. That behaviour does not make sense.

If I cannot resolve this, is there any other way to achieve background changes via the theme options panel?

First, make sure you have wp_head() hook exactly before < / head > in your header.php

Then, you can try to paste this code in your functions.php

add_action('wp_head', 'prima_print_customstyles', 1000);
function prima_print_customstyles() {
    $bg = of_get_option('body_background', false);
    if ($bg) {
        $bg_img = $bg['image'] ? 'background-image:url('.$bg['image'].') !important;' : ''; 
        $bg_color = $bg['color'] ? 'background-color:'.$bg['color'].' !important;' : ''; 
        if ($bg_img || $bg_color) {
            echo '<style type="text/css">';
            echo 'body { '.$bg_img.$bg_color.' }';
            echo '</style>';
        }
    } 
}

Let me know if it doesn’t work for you

1. Does this show up in Webkit Inspector? Maybe there’s some Firebug’s bug?

<style>body { background-color: black !important; background-image: none !important } </style>

It is really hard to help you without seeing the code. Maybe PrimaThemes’ code will work.

Hi!

Pranick, it does not show up anywhere… If I change the PHP to static CSS it gets added to the head section as well but nothing happens, does not show up in the inspector again… so it is probably not the PHP code’s fault, but … I don’t know what else, really.

Prima thanks! That works! I had to change the = to : for the background-color, and it works. It’s strange cause it also adds the value to the head section like my version, I don’t know what caused it not to work :/ So basically I can add a new function to my functions.php in order to call the options?

Is this a common way to solve it? Thanks a bunch for your help!