Spice up images - create image watermark borders

		vb.org Archive > vBulletin Article Depository > Read An Article > Graphics Articles
Spice up images - create image watermark borders

Thread Tools

Spice up images - create image watermark borders

ZomgStuff

Join Date: Feb 2007

Posts: 469

ZomgStuff

01-02-2008, 10:00 PM

With this you can change this regular image

into something like this without actually editing the image itself

First of all you will need to download the different images here.

Then open up a blank page in notepad, and we're first going set up some style definitions.
Comments are inside each rule.

HTML Code:

<style type="text/css">
DIV.image
{
    width: 675px;
    margin: 0 auto;
    margin-bottom: 40px;
    clear: both;
    /*This creates the bigger-picture frame/location where we will put all of our elements */
}

DIV.image Div.TopBar
{
    height: 50px;
    background-image: url( 'topbar.png' );
    background-repeat: repeat-x;
    float: left;
    /*This repeats the topbar over and over at the top to create a bar. The image itself is actually a very small vertical line */
}

DIV.image Div.TopBarEnd
{
    height: 50px;
    width: 50px;
    background-image: url( 'topbar_end.png' );
    background-repeat: repeat-x;
    float: left;
    /*This is the curly ending for the top left corner bar*/
}

DIV.BottomBar
{
    clear: both;
    position: relative;
    top: 350px;
    height: 50px;
    /*This sets up the very bottom bar */
}

DIV.image Div.Title
{
    display: inline;
    padding-left: 20px;
    padding-top: 2px;
    background-repeat: no-repeat;
    height: 16px;
    vertical-align: bottom;
    padding-right: 8px;
    color: #7a0;
    /*This sets up the properties for the text in the top left*/
}


DIV.BottomBarEnd
{
    float: right;
    width: 50px;
    height: 50px;
    background-image: url( 'bar_bottom_end.png' );
    background-repeat: no-repeat;
    /*This is actually the very bottom right corner curly piece */
}

DIV.BottomEndLeftInfo
{
    float: left;
    width: 50px;
    height: 50px;
    background-image: url( 'bar_bottom_end_l.png' );
    background-repeat: no-repeat;
   /* This is the ending curly piece in the bottom left corner */
}
DIV.BottomLeftInfo
{
    float: left;
    background-image: url( 'bar_x.png' );
    background-repeat: repeat-x;
    height: 50px;
    padding-top: 30px;
    padding-left: 8px;
    /*This repeats the bottom left bar over and over at the top to create a bar. The image itself is actually a very small vertical line */
    
}
</style>

Now here is the actual code. What happens is that we make the picture the background, and we place the borders on it.

HTML Code:

<div class="image">
 <div style="width: 575px; height: 450px; background-image: url('2.jpg'); background-repeat: no-repeat;">
        <div class="TopBar">
                <div style="padding: 5px; white-space: nowrap;">
                    <div class="Title">Posted By David hasselhoff</div>
                            </div>
        
            </div>
            <div class="TopBarEnd">&nbsp;</div>
            <div style="position: relative; top: -75px;">
            
            </div>
            
        <div class="BottomBar">
            <div class="BottomBarEnd"></div>
                    <div class="BottomLeftInfo">www.ZomgStuff.net</div>
                    <div class="BottomEndLeftInfo">&nbsp;</div>
        </div>
    

    
    </div>

04-20-2008, 09:07 PM

hrk

Join Date: May 2007

Posts: 125

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

nice.

was looking for this tutorial. but can you explain in details step by step to get this done? as in which file to edit etc? thank you

09-23-2008, 01:52 AM

mindhunter77 mindhunter77 is offline

Join Date: Jan 2006

Posts: 194

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

would love to see you expand on this a little. Where do we post the code etc?

09-23-2008, 11:06 AM

karlm

Join Date: Jul 2006

Location: England

Posts: 447

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

Yep, it would be useful to know what file/template requires editing... the tutorial is kinda useless without at least that information.

04-17-2010, 06:50 PM

Arsov14

Join Date: Feb 2010

Posts: 15

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

Dead link. Reupload pls !!!

08-13-2010, 05:26 PM

mattyphatty mattyphatty is offline

Join Date: Feb 2010

Posts: 27

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

Would something like this work for VB 4.0?

09-18-2010, 04:36 AM

as7apcool

Join Date: Feb 2009

Posts: 194

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

nice hack really

« Previous Thread | Next Thread »

Posting Rules
You may not post new threads You may not post replies You may not post attachments You may not edit your posts BB code is On Smilies are On [IMG] code is On HTML code is Off Forum Rules

Forum Jump

All times are GMT. The time now is 05:23 AM.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.04745 seconds Memory Usage 2,254KB Queries Executed 20 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (2)bbcode_html (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)modsystem_article (1)navbar (4)navbar_link (120)option (7)post_thanks_box (7)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (7)post_thanks_postbit_info (6)postbit (7)postbit_onlinestatus (7)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end fetch_musername postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_display_complete post_thanks_function_can_thank_this_post_start tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!