Bulletproof: Can't get Template Header/Image plugin to work

[superpowerup]

I just installed the Template Header/Logo Image plugin, but it's not working properly. I believe I've got it set up right, but the images in the directory I've specified aren't showing up.

Version: Serendipity 1.3.1, recently upgraded from 0.9, I believe.
Style: Bulletproof template, purple (I've just started on a custom user.css but all I've changed so far is a couple colors on the page. No images or other code has been touched).

I installed the plugin and specified a folder in which I placed 3 versions of the exact same image that the purple theme comes with (each a different color) to test out the plugin. So far, it hasn't worked.

Additionally, I've noticed that in the Theme/Style options, when I specify a custom header from my media library, that doesn't work IF I specify a custom user.css BEFORE setting the image. The template keeps showing up with the default Bulletproof-purple image. If I set the custom header image first, then turn on the user.css, the image chosen from the media library will show up. This is a bit unrelated, but I did want to point out the bug I found with it. I started messing around with this while trying to get the plugin to behave.

Am I doing something wrong? Has anyone gotten this plugin to work with the Bulletproof template?

You can view my site here: http://www.superpowerup.com.

Thanks in advance!

[garvinhicking]

Hi!

When you'Re using bulletproof, there's no need for that plugin! Bulletproof itself allows you to specify a header image -- I believe it's method of supplying header images is not compatible with the plugin.

We might need to ask Don or YellowLED on specifics about this kind of implementation...

Regards,
Garvin

[Don Chambers]

I cannot address the plugin issue as I have not tested that plugin with bp.

I do not understand that second issue. Bulletproof loads an image from the media library with the following inline css:

Code: Select all

    <style type="text/css">
        #serendipity_banner {
         background-image: url(/serendipity/uploads/bella_banner.jpg);
         background-position: left top;
         background-repeat: no-repeat;
         }
   </style>

If you choose to use a user stylesheet (which must be named user.css), that stylesheet is loaded after the banner styles above like this:

Code: Select all

<!-- additional user stylesheet: this can be used to override selected styles -->
        <link rel="stylesheet" type="text/css" href="user.css" media="screen" />

So, if you were to specify a user stylesheet only, the banner styles would not be emitted in the HTML (actually, it would be commented out). The same applies to the user stylesheet.

Since the HTML is rendered dynamically, and the order of "banner, then user stylesheet" is fixed in the template, I cannot think of any reason the image would work under one scenario, and not the other.

Could it be a simply cache issue? Are you making your changes in the backend, returning to the front end and DEFINITELY reloading your browser?

[superpowerup]

Thanks for the replies!

So yes, when I noticed the weirdness with the header image, I had been reloading my browser constantly (holding control & shift while reloading).

I should have specified that I wanted to use the header plugin because I'd like to have a random header - with a different header showing up on every reload. I really like the bulletproof template so I'm hoping that there's a way of getting these to play nice with each other.

I originally found another thread on here where someone else was trying to get the same scenario to work, but he never replied with his final results. My guess is that no one has tried this and gotten a successful result yet.

[Don Chambers]

OK, I downloaded the plugin to have a look. It appears to have been written to work with the default, joshua and kubrick templates - but it can be made to work with bulletproof as well using the "default" template selection.

You will need to revise the plugin for this to work with bulletproof due to the order that bulletproof loads its multiple stylesheets.

Beginning on line 128 of serendipty_event_kubrickheader.php, change this:

Code: Select all

                        $eventData .= '#serendipity_banner{' . "\n" .
                          '  background-image: url("' . $img . '");' . "\n" .
                          '  background-repeat: no-repeat;' . "\n" .
                          '  background-position: ' . $pos . ';' . "\n";

to this:

Code: Select all

                        $eventData .= '#serendipity_banner{' . "\n" .
                          '  background-image: url("' . $img . '"); !important' . "\n" .
                          '  background-repeat: no-repeat; !important' . "\n" .
                          '  background-position: ' . $pos . '; !important' . "\n";

The modification is just an override to the purple stylesheet's banner style definitions. Since the purple colorset stylesheet is loaded AFTER this plugin emits styles for #serendipity_banner, the plugin's definition for that id would otherwise get overwritten by the purple colorset.

Keep in mind that the colorset (ie, purple) may still be defining other aspects of the banner area, including its height, borders, etc. You can use the user stylesheet to modify those .

