ThemeKings Custom Web Design
"Old School Web Design Community Forum"

Recent Posts

Pages: [1] 2
1
Horizontal Menus / Dark Classic Buttons
« Last post by Swift on November 11, 2020, 02:54:31 PM »
View Dark Classic Button Demo


Here is the HTML code for all four (4) Dark Classic Button options:

Code: [Select]
<!-- Dark Classic Horizontal Nav Menu -->
<div style="width:100%; margin-top:100px">


        <div id="hz-menu">
            <ul>
                <li><a class="hz-button" href="#">Link Here[/url]</li>
                <li><a class="hz-button" href="#">Link Here[/url]</li>
                <li><a class="hz-button" href="#">Link Here[/url]</li>
                <li><a class="hz-button" href="#">Link Here[/url]</li>
                <li><a class="hz-button" href="#">Link Here[/url]</li>
            </ul>
        </div>
       
       
</div>       





<!-- Dark Classic Version 2 Horizontal Nav Menu -->
<div style="width:100%; margin-top:100px">


        <div id="hz-menu-v2">
            <ul>
                <li><a class="hz-v2-button" href="#">Link Here[/url]</li>
                <li><a class="hz-v2-button" href="#">Link Here[/url]</li>
                <li><a class="hz-v2-button" href="#">Link Here[/url]</li>
                <li><a class="hz-v2-button" href="#">Link Here[/url]</li>
                <li><a class="hz-v2-button" href="#">Link Here[/url]</li>
            </ul>
        </div>
       
</div>







<!-- Dark Classic Version 3 Horizontal Nav Menu -->
<div style="width:100%; margin-top:100px">


        <div id="hz-menu-v3">
            <ul>
                <li><a class="hz-v3-button" href="#">Link Here[/url]</li>
                <li><a class="hz-v3-button" href="#">Link Here[/url]</li>
                <li><a class="hz-v3-button" href="#">Link Here[/url]</li>
                <li><a class="hz-v3-button" href="#">Link Here[/url]</li>
                <li><a class="hz-v3-button" href="#">Link Here[/url]</li>
            </ul>
        </div>
       
</div>







<!-- Dark Classic Version 4 Horizontal Nav Menu -->
<div style="width:100%; margin-top:100px">


        <div id="hz-menu-v4">
            <ul>
                <li><a class="hz-v4-button" href="#">Link Here[/url]</li>
                <li><a class="hz-v4-button" href="#">Link Here[/url]</li>
                <li><a class="hz-v4-button" href="#">Link Here[/url]</li>
                <li><a class="hz-v4-button" href="#">Link Here[/url]</li>
                <li><a class="hz-v4-button" href="#">Link Here[/url]</li>
            </ul>
        </div>
       
</div>



Here is the CSS code for all four (4) Dark Classic Button options:

Code: [Select]
/* Dark Classic Horizontal Nav Menu */
#hz-menu {
    margin: 0px auto 0px auto;
    padding: 0px;
    width: 640px;
    height: 30px;
    position: relative;
    overflow: hidden;
    list-style-type: none;
}
#hz-menu ul {
    padding: 0px;
    margin: 0px;
    list-style-type: none;
}
#hz-menu ul li {
    padding: 0px;
    margin: 0px 4px 0px 4px;
    width: 120px;
    height: 30px;
    position: relative;
    overflow: hidden;
    float: left;
    text-align: center;
    line-height: 28px;
    font-weight: bold;
    text-decoration: none;
    font-size: 100%;
    font-style: normal;
}
a.hz-button:link, a.hz-button:visited {
    background: url('http://themekings.net/buttons/dark-classic/img/version-1.jpg') no-repeat 0 0;
    width: 120px;
    height: 30px;
    display: block;
    color: #E4E4E4;
    text-decoration: none;
}
a.hz-button:hover {
    background-position: 0 -30px;
    color: #E4E4E4;
    text-decoration: none;
}
a.hz-button:active {
    background-position: 0 -60px;
    color: #333333;
    text-decoration: none;
}



