Jump to content

biermann

Member
  • Content Count

    139
  • Joined

  • Last visited

  • Days Won

    13

Posts posted by biermann

  1. Erasers: there's the kind with 2 sides, a rougher and a finer grit, tend to be red and blue. They have a tapered end to each which is nice to allow you to erase with a bit of a finer line.

    Personally I erase very little, only in the beginning stages of a drawing where I use fine lines which are erased a bit more easily.

    I'm often guilty of just 'drawing over' errors later. If you draw darker things it's fairly easy to just take a strand of hair, a black belt or a flap of a cloak or such to draw it over a flaw. But this is partially due to my tendency to draw during lunchbreaks with a ballpoint (try erasing that) or using crappy printer paper when I just had an urge to draw and have nothing better in my immediate vicinity.

  2. Well, it depends on what you want to draw ofcourse. But getting a set of 3b to h3 pencils will help. Mechanical pencils ( I am going to assume those are the ones with the thin little rods that come out by clicking the end) tend to feel a bit more like the harder pencils due to create finer lines by the nature of their design.

    I myself couldn't draw a 'clean' picture with minimalistic lines if my life depended on it, but for others, that's the style they enjoy and fine lines are nice for such (clean would be something like nadrolski's avie). Paper wise the stuff they sell in hobbyshops works better, allows for some easier erasing, it's a bit thicker and so on.

     

    That all said, I've always considered materials to be of a second or perhaps even third concern. I did my own avie with a ballpoint pen on some printer paper during work lunch breaks.

     

    So what would be the first two concerns.

    Creativity/inspiration/source material. I draw stuff from some mental image that occurs to me at some point . (I at times even just scribble some lines and then come up with what it should become). But having some good idea of what and how you want to draw, how much of your ideas you need to 'borrow' or how much you just come up with on your own. (Will I do these dragon scales like this artist did in this picture.... or here's my dragon, i will just start and see where it leads me scale wise).

    Anatomy and relational sizes. You can draw a perfectly shaded picture. Marvelous details. But if the head is a bit too big for the torso, or if that arm is twisted in a wrong way, it will look horrid. Unless it's cartoony style of course. It's a bit akin to the 3d cgi issue, the closer you approach reality, the more small faults will be recognized by the brain to be wrong. They have these anatomical dolls for such, I never used those (this is one of those talents I seem to be born with) but I have in the past posed before a camera. Yes, it will look stupid, but you got a nice picture of anatomy that works to start from, in exactly the pose you like.

    I suggest not diving into perspective poses at first (like a hand pointing towards the viewer, stuff like that) cause they can be a real pain i the ^%#. The big thing is, you need to get the measurements right at the START. Because if you're trying to fix things when half the shading is done it's going to be messy as hell, if not completely impossible.

     

    And finally, recalling how I learned drawing... no, perhaps not learned, how I improved drawing (because there's a certain degree of natural talent that people just have or don't have. And I have no clue if this can be trained easily) is by using tracer paper. So add that to the shopping list. Trace some picture, perhaps of some artwork you like or of a photo. Pick a facial one and a full body one. Trace contours, try to mimic the shading, just get a feel for the stages of a drawing, for the required techniques.

    After feeling comfy with the techniques, try your own. I think I posted some pics in my drawing topic with 3 stages of dark's avie. I tend to start out by drawing one of those anatomical dolls (even though I don't have one), fiddling with the body parts till happy, then a moment of roughly 'clothing' and outlining the body to finally detail it and shade it.

    So, that's about it. I can't really say if there's any grand tutorials, seeing I started drawing when i was 4. (and eventually stopped drawing for a long long time till I got into this place) But the inert skill always has been there. I know I practiced by copying some images. But in the end, it's just start with something. Hate the result. Find the flaws (see them yourself or ask for feedback). Start a new. Hate it again. There's always going to be someone better, always room for improvement and if you are anything like me, you will always be dissatisfied with the end result. Your own worst critic.(which is  a good thing at times, because other people will often be to nice (which is nice of them) and say things like 'different styles' and such. But in the end, you will know your picture is not as good as x or y's picture, or the art you used as inspiration. And no amount of cuddly comments will help that feeling :) )

    And do holler if you at some point want a bit of feedback. I promise I will point out what is done well (purely my opinion) and what looks bad (again opinions can differ).

  3. I have a swish knife with all sorts of proddy things. and paperclips. I shall improvise. It's mostly going to be my skill that's in the way. drawing is nice and flat. sculpting is not. And tools are nice...if you know how to use them. It''s going to be one big muddy clay mess, but who knows, I might have some undiscovered talent.

     

    Edit: I know I could find a ton of tips and tricks and what not, but like drawing or well, pretty much anything I do. I'll just start and see how it goes or doesn't go. Preparation is boring :)

  4. there, bought clay.

     

    Haven't clayed since I was like 6. Nor do I have any of the special sculpting tools.

     

    So either I'll prove to be a natural.

    Or i'll have to explicitly tell people it's a drachorn

    Or i'll get frustrated, smash the attempt into a wall and then make an ashtray

  5. I have managed to get flash on my android working for firefox with a bit of a hassle.

    And then puffin as well, inbuild flash support, no hassle, costs 2 euro's or so.

     

    That said, annoying decision. This whole html5 stuff is all nice and progressive.... but it's a damned pain in the ass for me.

    I now have to ensure my own web software works in html5 no flash.....but, due to soooo many compagnies still running winxp with ie7...it also has to keep working in flash, gah!

  6. I decided to create a personal page template...and couldn't make a choice which pictures to use.
    There for I created a template which offers multiple choices for color and image scheme.
     
    The whole template is pretty much void, it can be filled as people see fit, with upto 10 separate pages + menu links.
     
    Here's a demo of all the current themes (wait for a moment to see the full day/night cycle effect), showing off 4 color schemes as well as demo'ing the variable page system.
     
    http://www.markbiermann.nl/md/templates/meadow.html
     
    To implement it, simple copy the everything (listed at the bottom of this post) bit into your html tab of the page editor.
    In the html there are several sections for people to edit. All are indicated with <!-- --> markings.
     
    the first is:

     

                                            <!-- OPTIONS THEME: meadow, mountain1, creek, mandel, tree, wind --> 
                                            <!-- OPTIONS COLOR: orange, green, gray, blue --> 
                                            <!-- To change the background image change the two class names in the div below, you can pick any from theme or color -->
                                       
                                            <div id="main_content" class="mandel blue"> 
    
    Here you can edit the color scheme as well as the image theme.
     
    next you can copy/paste everything between <!--- START PAGE #1 --><!--- END PAGE #1 -->
    This will create a new page.
    By editing the title="menu 1" in the div below the comments, you can alter the name that is used in the menu. (Each menu item will be created automatically after you copy paste a new page. No need to build your own menu.)
    In these pages you see, again with commented text to help you, you can alter the main title of the page (div called 'member_info') as well as add sub items ('journalitem') and give them titles ('journaltitle') and content ('journalcontent').
     
    Now, the added beauty of this is that I set it up to be fairly easy to implement new themes. Your themes!
    An ongoing project as you will. There are ofcourse a few requirements. First 'say please'. Second, it works best with photo's that have 3 layers. A foreground object. A backdrop. And a good bit of sky. Third, it has to be a photo you made. Copyright stuff and such.
    I've added a link to the css file, which is indeed a bit redundant. But i've done this with the idea that if you throw out all the css, you will then use my own hosted file. Which I can update, so new themes would be available to all.
     
    [log=css]
    #main_content
    {
        width:762px;
        height: 480px;
        background-position: 50% 50%;
        background-repeat: no-repeat;  
    }
    
    #inner_content
    {
        width: 530px;
        height: 470px;
        margin: 00px 118px;
        padding-top:5px;
        overflow: hidden;
    }
    #inner_content_1{width: 500px; margin: 0px 5px;}
    #center_page{height: 468px;}
    .avatar-section
    {
        width:490px;
        border: 5px solid black;
        background-color:#F1EFD6;
    }
    /* main vertical scroll */
    #main {
        position:relative;
        overflow:hidden;
        height:400px;
    }
    /* root element for pages */
    #pages {
        position:absolute;
        height:20000em;
    }
    /* single page */
    .page {
        width: 530px;
        height:400px;
    }
    /* single scrollable item */
    .item {
        float:left;
        cursor:pointer;
        width: 530px;
        height:400px;
        overflow: auto;
    }
    /* main navigator */
    #main_navi {
        height: 48px;
        width:520px;
        padding:0px !important;
        margin:0px !important;
        margin: auto !important;
    }
    #main_navi li {
        float:left;
        -moz-border-radius: 5px;
        border-radius: 5px;
        border: 1px solid black;
        font-size:12px;
        height:16px;
        margin-bottom:2px;
        margin-right:2px;
        list-style-type:none;
        padding:2px;
        width:102px;
        cursor:pointer;
        text-align: center;
        text-decoration: underline;
        font-style: italic;
    }
    .grad
    {
        width:100%;
        height:100%;
        /* IE9 SVG, needs conditional override of 'filter' to 'none' */
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VkZWFjZSIgc3RvcC1vcGFjaXR5PSIwLjYiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2I3N2MyNCIgc3RvcC1vcGFjaXR5PSIwLjI0Ii8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
        background: -moz-linear-gradient(top,  rgba(237,234,206,0.6) 0%, rgba(183,124,36,0.24) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(237,234,206,0.6)), color-stop(100%,rgba(183,124,36,0.24))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  rgba(237,234,206,0.6) 0%,rgba(183,124,36,0.24) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  rgba(237,234,206,0.6) 0%,rgba(183,124,36,0.24) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  rgba(237,234,206,0.6) 0%,rgba(183,124,36,0.24) 100%); /* IE10+ */
        background: linear-gradient(to bottom,  rgba(237,234,206,0.6) 0%,rgba(183,124,36,0.24) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99edeace', endColorstr='#3db77c24',GradientType=0 ); /* IE6-8 */                    
        /*generated by http://www.colorzilla.com/gradient-editor/, handy tool for gradients*/
    }
    .grad:hover{
        /* IE9 SVG, needs conditional override of 'filter' to 'none' */
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JlYTM4NCIgc3RvcC1vcGFjaXR5PSIwLjI0Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZWVkZTYiIHN0b3Atb3BhY2l0eT0iMC42Ii8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
        background: -moz-linear-gradient(top,  rgba(190,163,132,0.24) 0%, rgba(238,237,230,0.6) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(190,163,132,0.24)), color-stop(100%,rgba(238,237,230,0.6))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  rgba(190,163,132,0.24) 0%,rgba(238,237,230,0.6) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  rgba(190,163,132,0.24) 0%,rgba(238,237,230,0.6) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  rgba(190,163,132,0.24) 0%,rgba(238,237,230,0.6) 100%); /* IE10+ */
        background: linear-gradient(to bottom,  rgba(190,163,132,0.24) 0%,rgba(238,237,230,0.6) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3dbea384', endColorstr='#99eeede6',GradientType=0 ); /* IE6-8 */
        /*generated by http://www.colorzilla.com/gradient-editor/, handy tool for gradients*/
    }
    
    #t7p5{margin-left:60px;}
    #t9p6{margin-left:48px;}
    #main_navi li.active {font-weight: bold;font-style: italic;}
    #main_navi strong {display:block;}
    .member_info{float:left;margin-left:2px;margin-right:2px;width:500px;}
    div.member_info .innerText{font-weight: bold;font-style: italic;width:500px;}
    .JournalItem{margin-bottom:10px;border-bottom: 1px solid black;padding-bottom:10px;width:500px;}
    .JournalTitle{font-size: 16px;width:500px;}
    .JournalContent{font-size: 14px;width:500px;}
    .clearfix:after {
        clear: both;
        content: ".";
        display: block;
        height: 0;
        visibility: hidden;
        font-size: 0;
    }
    /* TEMPLATE POSITIONS  */        
    #clouds {
        position:relative;
        width:100%;
        height:480px;
    }
    #skygrad {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:480px;
    }
    #objectlayer1,#objectlayer2 {
        position:absolute;
        top:0;
        left:0px;
        width:100%;
        height:480px;
    }
    #center_page{background-color: rgba(40,50, 10, 0.6);border: 1px solid black;}
    #navigation{background-color:rgba(0,0, 0, 0.2);}                                                                                            
    /* COLOR  */     
    .blue #center_page{background-color: rgba(0,51, 102, 0.6);border: 1px solid black;}
    .blue #navigation{background-color:rgba(0,0, 0, 0.2);}                                                
    .blue #main_navi li {color: #99ffff;border-color: #003366;background-color:#000;}
    .blue #main_navi li:hover {color: #00cccc;}
    .blue #main_navi li.active {color: 00cccc;}                                            
    .blue .JournalItem{color: #00cccc;border-color: #00cccc;}
    .blue #main_content, .blue #border_content{border-color:#00cccc;}
    .blue span, .member_info {color: #00cccc;}    
    
    .orange #main_navi li {color: #FFC779;border-color: #FFC779;background-color:#000;}
    .orange #main_navi li:hover {color: #FFE0B6;}
    .orange #main_navi li.active {color: #FFE0B6;}                                            
    .orange .JournalItem{color: #FFE0B6;border-color: #FFE0B6;}
    .orange #main_content, .orange #border_content{border-color: #FFE0B6;}
    .orange span,.orange .member_info {color: #FFE0B6;}    
    
    .green #main_navi li {color: #CDE0A2;border-color: #CDE0A2;background-color:#000;}
    .green #main_navi li:hover {color: #E8FFB5;}
    .green #main_navi li.active {color: #E8FFB5;}                                            
    .green .JournalItem{color: #E8FFB5;border-color: #E8FFB5;}
    .green #main_content, .green #border_content{border-color: #E8FFB5;}
    .green span, .member_info {color: #E8FFB5;}   
    
    .gray #center_page{background-color: rgba(40,40, 40, 0.6);border: 1px solid black;}
    .gray #navigation{background-color:rgba(0,0, 0, 0.2);}                                                
    .gray #main_navi li {color: #ededed;border-color: #ededed;background-color:#000;}
    .gray #main_navi li:hover {color: #fff;}
    .gray #main_navi li.active {color: #fff;}                                            
    .gray .JournalItem{color: #eee;border-color: #eee;}
    .gray #main_content, .gray #border_content{border-color:#eee;}
    .gray span, .member_info {color: #eee;}         
    
    /* TEMPLATE SETTINGS  */    
    div#main_content.creek{background-image: url(http://www.markbiermann.nl/md/templates/template_images/creek/bg.jpg);}
    .creek #clouds {background:url(http://www.markbiermann.nl/md/templates/template_images/creek/clouds.png);}
    .creek #skygrad {background:url(http://www.markbiermann.nl/md/templates/template_images/creek/sky_gradient2.png);}
    .creek #objectlayer1{background:url(http://www.markbiermann.nl/md/templates/template_images/creek/100.png);}
    .creek #objectlayer2{background:url(http://www.markbiermann.nl/md/templates/template_images/creek/semi.png);}
    
    div#main_content.mandel{background-image: url(http://www.markbiermann.nl/md/templates/template_images/mandel/bg.jpg);}
    .mandel #clouds {background:url(http://www.markbiermann.nl/md/templates/template_images/mandel/clouds.png);}
    .mandel #skygrad {background:url(http://www.markbiermann.nl/md/templates/template_images/mandel/sky_gradient2.png);}
    .mandel #objectlayer1{background:url(http://www.markbiermann.nl/md/templates/template_images/mandel/100.png);}
    .mandel #objectlayer2{background:url(http://www.markbiermann.nl/md/templates/template_images/mandel/semi.png);}
    
    div#main_content.tree{background-image: url(http://www.markbiermann.nl/md/templates/template_images/tree/bg.jpg);}
    .tree #clouds {background:url(http://www.markbiermann.nl/md/templates/template_images/tree/clouds.png);}
    .tree #skygrad {background:url(http://www.markbiermann.nl/md/templates/template_images/tree/sky_gradient2.png);}
    .tree #objectlayer1{background:url(http://www.markbiermann.nl/md/templates/template_images/tree/100.png);}
    .tree #objectlayer2{background:url(http://www.markbiermann.nl/md/templates/template_images/tree/semi.png);}
    
    div#main_content.wind{background-image: url(http://www.markbiermann.nl/md/templates/template_images/wind/bg.jpg);}
    .wind #clouds {background:url(http://www.markbiermann.nl/md/templates/template_images/wind/clouds.png);}
    .wind #skygrad {background:url(http://www.markbiermann.nl/md/templates/template_images/wind/sky_gradient2.png);}
    .wind #objectlayer1{background:url(http://www.markbiermann.nl/md/templates/template_images/wind/100.png);}
    .wind #objectlayer2{background:url(http://www.markbiermann.nl/md/templates/template_images/wind/semi.png);}
    
    div#main_content.mountain1{background-image: url(http://www.markbiermann.nl/md/templates/template_images/mountain1/bg.jpg); }
    .mountain1 #clouds {background:url(http://www.markbiermann.nl/md/templates/template_images/mountain1/clouds.png);}
    .mountain1 #skygrad {background:url(http://www.markbiermann.nl/md/templates/template_images/mountain1/sky_gradient2.png);}
    .mountain1 #objectlayer1{background:url(http://www.markbiermann.nl/md/templates/template_images/mountain1/100.png);}
    .mountain1 #objectlayer2{background:url(http://www.markbiermann.nl/md/templates/template_images/mountain1/semi.png);}    
    
    div#main_content.meadow{background-image: url(http://www.markbiermann.nl/md/templates/template_images/meadow/bg.jpg); }
    .meadow #clouds {background:url(http://www.markbiermann.nl/md/templates/template_images/meadow/clouds.png);}
    .meadow #skygrad{background:url(http://www.markbiermann.nl/md/templates/template_images/meadow/sky_gradient2.png);}
    .meadow #objectlayer1{background:url(http://www.markbiermann.nl/md/templates/template_images/meadow/100.png);}
    .meadow #objectlayer2{background:url(http://www.markbiermann.nl/md/templates/template_images/meadow/semi.png);}
    
    [/log]

    [log=scripting]
    $(function() {
        // Define the height of your two background images.
        //The image to scroll
        var backgroundheight = 2000;
        //The image to overlay
        var backgroundheight2 = 2000;
        // Create a random offset for both images' starting positions
        offset = Math.round(Math.floor(Math.random() * 2001));
        offset2 = Math.round(Math.floor(Math.random() * 1001));
        offset3 = backgroundheight;
        turner = 0;
        function scrollbackground() {
            //Ensure all bases are covered when defining the offset.
            offset = (offset < 1) ? offset + (backgroundheight2 - 1) : offset - 1;
            if (turner === 0)
            {
                if (offset3 < (1 + 475))
                {
                    turner = 1;
                }
                else
                {
                    offset3 = offset3 - 7;
                }
            }
            if (turner === 1)
            {
                if (offset3 > (backgroundheight - 475))
                {
                    turner = 0;
                }
                else
                {
                    offset3 = offset3 + 7;
                }
            }
            // Put the background onto the required div and animate vertically
            $('#clouds').css("background-position", offset + "px" + " 50%");
            $('#skygrad').css("background-position", "50% " + offset3 + "px");
            // Enable the function to loop when it reaches the end of the image
            setTimeout(function() {
                scrollbackground();
            }, 100
                    );
        }
        // Initiate the scroll
        scrollbackground();
    });
    
    $(document).ready(function() {
        $(function() {
            $statelist = $('<ul id="main_navi"><\/ul>').appendTo('#navigation');
            $count = 0;
            $curpage = 0;
            $('.page').each(function(i, o) {
                $count++;
            });
            $('.page').each(function(i, o) {
                $curpage++;
                if ($count < 6)
                {
                    $total = 480;
                } else if ($count < 11)
                {
                    $total = 800;
                }
                // calculating widths used for menu items
                switch ($count)
                {
                    case 1:
                        $total = 500;
                        break;
                    case 2:
                        $total = 252;
                        break;
                    case 3:
                        $total = 480 / 3;
                        break;
                    case 4:
                        $total = 504 / 2;
                        break;
                    case 5:
                        $total = 480 / 5;
                        break;
                    case 6:
                        $total = 496 / 3;
                        break;
                    case 7:
                        $total = 120;
                        break;
                    case 8:
                        $total = 120;
                        break;
                    case 9:
                        $total = 480 / 5;
                        break;
                    case 10:
                        $total = 480 / 5;
                        break;
                    default:
                        $total = 120;
                }
                // menu creation by taking titles from the content page
                var $state = $(this);
                $state.attr('id', 'state_' + i);
                $statelist.append('<li id="t' + $count + 'p' + $curpage + '" style="width:' + $total + 'px;"><div class="grad">' + $state.attr('title') + '</div><\/li>');
            });
    
            // main vertical scroll
            $("#main").scrollable({
                // basic settings
                vertical: true,
                // up/down keys will always control this scrollable
                keyboard: 'static'
                        // main navigator (thumbnail images)
            }).navigator("#main_navi");
            // horizontal scrollables. each one is circular and has its own navigator instance
    
            //
        });
    });
     
    
    [/log]


    [log=html]
    <div id="main_content" class="mandel blue"> 
    <div id="clouds" >
    <div id="objectlayer1" >
    <div id="skygrad"  >
    <div id="objectlayer2" >
    <div id="inner_content"> 
    <div id="center_page">
    <div class="clearfix" id="navigation"> 
    </div> 
    <div id="main"> <!-- root element for pages --> 
    <div id="pages"> 
    
    <!-- START PAGE #1 -->   
    <!-- copy everything from 'start page #1' and 'end page #1' to add more pages. A maximum of 10 pages -->
    <!-- In the div below, change the 'title' property. What you type here will be shown in the menu -->
    <div class="page" title="menu 1"> 
    <div class="items"> 
    <div class="item cloned"> 
    <!-- Below you can add a line to be placed at the top of the page between the 'span' elements -->
    <div class="member_info"> <b><span >Dante Lionheart - The current days of a wandering spirit </span></b> <br> <br> 
    <div class="innerText"> 
    <!-- START ITEM #1 --> 
    <!-- You can copy everything between 'start item #1' and 'end item #1' --> 
    
    <div class="JournalItem"> 
    <div class="JournalTitle">
    <!-- The title of the current item goes here --> 
    Captain's log, stardate 982879
    </div>
    <div class="JournalContent">
    <!-- The text of the current item goes here --> 
    <br/>Page 514 [2010-03-03 00:48:54 - Seeds Of The East - The Escape]
    "Memories, I must remember!" Lifeline grabs on any memory he has of the mainland, places as far as possible from Necrovion, people that care about him. The temporal trap starts to weaken. He sees his feet touch the ground repeatedly and soon he starts to hear their sound too. He runs and runs, the gates are not so far now. He finally steps outside the dark land, weaken and drained of energy, still running. he can still hear a terrible scream from behind the gates. The Shade Sentinel will not forget this, but fortunately it can not exit Necrovion in pursue of him, not until it is ..complete ...
    <br/>PPage 513 [2010-03-01 01:48:32 - Seeds Of The East - The Escape]
    The creatures calm down, turning slowly into simple objects on the ground. The glitter of the six tiny stones remind slightly of the beauty of the drachorns they once were. Lifeline lowers to collect them. The sky gets darker and a terrible sound makes him dizzy. The ground cracks and in his confusion he thinks he sees veins of dark blood flowing through it. He grabs the little objects fast, gets up, and runs without looking back. Each step seems like never ending. Its not fear that overwhelms him, but terrible sadness, without any apparent reason.
    <br/>PPage 512 [2010-02-27 19:07:00 - Seeds Of The East - The Escape]
    Lifeline's forces are impressive. His Drachorns shatter the big conglomerate of shades into pieces and their breath burn them away. As the shades are scattered the stone becomes colder. "Try getting it now Handy! Hurry!". Handy grabs a shard of the glowing stone and places it in a pot. "Done! Lets get out of here!". Lifeline summons his drachs back. "You go ahead, i have to calm these creatures first... I said GO!". A dark shadow assambles behind some rocks, escaping Lifelines sight.
    <br/>PPage 511 [2009-09-04 06:48:29 - Seeds Of The East]
    Liberty gasps, "What are those ... things?" Lifeline smiles "Tokens, never saw them?", Lib tries to gather his breath "Oh, I ..did..but...so many ...never imagined they would look like that." Lifeline is no longer listening, he kneels behind his creatures with his fist to his forehead and whispers some words to himself. "Get ready Handy, when he attacks, you try to grab that stone!"
    <br/>PPage 510 [2009-09-04 06:53:37 - Seeds Of The East]
    "Sounds like a good enough reason for me" Lifeline grins while he takes out a small leather sack. Six colored objects roll on the floor. As the roll they change shape and they grow larger and larger. The breath of the drachorns is more frightening than Liberty ever imagined. Glowing signs appear, not as tattoos, but carved right into the skin of the creatures. 								
    </div>
    </div> 
    <!-- END ITEM #1 --> 
    </div> 
    </div> 
    </div> 
    </div> 
    </div> 
    <!-- END PAGE #1 -->  
    <!-- START PAGE #2 --> 
    <div class="page" title="menu 2"> 
    <div class="items"> 
    <div class="item cloned"> 
    <div class="member_info"> <b><span>Dante Lionheart - Owning stuff!</span></b> <br> <br> 
    <div class="innerText"> 
    <div class="JournalItem"> 
    <div class="JournalTitle">
    My gear
    </div>
    <div class="JournalContent">
    [equipment] 
    </div>
    </div> 
    <div class="JournalItem"> 
    <div class="JournalTitle">And My creatures</div> 
    <div class="JournalContent">
    [creatures]
    </div>                                                                                                    
    </div> 
    </div> 
    </div> 
    </div> 
    </div> 
    </div> 
    <!-- END PAGE #1 --> 	                                                                            
    <!-- START PAGE #3 --> 
    <div class="page" title="menu 3"> 
    <div class="items"> 
    <div class="item cloned"> 
    <div class="member_info"> <b><span > Dante Lionheart - The stats</span></b> <br> <br> 
    <div class="innerText"> 
    <div class="JournalItem"> 
    <div class="JournalTitle">Just me</div>
    <div class="JournalContent">
    [character]
    </div>
    </div> 
    
    </div> 
    </div> 
    </div> 
    </div> 
    </div> 
    <!-- END PAGE #3 --> 		
    <!-- START PAGE #4 --> 
    <div class="page" title="menu 4"> 
    <div class="items"> 
    <div class="item cloned"> 
    <div class="member_info"> <b><span >Dante Lionheart - The current days of a wandering spirit</span></b> <br> <br> 
    <div class="innerText"> 
    <div class="JournalItem"> 
    <div class="JournalTitle">Entry 1</div>
    <div class="JournalContent">
    
    </div>                                                                                                    
    </div> 
    
    </div> 
    </div> 
    </div> 
    </div> 
    </div> 
    <!-- END PAGE #4 --> 
    </div> 
    </div> 
    </div>
    </div>
    </div>  
    </div>  </div> 
    
    </div>   
    </div> 
      
    
    [/log]

    And finally,
    [log=everything]
    <link rel="stylesheet" type="text/css" href="http://www.markbiermann.nl/md/templates/template.css">
    <style>
    #main_content
    {
    width:762px; 
    height: 480px; 
    background-position: 50% 50%; 
    background-repeat: no-repeat;  
    }
    
    #inner_content
    {
    width: 530px; 
    height: 470px; 
    margin: 00px 118px;
    padding-top:5px; 
    overflow: hidden;
    }
    #inner_content_1{width: 500px; margin: 0px 5px;}
    #center_page{height: 468px;}
    .avatar-section
    {
    width:490px;
    border: 5px solid black;
    background-color:#F1EFD6;
    }
    /* main vertical scroll */
    #main {
    position:relative;
    overflow:hidden;
    height:400px;
    }
    /* root element for pages */
    #pages {
    position:absolute;
    height:20000em;
    }
    /* single page */
    .page {
    width: 530px;
    height:400px;
    }
    /* single scrollable item */
    .item {
    float:left;
    cursor:pointer;
    width: 530px;
    height:400px;
    overflow: auto;
    }
    /* main navigator */
    #main_navi {
    height: 48px;
    width:520px;
    padding:0px !important;
    margin:0px !important;
    margin: auto !important;
    }
    #main_navi li {
    float:left;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid black;
    font-size:12px;
    height:16px;
    margin-bottom:2px;
    margin-right:2px;
    list-style-type:none;
    padding:2px;
    width:102px;
    cursor:pointer;
    text-align: center;
    text-decoration: underline;
    font-style: italic;
    }
    .grad
    {
    width:100%;
    height:100%;
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VkZWFjZSIgc3RvcC1vcGFjaXR5PSIwLjYiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2I3N2MyNCIgc3RvcC1vcGFjaXR5PSIwLjI0Ii8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(top,  rgba(237,234,206,0.6) 0%, rgba(183,124,36,0.24) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(237,234,206,0.6)), color-stop(100%,rgba(183,124,36,0.24))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(237,234,206,0.6) 0%,rgba(183,124,36,0.24) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(237,234,206,0.6) 0%,rgba(183,124,36,0.24) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(237,234,206,0.6) 0%,rgba(183,124,36,0.24) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(237,234,206,0.6) 0%,rgba(183,124,36,0.24) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99edeace', endColorstr='#3db77c24',GradientType=0 ); /* IE6-8 */                    
    /*generated by http://www.colorzilla.com/gradient-editor/, handy tool for gradients*/
    }
    .grad:hover{
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JlYTM4NCIgc3RvcC1vcGFjaXR5PSIwLjI0Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZWVkZTYiIHN0b3Atb3BhY2l0eT0iMC42Ii8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(top,  rgba(190,163,132,0.24) 0%, rgba(238,237,230,0.6) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(190,163,132,0.24)), color-stop(100%,rgba(238,237,230,0.6))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(190,163,132,0.24) 0%,rgba(238,237,230,0.6) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(190,163,132,0.24) 0%,rgba(238,237,230,0.6) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(190,163,132,0.24) 0%,rgba(238,237,230,0.6) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(190,163,132,0.24) 0%,rgba(238,237,230,0.6) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3dbea384', endColorstr='#99eeede6',GradientType=0 ); /* IE6-8 */
    /*generated by http://www.colorzilla.com/gradient-editor/, handy tool for gradients*/
    }
    
    #t7p5{margin-left:60px;}
    #t9p6{margin-left:48px;}
    #main_navi li.active {font-weight: bold;font-style: italic;}
    #main_navi strong {display:block;}
    .member_info{float:left;margin-left:2px;margin-right:2px;width:500px;}
    div.member_info .innerText{font-weight: bold;font-style: italic;width:500px;}
    .JournalItem{margin-bottom:10px;border-bottom: 1px solid black;padding-bottom:10px;width:500px;}
    .JournalTitle{font-size: 16px;width:500px;}
    .JournalContent{font-size: 14px;width:500px;}
    .clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    font-size: 0;
    }
    /* TEMPLATE POSITIONS  */        
    #clouds {
    position:relative;
    width:100%;
    height:480px;
    }
    #skygrad {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:480px;
    }
    #objectlayer1,#objectlayer2 {
    position:absolute;
    top:0;
    left:0px;
    width:100%;
    height:480px;
    }
    #center_page{background-color: rgba(40,50, 10, 0.6);border: 1px solid black;}
    #navigation{background-color:rgba(0,0, 0, 0.2);}                                                                                            
    /* COLOR  */     
    .blue #center_page{background-color: rgba(0,51, 102, 0.6);border: 1px solid black;}
    .blue #navigation{background-color:rgba(0,0, 0, 0.2);}    											
    .blue #main_navi li {color: #99ffff;border-color: #003366;background-color:#000;}
    .blue #main_navi li:hover {color: #00cccc;}
    .blue #main_navi li.active {color: 00cccc;}                                            
    .blue .JournalItem{color: #00cccc;border-color: #00cccc;}
    .blue #main_content, .blue #border_content{border-color:#00cccc;}
    .blue span, .member_info {color: #00cccc;}    
    
    .orange #main_navi li {color: #FFC779;border-color: #FFC779;background-color:#000;}
    .orange #main_navi li:hover {color: #FFE0B6;}
    .orange #main_navi li.active {color: #FFE0B6;}                                            
    .orange .JournalItem{color: #FFE0B6;border-color: #FFE0B6;}
    .orange #main_content, .orange #border_content{border-color: #FFE0B6;}
    .orange span,.orange .member_info {color: #FFE0B6;}    
    
    .green #main_navi li {color: #CDE0A2;border-color: #CDE0A2;background-color:#000;}
    .green #main_navi li:hover {color: #E8FFB5;}
    .green #main_navi li.active {color: #E8FFB5;}                                            
    .green .JournalItem{color: #E8FFB5;border-color: #E8FFB5;}
    .green #main_content, .green #border_content{border-color: #E8FFB5;}
    .green span, .member_info {color: #E8FFB5;}   
    
    .gray #center_page{background-color: rgba(40,40, 40, 0.6);border: 1px solid black;}
    .gray #navigation{background-color:rgba(0,0, 0, 0.2);}    											
    .gray #main_navi li {color: #ededed;border-color: #ededed;background-color:#000;}
    .gray #main_navi li:hover {color: #fff;}
    .gray #main_navi li.active {color: #fff;}                                            
    .gray .JournalItem{color: #eee;border-color: #eee;}
    .gray #main_content, .gray #border_content{border-color:#eee;}
    .gray span, .member_info {color: #eee;}         
    
    /* TEMPLATE SETTINGS  */    
    div#main_content.creek{background-image: url(http://www.markbiermann.nl/md/templates/template_images/creek/bg.jpg);}
    .creek #clouds {background:url(http://www.markbiermann.nl/md/templates/template_images/creek/clouds.png);}
    .creek #skygrad {background:url(http://www.markbiermann.nl/md/templates/template_images/creek/sky_gradient2.png);}
    .creek #objectlayer1{background:url(http://www.markbiermann.nl/md/templates/template_images/creek/100.png);}
    .creek #objectlayer2{background:url(http://www.markbiermann.nl/md/templates/template_images/creek/semi.png);}
    
    div#main_content.mandel{background-image: url(http://www.markbiermann.nl/md/templates/template_images/mandel/bg.jpg);}
    .mandel #clouds {background:url(http://www.markbiermann.nl/md/templates/template_images/mandel/clouds.png);}
    .mandel #skygrad {background:url(http://www.markbiermann.nl/md/templates/template_images/mandel/sky_gradient2.png);}
    .mandel #objectlayer1{background:url(http://www.markbiermann.nl/md/templates/template_images/mandel/100.png);}
    .mandel #objectlayer2{background:url(http://www.markbiermann.nl/md/templates/template_images/mandel/semi.png);}
    
    div#main_content.tree{background-image: url(http://www.markbiermann.nl/md/templates/template_images/tree/bg.jpg);}
    .tree #clouds {background:url(http://www.markbiermann.nl/md/templates/template_images/tree/clouds.png);}
    .tree #skygrad {background:url(http://www.markbiermann.nl/md/templates/template_images/tree/sky_gradient2.png);}
    .tree #objectlayer1{background:url(http://www.markbiermann.nl/md/templates/template_images/tree/100.png);}
    .tree #objectlayer2{background:url(http://www.markbiermann.nl/md/templates/template_images/tree/semi.png);}
    
    div#main_content.wind{background-image: url(http://www.markbiermann.nl/md/templates/template_images/wind/bg.jpg);}
    .wind #clouds {background:url(http://www.markbiermann.nl/md/templates/template_images/wind/clouds.png);}
    .wind #skygrad {background:url(http://www.markbiermann.nl/md/templates/template_images/wind/sky_gradient2.png);}
    .wind #objectlayer1{background:url(http://www.markbiermann.nl/md/templates/template_images/wind/100.png);}
    .wind #objectlayer2{background:url(http://www.markbiermann.nl/md/templates/template_images/wind/semi.png);}
    
    div#main_content.mountain1{background-image: url(http://www.markbiermann.nl/md/templates/template_images/mountain1/bg.jpg); }
    .mountain1 #clouds {background:url(http://www.markbiermann.nl/md/templates/template_images/mountain1/clouds.png);}
    .mountain1 #skygrad {background:url(http://www.markbiermann.nl/md/templates/template_images/mountain1/sky_gradient2.png);}
    .mountain1 #objectlayer1{background:url(http://www.markbiermann.nl/md/templates/template_images/mountain1/100.png);}
    .mountain1 #objectlayer2{background:url(http://www.markbiermann.nl/md/templates/template_images/mountain1/semi.png);}    
    
    div#main_content.meadow{background-image: url(http://www.markbiermann.nl/md/templates/template_images/meadow/bg.jpg); }
    .meadow #clouds {background:url(http://www.markbiermann.nl/md/templates/template_images/meadow/clouds.png);}
    .meadow #skygrad{background:url(http://www.markbiermann.nl/md/templates/template_images/meadow/sky_gradient2.png);}
    .meadow #objectlayer1{background:url(http://www.markbiermann.nl/md/templates/template_images/meadow/100.png);}
    .meadow #objectlayer2{background:url(http://www.markbiermann.nl/md/templates/template_images/meadow/semi.png);}
    
    
    </style>
    <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js">
    </script> 
                                         
    <script>
    $(function() {
    // Define the height of your two background images.
    //The image to scroll
    var backgroundheight = 2000;
    //The image to overlay
    var backgroundheight2 = 2000;
    // Create a random offset for both images' starting positions
    offset = Math.round(Math.floor(Math.random() * 2001));
    offset2 = Math.round(Math.floor(Math.random() * 1001));
    offset3 = backgroundheight;
    turner = 0;
    function scrollbackground() {
    //Ensure all bases are covered when defining the offset.
    offset = (offset < 1) ? offset + (backgroundheight2 - 1) : offset - 1;
    if (turner === 0)
    {
    if (offset3 < (1 + 475))
    {
    turner = 1;
    }
    else
    {
    offset3 = offset3 - 7;
    }
    }
    if (turner === 1)
    {
    if (offset3 > (backgroundheight - 475))
    {
    turner = 0;
    }
    else
    {
    offset3 = offset3 + 7;
    }
    }
    // Put the background onto the required div and animate vertically
    $('#clouds').css("background-position", offset + "px" + " 50%");
    $('#skygrad').css("background-position", "50% " + offset3 + "px");
    // Enable the function to loop when it reaches the end of the image
    setTimeout(function() {
    scrollbackground();
    }, 100
    );
    }
    // Initiate the scroll
    scrollbackground();
    });
    </script>                                  
    <!-- OPTIONS THEME: meadow, mountain1, creek, mandel, tree, wind --> 
    <!-- OPTIONS COLOR: orange, green, gray --> 
    <!-- To change the background image change the two class names in the div below, you can pick any from theme or color -->
    
    <div id="main_content" class="mandel blue"> 
    <div id="clouds" >
    <div id="objectlayer1" >
    <div id="skygrad"  >
    <div id="objectlayer2" >
    <div id="inner_content"> 
    <div id="center_page">
    <div class="clearfix" id="navigation"> 
    </div> 
    <div id="main"> <!-- root element for pages --> 
    <div id="pages"> 
    
    <!-- START PAGE #1 -->   
    <!-- copy everything from 'start page #1' and 'end page #1' to add more pages. A maximum of 10 pages -->
    <!-- In the div below, change the 'title' property. What you type here will be shown in the menu -->
    <div class="page" title="menu 1"> 
    <div class="items"> 
    <div class="item cloned"> 
    	<!-- Below you can add a line to be placed at the top of the page between the 'span' elements -->
    	<div class="member_info"> <b><span >Dante Lionheart - The current days of a wandering spirit </span></b> <br> <br> 
    		<div class="innerText"> 
    			<!-- START ITEM #1 --> 
    			<!-- You can copy everything between 'start item #1' and 'end item #1' --> 
    
    			<div class="JournalItem"> 
    				<div class="JournalTitle">
    					<!-- The title of the current item goes here --> 
    					Captain's log, stardate 982879
    				</div>
    				<div class="JournalContent">
    					<!-- The text of the current item goes here --> 
    					<br/>Page 514 [2010-03-03 00:48:54 - Seeds Of The East - The Escape]
    					"Memories, I must remember!" Lifeline grabs on any memory he has of the mainland, places as far as possible from Necrovion, people that care about him. The temporal trap starts to weaken. He sees his feet touch the ground repeatedly and soon he starts to hear their sound too. He runs and runs, the gates are not so far now. He finally steps outside the dark land, weaken and drained of energy, still running. he can still hear a terrible scream from behind the gates. The Shade Sentinel will not forget this, but fortunately it can not exit Necrovion in pursue of him, not until it is ..complete ...
    					<br/>PPage 513 [2010-03-01 01:48:32 - Seeds Of The East - The Escape]
    					The creatures calm down, turning slowly into simple objects on the ground. The glitter of the six tiny stones remind slightly of the beauty of the drachorns they once were. Lifeline lowers to collect them. The sky gets darker and a terrible sound makes him dizzy. The ground cracks and in his confusion he thinks he sees veins of dark blood flowing through it. He grabs the little objects fast, gets up, and runs without looking back. Each step seems like never ending. Its not fear that overwhelms him, but terrible sadness, without any apparent reason.
    					<br/>PPage 512 [2010-02-27 19:07:00 - Seeds Of The East - The Escape]
    					Lifeline's forces are impressive. His Drachorns shatter the big conglomerate of shades into pieces and their breath burn them away. As the shades are scattered the stone becomes colder. "Try getting it now Handy! Hurry!". Handy grabs a shard of the glowing stone and places it in a pot. "Done! Lets get out of here!". Lifeline summons his drachs back. "You go ahead, i have to calm these creatures first... I said GO!". A dark shadow assambles behind some rocks, escaping Lifelines sight.
    					<br/>PPage 511 [2009-09-04 06:48:29 - Seeds Of The East]
    					Liberty gasps, "What are those ... things?" Lifeline smiles "Tokens, never saw them?", Lib tries to gather his breath "Oh, I ..did..but...so many ...never imagined they would look like that." Lifeline is no longer listening, he kneels behind his creatures with his fist to his forehead and whispers some words to himself. "Get ready Handy, when he attacks, you try to grab that stone!"
    					<br/>PPage 510 [2009-09-04 06:53:37 - Seeds Of The East]
    					"Sounds like a good enough reason for me" Lifeline grins while he takes out a small leather sack. Six colored objects roll on the floor. As the roll they change shape and they grow larger and larger. The breath of the drachorns is more frightening than Liberty ever imagined. Glowing signs appear, not as tattoos, but carved right into the skin of the creatures. 								
    				</div>
    			</div> 
    			<!-- END ITEM #1 --> 
    		</div> 
    	</div> 
    </div> 
    </div> 
    </div> 
    <!-- END PAGE #1 -->  
    <!-- START PAGE #2 --> 
    <div class="page" title="menu 2"> 
    <div class="items"> 
    <div class="item cloned"> 
    	<div class="member_info"> <b><span>Dante Lionheart - Owning stuff!</span></b> <br> <br> 
    		<div class="innerText"> 
    			<div class="JournalItem"> 
    				<div class="JournalTitle">
    					My gear
    				</div>
    				<div class="JournalContent">
    					[equipment] 
    				</div>
    			</div> 
    			<div class="JournalItem"> 
    				<div class="JournalTitle">And My creatures</div> 
    				<div class="JournalContent">
    					[creatures]
    				</div>                                                                                                    
    			</div> 
    		</div> 
    	</div> 
    </div> 
    </div> 
    </div> 
    <!-- END PAGE #1 --> 	                                                                            
    <!-- START PAGE #3 --> 
    <div class="page" title="menu 3"> 
    <div class="items"> 
    <div class="item cloned"> 
    	<div class="member_info"> <b><span > Dante Lionheart - The stats</span></b> <br> <br> 
    		<div class="innerText"> 
    			<div class="JournalItem"> 
    				<div class="JournalTitle">Just me</div>
    				<div class="JournalContent">
    					[character]
    				</div>
    			</div> 
    
    		</div> 
    	</div> 
    </div> 
    </div> 
    </div> 
    <!-- END PAGE #3 --> 		
    <!-- START PAGE #4 --> 
    <div class="page" title="menu 4"> 
    <div class="items"> 
    <div class="item cloned"> 
    	<div class="member_info"> <b><span >Dante Lionheart - The current days of a wandering spirit</span></b> <br> <br> 
    		<div class="innerText"> 
    			<div class="JournalItem"> 
    				<div class="JournalTitle">Entry 1</div>
    				<div class="JournalContent">
    
    				</div>                                                                                                    
    			</div> 
    
    		</div> 
    	</div> 
    </div> 
    </div> 
    </div> 
    <!-- END PAGE #4 --> 
    </div> 
    </div> 
    </div>
    </div>
    </div>  
    </div>  </div> 
    
    <script>
    $(document).ready(function() {
    $(function() {
    $statelist = $('<ul id="main_navi"><\/ul>').appendTo('#navigation');
    $count = 0;
    $curpage = 0;
    $('.page').each(function(i, o) {
    $count++;
    });
    $('.page').each(function(i, o) {
    $curpage++;
    if ($count < 6)
    {
    $total = 480;
    } else if ($count < 11)
    {
    $total = 800;
    }
    // calculating widths used for menu items
    switch ($count)
    {
    case 1:
    $total = 500;
    break;
    case 2:
    $total = 252;
    break;
    case 3:
    $total = 480 / 3;
    break;
    case 4:
    $total = 504 / 2;
    break;
    case 5:
    $total = 480 / 5;
    break;
    case 6:
    $total = 496 / 3;
    break;
    case 7:
    $total = 120;
    break;
    case 8:
    $total = 120;
    break;
    case 9:
    $total = 480 / 5;
    break;
    case 10:
    $total = 480 / 5;
    break;
    default:
    $total = 120;
    }
    // menu creation by taking titles from the content page
    var $state = $(this);
    $state.attr('id', 'state_' + i);
    $statelist.append('<li id="t' + $count + 'p' + $curpage + '" style="width:' + $total + 'px;"><div class="grad">' + $state.attr('title') + '</div><\/li>');
    });
    
    // main vertical scroll
    $("#main").scrollable({
    // basic settings
    vertical: true,
    // up/down keys will always control this scrollable
    keyboard: 'static'
    // main navigator (thumbnail images)
    }).navigator("#main_navi");
    // horizontal scrollables. each one is circular and has its own navigator instance
    
    //
    });
    });
    </script> 
    
    </div>   
    </div> 
    <!-- ---------------------TEMPLATE ENDS HERE-------------------- -->       
    
    [/log]
  7. I don't think there will ever be a cure against depletion the way things are.

    There are fewer resources then people whom want them (I don't care for the reason for 'wanting' them).

     

    Thus there will always be the point of 60% ...and then someone walks by and thinks,'If I don't get it, someone else will'.

    Me or someone else.

     

    I recently found myself with a herb gathering thing. My first gathering tool I ever had. And then, what do I see, herbs at 1/2 at best. I know if I don't harvest them, there's a fair chance that someone else will. So I picked them.

    If you put 20 random people together and say 'You can all get 50 dollar, if noone of you picks up the 100 dollars on the table', you can be assured that someone picks up the 100.

     

    Is there a fix? I don't know. A peek at other games shows resources nodes being increased (WoW) or all resources being personal (Guild wars 2). I like the second idea, then it's your own damned problem if you deplete them. But it is totally not a feasable thing I'd guess.

  8. Yes, but the a href version is just what the editor used :)

    I started with id tags, didn't help much.

     

    Md ca't fix wrong user code, but fixing wrong chrome workings is nearly impossible too

    Read some stuff about using absolute positioning and such to fix it. Maybe I will poke around with that. Doesn't matter though. Wrote a jquery div hide, was quicker :)

  9. Yes! As you can see in my papers, I know better ways then anchors.

    But I don't think I can quite explain the javascript way for someone clueless on html in their knowledge document :)

     

    Maybe she can use one of the templates being developed (yes yes still working on mine) and happily ignore this till then.

    (cause yes, it is fairly trivial)

  10. Bug: Weird scrolling behaviour

    Browser: Chrome

    Interface: Any of the public papers

     

    Description:When using anchors in a document, in this test replication, military beliefs, the anchor scrolls everything. In the example I build a list and filled it with 2 href='#anchorname' links.

     

    After several <br/> I added at first a div with an id matching the anchor. Later also tried it with the <a name="anchorname" method the build in link creator seems to favor.

     

    In both cases the outcome was the same, clicking on the link does not scroll down the scrollbar of just the papers document, but it scrolls the main browser view as well to ensure the anchor is at the top of your screen. This is shown in the added screenshot below.

     

    Also added the sample code I used to replicate the bug.

     

    (also, related to my previous bug report, clicking the anchorlink will also remove the red crosses on any further pop ups. Checked to ensure it was not save/edit/ok.)

     
    <ul> 
      <li><a title="test 1" href="#test1">test 1</a></li> 
      <li><a title="test 2" href="#test2">test 2</a></li> 
    </ul> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
    <div> <a name="test1" title="test 1"></a>this is the first test
    </div> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
    <div id="test2" title="Test 2"> this is the second test
    </div>
    

    focus.jpg

×
×
  • Create New...