[superpowerup]

Thank you very much for the help. BTW, I downloaded the karma icons from your site, thanks very much for that as well!

Okay, I tried changing the lines you suggested, and it's still not working.

When it wasn't working with the default purple css file, I went ahead and made a copy of the purple css file, renamed it user.css and activated that in the template. I removed the link to the default background image in the css, so the banner would only show the color (in case the link to the banner image in the css was getting in the way of things). Even though I've done this, the plugin still isn't working.

I went ahead and installed the joshua template temporarily just to make sure that the plugin is working -- and with that template it works properly. So this is something to do with the bulletproof template.

I'm willing to keep poking at this, any ideas of something else I could try?

[Don Chambers]

Actually, I just logged in to suggest something similar to what you tried, because it should be a lot easier to remove the background image from the bp template than modify the plugin. I also realized there was a typo. Those !important additions need to come BEFORE the semicolon!!!!!!!!!!!!! ie, should be

Code: Select all

background-image: url("' . $img . '") !important'; . "\n" . 

First of all, turn off the user stylesheet - in fact, turn it off and delete or rename it.

Next, copy the purple stylesheet to a new name, such as mypurple_style.css. Once copied, set that as your colorset.

Next, edit mypurple_style.css and comment out this on line 48:

Code: Select all

    background: #823995 url('img/purple_header.jpg') no-repeat;

In other words, make it

Code: Select all

     /* background: #823995 url('img/purple_header.jpg') no-repeat;*/

That should work. Remember - what the plugin does for images happens BEFORE user.css or mypurple_style.css are ever loaded. If those stylesheets define something for #serendipity_banner, it will override the plugin (unless the !important takes priority).

Glad you liked the karma images!!

[superpowerup]

I changed the code -- but when I changed it in the plugin file, my site will no longer load. Here's the error:

Parse error: parse error, unexpected '.' in /.../plugins/serendipity_event_kubrickheader/serendipity_event_kubrickheader.php on line 129

I had to change it back to the original code you gave me to get things to load again.

With the single change in the css file, the purple header has shown itself again. The background color for the header is gone, but the the header jpg is still there. I even tried deleting the link to the header image, rather than just commenting it out, but that didn't work either. Even though there's no link to it in the css, it's there! Where is it coming from? If I disable the kubrickheader plugin, the image stays. A link to it must be buried somewhere in another bulletproof css file.

Continuing the search...

[Don Chambers]

OK, this must really not be my day. Let me correct the plugin modification I mentioned earlier. This is what SHOULD work:

Code: Select all

                        $eventData .= '#serendipity_banner{' . "\n" .
                          '  background-image: url("' . $img . '") !important;' . "\n" .
                          '  background-repeat: no-repeat !important;' . "\n" .
                          '  background-position: ' . $pos . ' !important;' . "\n";

If this does not work, I sent you a PM... respond to that, and I will do my best to get this working for you.

This change to the plugin should not really be necessary if you follow my latest suggestion - you SHOULD be able to restore the plugin to its original version.

It is IMPORTANT that you follow my last instructions - namely, do NOT use the user stylesheet that is a copy of purple_style.css. Instead, deactivate that option, copy purple_style.css to another name, such as mypurple_style.css, then select THAT stylesheet as your colorset. Also make sure it does not define a background image for #serendipity_banner. I was able to test your site dynamically, and if you follow my suggestions, the image reddish_header.jpg will load (perhaps others if defined by the plugin).

[superpowerup]

Don, thanks so much for your help! I made the changes to the kubrikheader plugin, and all of a sudden everything started working!

I actually didn't need to make a brand new css file -- I am now using a user.css and the random header works great! This is awesome.

I am super happy. Now I better get to work making some real header images!

Thanks again!

[judebert]

Only following along peripherally, but is there any chance we could nail this down in a simple mini-HOWTO for other BP users?

[Don Chambers]

Only following along peripherally, but is there any chance we could nail this down in a simple mini-HOWTO for other BP users?

Doesn't this thread serve that purpose??

For those willing/able to edit css, that is the way to go - actually changing their colorset as I described. However, the most mindless way to do it would be to patch the plugin as shown above. That would not create any conflicts, and SHOULD actually help other templates that have a background image defined when someone would rather use this plugin. Unfortunately, if any other template specifically defines the image dimensions, a user will have no choice but to edit their stylesheet if their random images are a different size.