/* Dark Classic Version 2 Horizontal Nav Menu */
#hz-menu-v2 {
    margin: 0px auto 0px auto;
    padding: 0px;
    width: 720px;
    height: 46px;
    position: relative;
    overflow: hidden;
    list-style-type: none;
}
#hz-menu-v2 ul {
    padding: 0px;
    margin: 0px;
    list-style-type: none;
}
#hz-menu-v2 ul li {
    padding: 0px;
    margin: 0px 4px 0px 4px;
    width: 136px;
    height: 46px;
    position: relative;
    overflow: hidden;
    float: left;
    text-align: center;
    line-height: 44px;
    font-weight: bold;
    text-decoration: none;
    font-size: 100%;
    font-style: normal;
}
a.hz-v2-button:link, a.hz-v2-button:visited {
    background: url('http://themekings.net/buttons/dark-classic/img/dark-classic-v2.png') no-repeat 0 0;
    width: 136px;
    height: 46px;
    display: block;
    color: #E4E4E4;
    text-decoration: none;
}
a.hz-v2-button:hover {
    background-position: 0 -46px;
    color: #E4E4E4;
    text-decoration: none;
}
a.hz-v2-button:active {
    background-position: 0 -92px;
    color: #333333;
    text-decoration: none;
}




/* Dark Classic Version 3 Horizontal Nav Menu */
#hz-menu-v3 {
    margin: 0px auto 0px auto;
    padding: 0px;
    width: 700px;
    height: 42px;
    position: relative;
    overflow: hidden;
    list-style-type: none;
}
#hz-menu-v3 ul {
    padding: 0px;
    margin: 0px;
    list-style-type: none;
}
#hz-menu-v3 ul li {
    padding: 0px;
    margin: 0px 4px 0px 4px;
    width: 132px;
    height: 42px;
    position: relative;
    overflow: hidden;
    float: left;
    text-align: center;
    line-height: 42px;
    font-weight: bold;
    text-decoration: none;
    font-size: 100%;
    font-style: normal;
}
a.hz-v3-button:link, a.hz-v3-button:visited {
    background: url('http://themekings.net/buttons/dark-classic/img/dark-classic-v3.jpg') no-repeat 0 0;
    width: 132px;
    height: 42px;
    display: block;
    color: #E4E4E4;
    text-decoration: none;
}
a.hz-v3-button:hover {
    background-position: 0 -42px;
    color: #E4E4E4;
    text-decoration: none;
}
a.hz-v3-button:active {
    background-position: 0 -84px;
    color: #333333;
    text-decoration: none;
}




/* Dark Classic Version 4 Horizontal Nav Menu */
#hz-menu-v4 {
    margin: 0px auto 0px auto;
    padding: 0px;
    width: 800px;
    height: 52px;
    position: relative;
    overflow: hidden;
    list-style-type: none;
}
#hz-menu-v4 ul {
    padding: 0px;
    margin: 0px;
    list-style-type: none;
}
#hz-menu-v4 ul li {
    padding: 0px;
    margin: 0px 4px 0px 4px;
    width: 152px;
    height: 52px;
    position: relative;
    overflow: hidden;
    float: left;
    text-align: center;
    line-height: 54px;
    font-weight: bold;
    text-decoration: none;
    font-size: 100%;
    font-style: normal;
}
a.hz-v4-button:link, a.hz-v4-button:visited {
    background: url('http://themekings.net/buttons/dark-classic/img/dark-classic-v4.png') no-repeat 0 0;
    width: 152px;
    height: 52px;
    display: block;
    color: #E4E4E4;
    text-decoration: none;
}
a.hz-v4-button:hover {
    background-position: 0 -52px;
    color: #E4E4E4;
    text-decoration: none;
}
a.hz-v4-button:active {
    background-position: 0 -104px;
    color: #333333;
    text-decoration: none;
}
Images for these are linked below. Save them into your "img" folder as linked to within the given css above. Change as needed. Enjoy!  8)
2
Horizontal Menus / Pure CSS Menu - Horizontal Drop Down
« Last post by Swift on November 06, 2020, 10:36:37 AM »
View Demo Of Pure CSS Menu


Here is the CSS Code for this menu:

Code: [Select]
.container {    width: 880px;
    padding: 40px;
    margin: 0 auto;
    z-index: 10;
}

