1141 posts
  • Bought between 100 and 499 items
  • Exclusive Author
  • Has been a member for 3-4 years
  • Referred between 1 and 9 users
  • Sold between 10 000 and 50 000 dollars
KarmaThemes says

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'); ?>


In that file, there is this:



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.

1141 posts
  • Bought between 100 and 499 items
  • Exclusive Author
  • Has been a member for 3-4 years
  • Referred between 1 and 9 users
  • Sold between 10 000 and 50 000 dollars
KarmaThemes says

bump :/ Help!

27 posts
  • Has been a member for 4-5 years
  • Exclusive Author
  • Europe
Pranick says

It looks like some CSS issue.

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

webkit inpsector

2436 posts
  • Has been a member for 5-6 years
  • Exclusive Author
  • Europe
  • Bought between 10 and 49 items
  • Referred between 100 and 199 users
  • Sold between 100 and 1 000 dollars
  • Envato Studio (Microlancer) Beta Tester
digitalimpact says

@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?

27 posts
  • Has been a member for 4-5 years
  • Exclusive Author
  • Europe
Pranick says

@Pranick – it’s not about Themeforest :)

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

2436 posts
  • Has been a member for 5-6 years
  • Exclusive Author
  • Europe
  • Bought between 10 and 49 items
  • Referred between 100 and 199 users
  • Sold between 100 and 1 000 dollars
  • Envato Studio (Microlancer) Beta Tester
digitalimpact says


@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!

1141 posts
  • Bought between 100 and 499 items
  • Exclusive Author
  • Has been a member for 3-4 years
  • Referred between 1 and 9 users
  • Sold between 10 000 and 50 000 dollars
KarmaThemes says

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

<!-- --> 
).

Yes, I deleted every other background value in the style.css files.

@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?

147 posts
  • Bought between 10 and 49 items
  • Elite Author
  • Exclusive Author
  • Has been a member for 3-4 years
  • Referred between 10 and 49 users
  • Sold between 250 000 and 1 000 000 dollars
FlexiPress says

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 ;)

27 posts
  • Has been a member for 4-5 years
  • Exclusive Author
  • Europe
Pranick says

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

2. Replace all of the dynamic-styles.php’s content with static CSS :
<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.

1141 posts
  • Bought between 100 and 499 items
  • Exclusive Author
  • Has been a member for 3-4 years
  • Referred between 1 and 9 users
  • Sold between 10 000 and 50 000 dollars
KarmaThemes says

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!

by
by
by
by
by
by