random hadder/banner with every refresh

  • I have the Illacrimo theme and i really would like to have a random banner/Header I tried alot of different plugins/php edits but nothing seem to work. most of the tutorials say to edit the header.php but the actual image link in my theme goes in the style.css.
    also, with some of the plugins they ask for the ”CSS header ID tag” where can i find it? or is it just the name of the image?

    thank you!

Viewing 10 replies - 1 through 10 (of 10 total)

  • Did you try the random.php file which grabs images from a specific folder a displays it randomly?
    Google the file and you’ll know what I’m talking about.

    What part of the header do you wish to randomly change?

    The whole header? an image in the header? a link in the header?

    If a banner image, then where will the images be placed?

    I can make something for you but i’d need more specifics on what exactly you want to accomplish…

    Thread Starter stixy

    (@stixy)

    yeah I meant the whole upper banner, i found some stuff on the internet to edit my header.php but almost everything is in my style.css like this:

    /**/ * html .Header { height: 500px;} /* */
    .Header { background: url(images/header_1.jpg) repeat-x left top; width: 1000px; position: relative; clear: left; padding:
    0px; min-height:500px;}

    dont know if it helps.

    and im going to try the random.php right now.

    thanks for your help!

    Well i’m still not clear on exactly what you want to do…

    You say banner, yet i’m not sure if you mean the whole header image or just an ad banner that is shown in the header.

    Based on the CSS above i’d guess you want to change the ‘header’ background…

    If you get stuck this is a very basic example, but one you can use pretty easily…

    EXAMPLE::

    <?php
$randomvar = rand(1,5); // Random var becomes a random number from 1 to 5
?>

    Then in your header area…

    EXAMPLE::
    <div class="header" id="myr<?php echo $randomvar; ?>">

    Then in your CSS…

    EXAMPLE::

    .header {
  background-color: ###;
  background-position: ###;
  background-repeat: ###;
}

    Where ### is the value you want… (you’ll need to change it)

    That just sorts out the attributes you want to use for the header…

    So now you set the image with the unique ID…

    EXAMPLE::

    #myr1 {
  background-image: url('your-first-image-URL');
}
    #myr2 {
  background-image: url('your-second-image-URL');
}

    and so on… up until #myr5 ….

    PHP is so flexible you could do it any number of ways, that’s just one..

    Thread Starter stixy

    (@stixy)

    thanks for your help! but when i insert the code my whole header is gone.
    and yeah i want my top banner changed with every refresh.
    I tried many other changes in my php with this like:

    **/ * html .Header { height: 500px;} /* */
    .Header { background: url(images/header_<?php echo(rand(1,2)); ?>.jpg) repeat-x left top; width: 1000px; position: relative; clear: left; padding: 0px; min-height:500px;}

    almost everything is in my style.css , I dont even have an ID in my header.php

    someone said its because the theme I have is build differently(Illacrimo theme by Design Disease)

    The code above is an example, just copying an “EXAMPLE” (which i tried to highlight by putting EXAMPLE above each snippet) will not work, it needs to be adjusted to suit your given template.

    I’m not familiar with your theme…

    Please post the code from your header.php

    PLEASE PLEASE post the code inside backticks as mentioned in the bottom of the box for posting messages…

    **/ * html .Header { height: 500px;} /* */
.Header { background: url(images/header_<?php echo(rand(1,2)); ?>.jpg) repeat-x left top; width: 1000px; position: relative; clear: left; padding: 0px; min-height:500px;}

    You cannot put PHP code inside CSS files.. although it is possible, i don’t believe it is a standard PHP configuration nor would i expect WP to support PHP inside CSS files..

    Thread Starter stixy

    (@stixy)

    oh im sorry, I didnt know that.
    this is in my header.php

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head profile="https://gmpg.org/xfn/11">
<?
$theTitle=wp_title(" - ", false);
if($theTitle != "") {
?>
<title><?php echo wp_title("",false); ?></title>
<?
}
else{
?>
<title><?php bloginfo('name'); ?></title>
<?
}
?>

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/javascript/imghover.js"> </script>
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/favicon.ico" type="image/x-icon" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>

<body>
<div class="BGC">
<!-- start header -->

 <div class="Header"><div class="LS"></div>
  <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
   <p class="Desc"><?php bloginfo('description'); ?></p>
  </div>

 <div class="Menu">
  <div class="MTL"></div><div class="MTR"></div>
   <ul>
   <li><a class="<? echo (is_home())?'on':''; ?>" href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li>
<?php
$pages = wp_list_pages('sort_column=menu_order&title_li=&echo=0');
$pages = preg_replace('%<a ([^>]+)>%U','<a $1><span>', $pages);
$pages = str_replace('</a>','</span></a>', $pages);
echo $pages;
?>
  </ul>
 </div>

    Ok well here’s you header DIV…

    <div class="Header"><div class="LS"></div>
  <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
   <p class="Desc"><?php bloginfo('description'); ?></p>
  </div>

    So above that put…

    <?php
$randomvar = rand(1,5); // Random var becomes a random number from 1 to 5
?>

    Add in the random var, so it now looks like this…

    <?php
$randomvar = rand(1,5); // Random var becomes a random number from 1 to 5
?>
<div class="Header" id="myr<?php echo $randomvar;?>"><div class="LS"></div>
  <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
   <p class="Desc"><?php bloginfo('description'); ?></p>
  </div>

    Now change the CSS line to something like this (in style.css)…

    .Header {
background-repeat:repeat-x;
background-position: left top;
width: 1000px;
position: relative;
clear: left;
padding: 0px;
min-height:500px;
}

    Add the new IDs into the style.css…

    #myr1 {
  background-image: url('image1.jpg');
}
#myr2 {
  background-image: url('image2.jpg');
}
#myr3 {
  background-image: url('image3.jpg');
}
#myr4 {
  background-image: url('image4.jpg');
}
#myr5 {
  background-image: url('image5.jpg');
}

    Of course changing the image names to the ones you want to use…

    ??

    If you’re still confused after the above, you can try the custom functions i’ll be posting in the next few days, if testing all goes well….

    Anyone that has found the above useful might like to know i’ve made a few (TOTALLY FREE) theme functions for handling header images, either IMG or CSS background…

    Should be along the format of …

    wp_rand_img();
    for default behaviour…

    wp_rand_img( $args );
    for customization…

    Then also ….

    wp_rand_css();

    For the CSS background function…

    Still working on it, but happy to post for all to use.. ??

    This was really helpful. I used it to insert random stylesheets to cover all sorts of things.

    Thanks.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘random hadder/banner with every refresh’ is closed to new replies.

Tags