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

Recent Posts

Pages: [1] 2 3
1
General Discussion / Multiple Anti-Bot Measures When Registering
« Last post by Swift 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
« Last post by Swift 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
« Last post by Swift 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
Police Department / How To Buy ThemeKings Police Department Website Template
« Last post by Swift on March 09, 2022, 11:45:39 AM »
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
« Last post by Swift 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
« Last post by Swift 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
General Discussion / Re: Welcome Back Faithful Followers
« Last post by MikeT on February 18, 2022, 12:57:58 PM »
Looking forward to helping out where I can. Thanks Todd!
8
Z3 / 1089 Error in MYPHPADMIN when creating Database for Shoutbox
« Last post by Swift 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
9
Z3 / Anti-Bot for Shoutbox
« Last post by Swift 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
10
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)
Pages: [1] 2 3