Wern (ex_xany544) wrote in component_help,
Wern
ex_xany544
component_help

Strange bug

I used the tutorial to customize the title bar and add an extra component under it and customized it a little to make it look more like a 'real' entry, along with printing a little square below it to indicate the start of the real entries. But now I have this weird space between the stuff I created (using the tutorial) and the rest of my entries. (Screenshot here.) It's weird, and I can't figure out what is causing it. It wasn't there before I tweaked the code, but I have no idea what could be causing it either because most of what I added was to add text and images and stuff.


Here's my code for the entire thing. Most of it is from the tutorial.


### Override the print_my_entries so we can make a custom titles and/or title sub components

function print_my_entries(Page p, string title) {



    # Set to be your welcome note title, if you want one

    var string welcome_title = "Welcome!";



    # Set to be your welcome note. HTML is taken, so make sure it's valid and is all properly closed tagged.

    # Use "<br/><br/>" for line breaks with space between

    var string welcome_note = """



<div class="entryHeader">[fake accent]Velcome to my laaaaiiirrr[/fake accent]</div>

<div class="entryDash"><img src="http://stat.livejournal.com/palimg/component/clear.gif" alt="" border="0" height="1" width="1"></div>

<img src="http://stat.livejournal.com/palimg/component/clear.gif" alt="" border="0" height="1" width="1">

<img src="http://stat.livejournal.com/palimg/component/clear.gif" alt="" border="0" height="1" width="1">

<br>... Now that that's out of the way: welcome! Pull up a section of e-couch, have an e-drink,

and don't mind the mess - I'm currently overhauling my LJ, so there's bound to be some weird coding issues that

screw up how stuff is displayed <strike>because I don't really know what I'm doing</strike>.

And things may change every day or so. I'll be done soon, never fear.

<br><br>This LJ is best viewed in Firefox with 1024x768 resolution or higher. If that means nothing to you, don't worry about it.

It might look a bit weird though.



     """;



    # Because we are going to override the Page title, and there is no function to draw the component borders for such

    # a thing, we need to do it all by hand. For the curved corner pieces, we need to match the color to the rest of your

    # component. To do this, we need to set a variable to be used since it cannot be obtained from the stylesheet.

    var Color header = $*header_bgcolor;

    var Color headerMinus5  = $header->darker(50);

    var Color headerPlus3   = $header->lighter(30);

    var string corner_color = "/p0"+$headerPlus3->substr(1,6)+"1"+$headerMinus5->substr(1,6)+"2"+$header->substr(1,6);



    # Start the column for the body. Do not delete this line

    """<td valign="top" width="100%">""";

    

    # Start the new title component.

    """

            <table cellspacing="0" cellpadding="0" border="0" width="100%">

                <!-- <tr>

                    <td colspan="3"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0"></td>

                </tr> -->

                <tr>

            <td valign="top" rowspan="3" colspan="3" width="5"><img src="http://www.livejournal.com/palimg/component/curve-top-left.gif$corner_color" width="5" height="5" alt="" border="0" /></td>

                    <td class="dkLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>

                    <td valign="top" rowspan="3" colspan="3" width="5"><img src="http://www.livejournal.com/palimg/component/curve-top-right.gif$corner_color" width="5" height="5" alt="" border="0" /></td>

                </tr><tr>

                    <td class="ltLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>

                </tr><tr>

                    <td class="tabBg"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="3" alt="" border="0" /></td>

                </tr><tr>

                    <td class="dkLine" width="1"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>

                    <td class="ltLine" width="1"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>

                    <td class="tabBg" width="3"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="3" alt="" border="0" /></td>

                    <td class="tabBg" width="100%">

    """;



    # Now we put the actual title content in. You can put whatever you want here. As an example, I've the following lines

    # will insert the Title on all pages and Subtitle only on the recent page, and centered in the component. If you don't

    # want something centered, remove the <center> and </center> tags surrounding it it.  

    # Also, as an example, the blue line shows how to add an image above your title, but it is commented since it is incomplete.

    # If you'd like to an an image above the title, decomment the line by removing the # in front it and complete the URL.

    # If you are curious, the different "views" for condition checking are {recent, friends, day, reply, entry, month, year}.

                        

                        #"""<center><img src="YOUR IMAGE URL" border="0" alt="" /></center>""";

                        # print the Full Title of the page [Journal title and Page specific title]:

                        """ <div class="userTitle"><center> """; print $p->title(); """ </center></div> """;

                        # print the Journal Subtitle if it exists, and if we're on the recent page :

                        if ($p.global_subtitle!="" and $p.view=="recent") {

                           """ <div class="userSubTitle"><center> """; print $p.global_subtitle; """ </center></div> """;

                        }



    # Close off the title component and place a spacer after it.

    """

                    </td>

                    <td class="tabBg" width="3"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="3" alt="" border="0" /></td>

                    <td class="ltLine" width="1"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>

                    <td class="dkLine" width="1"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>

                </tr><tr>

                    <td valign="top" rowspan="3" colspan="3" width="5"><img src="http://www.livejournal.com/palimg/component/curve-bottom-left.gif$corner_color" width="5" height="5" alt="" border="0" /></td>

                    <td class="tabBg"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="3" alt="" border="0" /></td>

                    <td valign="top" rowspan="3" colspan="3" width="5"><img src="http://www.livejournal.com/palimg/component/curve-bottom-right.gif$corner_color" width="5" height="5" alt="" border="0" /></td>

                </tr><tr>

                    <td class="ltLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>

                </tr><tr>

                    <td class="dkLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>

                </tr>

            </table>

    """;

    print_spacer();



    # Now we can put other components below the title component before the entries start. If you don't want any other special components

    # you can skip over this section. As an example, I've included code that puts a welcome note component, which

    # uses the $welcome_title and $welcome_note variable defined at the top of the function.  

    # Note that the welcome component only shows on the recent page, and if you remove the blue segments, then the componet will

    # show everywhere. Think carefully about where you want each component to be seen.

    #

    # The print_content_top() and print_content_bottom() are optional, but if left out, the component will look like one of

    # the free text components. By placing them there, it matches the look of the entry components. Also the print_entry_header()

    # is optional, and without it, the component just won't have a curved top header bar to it.

    #

    # If you want to have multiple sub title components, you just duplicate it as many times as you want

    #

    if ($p.view=="recent") {

        # print the component header, and start it off like a normal entry component with no usericons or journal names

        print_entry_header("<b>$welcome_title<b>");

        print_system_box_top();

"""<table cellspacing="0" cellpadding="0" border="0" width="100%"><tr>""";



"""

<td valign="top" style="padding-right: 8px;">

<table cellspacing="0" cellpadding="0" border="0" align="center"><tr><td?

<a href=http://stat.livejournal.com/palimg/component/btn_edit.gif/pc1450bee05132d">

<img src="http://stat.livejournal.com/palimg/component/btn_edit.gif/pc1450bee05132d"></a>

<br><a href="http://www.livejournal.com/tools/memadd.bml?journal=xany&itemid=64764">

<img src="http://stat.livejournal.com/palimg/component/btn_memories.gif/pa1450bee05132d"></a>

</tr></td></table>

</td>

""";

"""<td width="100%" valign="top">""";

        print_content_top();

        # print the content of the custom component - eg. my welcome note. You can put whatever html you want here as long

        # as it's properly tagged and encompassed by the """ and """;

        """ <div>"""; print $welcome_note;



       """</div> """;

        # close off the component and place a spacer.

        print_content_bottom();

"""

<a href="http://xany.livejournal.com/64764.html">read comments</a>

<img src="http://img.photobucket.com/albums/v605/xany/livejournal/dblue_lightning/comment-div.gif">

<a href="http://www.livejournal.com/users/xany/64764.html?mode=reply">leave me one</a>

""";

"""</tr></td></table>""";

        print_system_box_bottom();

        print_spacer();

        

       #  Now I wanted an additional component to indicate the start of the entries. If you'd like a simple box, with a bold

       #  and centered label, you can decomment the next few lines in pink by removing the #'s at the start of the lines.

         print_system_box_top();

         """ <div><center><b>$*nav_entries_text</b></center></div></tr><table>""";

         print_system_box_bottom();

         print_spacer();

    }



    # Now we are finished up with our custom title, and we can print the rest of the page.

    $p->print_body();



} # end of Function print_my_entries


Help...?
Subscribe

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

  • 5 comments