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

Show Posts

This section allows you to view all posts made by this member. Note that you can only see posts made in areas you currently have access to.


Messages - Swift

Pages: [1] 2
1
General Discussion / Multiple Anti-Bot Measures When Registering
« on: March 18, 2022, 10:59:45 AM »
Sucks that we have to do this, but its a must. When you go to register you will be asked to complete four (4) anit-bot test to help prevent or reduce the number of bots that spam accounts. After implementing this we've been fortunate to see no spam accounts made, but this may seem to be a bit much for someone wanting to create an account, and for that I apologize.  :-[


Please still consider completing your registration and join in the fun. Thankfully you'll only have to register once  :D Thank you!

2
General Discussion / Re: Template Downloads Disabled
« on: March 18, 2022, 09:13:19 AM »
Everything's all good now...  We've added SSL to our site too for added protection. Enjoy!  8)

3
Police Department / The PD Banner Image
« on: March 09, 2022, 12:08:12 PM »
In the resource folder contained within the ZIP file you will have a banner image named:

TEMPLATE-Header.png

This is a layered PNG so that you can change the title from "To protect and serve the community of your town and state" to read however you like.

The font used in the demo is: Brush Script Std

You can use whatever font you like however. If you do not have it, but want to use it, you can download the Brush Script Std Font.

I used Adobe Fireworks to create this banner.

4
BEFORE YOU DOWNLOAD
Please understand that if you purchase or use any of my templates that you have some basic understanding how websites are used, and how to edit HTML/CSS.I don't mind helping when and where I can, but I do not want you to rely on me setting up your website. This will be your responsibility. Sounds rude I know, but I don't want someone to feel like they spend money on something that provides 24 hour customer support. :D

 Welp, after nearly 15 years of giving away themes I've decided to make one that I could see a little return on, yet provide a nice service to a department looking for something appealing for their community.  ;)


The Police Department website template features a horizontal navigation menu for your primary links, and a two column layout . The left sidebar allows for a vertical navigation menu and smaller content while the right column allows for all the content specific to that page. You'll also have links for social media, and a four column footer with navigation. Plus some eye goodies.  8)


HOW TO BUY

Simply click the "Buy Now" button and it will redirect you to PayPal for a secure checkout. Once you finish the purchase be sure to watch your browser messages, because you will be asked to accept to download a ZIP file containing your new website. Allow your PC to scan the files if prompted to do so. Walla! It's yours!

If you didn't get the link to download, or missed it somehow no problem. Send me a text message to 614-743-1212 or email at tswift@themekings.net  and I'll verify the purchase and email you the zip file containing your new website template.


I do not offer refunds. Once you buy, it's yours to keep. So please make sure that this is what you want before you buy, and that you have your own server to host your site and the means of editing this to fit your needs.
Thank you!!!

5
Tinypants / Re: Classic Website Template
« on: March 01, 2022, 01:52:41 PM »
I've renamed this template to "Tinypants", which was the original designers (Chris Dang) nickname. He allowed me to recreate his template in 2019, the same year he passed away.
Read more about his passing

6
General Discussion / Template Downloads Disabled
« on: February 24, 2022, 10:01:58 AM »
We have temporarily disabled the free template downloads on this site. We are cleaning up the templates to meet today's browser requirements so that the templates work correctly. If you need help with a template you presently have please register on the forum and post your question in the appropriate forum category.

We will try to have these back up ASAP. Thank you!  ;D

7
Z3 / 1089 Error in MYPHPADMIN when creating Database for Shoutbox
« on: February 04, 2022, 11:36:51 AM »
Please reference this video for the workaround. This is not my video, but they do a great job showing how to get around the 1089 error when selecting the primary option in the Index column for the ID.

In his video his column with primary is called roll_num. Just ignore that as we are calling ours ID and setting it to be our primary for this shoutbox.

The error occurs when you go to save the database after you've created the 4 columns.

After you save, you'll get the error message. Close that error window and then "Preview SQL" so that you can copy all that code it displays.

Next, open the "SQL" tab above and then remove/replace that code with the code you just copied.

