Forums

WordPress › Support » Themes and Templates

Adding a background image to content area of Twenty Ten (9 posts)

  1. yazmincoveney
    Member
    Posted 1 year ago #

    I am trying to create a custom page template and add an background image to the content area of Twenty Ten of my home page. I cannot tell what part of the CSS needs to be modified to do this.

    If I add a background image in this part of the style.css, I get the background image to display on every page.

    `#main {
    clear: both;
    overflow: hidden;
    padding: 40px 0 0 0;
    }`

    So I tried duplicating it and naming it #main2 which I would only put in the new template I've created, but it does not work. Below is the code I have on the template page. Ultimately, I don't understand what the "role" is.

    `<div id="container">
    <div id="content" role="main">`

    Thank you!

  2. t-p
    Member
    Posted 1 year ago #

    try adding to this CSS element:

    .entry-content, .entry-summary {

  3. yazmincoveney
    Member
    Posted 1 year ago #

    That put the background behind the text not in the whole content area.

    The site I am working on is not published, but here is a mock up of what I am trying to do. This is a large jpg and not a WP site: http://www.zupababy.com/hl/home_navy.htm

  4. yazmincoveney
    Member
    Posted 1 year ago #

    I should add that the above suggestion added the background to all the pages. Not just the home page.

  5. alchymyth
    The Sweeper
    Posted 1 year ago #

    try:
    .page-template-mynewtemplate-php #main { ... }

    instead of 'mynewtemplate' use the compressed template name (small letters only, no spaces) of your own template;
    you will find this specific body class when you look at the code of your page in the browser.

  6. yazmincoveney
    Member
    Posted 1 year ago #

    Not sure if I understood correctly, but in my css I added (my custom template page is called main.php)

    `.page-template-main #main {
    clear: both;
    overflow: hidden;
    padding: 40px 0 0 0;
    background-image:url(images/home_bg.jpg);
    }`

    Then in the custom template page, I left the code:

    `<?php
    /*
    Template Name: Main Page
    */

    get_header('main'); ?>

    <div id="container">
    <div id="content" role="main">

    <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

    <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <?php if ( is_front_page() ) { ?>
    <h2 class="entry-title"><?php the_title(); ?></h2>
    <?php } else { ?>
    <h1 class="entry-title"><?php the_title(); ?></h1>
    <?php } ?>

    <div class="entry-content">
    <?php the_content(); ?>
    <?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
    <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?>
    </div><!-- .entry-content -->
    </div><!-- #post-## -->

    <?php endwhile; ?>

    </div><!-- #content -->
    </div><!-- #container -->

    <?php get_footer(); ?>`

  7. yazmincoveney
    Member
    Posted 1 year ago #

    I forgot the above did not work.

  8. alchymyth
    The Sweeper
    Posted 1 year ago #

    can you post a link to your site?
    particular to the page that uses the template main.php?

    imho, the css should be:

    .page-template-main-php #main {
clear: both;
overflow: hidden;
padding: 40px 0 0 0;
background-image:url(images/home_bg.jpg);
}

    (as i said, you can check this when you open the page in the browser, and then, on the browser tool bar, click 'View' and then 'Source' or 'Page Source' (or press 'ctrl u' in firefox);
    you should find a line starting with <body class=" which should have several css classes, one of them should be 'page-template-main-php')

    what is working so far?
    and what is not working?

  9. yazmincoveney
    Member
    Posted 1 year ago #

    That did it!

    Thank you, thank you!!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags