You are not logged in. Please login or register.
PunBB Forums → PunBB 1.2 troubleshooting → header image with each style
Hello
I would like to put a header image that changes with the changing style. Right now I have one image in the main.tpl but it stays the same with each style change. I attempted to add the image to the TR.punhead { section of the .css files of each style, but it didn't work.
Is there a way to create seperate template file that attatches to each .css file so that I can use different images with each style?
Thanks!
Sure. Just add your own replacement tag to the templates (.e.g. <my_logo>) and then add some code to header.php to replace it with your image. Something like this maybe:
// START SUBST - <my_logo>
$tpl_main = str_replace('<my_logo>', '<img src="img/logo/'.$style.'.png'" alt="My cool logo">', $tpl_main);
// END SUBST - <my_logo>If the current style is Oxygen, that code will try to display "img/logo/Oxygen.png". Make sure you insert the code below the replacement for <pun_head> (as $style is defined in that piece of code).
this is probably not strictly punbb related, but did any1 ever try to make random header images? i'm trying to use this javascript to call for random image to be inserted in the header but cant figure out how to do this to be inserted to the css.
.. unles this can be inserted by the server i.e. using php?
<SCRIPT LANGUAGE="Javascript">
<!--
function image() {};
image = new image();
number = 0;
// imageArray
image[number++] = "<img src='../../images/furniture_banner.jpg' border='0'>"
image[number++] = "<img src='../../images/crafts_banner.jpg' border='0'>"
image[number++] = "<img src='../../images/custom_banner.jpg' border='0'>"
image[number++] = "<img src='../../images/gifts_banner.jpg' border='0'>"
// Additional immages can be added here
increment = Math.floor(Math.random() * number);
document.write(image[increment]);
//-->
</SCRIPT>this is the way i use headers in some of my styles, it basicly adds a background image to the header and makes the title and description not visible
just change the url to the header background and the height to match the image
#brdtitle {background: url(../../img/<image>.jpg) no-repeat; height:60px}
#brdtitle P {display:none}
#brdtitle h1 {display:none}Gizzmo: How to make the header image changed randomly in the same style?
Can I make something like this?
#brdtitle {background: url(<?php get_random_header_img_name(); ?>) no-repeat; height:60px}
you cant use php in a css file. and i dont know how someone would go about doin that, anyone else?
unless i can make a separate <style> being echoed by php in header.php
<?php
$file = "all my randon images.txt";
$fp = file($file);
srand((double)microtime()*1000000);
$random_image = $fp[array_rand($fp)];
echo "<style>#brdtitle {background: url(";
echo $random_image;
echo ") no-repeat; height:60px}</style>";
?>
and remove the #brdtitle ref in the css file..
will try..
You can't use php in a stylesheet but you can serve a php script as a stylesheet which amounts to the same thing.
http://www.1976design.com/blog/archive/ … namic-css/
Just google on "dynamic css"
I found a solution! Feel so proud of myself hahaha.
This is how i do it in case some1 is interested:
a) create all the images (same height and width, any names) and put them in /img/headers/
b) Create this php file (random_image.php) and put in in my /style/ directory
<?php
header('Content-type: text/css');
$dir=opendir("/data/4/0/51/132/214947/user/218384/htdocs/kadus/img/headers/"); // actual path of the images to select
$pattern="\.(gif|jpg|jpeg|png|bmp|swf)$";
if(!$dir)
{
die("Failed to read directory");
}
$s=readdir($dir);
$count="0";
$image;
while($s)
{
if(ereg($pattern, $s))
{
$image[$count]=$s;
$count++;
}
$s=readdir($dir);
}
closedir($dir);
// make random number
$limit=count($image);
$limit--;
$randNum=rand(0,$limit);
?>
.pun #brdtitle h1 span{
/* remove slash and* for hidden title
font-size: 0;
text-indent: -1000px;
*/
/* use this if the title is not hidden */
padding-top: 40px;
padding-left: 5px;
padding-bottom:0px;
color: #FFF;
/* */
display:block;
height: 160px;
/* change the height above to fit your actual header img height */
background-image: url(<?="http://your forum.coc/img/headers/".$image[$randNum]; ?>);
background-position: 50% 0;
background-repeat: no-repeat;
margin-left: -5px;
margin-right: -5px;
margin-bottom: -43px;
}In this case, I am using Blue_Lagon.cs. The style above are taken from the blue_lagon_cs.css in the /style/imports/ folder. Therefore, the original entry for the above in the blue_lagon_cs.css should be deleted.
c) open /style/blue_lagon.css and add this somewhere around the top, below the other @import statements
@import url(random_image.php);Thats's it! The same can be applied to all the other stylesheets that you are using.
Thanks for this
A better way to do this would be to simply make the background-image url point to the PHP file, which then echo's out the contents of the randomly selected image file
PunBB Forums → PunBB 1.2 troubleshooting → header image with each style
Powered by PunBB, supported by Informer Technologies, Inc.