Now remove the number and the parenthesis surrounding it that follows the ID. (Again ours will be called ID but in his video its labeled roll_num.)

Lastly, hit GO to save. BOOM! Your done!

Watch 1089 Fix Video
Credit: Mad ProgrammerRPS

8
Z3 / Anti-Bot for Shoutbox
« on: February 02, 2022, 01:25:34 PM »
The Demo Page for Z3 was getting hit with a lot of bot post with hyperlinks in them so I created a walk around for this by adding a Google Captcha to the "Shout" button. Basically it's making sure a human is hitting the shout button and not a script activating it.
Here's how to add one to your Z3 shoutbox as well:
----------------
1st -  Go to google and create a RECAPTCHA using version V3 to get a Site Code and Secret Key code for the next step.

2nd - Add this code just above the <!DOCTYPE line of your HTML code:
Code: [Select]
<?php define('SITE_KEY''YOUR SITE KEY GOES HERE');
define('SECRET_KEY''YOUR SECRET KEY GOES HERE');

if(
$_POST){
    function 
getCaptcha($SecretKey){
        
$Response file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".SECRET_KEY."&response={$SecretKey}");
        
$Return json_decode($Response);
        return 
$Return;
    }
    
$Return getCaptcha($_POST['g-recaptcha-response']);
    
//var_dump($Return);
    
if($Return->success == true && $Return->score 0.5){
        echo 
"Success!";
    }else{
        echo 
"Robot Alert!!";
    }
}
?>




3rd - Open your shoutbox.css file and delete everything in it, and replace with this: (Be aware this will change any customizing you may had done to the original css file I included for this in the free download)

Code: [Select]
#shoutbox {    padding: 0px;    margin: 0px auto 0px auto;
    width: 330px;
    position: relative;
    overflow: hidden;
    background-image: url('../theme/shoutbox.jpg');
    background-repeat: no-repeat;
    background-position: center top;
    height: 350px;
}
#sb-level-1 {
    padding: 0px;
    margin: 0px;
    width: 330px;
    height: 50px;
    position: relative;
    overflow: hidden;
}
#sb-level-1a {
    padding: 0px;
    margin: 0px;
    width: 165px;
    height: 50px;
    position: relative;
    float: left;
    overflow: hidden;
}
#sb-light-l {
    background-image: url('../theme/blue-light-l.gif');
    background-repeat: no-repeat;
    background-position: center top;
    padding: 0px;
    margin: 30px 0px 0px 46px;
    position: relative;
    width: 20px;
    height: 20px;
    overflow: hidden;
}
#sb-light-r {
    background-image: url('../theme/blue-light-r.gif');
    background-repeat: no-repeat;
    background-position: center top;
    padding: 0px;
    margin: 30px 0px 0px 99px;
    position: relative;
    width: 20px;
    height: 20px;
    overflow: hidden;
}
#sb-level-1b {
    padding: 0px;
    margin: 0px;
    width: 165px;
    height: 50px;
    position: relative;
    float: right;
    overflow: hidden;
}
#sb-level-2 {
    padding: 0px;
    margin: 0px;
    width: 330px;
    height: 142px;
    position: relative;
    overflow: hidden;
}
#sb-level-3 {
    padding: 0px;
    margin: 0px;
    width: 330px;
    height: 80px;
    position: relative;
    overflow: hidden;
}
#sb-level-3a {
    padding: 0px;
    margin: 0px;
    width: 230px;
    height: 80px;
    position: relative;
    overflow: hidden;
    float: left;
}
#sb-line-1 {
    padding: 0px;
    margin: 4px 0px 0px 60px;
    width: 170px;
    height: 14px;
    position: relative;
    overflow: hidden;
}
#sb-line-2 {
    padding: 0px;
    margin: 4px 0px 0px 60px;
    width: 170px;
    height: 50px;
    position: relative;
    overflow: hidden;
}
#sb-level-3b {
    padding: 5px 0px 0px 0px;
    margin: 0px 50px 0px 0px;
    width: 50px;
    height: 80px;
    position: relative;
    overflow: hidden;
    float: right;
}
#sb-level-4 {
    padding: 0px;
    margin: 0px 0px 0px 0px;
    width: 330px;
    height: 95px;
    position: relative;
    overflow: visible;
}
#shout-error {
    padding: 0px;
    margin: 20px auto 0px auto;
    width: 330px;
    height: 15px;
    position: relative;
    text-align: center;
}
#shouts {
    width: 202px;
    height: 126px;
    position: relative;
    padding: 0px;
    margin: 5px auto 0px auto;
}
#shouts {
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */
}
#shouts::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}
.shout {
    margin: 0px;
    position: relative;
    overflow: hidden;
    padding: 2px;
    text-align: left;
    list-style-type: none;
    color: #0E1B25;
    border-bottom-style: dotted;
    border-bottom-width: 1px;
    border-bottom-color: #0E1B25;
}
.shout span {
    color: #96E0FC;
    text-align: left;
    list-style-type: none;
}
.shoutbutn {
    padding: 0px;
    margin: 0px;
    color: #018BAD;
    text-decoration: none;
    font-weight: normal;
    background: url('../theme/shout-butn.png') no-repeat center top;
    position: relative;
    font-size: 90%;
    text-align: center;
}
.shoutbutn:hover {
    color: #01BDEB;
}
#shouts-scroll {
    padding: 0px;
    margin: 0px 0px 0px 0px;
    width: 48px;
    height: 20px;
    position: relative;
}
#scrollUp {
    padding: 0px;
    margin: 0px 2px 0px 2px;
    width: 20px;
    height: 20px;
    position: relative;
    float: left;
}
#scrollDown {
    padding: 0px;
    margin: 0px 2px 0px 2px;
    width: 20px;
    height: 20px;
    position: relative;
    float: right;
}
textarea:focus, input:focus{
    outline: none;
}
*:focus {
    outline: none;
}
.form-control:focus {
  border-color: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;
}


