Activity Stream
48,130 MEMBERS
42 ONLINE
KwwHosting On YouTube Subscribe to our Newsletter KwwHosting On Twitter KwwHosting On Facebook KwwHosting On Google+
Results 1 to 2 of 2
  1.    [TUT]Add Background Images In All Posts   [TUT]Add Background Images In All Posts [TUT]Add Background Images In All Posts
    #1
    Member

    Default [TUT]Add Background Images In All Posts

    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:
    Code: 
    .post2,
    .bg3{ 
        background: #EEF2F7;
    }
    Add Below:
    Code: 
    .renderrow{ 
        background: #F5F9FD;
    }
    Now that is done, we can change our post backgrounds.

    Find:
    Code: 
    .post1,
    .bg1{ 
        background: #F5F9FD;
    }
    
    .post2,
    .bg3{ 
        background: #EEF2F7;
    }
    Replace With:
    Code: 
    .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:
    Code: 
            <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.
    Code: 
            <td valign="top" class="{$post['post_css']}">
    Change that part in that section only to:
    Code: 
            <td valign="top" class="renderrow">
    Save Template Bit.

    End Result:
    Lease Reviewed by Lease on . [TUT]Add Background Images In All Posts 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. http://www.kwwhosting.com/images/cdn/kwwhosting.com/2008/01/5.pnghttp://www.kwwhosting.com/images/cdn/kwwhosting.com/2008/01/6.png We will use the default blue IPB skin for this http://www.kwwhosting.com/images/cdn/kwwhosting.com/2008/01/6.gif Fist we set up our CSS so that we can display the images only in the post Rating: 5
    Extremely helpful article about hiding your identity here

  2.   Sponsored Links

  3.    [TUT]Add Background Images In All Posts   [TUT]Add Background Images In All Posts [TUT]Add Background Images In All Posts
    #2
    Banned
    nice tutorial.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. Replies: 23
    Last Post: 31st Jul 2012, 11:36 PM
  2. Broken Images overlapping New Images
    By Leeds in forum vBulletin
    Replies: 8
    Last Post: 17th Apr 2012, 08:57 PM
  3. Images in posts
    By Drinkordie in forum Feedback and Suggestions
    Replies: 6
    Last Post: 16th Feb 2012, 09:12 PM
  4. How to import wordpress posts including featured images
    By tcnnvnn in forum Webmaster Discussion
    Replies: 2
    Last Post: 27th Oct 2011, 08:26 AM
  5. Replies: 11
    Last Post: 11th Feb 2011, 11:58 PM

User Tag List

Tags for this Thread

BE SOCIAL
[TUT]Add Background Images In All Posts [TUT]Add Background Images In All Posts [TUT]Add Background Images In All Posts [TUT]Add Background Images In All Posts [TUT]Add Background Images In All Posts