WordPress.org

Forums

Rotate the Header Image. (31 posts)

  1. Mark (podz)
    Support Maven
    Posted 11 years ago #

    Found a script of Matt's and it works a treat :)
    http://photomatt.net/scripts/randomimage
    I did it like this:
    - Made a folder just for my header images
    - Uploaded the above file into that as 'rotate.php'
    - Uploaded various headers (actually, they are the same just with different colour filters)
    - Changed my #header in wp-layout.css to read like this (part of it)
    #header {
    background-color: Black;
    background-image: url(headers/rotate.php);
    And bingo !
    Different header images.
    So thanks again Matt :)

  2. NuclearMoose
    Member
    Posted 11 years ago #

    podz,
    Good tutorial...how about submitting it to the docs list? ;)

  3. carthik
    Member
    Posted 11 years ago #

    Great! (if only I had some images :) )
    Rotate conjured visions of rotating the same image by some degrees. Random is a better word for what the script does.

  4. Mark (podz)
    Support Maven
    Posted 11 years ago #

    NM - will do tomorrow
    2f .. agreed :)
    Though that's waht Matt called it ;)

  5. WillM
    Member
    Posted 11 years ago #

    He calls it random in the URL you gave, though. I guess the php files are called rotate because a people might have already a random.php to generate random quotes and stuff.

  6. Tarasque
    Member
    Posted 10 years ago #

    For some reason this is not working on my site. I'm not sure if the site is recognizing the rotate.php file.
    I do as they say:
    path - rotate.php
    But for some reason no header is showing up. I decided to disable it until I can find out what is going on...
    By the way, I'm using Kubrick's Template.

  7. Tarasque
    Member
    Posted 10 years ago #

    *bump*
    ;-)

  8. Mark (podz)
    Support Maven
    Posted 10 years ago #

    Have you done exactly as above ?
    If nothing at all appears, the url value in the css could be wrong.

  9. Tarasque
    Member
    Posted 10 years ago #

    Ok, I've tried to do it again without luck. First of all, I'm using Kubrick's Template. On the index.php file it has a CSS with a #header info. I tried modifying that one and after I do I get no header at all, just a blank space.
    I noticed that you mentioned (now that I see it) modifying wp-layout.css, and I noticed as well that inside there are two #header, and one #headerimg. I tried modifying both #header without luck either.
    I also tried using rotate.php on the same directory that index.php is, and also in the same directory that headers folder is.

  10. Anonymous
    Unregistered
    Posted 10 years ago #

    I did the rotate images in my blog, but it seems that it gets stuck to one image when i refresh. I used the code from photomatt then made a folder and inside the folder are my images for the headers and the rotate.php file. I then went to the wp-layout.php and changed it to look like this:
    '#header {
    background: #FFF;
    background-color: White;
    background-image: url(headers/rotate.php);
    background-repeat: no-repeat;
    border-bottom: 0pxx #aba;
    border-left: solid 0px #9a9;
    border-right: solid 0px #565;
    border-top: solid 0px #000;
    letter-spacing: 0.0em;
    margin: 0;
    height: 86px;
    width: 387px;
    }
    #header a {
    display:block;
    height: 100%;
    text-indent:-500em;
    text-decoration:none;
    }
    #header a:hover {
    text-decoration: underline;
    }

  11. Mark (podz)
    Support Maven
    Posted 10 years ago #

    mi327 - url to your site ?

  12. Sandman
    Member
    Posted 10 years ago #

    Anyone had a problem with this actually rotating on a regular basis in Firefox?

  13. Cyndy Otty
    Member
    Posted 10 years ago #

    Nope, I tested the site I had using this script and it seems to work fine in both Firefox and IE. What exactly is the problem you're having?

  14. solarpunk
    Member
    Posted 10 years ago #

    i just tested out, it work for me...i change the path in the php file to work for me since i have the images locate where my theme is.

    this is how i have it in the css file:
    #header {
    background: #90A090;
    background-image: url('rotate.php');
    background-repeat: no-repeat;
    border-bottom: dotted 1px #FFFFFF;
    border-left: dotted 1px #FFFFFF;
    border-right: dotted 1px #FFFFFF;
    border-top: dotted 1px #FFFFFF;
    font-size: 20px;
    height: 225px;
    margin: 0px;
    margin-top: 0px;
    text-align: center;
    width: 100%;
    }

    change this part in the rotage.php to where you have your images locate...this how i have mine
    $folder = 'images/objects/';

  15. sleep
    Member
    Posted 10 years ago #

    A List Apart has A Better Image Rotator using an .ini file.

    I've been setting up my blog, slowly it seems, with this way to rotate some images in the header. This way allows alt=,title=, anchors...

    Working with the latest nightly, on my laptop at home, it works beautifully. Just need to change some paths.

    A different method.

  16. webwide
    Member
    Posted 10 years ago #

    I have random header images on Kubrick! I'm so happy! LOL

    I just edited the header.php file and threw the image folder and PhotoMatt's script in a folder inside the /default theme folder

    I just grabbed a bunch of my motorcycle riding photos and cropped 760x200 pieces of them for my headers. Came out pretty dang good if I don't say so myself!

    http://damnablog.com

    now if I can just figure out how to move the title to the right.... <:-0

  17. sfboarders
    Member
    Posted 10 years ago #

    How do you get this to work with the kubrick theme? I created some jpgs and made the random.php file and put it in a directory called "random-logos" off of the root. Below is what I have for "style.css" in the default/kubrick theme

    #header {
    background-color: #73a0c5;
    background-image: url('random-logos/rotate.php');

    In headers.php I have the following entry:

    body { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgcolor.jpg"); } <?php /* Checks to see whether it needs a sidebar or not */ if ((! $withcomments) && (! is_single()) && (! is_page())) { ?>
    #page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg.jpg") repeat-y top; border: none; } <?php } else { // No sidebar ?>
    #page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgwide.jpg") repeat-y top; border: none; } <?php } ?>
    #header { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/mael-logo-r.jpg") no-repeat bottom center; }
    #footer { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickfooter.jpg") no-repeat bottom; border: none;}

    Not sure what to modify in header.php. Your help is greatly appreciated. TIA

  18. sfboarders
    Member
    Posted 10 years ago #

    NM I figured it out. It needs to be in the theme directory. Awesome mod!!

  19. ptaylor
    Member
    Posted 10 years ago #

    This works a treat thanks,

    Paul

  20. bmccullo
    Member
    Posted 10 years ago #

    I can't seem to get this thing to work at all in firefox. It does just fine in IE, though. I created a directory for the images to be rotated, dropped the rotate.php file into that directory, and called to it from my style.css with

    #banner {
    ...
    background-image: url(images/banners/rotate.php);
    }

  21. mschorn
    Member
    Posted 10 years ago #

    i'm having the same problem with firefox...no rotating going on

  22. andemad
    Member
    Posted 10 years ago #

    Hello,

    Just a follow up for those of you who can't get it to work - I've made a plugin that can do exactly what you're asking for (and other random stuff).

    Rotates images on my site, and works fine for me (tm). It's homepage is http://linux.linux.dk/projects/randomize

  23. Lorelle
    Member
    Posted 10 years ago #

    Very cool. Thanks. This is much requested. Be sure and add the information to the Codex list of plugins and http://www.wp-plugins.net so everyone can know about it.

  24. andemad
    Member
    Posted 10 years ago #

    Thanks Lorelle. Glad you like it :)

    Actually I've already added the plugin there - http://wp-plugins.net/index.php?id=306

  25. Lorelle
    Member
    Posted 10 years ago #

    I also added the link to the new Codex article on Designing Headers so you are getting some coverage. :-)

  26. andemad
    Member
    Posted 10 years ago #

    Wuhuu - great stuff.
    Thanks Lorelle :)

  27. gutielua
    Member
    Posted 10 years ago #

    I can't get it works, It's neceasary to do something else on headers.php?

    #headers{ ?

  28. weepel
    Member
    Posted 10 years ago #

    there's no " wp-layout.css" in my kubrick theme.. and where should i put my "rotate.php"? sorry i'm quite new to wordpress..

    weepel

  29. Lorelle
    Member
    Posted 10 years ago #

    First, begin with the Codex article listed above: http://codex.wordpress.org/Designing_Headers

    In the new version, the style sheet is called style.css and it is found in EVERY Theme, not where the old wp-layout.css was found. So you need to change the styles in your Theme's style sheet, and the header is controlled in the header.php template.

    Better yet, start with these, too:

    Introduction to Blogging
    First Steps with WordPress
    WordPress Lessons
    New to WordPress - Where to Start
    Finding Your CSS Styles
    WordPress Blog Design and Layout
    Using WordPress Themes
    WordPress CSS Information and Techniques
    Creating individual Pages
    Stepping Into Template Tags

  30. fridayteam
    Member
    Posted 9 years ago #

    I am having a problem with this one in firefox, but not IE.

    Firefox did rotate the images, but then seemed to freeze on the last image after displaying them all fine.

    Any ideas?

Topic Closed

This topic has been closed to new replies.

About this Topic