#main_navigation {
    width: 880px;
    top: 20px;
    font-size: 12px;
    float: left;
    height: 50px;
    outline: none;
    margin-bottom: 80px;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    min-height: 50px;
    border-bottom: 2px solid #FFF;
}
.main-menu {
    display: block;
    z-index: 22222;
    font-family: 'Droid Arabic Kufi', tahoma, serif;
    letter-spacing: 0pt;
}
.main-menu ul li a, .main-menu ul li a:link, .main-menu ul li a:visited, .searchholder {
    border-bottom: 4pt solid transparent;
    padding-bottom: 10px;
    padding-top: 8px;
}
.main-menu ul {
    margin: 0;
    padding: 0px;
    list-style-type: none;
    z-index: 10000;
    position: relative;
}
.main-menu ul li {
    display: inline;
    float: left;
    z-index: 100000;
}
.main-menu ul li > ul {
    z-index: 0;
    visibility: hidden;
    display: inline;
    opacity: 0;
    padding: 0px;
    margin: 0px;
    position: absolute;
    top: 50px;
    left: -30px;
    color: #FFF;
    width: 880px;
}
.main-menu ul li:hover > ul {
    display: block;
    visibility: visible;
    left: 0px;
    opacity: 1;
}
.main_list_item {
    height: 40px;
    z-index: 0;
}
.main_list_item > a.parent {
    position: relative;
}
.main_list_item > a.parent:after {
    content: "";
    position: absolute;
    left: 44%;
    top: 0px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #FFF;
}
.main-menu ul li a.main_list_link, .main-menu ul li a.main_list_link:link {
    line-height: 30px;
    text-shadow: none;
    font-size: 13px;
    text-transform: uppercase;
}
.main-menu ul li > a {
    display: block;
    text-decoration: none;
    padding: 0px 15px;
    /*border-radius:3px;*/
}
* html .main-menu ul li a {
    display: inline-block;
}
.main-menu ul li ul li a {
    margin: 0px;
}
.main-menu ul ul {
    background: #FFF;
    -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.1);
    box-shadow: 0px 3px 3px rgba(0,0,0,0.1);
    z-index: 101;
    color: #707070;
    width: 100%;
    position: absolute;
    left: 0px;
    overflow:hidden;
}
.main-menu ul li ul li {
    position: relative;
}
.main-menu ul ul li a, .main-menu ul ul li a:link, .main-menu ul ul li a:visited {
    height: 100%;
    text-transform: capitalize;
    margin-right: 0px!important;
    margin-left: 0px!important;
    font-size: 14px;
    color: #707070;
    z-index: 1000;
}
.main-menu ul ul li:hover > a {
    cursor: pointer;
    text-decoration: none!important;
    padding-left: 30px;
}
.main-menu ul ul li > a:after {
    content: "";
    opacity: 0;
    position: absolute;
    left: 20px;
    top: 16px;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 5px solid #FFFFFF;
}
.main-menu ul ul li:hover > a:after {
    content: "";
    opacity: 1;
    position: absolute;
    left: 0px;
    top: 14px;
    width: 0;
    height: 0;
    border-left: 5px solid #FFFFFF;
}
.main-menu ul ul ul {
    position: absolute;
    top : -2px;
    left: 100;
}
/* COLORS */
/* *********************************************************************************************************** */
/* BLACK */
.black {
    /* gradient */
    background-position: 0% 0%;
    border: 0px solid #EEE;
    background-image: linear-gradient(top, #363636, #1f1f1f); /* W3C */ /* IE5.5 - 7 */ /* IE8 */ /* IE9 */ /* Firefox */;
    background-color: #222;
    background-repeat: repeat;
    background-attachment: scroll;
}
.black .main_list_item:after {
    content: "";
    z-index: -1;
    position: absolute;
    border-right: 1px solid #353b3f;
    box-shadow: 1px 0px 0px #121517;
    height: 25px;
    top: 13px;
    background: #FFF;
}
.black ul li > a {
    color: #FFF;
}
.black ul ul li:hover > a {
    text-decoration: none!important;
    color: #FFF!important;
    background: #333;
    padding-left: 30px;
    text-shadow: 1px 0px 0px #3080b0;
}
.black ul li a:hover, .black ul li:hover a {
    color: #707070!important;
}
.black ul ul {
    border-top: 2px solid #ce462b;
    border-bottom: 1px solid #ce462b;
}
/* GRAY */
.gray {
    /* gradient */
    background-position: 0% 0%;
    border: 0px solid #EEE;
    background-image: linear-gradient(top, #959da4, #7e858b); /* W3C */ /* IE5.5 - 7 */ /* IE8 */ /* IE9 */ /* Firefox */;
    background-color: #959da4;
    background-repeat: repeat;
    background-attachment: scroll;
}
.gray ul ul {
    border-top: 2px solid #333333;
    border-bottom: 1px solid #333333;
}
.gray ul ul li:hover > a {
    text-decoration: none!important;
    color: #FFF!important;
    background: #959da4;
    padding-left: 30px;
    text-shadow: 1px 0px 0px #898989;
}
.gray ul li a {
    color: #333;
}
.gray ul li > a:hover, .gray ul li:hover > a {
    color: #FFF!important;
}
.gray .main_list_item:after {
    content: "";
    position: absolute;
    border-right: 1px solid #a3a8ad;
    box-shadow: 1px 0px 0px #6e7378;
    height: 25px;
    top: 13px;
    background: #FFF;
}
/* border fix */
.main_list_item:first-child:after {
    border-right: none;
}
nav {
    text-align: center;
}
.clear {
    clear: both;
}
Here is the HTML Code for this menu as well:

Code: [Select]
<div class="container">
   
    <!--  Gray Menu Starts Here -->
    <div id="main_navigation" class="black main-menu ">
       
        <ul>
            <li class="main_list_item" style="border-right: none;"><a class="main_list_link" href="#" title="Home">Home[/url]</li>
            <li class="main_list_item"><a class="parent main_list_link" href="#">Products[/url]
                <ul>
                    <li><a href="#">Product 1[/url]</li>
                    <li><a href="#">Product 2[/url]
                        <ul>
                            <li><a href="#">Product 2a[/url]</li>
                            <li><a href="#">Product 2b[/url]</li>
                            <li><a href="#">Product 2c[/url]
                                <ul>
                                    <li><a href="#">Product 2c-1[/url]</li>
                                    <li><a href="#">Product 2c-2[/url]</li>
                                    <li><a href="#">Product 2c-3[/url]</li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="main_list_item"><a class="parent main_list_link" href="#">Locations[/url]
                <ul>
                    <li><a href="#">Columbus[/url]</li>
                    <li><a href="#">Pickerington[/url]</li>
                    <li><a href="#">Dublin[/url]</li>
                </ul>
            </li>
            <li class="main_list_item"><a class="main_list_link" href="#">Staff[/url]</li>
            <li class="main_list_item"><a class="main_list_link" href="#">Services[/url]</li>
            <li class="main_list_item"><a class="main_list_link" href="#">Testimonials[/url]</li>
            <li class="main_list_item"><a class="parent main_list_link" href="#">Options[/url]
                <ul>
                    <li><a href="#">Options 1[/url]</li>
                    <li><a href="#">Options 2[/url]</li>
                    <li><a href="#">Options 3[/url]</li>
                </ul>
            </li>
            <li class="main_list_item" style="border-right: none;"><a class="main_list_link" href="../index.html" title="Home">FAQ[/url]</li>
            <li class="main_list_item" style="border-right: none;"><a class="main_list_link" href="../contact.php" title="Home">CONTACT US[/url]</li>
        </ul>
    </div>
    <!-- END-->

   
</div>
This can be used by anyone with moderate knowledge of HTML and CSS. If you have any questions please feel free to ask. Enjoy!  8)
3
Horizontal Menus / Swift Horizontal Drop Down Menu
« Last post by Swift on November 05, 2020, 05:58:36 PM »
View Demo Of This Menu Here

Here is the CSS needed to create this menu:
Download CSS File Here

Code: [Select]
/* Some stylesheet reset */.nav, .nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1;
}

