Infinity Theme template

Have a Smack Jeeves template you'd like to share with the community? Post it here!

Infinity Theme template

Postby Midnight-Comix » December 14th, 2017, 1:16 pm

About the Template
Infinity Theme is a responsive, free to use webcomic template for Smackjeeves. The code can be altered as the user wishes.
Check out the Demo: http://infinitydemo.smackjeeves.com/


Use
OVERALL
Code: Select all
<!DOCTYPE html>

<!--
=======================================================================================================================================================================
=======================================================================================================================================================================
 ___  ________   ________ ___  ________   ___  _________    ___    ___      _________  ___  ___  _______   _____ ______   _______            _______       _______     
|\  \|\   ___  \|\  _____\\  \|\   ___  \|\  \|\___   ___\ |\  \  /  /|    |\___   ___\\  \|\  \|\  ___ \ |\   _ \  _   \|\  ___ \          /  ___  \     /  ___  \   
\ \  \ \  \\ \  \ \  \__/\ \  \ \  \\ \  \ \  \|___ \  \_| \ \  \/  / /    \|___ \  \_\ \  \\\  \ \   __/|\ \  \\\__\ \  \ \   __/|        /__/|_/  /|   /__/|_/  /|   
 \ \  \ \  \\ \  \ \   __\\ \  \ \  \\ \  \ \  \   \ \  \   \ \    / /          \ \  \ \ \   __  \ \  \_|/_\ \  \\|__| \  \ \  \_|/__      |__|//  / /   |__|//  / /   
  \ \  \ \  \\ \  \ \  \_| \ \  \ \  \\ \  \ \  \   \ \  \   \/  /  /            \ \  \ \ \  \ \  \ \  \_|\ \ \  \    \ \  \ \  \_|\ \         /  /_/__  ___ /  /_/__ 
   \ \__\ \__\\ \__\ \__\   \ \__\ \__\\ \__\ \__\   \ \__\__/  / /               \ \__\ \ \__\ \__\ \_______\ \__\    \ \__\ \_______\       |\________\\__\\________\
    \|__|\|__| \|__|\|__|    \|__|\|__| \|__|\|__|    \|__|\___/ /                 \|__|  \|__|\|__|\|_______|\|__|     \|__|\|_______|        \|_______\|__|\|_______|
                                                          \|___|/
