[TUT]Add Background Images In All Posts

[Lease]

Post Background Images

For this I will be using a cat and a dog image. Go ahead and upload them to your "style_images/1/" directory on your server.

We will use the default blue IPB skin for this

Fist we set up our CSS so that we can display the images only in the post background and not the post details.

In your AdminCP, go to "Look & Feel"

Then from the gray dropdown menu box, select "Edit Stylesheet (CSS Advanced Mode)"

Now in your CSS, lets make a new class for your post details section, this will set it apart from the post background.

Find:

.post2,
.bg3{ 
    background: #EEF2F7;
}

Add Below:

.renderrow{ 
    background: #F5F9FD;
}

Now that is done, we can change our post backgrounds.

Find:

.post1,
.bg1{ 
    background: #F5F9FD;
}

.post2,
.bg3{ 
    background: #EEF2F7;
}

Replace With:

.post1,
.bg1{ 
    background: #F5F9FD url(style_images/<#IMG_DIR#>/cat.png) no-repeat bottom right;
}

.post2,
.bg3{ 
    background: #F5F9FD url(style_images/<#IMG_DIR#>/dog.png) no-repeat bottom right;
}

Save Stylesheet

Now we have them in the post, we need to remove them from the post details.

Go To: ACP > Look & Feel > SelectSkin > Edit Template HTML > TopicView > RenderRow

Find:

        <td valign="top" class="{$post['post_css']}">
            <span class="postdetails">
                <if="$author['id'] AND $author['avatar']">
                    <a href="{$this->ipsclass->base_url}showuser={$author['id']}" title="{$this->ipsclass->lang['dd_view_profile']}">{$author['avatar']}</a><br /><br />
                <else />
                    {$author['avatar']}<br /><br />
                </if>

You see this part? This is what we are changing.

        <td valign="top" class="{$post['post_css']}">

Change that part in that section only to:

        <td valign="top" class="renderrow">

Save Template Bit.

End Result:

 

[Babu]

nice tutorial.