::-webkit-input-placeholder {
    color:#018BAD;
}
::-moz-placeholder {
    color:#018BAD;
}
::-ms-placeholder {
    color:#018BAD;
}
::placeholder {
    color:#018BAD;
}
#noscroll-message {
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */
}
#noscroll-message::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}
#cap-wrapper {
    padding: 0px;
    margin: 46px 0px 0px 0px;
    position: relative;
    width: 266px;
    height: 22px;
}

#cap-1 {
    padding: 0px;
    margin: 0px;
    width: 266px;
    height: 14px;
    position: relative;
    text-align: center;
}
#cap-2 {
    padding: 0px;
    margin: 0px;
    width: 266px;
    height:14px;
    position: relative;
    text-align: center;
}
#cap-3 {
    padding: 0px;
    margin: 0px;
    width: 266px;
    height: 14px;
    position: relative;
    text-align: center;   
}
#submitButton {
    padding: 0px;
    margin: 0px;
    color: #018BAD;
    text-decoration: none;
    font-weight: normal;
    background: url('../theme/shout-butn.png') no-repeat center top;
    position: relative;
    font-size: 90%;
    text-align: center;
}


4th - Add this script just above the /HEAD section (Be sure to add your site key where noted)
Code: [Select]
<script src="https://www.google.com/recaptcha/api.js?render=YOUR SITE KEY GOES HERE"></script>

