• hi,

    I have a question that, i think, is not so complicated to solve, but instead of digging myself deeper into more and more info I guessed it would be smarter to ask one of you smart and bright people how to do the following:

    Can I have a different background on each page in the div that displays the page info? Or rather, the whole area beneath the header. I want to make this citytrip site that has a different background-color(and image) on each city. It would be nice if I could just make pages instead of putting in PHP links….

    If there is someone that can help me, already, thank you so much for your suggestions.

    greets
    Sjoerd Oudman

Viewing 8 replies - 1 through 8 (of 8 total)
  • I also provided a comment to another similar need just a few minutes ago in this forum. See my posting of 10 hours before yours that has the title “How to have a Separate style.css file for each Page Template”. I was making much greater changes between pages than you have indicated, thus you should be aware that this may be overkill for just changing a background color, but it WILL allow you to make changes to nearly any aspect of each page (body width, header, font, color, with or without sidebar, etc) without affecting the other pages. You will have to create an optional page template and css file for each city, such as denverpage.php and dallaspage.php, but this just involves copying page.php and adding a unique page template name (probably the city name) at the top of each. Where you create the page in your WordPress Admin, scroll down near the bottom of each page and change the page-template selection from “default” to the correct one that you have created. Next you create a separate style.css file for each city in the same way. Name these style.css files to be correspondingly unique for each of your cities, such as denverstyle.css and dallasstyle.css for example. Then change the formatting within each css file to whatever you want. It will only apply to that city-page. Finally, see my posting for how and where to install the code that properly links each css file to its corresponding page template.

    First, get a plugin that displays a post’s images, like my EasyPermGals.
    Disable full-auto, then format your content div like this:

    <div id="content_or_whatever" style="background:url('<?php easypermgals_header_pure(); ?>')">
    ...
    </div>

    Now it’ll use the image attached to the post that has a title containing [header].

    That should do it. You can still upload images and use them in your actual content without the header image interfering.
    No need to create an individual CSS for each city, just create a new post, upload background image, change title to “[header] Denver Background Image”, done.

    With a little PHP you could proberly have it select a background image based on the post, combine that with some CSS and you could make it quite flexible….

    Something like…

    If single post, and custom field exists select image src, then insert into CSS… hurts thinking about it though, lol…

    Custom fields are cumbersome when it comes to images.
    You’ll need to find a way to get the image onto your server, then find out the exact URL, then put that into a custom field.

    Not necessarily, you could use a preg match style code to grab whats in between src” “.

    Would be a big task to figure out a user friendly way to do it, i’m just saying it’s definately possible..

    Posts allow image upload already, you could use an image with a particular class, and simply append that class to the image when you want to invoke the code.

    As said though, it’s just an idea, in terms of code it would take some time to work it all out….

    no it won’t, since I already postet the most user-friendly solution 🙂
    Get a post image plugin like EasyPermGals, add a little php code to the theme file and you’re done. Or create a function.php file with something like this:

    <?php
    function postimage($size=medium,$num=1,$lighbox=1) {
    	if ( $images = get_children(array(
    		'post_parent' => get_the_ID(),
    		'post_type' => 'attachment',
    		'numberposts' => $num,
    		'order' => 'ASC',
    		'orderby' => 'ID',
    		'post_mime_type' => 'image',)))
    	{
    		foreach( $images as $image ) {
    			$attachmenturl=wp_get_attachment_url($image->ID);
    			$attachmentimage=wp_get_attachment_image($image->ID, $size );
    			$img_title = $image->post_title;
    			$img_desc = $image->post_excerpt;
    			if ($size != "full"){
    				echo '<a href="'.$attachmenturl.'" rel="lightbox" title="'.$img_desc.'">'.$attachmentimage.'</a>'.$img_title.'';
    			} else {
    				echo '<img src="'.$attachmenturl.'">';
    			}
    		}
    	} else {
    		echo "No Image";
    	}
    }
    ?>

    I wasn’t implying there was a problem with your suggestion.

    The only problem i see with suggesting a plugin is that you have no way to ensure that plugin is using SAFE code, unless you examine each plugin file yourself.

    By all means your suggestion is suited, i just wanted to point out a script or piece of code could be tailor made to suit the task….

    *Friendly Wave* 🙂

    Okay, I understand the hesitation to use a plugin.
    Especially if you want to design a theme that is self-sufficient, it’s a good idea to use functions.
    Which is why I posted an example of a post image function that could be used – I use it all the time to get post thumbs and inline galleries.

    What I was trying to convey was that if you already launch your coding program to edit theme files you might as well do it “dummy-friendly” for later ease-of-use.

    And I’m not saying users are dummies if they can’t copy a file link – I like to have things dumbed down for myself too so the writing process is as simple and fast as possible.

    I shall return the friendly wave 🙂
    I by no means meant to sound cocky or p*ssed off.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘different backgrounds on different pages’ is closed to new replies.