/* The main container */
.nav {
    /* Layout and positioning */
    display: block;
    position: relative;
    height: 34px;
    width: 750px; /* CHANGE this if you want another width or remove it if you want the width of the container */
    border-radius: 3px;
    border: 1px solid #c1c1c1;

    /* Background and effects */
    background: #eaeaea; /* Background for IE9 and older browsers */
    background: -webkit-linear-gradient(bottom, #e1e1e1, #f4f4f4); /* Background for Chrome & Safari */
    background: -moz-linear-gradient(bottom, #e1e1e1, #f4f4f4); /* Background for Firefox */
    background: -o-linear-gradient(bottom, #e1e1e1, #f4f4f4); /* Background for Opera */
    background: -ms-linear-gradient(bottom, #e1e1e1, #f4f4f4); /* Background for Internet Explorer 10 */
    box-shadow: inset 0 1px 0 #fff;
}

.nav>li {
    display: block;
    position: relative;
    float: left;
    margin: 0;
    padding: 0 1px 0 0;
}

/* The main navigation links */
.nav>li>a {
    /* Layout */
    display: block;
    padding: 11px 20px;

    /* Typography */
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: normal;
    text-decoration: none;
    color: #9a9a9a;
    text-shadow: 0 1px 0 #fff;

    /* Effects */
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

/* The hover state of the navigation links */
.nav>li>a:hover, .nav>li:hover>a {
    background: #fff;
    background: rgba(255, 255, 255, .6);
    color: #999;
}

.nav>li:first-child>a {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.nav>.dropdown>a {
    padding-right: 26px;
}

/* The arrow indicating a dropdown menu */
.nav>.dropdown>a::after {
     content: "";
     position: absolute;
     top: 14px;
     right: 11px;
     width: 4px;
     height: 4px;
     border-bottom: 1px solid #9a9a9a;
     border-right: 1px solid #9a9a9a;
     -webkit-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
     -o-transform: rotate(45deg);
    }

/* Changing the color of the arrow on hover */
.nav>.dropdown>a:hover::after, .nav>.dropdown:hover>a::after {
    border-color: #999;
}

.nav ul {
    position: relative;
    position: absolute;
    left: -9999px;
    display: block;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}

/* Level 1 submenus */
.nav>li>ul {
    padding-top: 0px;
    z-index: 99;
    border-top: 1px solid #c9c9c9;
    top: 34px;
}

/* Making the level 1 submenu to appear on hover */
.nav>li:hover>ul {
    left: -1px;
}

/* Level 2+ submenus */
.nav ul ul {
    left: -9999px;
    top: 0px;
    z-index: 999;
}

/* Making the level 2+ submenu to appear on hover */
.nav ul>li:hover>ul {
    left: 120px;
    top: -1px;
}

/* The submenu link containers */
.nav ul li {
    position: relative;
    display: block;
    border-left: 1px solid #c1c1c1;
    border-right: 1px solid #c1c1c1;

    /* Creating the slide effect. The list elements which contain the links have 0 height. On hover, they will expand */
    height: 0px;
    -webkit-transition: height .3s;
    -moz-transition: height .3s;
    -o-transition: height .3s;
    -ms-transition: height .3s;
}

/* Expanding the list elements which contain the links */
.nav li:hover>ul>li {
    height: 25px;
}

.nav ul li:hover>ul>li:first-child {
    height: 26px;
}

/* The links of the submenus */
.nav ul li a {
    /* Layout */
    display: block;
    width: 90px;
    padding: 6px 10px 6px 20px;
    border-bottom: 1px solid #e1e1e1;

    /* Typography */
    font-size: 12px;
    color: #a6a6a6;
    font-family: Helvetica, Arial, sans-serif;
    text-decoration: none;
   
    /* Background & effects */
    background: #fff;
    -webkit-transition: background .3s;
    -moz-transition: background .3s;
    -ms-transition: background .3s;
    -o-transition: background .3s;
    transition: background .3s;
}

/* The hover state of the links */
.nav ul li>a:hover, .nav ul li:hover>a {
    background: #e9e9e9;
    color: #a1a1a1;
}

.nav ul ul>li:first-child>a {
    border-top: 1px solid #c1c1c1;
}

.nav ul>li:last-child>a {
    border-bottom: 1px solid #c1c1c1;
}


/* The arrow indicating a level 2+ submenu */
.nav ul>.dropdown>a::after {
    content: "";
     position: absolute;
     top: 10px;
     right: 8px;
     width: 4px;
     height: 4px;
     border-bottom: 1px solid #a6a6a6;
     border-right: 1px solid #a6a6a6;
     -webkit-transform: rotate(-45deg);
     -ms-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
     -o-transform: rotate(-45deg);
}

.nav ul>.dropdown:hover>a::after, .nav ul>.dropdown>a:hover::after {
    border-color: #a1a1a1;
}
 And here is the HTML code placed obviously within the body tags:
Code: [Select]
<ul class="nav">
    <li><a href="#">Home[/url]</li>
    <li class="dropdown"><a href="#">Link 2[/url]
    <ul>
        <li><a href="#">Level 1[/url]</li>
        <li><a href="#">Level 1[/url]</li>
        <li class="dropdown"><a href="#">Level 1[/url]
        <ul>
            <li><a href="#">Level 2[/url]</li>
            <li><a href="#">Level 2[/url]</li>
            <li><a href="#">Level 2[/url]</li>
            <li class="dropdown"><a href="#">Level 2[/url]
            <ul>
                <li><a href="#">Level 3[/url]</li>
                <li><a href="#">Level 3[/url]</li>
                <li><a href="#">Level 3[/url]</li>
                <li><a href="#">Level 3[/url]</li>
                <li><a href="#">Level 3[/url]</li>
            </ul>
            </li>
            <li><a href="#">Level 2[/url]</li>
        </ul>
        </li>
        <li><a href="#">Level 1[/url]</li>
        <li><a href="#">Level 1[/url]</li>
    </ul>
    </li>
    <li><a href="#">Link 2[/url]</li>
    <li><a href="#">Link 3[/url]</li>
    <li><a href="#">Link 4[/url]</li>
    <li><a href="#">Link 5[/url]</li>
</ul>

And that’s it! Simple to use, and works on every browser. Every browser looks and works just fine with this menu. If you have any comments about the use or revisions on this menu please post a comment below. Thanks again!  ;)
4
Classic / Classic Website Template
« Last post by Swift on October 29, 2020, 10:58:41 AM »
See demo: http://www.themekings.net/themestk/gamers/classic/index.html

OK, this website theme is a recreation of a web template I found back in 2006 off TemplatePimps. (no longer exist today)

It's a three (3) column template that utilizes dark gray and orange colors with a high-tech feel. I'm still coding this, but will soon package it up for a free release with permission from its original author.
5
Share Your Designs / Mercury - Theme In Design
« Last post by Swift on November 21, 2019, 03:29:16 PM »
New theme we've been working on.

Check'r out: http://www.themekings.net/themestk/gamers/mercury/
6
Z3 / Banner Image Location
« Last post by Swift on November 03, 2019, 10:40:55 AM »
The blank banner is located in your theme folder named banner.png.

If you need this, you can open the link below and save it to your PC.

http://www.themekings.net/themestk/gamers/z3/theme/banner.png
7
Z3 / Z3 Theme, for experienced developers
« Last post by Swift on November 02, 2019, 10:38:14 AM »
The original Z3 theme was designed by DestineDesigns back around 2004-2005 as a PHP-Nuke template. I've been able to recreate this so that todays browsers can view them.

This is not a responsive theme, so do not use this if you are looking for something like that.

The shoutbox is now browser friendly, and no flash is required like the original was.

Please post questions about the use of this template below. Enjoy!
8
Z3 / Watch how to setup ShoutBox database
« Last post by Swift on November 02, 2019, 10:30:00 AM »
Here is a youtube tutorial on how to setup the Shoutbox database:

https://www.youtube.com/watch?v=QIX5qFgtLDM

Want me to do it, I will. However I ask $30.00 to do it for you. This can be paid to my paypal account before I set this up. You must already have access to "MyphpAdmin", and I will need access to this as well. Make sure if you ask me to do this for you that I'm using a temporary username and password. (not your primary one) This only takes about 20-30 minutes to setup.

There are NO WORD CENSORING including with this shoutbox. Post can be removed within the database found within MyphpAdmin. This is a basic shoutbox so use at your discretion.
9
X-71 / Re: New Banner for X-71 v3.0
« Last post by Swift on July 03, 2019, 11:19:37 AM »
If you would like to eliminate the flash banner version of the X-71 theme, and replace it with the updated HTML/CSS Horizontal Menu with four (4) links and light effects you now can.

See DEMO Here

First thing you need to do is download and insert these four images into your "theme-2" image folder. Do not rename these two images or the folder. Here are the links:

Banner Image
Horizontal Button Rollover Image
Sliding Red Light aka: Knight Rider Light
Red Electric Spark

Now find this code below within your current webpage(s) HTML code to remove the flash banner;
Code: [Select]
<div id="banner">

<object id="flash3" data="flash-2/banner-2.swf" style="width: 920px; height: 174px" type="application/x-shockwave-flash">

<param name="movie" value="flash-2/banner-2.swf" />

<param name="quality" value="Best" />

<param name="wmode" value="transparent" />

</object>

</div>

and replace it with this;
Code: [Select]
<div id="banner-html">
<div id="kr-lights"></div>
<div class="sparks-L"></div>
<div class="sparks-R"></div>
<div class="clearB"></div>
<div id="menuH">
<ul>
<li><a class="hbutton" href="index.html">Link</a></li>
<li><a class="hbutton" href="index.html">Link</a></li>
<li><a class="hbutton" href="index.html">Link</a></li>
<li><a class="hbutton" href="index.html">Link</a></li>
</ul>
</div>
</div>

Now open the "x71-2.css" file in your root directory and add this code anywhere within:

Code: [Select]
#menuH {
padding: 0px;
margin: 31px 0px 0px 232px;
width: 474px;
height: 34px;
position: relative;
overflow: hidden;
list-style-type: none;
}

#menuH ul {
padding: 0px;
margin: 0px;
list-style-type: none;
}
#menuH ul li {
padding: 0px;
margin: 0px 0px 0px 0px;
width: 114px;
height: 34px;
position: relative;
overflow: hidden;
float: left;
text-align: center;
line-height: 210%;
text-decoration: none;
font-weight: normal;
color: #5D5D5D;
}
a.hbutton, a.hbutton:link, a.hbutton:visited {
margin: 0px 0px 0px 0px;
background: url('theme-2/butn-over.png') no-repeat 0 0;
width: 114px;
height: 34px;
display: block;
color: #5D5D5D;
text-decoration: none;
font-weight: normal;
font-size: .7em;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
a.hbutton:hover {
background-position: 0px -34px;
color: #CCCCCC;
text-decoration: none;
font-weight: normal;
}

#banner-html {
background-position: center top;
padding: 0px;
margin: 0px;
width: 920px;
height: 174px;
position: relative;
overflow: hidden;
background-image: url('theme-2/banner-html.jpg');
background-repeat: no-repeat;
}
#kr-lights {
padding: 0px;
margin: 0px auto 0px auto;
background-image: url('theme-2/kr-light.gif');
background-repeat: no-repeat;
position: relative;
width: 160px;
height: 19px;
}
.sparks-L {
overflow: hidden;
padding: 0px;
margin: 37px 0px 0px 103px;
background-image: url('theme-2/sparks-gray.gif');
background-repeat: no-repeat;
position: relative;
width: 48px;
height: 46px;
float: left;
}
.sparks-R {
overflow: hidden;
padding: 0px;
margin: 37px 103px 0px 0px;
background-image: url('theme-2/sparks-gray.gif');
background-repeat: no-repeat;
position: relative;
width: 48px;
height: 46px;
float: right;
}


And that is all your need to do.
10
X-71 / New Banner for X-71 v3.0
« Last post by Swift on June 25, 2019, 06:11:51 PM »
See X-71 v3.0 New Banner

I'll be posting the new header info shortly. I'll removed the flash file and changed it to animated gifs with a new HTML Horizontal Menu. Check'r out!
Pages: [1] 2