5th - Rather than going through and making several little changes to the html, lets just do one big one. Find the entire container that your ShoutBox is wrapped in (i.e. the mid-S-box div) and replace it with this:
Code: [Select]
<div class="mid-S-box">                <div class="mid-S-head"></div>                <div class="mid-S-filler">
                    <div class="mid-S-info">
                       
                       
                       
                        <div id="shoutbox">
                       
                            <div id="sb-level-1">
                                <div id="sb-level-1a">
                                    <div id="sb-light-l"></div>
                                </div>
                                <div id="sb-level-1b">
                                    <div id="sb-light-r"></div>
                                </div>
                            </div>
                           
                           
                            <div id="sb-level-2">
                                <div id="shouts">
                                    <ul style="margin:0px; padding:0px">
                                        <?php while($row mysqli_fetch_assoc($shouts)) : ?>
                                            <li class="shout"><span><?php echo $row['time'?> - </span><strong><?php echo $row['user'?>:</strong> <?php echo $row['message'?> </li>
                                        <?php endwhile; ?>
                                    </ul>
                                </div>
                            </div>
                           
                           
                            <div id="sb-level-3" style="left: 0px; top: 0px">
                                <form style="width:330px; margin:0px; padding:0px" method="post" action="process.php">
                                    <div id="sb-level-3a">
                                        <div style="padding:0px; margin:0px" id="input">
                                       
                                            <div id="sb-line-1">
                                                <input style="margin:0px; width:160px; height:14px; background-color:transparent; border:0px; padding:0px; color: #018BAD; font-size:95%" type="text" name="user" placeholder="Enter Your Name" />
                                            </div>
                                                                                       
                                            <div id="sb-line-2">
                                                <input style="margin:0px; width:160px; height:50px; background-color:transparent; border:0px; padding:0px; color: #018BAD; font-size:95%" type="text" name="message" placeholder="Enter Message Here"/>
                                            </div>
                                       
                                        </div>
                                    </div>
                                           
                                    <div id="sb-level-3b">
                                        <div id="shouts-scroll">
                                            <div id="scrollUp">
                                                 <a href="#" id="scroll-up"><img style="margin:0px; padding:0px; height:20px; width:20px; border:0px; cursor:pointer" src="theme/up.jpg" />[/url]
                                            </div>
                                            <div id="scrollDown">
                                                <a href="#" id="scroll-down"><img style="margin:0px; padding:0px; height:20px; width:20px; border:0px; cursor:pointer" src="theme/down.jpg" />[/url]
                                            </div>
                                        </div>                               
                                       
                                        <input style="border:0px; width:50px; height:22px; padding:0px 0px 4px 0px; margin:2px 0px 0px 0px; cursor:pointer" id="submitButton" type="submit" name="submit" value="SHOUT"/>
                                        <input style="border:0px; width:50px; height:22px; padding:0px 0px 4px 0px; margin:0px 0px 0px 0px; cursor:pointer" class="shoutbutn" type="reset" value="CLEAR"/>
                                        <input style="height:14px" type="hidden" id="g-recaptcha-response" name="g-recaptcha-response" />
                                    </div>
                                </form>
                               
                                <script>
                                grecaptcha.ready(function() {
                                grecaptcha.execute('<?php echo SITE_KEY?>', {action: 'homepage'})
                                .then(function(token) {
                                    //console.log(token);
                                    document.getElementById('g-recaptcha-response').value=token;
                                });
                                });
                                </script>
                                   
                            </div>                           
                           
                           
                            <div id="sb-level-4">
                           
                                <div id="cap-wrapper">   
                               
                           
                                    <div id="cap-1"></div>                       
                                   
                                   
                                    <div id="cap-2"></div>

                                </div>

                                 
                            </div>
                       
                        </div>
                       
                    </div>
                </div>
                <div class="mid-S-footer">
                    <div id="shout-error">
                        <?php if (isset($_GET['error'])) : ?>
                            <div><?php echo $_GET['error']; ?></div>
                        <?php endif; ?>                           
                    </div>               
                </div>           
            </div>

And that's it. Once you plug in your site and secret codes you got from Google you wont have to worry about getting a spam post every few minutes in your shoutbox. Here is the video I referenced to do this:
INSTALL GOOGLE RECAPTCHA

Credit to: Vicode Media

9
Horizontal Menus / Dark Classic Buttons
« 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)

10
Horizontal Menus / Pure CSS Menu - Horizontal Drop Down
« 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)

11
Horizontal Menus / Swift Horizontal Drop Down Menu
« 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!  ;)

12
Tinypants / Classic Website Template
« 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.

13
Share Your Designs / Mercury - Theme In Design
« 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/

14
Z3 / Banner Image Location
« 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

15
Z3 / Z3 Theme, for experienced developers
« 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!

Pages: [1] 2