Jump to content

Multiple style personal page template

biermann

By biermann
in Personal Page Templates

 Share

Recommended Posts

biermann Newbie

biermann

Posted
Posted (edited)

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] Edited by biermann
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to topic listing

  • Forum Statistics

    17.5k
    Total Topics
    182.5k
    Total Posts

  • Recently Browsing

    • No registered users viewing this page.

  • Upcoming Events

    No upcoming events found

  • Recent Event Reviews

×
×
  • Create New...