=======================================================================================================================================================================
   Webdesign: Midnight-Comix (http://www.smackjeeves.com/profile.php?id=269815)
   Version: ver 1.1.2017
   Last Updated: 12/14/2017
   Use: This theme is for use on Smackjeeves.com only.
=======================================================================================================================================================================
   Disclamer:
   Infinity Theme © 2017 Midnight-Comix
   Webdesign by Midnight-Comix © 2017
=======================================================================================================================================================================
=======================================================================================================================================================================
-->

<html lang="en">
<head>
   <meta charset="utf-8">
   <title>{PAGE_TITLE} :: {SITE_NAME}</title>
   <meta name="viewport" content="width=device-width, maximum-scale=1" />
   <script src="https://use.fontawesome.com/9f7c3c6598.js"></script>
    <style>
        /**************************** OVERALL BEGIN ****************************/
        body {
            background:  #454545;
            background-size: cover;
            color: #fff;
            font-family: arial;
            font-size: 11pt;
            font-size-adjust: none;
            font-stretch: normal;
            font-style: normal;
            font-variant: normal;
            font-weight: normal;
            line-height: 13pt;
            padding: 0px;
            margin: 0px;
        }
        .page {
            background-color: #0f0f0f;
            max-width: 1200px;
            margin: 0px auto;
            overflow: auto;
        }
        /**************************** OVERALL END ****************************/
        /**************************** SJ BANNER BEGIN ****************************/
        .sj-nav {
            background-color: #000000;
            width: 100%;
            margin: 0;
         }
        .sj-nav .sj-logo {
            height: 34px;
            width: auto;
            margin-left: 10px;
        }
        .sj-nav .fave {
            float: right;
            background: url(http://www.smackjeeves.com/templates/its_raining_outside/images/heartq.png) no-repeat 0 60%;
            margin-top: 12px;
            margin-right: 12px;
            padding-left: 20px;
        }

        .sj-nav .fave a {
            color: white;
            text-decoration: none;
        }
        .sj-nav .fave a:hover {
            color: white;
            text-decoration: underline;
        }
        .sj-nav .rss {
            float: right;
            background: url(https://orig03.deviantart.net/44f2/f/2017/243/2/6/rss_logo_icon_png_11294_by_darwins_evolution-dblwmp9.png) no-repeat;
            background-size: 15px 15px;
            margin-top: 12px;
            margin-right: 12px;
            padding-left: 20px;
            }
        .sj-nav .rss a {
            color: white;
            text-decoration: none;
        }
        .sj-nav .rss a:hover {
            color: white;
            text-decoration: underline;
        }
        /**************************** SJ BANNER END ****************************/
        /**************************** HEAD BEGIN ****************************/
        .page .headBanner {
            width: 100%;
            height: auto;
            margin: 0;
            padding: 0;
            text-align: center;
            }

            @media screen and (max-width: 1757px){
                .page .headBanner {width: 100%;}
            }

        .page header {
            width: 100%;
            position: relative;
            color: #ffffff;
            text-align: center;
            overflow-x: hidden;
        }
        /**************************** HEAD END ****************************/
        /**************************** MENU BEGIN ****************************/
        .page header .nav {
            overflow: hidden;
            background-color: #333;
        }

        .page header .nav a {
            float: left;
            display: block;
            color: #ffffff;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 17px;
            transition: background-color 0.2s;
        }

        .page header .nav a:hover {
            background-color: #2B7BB9;
        }

        .page header .nav .icon {
            display: none;
        }
        /**************************** MENU END ****************************/
        /**************************** MAIN BEGIN ****************************/
        .page main {
            padding: 5px;
            text-align: center;
            overflow: auto;
        }
        /**************************** MAIN END ****************************/
        /**************************** HOME BEGIN ****************************/
        .page main .content {
            overflow: auto;
            margin: 0 auto;
        }

        .page main .content .previews {
            background: rgba(255,255,255,0.05);
            width: 48%;
            margin: 10px;
            border-radius: 6px;
            float: left;
        }

        .page main .content .previews .previewComic {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 0 auto;
            border-radius: 6px;
            overflow: hidden;
            -webkit-box-shadow: 5px 5px 5px #000000;
            box-shadow: 5px 5px 5px #000000;
        }

        .page main .content .previews .previewComic .comicImage {
            width: 300px;
            position: relative;
            border: 2px solid black;
        }

        .page main .content .previews .previewComic .overlayComic {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            height: 100%;
            width: 100%;
            opacity: 0;
            -webkit-transition: .5s ease;
            transition: .5s ease;
            background-color: rgba(0,0,0,0.75);
        }

        .page main .content .previews .previewComic:hover .overlayComic {
            opacity: 1;
            }
        .page main .content .previews .previewComic .text {
            color: #ffffff;
            font-size: 20px;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            }

        .page main .content .news {
            width: 660px;
            background-color: rgba(255,255,255,0.05);
            padding: 5px;
            margin: 10px;
            text-align: left;
            border-radius: 6px;
            float: left;
        }

        .page main .content .news .newsBody {
            background-color: #000000;
            padding: 10px;
            overflow: auto;
        }

        .page main .content .news .newsBody a {
            color: #ffffff;
            text-decoration: none;
        }

        .page main .content .news .newsBody .postAuther {
            float: left;
        }

        .page main .content .news .newsBody .postAuther a {
            color: #ffffff;
        }

        .page main .content .news .newsBody .postDate {
            float: right;
        }

        .page main .content .news .newsBody .newsPost {
            color: #ffffff;
            background-color: #333333;
            padding: 5px;
        }

        .page main .content .news .newsBody .newsPost hr {
            border-image-source: linear-gradient(to right,transparent,#7d7d7d,transparent);
            border-image-slice: 1;
            border-image-width: 1;
            margin: 5px;
        }

        .page main .content .twitter {
            width: 460px;
            background-color: rgba(255,255,255,0.05);
            padding: 5px;
            margin: 10px;
            text-align: left;
            border-radius: 6px;
            float: right;
        }
        .page main .content .twitter a {
            color: #ffffff;
        }
        @media all and (max-width:640px) {
            .page main .comicPreview-container .previews {
                background: rgba(255,255,255,0.05);
                width: 300px;
                padding: 10px;
                margin: 10px;
                border-radius: 6px;
                float: left;
            }
        }
        /**************************** HOME END ****************************/
        /**************************** NEWSARCHIVE BEGIN ****************************/
        .page main .newscontainer {
            overflow: auto;
        }

        .page main .newscontainer .newsnavcontainer {
            background-color: rgba(255,255,255,0.05);
            width: 500px;
            padding: 5px;
            text-align: left;
            float: left;
        }

        .page main .newscontainer .newsnavcontainer a {
            color: #ffffff;
            text-decoration: none;
            -webkit-transition: color 0.5s;
            transition: color 0.5s;
        }

        .page main .newscontainer .newsnavcontainer a:hover {
            color: #2B7BB9;
            text-decoration: underline;
        }

        .page main .newscontainer .newspostcontainer {
            background-color: rgba(255,255,255,0.05);
            width: 650px;
            padding: 5px;
            text-align: left;
            float: right;
        }

        .page main .newscontainer .newspostcontainer .newsBody {
            background-color: #000000;
            padding: 10px;
            overflow: auto;
        }

        .page main .newscontainer .newspostcontainer .newsBody a {
            color: #ffffff;
            text-decoration: none;
        }

        .page main .newscontainer .newspostcontainer .postAuther {
            float: left;
        }

        .page main .newscontainer .newspostcontainer .newsBody .postAuther a {
            color: #ffffff;
        }

        .page main .newscontainer .newspostcontainer .newsBody .postDate {
            float: right;
        }

        .page main .newscontainer .newspostcontainer .newsBody .newsPost {
            color: #ffffff;
            background-color: #333333;
            padding: 5px;

        }

        .page main .newscontainer .newspostcontainer .newsBody .newsPost hr {
            border-image-source: linear-gradient(to right,transparent,#7d7d7d,transparent);
            border-image-slice: 1;
            border-image-width: 1;
            margin: 5px;
        }
        /**************************** NEWSARCHIVE END ****************************/
        /**************************** COMIC PAGE BEGIN ****************************/
        .page main .comicpagecontent {
            background-color: rgba(255,255,255,0.05);
            text-align: center;
            overflow: auto;
        }
       
        .page main .comicpagecontent .userVote {
            overflow: auto;
            padding: 0px 20px 20px 20px;
        }
       
        .page main .comicpagecontent .userVote .score {
            width: 40%;
            text-align: left;
            float: left;
        }
       
        .page main .comicpagecontent .userVote .vote {
            width: 60%;
            text-align: right;
            float: right;
        }
       
        .page main .comicpagecontent .navbar img {
            width: 75px;
            height: auto;
            margin-left: 50px;
            margin-right: 50px;
        }

        .page main .comicpagecontent .comicpage {
            margin: 5px
        }
       
        .page main .comicpagecontent .authersComment {
            text-align: left;
        }

        .page main .comicpagecontent .newsBody {
            padding: 10px;
            overflow: auto;
        }

        .page main .comicpagecontent .newsBody a {
            color: #ffffff;
            text-decoration: none;
        }

        .page main .comicpagecontent .newsBody .postAuther a {
            color: #ffffff;
        }

        .page main .comicpagecontent .newsBody .postDate {
            float: right;
        }

        .page main .comicpagecontent .newsBody .newsPost hr {
            border-image-source: linear-gradient(to right,transparent,#7d7d7d,transparent);
            border-image-slice: 1;
            border-image-width: 1;
            margin: 5px;
        }

        .page main .userComment {
            background-color: rgba(255,255,255,0.05);
            padding: 5px;
            margin-top: 20px;
            text-align: center;
        }
       
        .page main .userComment a {
            color: #ffffff;
            text-decoration: none;
        }

        .page main .userComment a:hover {
            color: #2B7BB9;
            text-decoration: underline;
        }
       
        .page main .userComment .newsBody {
            background-color: #000000;
            padding: 10px;
            margin-bottom: 5px;
            text-align: left;
            overflow: auto;
        }

        .page main .userComment .newsBody a {
            color: #ffffff;
            text-decoration: none;
        }

        .page main .userComment .newsBody .postAuther {
            float: left;
        }

        .page main .userComment .newsBody .postAuther a {
            color: #ffffff;
        }

        .page main .userComment .newsBody .postDate {
            float: right;
        }

        .page main .userComment .newsBody .avatar {
            width: 125px;
            height: 125px;
            float: left;
        }

        .page main .userComment .newsBody .edit {
            clear: both;
        }
       
        .page main .userComment .newsBody .newsPost {
            width: 75%;
            color: #ffffff;
            background-color: #333333;
            padding: 5px;
            float: right;
        }

        .page main .userComment .newsBody .newsPost a {
            color: #000000;
        }

        .page main .userComment .newsBody .newsPost hr {
            border-image-source: linear-gradient(to right,transparent,#7d7d7d,transparent);
            border-image-slice: 1;
            border-image-width: 1;
            margin: 5px;
        }
        /**************************** COMIC PAGE END ****************************/
        /**************************** COMIC ARCHIVE BEGIN ****************************/
        .page main .comic-chapters {
            padding: 100px;
        }
       
        .page main .comic-chapters .chapter {
            text-align: center;
            overflow: auto;
            margin-bottom: 20px;
        }

        .page main .comic-chapters .chapter .number {
            background-color: rgba(255,255,255,0.05);
            padding: 10px;
            float: left;
            border-top-RIGHT-radius: 100px;
        }

        .page main .comic-chapters .chapter .thumbs {
            background-color: rgba(255,255,255,0.05);
            padding: 60px;
            clear: both;
        }
       
        .page main .comic-chapters .chapter .thumbs hr {
            margin-top: 10px;
            margin-bottom: 10px;
            border-image-source: linear-gradient(to right,transparent,#7d7d7d,transparent);
            border-image-slice: 1;
            border-image-width: 1;
            margin: 5px;
        }
        /**************************** COMIC ARCHIVE END ****************************/
        /**************************** Cast BEGIN ****************************/
        main .castContent {
            background-color: rgba(255,255,255,0.05);
            padding: 10px;
        }

        .page main .castContent .character {
            overflow: auto;
            margin-bottom: 30px
        }

        .page main .castContent .castImg {
            padding-right: 50px;
            text-align: center;
            float: left;
        }

        .page main .castContent .castInfo {
            float: left;
        }

        .page main .castContent .castInfo .quote {
            padding-top: 30px;
            padding-bottom: 30px;
        }

        .page main .castContent .castInfo .stats {
            overflow: auto;
        }

        .page main .castContent .castInfo .stats .stat {
            float: left;
            padding-right: 10px;
            padding-top: 20px;
            text-align: left;
        }

        .page main .castContent .castInfo .stats .stat a {
            color: #ffffff;
            text-decoration: underline;
            transition: color 0.5s;
        }

        .page main .castContent .castInfo .stats .stat a:hover {
            color: #2B7BB9;
            text-decoration: underline;
        }

        .page main .castContent .background {
            width: 8oopx;
            text-align: left;
            float: left;
        }

        .page main .castContent .background hr {
            margin-top: 10px;
            margin-bottom: 10px;
            border-image-source: linear-gradient(to right,transparent,#7d7d7d,transparent);
            border-image-slice: 1;
            border-image-width: 1;
            margin: 5px;
        }
        /**************************** Cast END ****************************/
        /**************************** LINK BEGIN ****************************/
        .page main .link {
            width: 100%;
            background-color: rgba(255,255,255,0.05);
            padding: 10px;
        }

        .page main .link td {
            padding: 10px;
        }
        /**************************** LINK END ****************************/
        /**************************** FOOTER BEGIN ****************************/
        .page footer {
            padding-top: 20px;
            padding-bottom: 20px;
            background-color: #1D1D1D;
            overflow: auto;
        }

        .page footer .content {
            max-width: 1200px;
            margin: 0 auto;
        }

        .page footer .content .sigment {
            width: 33%;
            text-align: center;
            margin: 0 auto;
            float: left;
        }

        .page footer .content .sigment h2 {
            margin: 0px;
        }

        .page footer .content .sigment li a {
            color: #ffffff;
            text-decoration: underline;
            -webkit-transition: color 0.2s;
            transition: color 0.2s;
        }

        .page footer .content .sigment li a:hover {
            color: #2B7BB9;
        }

        .page footer .content .sigment a {
            color: #ffffff;
        }

        .page footer .content .sigment i {
            font-size: 40px;
        }

        .page footer hr {
            border-image-source: linear-gradient(to right,transparent,#7d7d7d,transparent);
            border-image-slice: 1;
            border-image-width: 1;
            margin: 5px;
        }
        /**************************** FOOTER END ****************************/
        /**************************** MOBILE BEGIN ****************************/
        @media all and (max-width:640px) {
            /**** MOBILE MENU BEGIN ****/
            @media screen and (max-width: 600px) {
                .page header .nav a:not(:first-child) {
                    display: none;
                }
               
                .page header .nav a.icon {
                    float: right;
                    display: block;
              }
            }

            @media screen and (max-width: 600px) {
              .page header .nav.responsive {position: relative;}
              .page header .nav.responsive .icon {
                position: absolute;
                right: 0;
                top: 0;
              }
               
              .page header .nav.responsive a {
                float: none;
                display: block;
                text-align: left;
              }
            }
            /**** MOBILE MENU END ****/
            /**** MOBILE HOME BEGIN ****/
            .page main .content .previews {
                background: rgba(255, 255, 255, 0.05);
                width: 90%;
                padding: 10px;
                margin: 10px;
                border-radius: 6px;
                float: left;
            }

            .page main .content .news {
                width: 300px;
                background-color: rgba(255,255,255,0.05);
                padding: none;
                margin: none;
                text-align: left;
                border-radius: 6px;
                float: none;
            }

            .page main .content .news .newsBody .postAuther {
                float: none;
            }

            .page main .content .news .newsBody .postDate {
                float: none;
            }   

            .page main .content .twitter {
                width: 300px;
                background-color: rgba(255,255,255,0.05);
                padding: none;
                margin: none;
                text-align: left;
                border-radius: 6px;
                float: none;
            }
            /**** MOBILE HOME END ****/
            /**** MOBILE NEWSARCHIVE BEGIN ****/
            .page main .newscontainer .newsnavcontainer {
                width: 100%;
            }
           
            .page main .newscontainer .newsnavcontainer {
                padding: 0;
            }
           
            .page main .newscontainer .newspostcontainer {
                width: auto;
            }
            /**** MOBILE NEWSARCHIVE END ****/
            /**** MOBILE COMIC PAGE BEGIN ****/
            .page main .addComicpage {
                display: none;
            }

            .page main .comicpagecontent .navbar .showJumpbox {
                display: none;
            }

            .page main .comicpagecontent .navbar img {
                width: 40px;
                height: auto;
                margin-left: 10px;
                margin-right: 10px;
            }
           
            .page main .comicpagecontent .comicpage {
                margin: 5px
                   
            }
           
            .page main .comicpagecontent .comicpage img{
                width: 100%;
                height: auto;
            }
           
            .page main .comicpagecontent .newsBody .vote .displayRating {
                display: none;
            }

            .page main .comicpagecontent .newsBody .postDate {
                float: none;
            }

            .page main .userComment .newsBody .avatar {
                width: 50px;
                height: 50px;
                float: left;
            }

            .page main .userComment .newsBody .avatar img {
                width: 50px;
                height: 50px;
            }

            .page main .userComment .newsBody .postAuther {
                float: none;
            }

            .page main .userComment .newsBody .postDate {
                float: none;
            }
            /**** MOBILE COMIC PAGE END ****/
            /**** MOBILE COMIC ARCHIVE BEGIN ****/
            .page main .comic-chapters {
                padding: 10px;
            }
           
            .page main .comic-chapters .chapter .thumbs {
                padding: 0px;
            }
            /**** MOBILE COMIC ARCHIVE END ****/
            /**** MOBILE FOOTER BEGIN ****/
            .page footer .content .sigment {
                width: 100%;
                margin: 0 auto;
                padding-top: 20px;
                text-align: center;
                float: none;
            }
            /**** MOBILE FOOTER END ****/
        }
        /**************************** MOBILE END ****************************/
    </style>
    <script>
        function navResponsive() {
            var nav = document.getElementById("nav");
            if (nav.className == "nav") {
                nav.className += " responsive";
            } else {
                nav.className = "nav";
            }
        }
    </script>
</head>
<body>
    <div class="sj-nav">
        <a href="http://www.smackjeeves.com/"><img class="sj-logo" src="http://www.smackjeeves.com/images/logo-white.png"></a>
        <div class="rss">
            <a href="{SITE_URL_FULL}/rss">RSS</a>
        </div>
        <div class="fave">
            <a href="http://www.smackjeeves.com/favorites.php?add={SITE_ID}">Fave this comic</a>
        </div>
    </div>
    <div class="page">
        <header>
            <div>
                <!--<a href="{SITE_URL_FULL}"><img class="headBanner" src="#"></a> --> <!-- Uncomment to use a banner image. -->
            </div>
{MENU}
        </header>
        <main>
{CONTENT}
        </main>
        <footer>
            <div class="content">
                <div class="sigment">
                    <h2>Want/Need to contact me?</h2>
                    <br>
                    <li><a href="#">your-email@domain.com</a></li>
                </div>
                <div class="sigment">
                    <h2>Special thanks to:</h2>
                    <br>
                    Maybe you have someone you want to thank for their support?
                </div>
                <div class="sigment">
                    <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                    <a href="#"><i class="fa fa-tumblr" aria-hidden="true"></i></a>
                    <a href="#"><i class="fa fa-deviantart" aria-hidden="true"></i></a>
                    <a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
                    <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                    <hr>
                    <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Creative Commons Lizenzvertrag" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a>
                    <br>
                    &copy; <a href="{SITE_URL_FULL}">{SITE_NAME}</a> {YEAR}
                    <br>
                    Infinity Theme by <a href="http://www.smackjeeves.com/profile.php?id=269815">Midnight Comix</a>
                </div>
            </div>
        </footer>
    </div>
</body>
</html>



MENU
Code: Select all
           
            <div class="nav" id="nav">
                <!-- BEGIN links -->
                <a href="{links.URL}">{links.TEXT}</a>
                <!-- END links -->
              <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="navResponsive()">&#9776;</a>
            </div>


NEWS/WELCOME
Code: Select all
            <div class="pageTitle">
                <h2> >>{PAGE_TITLE}<< </h2>
            </div>
            <center>
                <div name="content" class="content">
                    <div class="previews">
                        <h2>Begin Reading</h2>
                        <div class="previewComic">
                            <img class="comicImage" src="#"> <!--  Place the source of your frst comic page -->
                            <a href="{FIRST_COMIC_URL}">
                                <div class="overlayComic">
                                    <div class="text">
                                        Begin Reading
                                    </div>
                                </div>
                            </a>
                        </div>
                        <p>New reader?</p>
                    </div>
                    <div class="previews">
                        <h2>Latest Page</h2>
                        <div class="previewComic">
                            <!-- BEGIN latest_comic -->
                            <img class="comicImage" src="{latest_comic.IMG_SRC}">
                            <!-- END latest_comic -->
                            <a href="{LATEST_COMIC_URL}">
                                <div class="overlayComic">
                                    <div class="text">
                                        Latest Page
                                    </div>
                                </div>
                            </a>
                        </div>
                        <p>See whats new</p>
                    </div>
                </div>
                <div class="content">
                    <div class="news">
                        <!-- BEGIN news_loop -->
                        <div class="newsBody">
                            <span class="postAuther">Posted by <a href="{news_loop.AUTHOR_PROFILE_URL}">{news_loop.POST_AUTHOR}</a></span>
                            <span class="postDate">{news_loop.POST_DATE}</span>
                            <br>
                            <div class="newsPost">
                                {news_loop.POST_TITLE}
                                <hr>
                                {news_loop.MESSAGE_BODY}
                            </div>
                            <a href="{news_loop.COMMENT_LINK}"><i class="fa fa-comments-o" aria-hidden="true"></i> {news_loop.COMMENT_COUNT} Comments</a>
                        </div>
                        <!-- END news_loop -->
                    </div>
                    <!-- data banner code end -->
                    <div class="twitter">
                        <a class="twitter-timeline" data-height="400" data-theme="dark" href="#">Tweets by [INSERT YOUR USERNAME]</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> <!--  Insert your Twitter link here -->
                        <br>
                        {SITE_DESCRIPTION}
                    </div>
                </div>
            </center>


NEWS ARCHIVE
Code: Select all
            <div class="pageTitle">
                <h2> >>{PAGE_TITLE}<< </h2>
            </div>
            <div class="newscontainer">
                <div class="newsnavcontainer">
                    <ul id="navlist">
                        <!-- BEGIN loop_months -->   
                        <li id="active"><a href="{loop_months.MONTH_LINK}" id="current">{loop_months.MONTH}</a>
                            <ul id="subnavlist">
                                <!-- BEGIN loop_posts -->
                                <!-- BEGIN switch_selected_post -->
                                <li>&#187;
                                <!-- END switch_selected post -->
                                <!-- BEGIN switch_unselected_post -->
                                <li>
                                <!-- END switch_unselected_post -->
                                    <a href="{loop_months.loop_posts.LINK}" id="subcurrent">{loop_months.loop_posts.TITLE}</a></li>
                                <!-- END loop_posts -->
                            </ul></li>
                        <!-- END loop_months -->
                    </ul>
                </div>
                <div class="newspostcontainer">
                    <!-- Begin .post -->
                    <div class="newsBody">
                        <span class="postAuther">posted by <a href="{AUTHOR_PROFILE_URL}" target="_profile">{POST_AUTHOR}</a></span>
                        <span class="postDate">{POST_DATE}</span>
                        <br>
                        <div class="newsPost">
                            {POST_TITLE}
                            <hr>
                            {POST_CONTENT}
                        </div>
                        <a href="/newscomment.php?cid={POST_ID}" onClick="var new_window = window.open('/newscomment.php?cid={POST_ID}', 'sj_comment', 'height=320, width=420'); new_window.focus(); return false;"><i class="fa fa-comments-o" aria-hidden="true"></i> {COMMENT_COUNT} Comments</a>
                    </div>
                    <!-- End .post -->
                    <h3>Comments:</h3>
                    <!-- BEGIN loop_comments -->
                     <div class="newsBody">
                        <span class="postAuther">posted by <a href="{loop_comments.POSTER_PROFILE_URL}">{loop_comments.NAME}</a></span>
                        <span class="postDate">{loop_comments.POST_DATE}</span>
                        <br>
                        <div class="newsPost">
                            {loop_comments.POST_TITLE}
                            <hr>
                            {loop_comments.MESSAGE}
                        </div>
                         <!-- BEGIN switch_user_can_edit -->
                         <a href="{loop_comments.EDIT_LINK}" onClick="var new_window = window.open('{loop_comments.EDIT_LINK}', 'sj_comment', 'height=320, width=420'); new_window.focus(); return false;">Edit</a>
                         <!-- END switch_user_can_edit -->
                         ||
                         <!-- BEGIN switch_user_can_delete -->
                         <a href="{loop_comments.DELETE_LINK}" onClick="var new_window = window.open('{loop_comments.DELETE_LINK}', 'sj_comment', 'height=320, width=420'); new_window.focus(); return false;">Delete</a>
                         <!-- END switch_user_can_delete -->
                    </div>
                    <!-- END loop_comments -->
                </div>
            </div>


COMIC PAGE
Code: Select all
            <div class="pageTitle">
                <h2> >>{PAGE_TITLE}<< </h2>
            </div>
            <div class="comicpagecontent">
                <div class="userVote">
                    <div class="score">
                        <p>Average Rating: <b>{AVERAGE_RATING}</b></p>
                    </div>
                    <div class="vote">
                        <script language="JavaScript">
                            var dir = "http://www.smackjeeves.com/templates/default/images/";
                            var pic_unselected = "star-unselected.gif";
                            var pic_selected = "star-selected.gif";
                            <!-- BEGIN switch_user_has_voted -->
                            var default_rating = {switch_user_has_voted.RATING};
                            <!-- END switch_user_has_voted -->
                            <!-- BEGIN switch_user_hasnt_voted -->
                            var default_rating = 0;
                            <!-- END switch_user_hasnt_voted -->

                            function build_vote() {
                                document.write('<b>Rate this Comic:</b> ');
                               for (n = 1; n<= 5; n++) {
                                    if (n <= default_rating) {
                                        default_pic = pic_selected;
                                    } else {
                                        default_pic = pic_unselected;
                                    }
                                    document.write('<span onClick="vote(' + n + '); return false;" onMouseOver="rateover(' + n + ');" onMouseOut="rateover(default_rating);"><img src="' + dir + default_pic + '" name="star_' + n + '" border=0></span> ');
                               }
                               document.write('</ul>');
                            }

                            function rateover(star_num) {
                                for (n = 1; n <= 5; n++) {
                                    if (n <= star_num) {
                                        da_code = 'document.star_' + n + '.src="' + dir + pic_selected + '"';
                                    } else {
                                        da_code = 'document.star_' + n + '.src="' + dir + pic_unselected + '"';
                                    }
                                    eval(da_code);
                                }
                            }

                            function vote(rating) {
                                var new_window = window.open("/ratecomic.php?cid={COMIC_ID}&rating=" + rating, "sj_ratecomic", "height=300, width=400");
                                new_window.focus();
                            }
                        </script>
                        <p><script language="JavaScript">build_vote();</script></p>
                    </div>
                </div>
                <div class="navbar">
                    <a href="{NAV_FIRST}" title="First Page"><img src="http://orig07.deviantart.net/f486/f/2016/363/5/d/button_first_by_darwins_evolution-dah5476.png" alt="<<First Page"/></a>
                    <a href="{NAV_PREV}" title="Previous Page"><img src="http://orig09.deviantart.net/5a4a/f/2016/363/2/5/button_previous_by_darwins_evolution-dah547b.png" alt="<Previous Page"/></a>
                    <span class="showJumpbox">{JUMPBOX_FORMATTED}</span>
                    <a href="{NAV_NEXT}" title="Next Page"><img src="http://orig09.deviantart.net/ca30/f/2016/363/4/9/button_next_by_darwins_evolution-dah5479.png" alt="Next Page>"/></a>
                    <a href="{NAV_LAST}" title="Latest Page"><img src="http://orig08.deviantart.net/91d9/f/2016/363/f/1/button_latest_by_darwins_evolution-dah5478.png" alt="Latest Page>>"/></a>
                </div>
                <div class="comicpage">
                    <!-- BEGIN comic_image -->
                    {comic_image.FORMATTED}
                    <!-- END comic_image -->
                   <!-- BEGIN switch_no_comic_image -->
                   <img src="http://www.imagemonster.org/getimg/image_na.gif" width="600" height="400">
                   <!-- END switch_no_comic_image -->
                </div>
                <div class="navbar">
                    <a href="{NAV_FIRST}" title="First Page"><img src="http://orig07.deviantart.net/f486/f/2016/363/5/d/button_first_by_darwins_evolution-dah5476.png" alt="<<First Page"/></a>
                    <a href="{NAV_PREV}" title="Previous Page"><img src="http://orig09.deviantart.net/5a4a/f/2016/363/2/5/button_previous_by_darwins_evolution-dah547b.png" alt="<Previous Page"/></a>
                    <span class="showJumpbox">{JUMPBOX_FORMATTED}</span>
                    <a href="{NAV_NEXT}" title="Next Page"><img src="http://orig09.deviantart.net/ca30/f/2016/363/4/9/button_next_by_darwins_evolution-dah5479.png" alt="Next Page>"/></a>
                    <a href="{NAV_LAST}" title="Latest Page"><img src="http://orig08.deviantart.net/91d9/f/2016/363/f/1/button_latest_by_darwins_evolution-dah5478.png" alt="Latest Page>>"/></a>
                </div>
                <br>
                <div class="authersComment">
                    <!-- BEGIN loop_author_comments -->
                    <div class="newsBody">
                        <span class="postDate">{loop_author_comments.DATE_POSTED}</span>
                        <br>
                        <div class="newsPost">
                           {loop_author_comments.POST_TITLE}
                            <hr>
                            {loop_author_comments.MESSAGE}
                        </div>
                        <br>
                        <!-- BEGIN switch_user_can_edit -->
                       | <a href="{loop_author_comments.EDIT_LINK}" onClick="var new_window = window.open('{loop_author_comments.EDIT_LINK}', 'sj_comment', 'height=340, width=420'); new_window.focus(); return false;">Edit</a>
                       <!-- END switch_user_can_edit -->
                       <!-- BEGIN switch_user_can_delete -->
                       | <a href="{loop_author_comments.DELETE_LINK}" onClick="var new_window = window.open('{loop_author_comments.DELETE_LINK}', 'sj_comment', 'height=340, width=420'); new_window.focus(); return false;">Delete</a>
                       <!-- END switch_user_can_delete -->
                    </div>
                    <!-- END loop_author_comments -->
                </div>
            </div>
            <div class="userComment">
                <h3>Readers´ Comments:</h3>
                <a href="/postcomment.php?cid={COMIC_ID}" onClick="var new_window = window.open('/postcomment.php?cid={COMIC_ID}', 'sj_comment', 'height=350, width=420'); new_window.focus(); return false;"><i class="fa fa-comments" aria-hidden="true"></i> Post A Comment</a>
                <!-- BEGIN loop_user_comments -->
                <div class="newsBody">
                    <span class="postAuther">Posted by <a href="{loop_user_comments.POSTER_PROFILE_URL}">{loop_user_comments.NAME}</a></span>
                    <span class="postDate">{loop_user_comments.DATE_POSTED}</span>
                    <br>
                    <div class="avatar">
                        <!-- BEGIN switch_poster_avatar -->
                        <img src="{loop_user_comments.POSTER_AVATAR_IMG_SRC}" width="auto" height="auto"/>
                        <!-- END switch_poster_avatar -->
                    </div>
                    <div class="newsPost">
                        {loop_user_comments.POST_TITLE}
                        <hr>
                        {loop_user_comments.MESSAGE}
                    </div>
                    <div class="edit">
                        <a href="{loop_user_comments.REPLY_LINK}" onClick="var new_window = window.open('{loop_user_comments.REPLY_LINK}', 'sj_comment', 'height=340, width=420'); new_window.focus(); return false;">Reply</a> ||
                        <!-- BEGIN switch_user_can_edit -->
                        <a href="{loop_user_comments.EDIT_LINK}" onClick="var new_window = window.open('{loop_user_comments.EDIT_LINK}', 'sj_comment', 'height=320, width=420'); new_window.focus(); return false;">Edit</a> 
                        <!-- END switch_user_can_edit -->
                        ||
                        <!-- BEGIN switch_user_can_delete -->
                         <a href="{loop_user_comments.DELETE_LINK}" onClick="var new_window = window.open('{loop_user_comments.DELETE_LINK}', 'sj_comment', 'height=320, width=420'); new_window.focus(); return false;">Delete</a>
                        <!-- END switch_user_can_delete -->
                    </div>
                </div>
                <!-- END loop_user_comments -->
            </div>


COMIC ARCHIVE
Code: Select all
            <div class="pageTitle">
                <h2> >>Comic Archive<< </h2>
            </div>
            <div class="comic-chapters">
                <!-- BEGIN archive_chapters -->
                <div class="chapter">
                    <!-- BEGIN switch_comic_has_chapters -->
                    <span class="number">
                        {archive_chapters.CHAPTER_TITLE}
                    </span>
                    <!-- END switch_comic_has_chapters -->
                    <div class="thumbs">
                        <hr>
                        <!-- BEGIN archive_comics -->
                        <a href="{archive_chapters.archive_comics.COMIC_URL}"><img src="{archive_chapters.archive_comics.THUMBNAIL_IMG_SRC}"></a>
                        <!-- END archive_comics -->
                        <hr>
                    </div>
                </div>
                <!-- END archive_chapters -->
            </div>



The following code is for costume pages

CAST
Code: Select all
            <div class="pageTitle">
                <h2> >>{PAGE_TITLE}<< </h2>
            </div>
            <div class="castContent">
                <div class="character">     <!-- Copy everything in this div for multiple characters -->
                    <div class="castImg">
                        <img src="#" alt="Name"> <!-- The image sorce of your character. Not too large, please. -->
                        <h2>Hello, my name is...</h2>
                    </div>
                    <div class="castInfo">
                        <div class="quote">
                            <h3>“What should one say?”</h3>
                        </div>
                        <div class="stats">
                            <div class="stat">
                                <strong>Species:</strong>
                                <br>
                                Human maybe?
                            </div>
                            <div class="stat">
                                <strong>Rank/Class:</strong>
                                <br>
                                You can of course delete this if you want.
                            </div>
                            <div class="stat">
                                <strong>Age:</strong>
                                <br>
                                -254
                            </div>
                            <div class="stat" style="margin-bottom: 20px;">
                                <strong>First appearance:</strong>
                                <br>
                                <a href="#">Page #</a> <!-- Add the link to the first page where this character was shown -->
                            </div>
                        </div>
                    </div>
                    <div class="background">
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </div>
                </div>
            </div>


LINKS
Code: Select all
        <div class="pageTitle">
            <h2> >>{PAGE_TITLE}<< </h2>
        </div>
        <table class="link">
            <tr>
                <td>
                    <a href="#"><img src=""/></a> <!-- Image and link go right here! -->
                </td>
                <td>
                    Say what the comic is about.
                </td>
            </tr>
        </table>



Compatibility
Infinity Theme should work with:
-Google Chome
-Opera
-Microsoft Edge
-Microsoft Internet Explorer
Last edited by Midnight-Comix on January 8th, 2018, 12:26 pm, edited 9 times in total.
Image
User avatar
Midnight-Comix
 
Posts: 2
Joined: November 18th, 2016, 8:21 am

Re: Infinity Theme template

Postby eishiya » December 14th, 2017, 1:47 pm

It would be a lot easier for people to use the template if you included the code in your post. You can use the code tags:
Code: Select all
[code][/code]


Example:
Code: Select all
<html>
   <head>
   </head>
</html>


These will automatically keep the code from stretching the page, and make it easy to copy+paste.


Thanks for sharing your template, though! Are comments meant to have a white background? It makes them very high-contrast and hard on the eyes since the rest of the page is dark.
Image
User avatar
eishiya
 
Posts: 9857
Joined: December 5th, 2009, 11:17 am

Re: Infinity Theme template

Postby Midnight-Comix » December 14th, 2017, 2:23 pm

Sorry, I´m new to this.
As for the commnts, The white background was intended, but I see your point. I´ll change that soon.

Thanks for helping out.
Image
User avatar
Midnight-Comix
 
Posts: 2
Joined: November 18th, 2016, 8:21 am

Re: Infinity Theme template

Postby Admin » December 14th, 2017, 2:35 pm

Woah, nice job! It's been a while since anyone submitted a new template, it's much appreciated.
User avatar
Admin
Site Admin
 
Posts: 1410
Joined: August 17th, 2005, 11:10 pm


Return to Template Submission

Who is online

Users browsing this forum: No registered users and 2 guests