.: Streamlined :. responsive, animated, & easy to use

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

.: Streamlined :. responsive, animated, & easy to use

Postby Falconer » January 4th, 2015, 10:34 pm

.: STREAMLINED :.

Image

This template has the following features:

  • Responsive to various screen sizes & devices
  • Modern, sleek look
  • Comic images scale to fit screen
  • Full-width preview of latest comic on homepage
  • Fully documented for easy installation & use
  • Use with Google fonts
  • Use of Font Awesome for icons
  • Multiple animation effects
  • New, animated archive

This template is completely free-to-us for smackjeeves users, but donations to my patreon are appreciated. :) The code may look intimidating, but it's actually just a lot of find & replace to make basic changes, so don't worry! I have written this out as straightforward as possible.

Installation

First, the code!

OVERALL LAYOUT:
Code: Select all
<!DOCTYPE html>
<html>
<head>

  <link rel="alternate" type="application/rss+xml" title="{SITE_NAME} RSS" href="http://{SITE_URL}.smackjeeves.com/rss/">

   <title>{SITE_NAME} :: {PAGE_TITLE}</title>

   <META NAME="Description" CONTENT="{SITE_DESCRIPTION}">
   <META NAME="Keywords" CONTENT="{SITE_NAME}, {PAGE_TITLE}, good webcomic">
  <META NAME="viewport" CONTENT="width=device-width, initial-scale=1, user-scalable=yes">

   <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
  <link href='http://fonts.googleapis.com/css?family=Lobster|Roboto:400,300' rel='stylesheet' type='text/css'>

  <style type="text/css">

    /* --------------- COLOR/FONT REFERENCE ------------------ */

    // LIGHT SHADE : #c5ecf6
    // MIDDLE SHADE : #21abcd || rgb(33,171,205)
    // DARK SHADE : #2180cd
    // ACCENT COLOR 2: #99efc1
    // ACCENT COLOR 2, LIGHT: #20cf72
    // HEADING FONT (google) : Lobster
    // BODY FONT (google) : Roboto

    /* --------------- PRIMARY ------------------ */

    body {
      padding: 0 0;
    }

    img {
      border: 0;
      max-width: 100%;
      display: block;
      height: auto;
    }

    h1, h2, h3, h4, h5, h6 {
      font-family: 'Lobster', cursive;
      color: #2180cd;
    }

    p { line-height: 1.5em; }

    a:link, a:active, a:visited {
      text-decoration: none;
      color: #21abcd;
      -webkit-transition: color 0.5s;
      transition: color 0.5s;
    }

    a:hover {
      text-decoration: none;
      color: #20cf72;
      -webkit-transition: color 0.5s;
      transition: color 0.5s;
    }

    #fullpage {
      padding: 0;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background: url("http://delusioninabox.com/sj/greyzz.png") #FFEFEC;
      color: #000;
      font-family: 'Roboto', arial, sans-serif;
    }

    .left {
      position: relative;
      float: left;
    }

    .right {
      position: relative;
      float: right;
    }

     .clear {
        clear: both;
     }

    #content {
      clear: both;
      width: 100%;
    }

    .container {
      max-width: 1200px;
      position: relative;
      margin: 0 auto;
      padding: 1% 3%;
     }

    .container h1 { border-bottom: 2px solid #c5ecf6; }

    /* --------------- HEADER ------------------ */

    header {
      background: linear-gradient(
        rgba(33,171,205, 0.3),
        rgba(33,171,205, 0.3)
        ),
        url("http://delusioninabox.com/sj/tex2res4.png") repeat fixed;
      padding: 20px 40px;
      color: #c5ecf6;
      min-height: 210px;
      -webkit-transition: all 1.5s;
      transition: all 1.5s;
    }

    header:hover {
      background: linear-gradient(
        rgba(33,171,205, 0.3),
        rgba(33,171,205, 0.3)
        ),
        url("http://delusioninabox.com/sj/tex2res4.png") repeat fixed;
      -webkit-transition: all 1.5s;
      transition: all 1.5s;
    }

    header h1 {
      font-size: 3.5em;
      border-bottom: solid 2px #fff;
      width:90%; margin: 30px 10px 10px 5%;
      padding-bottom: 25px;
      text-shadow: 2px 2px 4px #000;
    }
   
    header p { margin: 0; }

    header a:link h1,
    header a:active h1,
    header a:visited h1 {
      text-decoration: none;
      color: #fff;
    }
   
    header a:hover h1 {
     text-decoration: none;
     color: #c5ecf6;
    }

    header a:link,
    header a:active,
    header a:visited,
    footer a:link,
    footer a:active,
    footer a:visited  {
      text-decoration: none;
      color: #99efc1;
    }

    header a:hover,
    footer a:hover {
      text-decoration: none;
      color: #c5ecf6;
    }




    /* --------------- FOOTER ------------------ */

    footer {
      clear: both;
      background: linear-gradient(
        rgba(33,171,205, 0.5),
        rgba(33,171,205, 0.5)
        ),
        url("http://delusioninabox.com/sj/tex2res4.png") repeat fixed;
      padding: 20px 40px;
      color: #c5ecf6;
      text-align: center;
      margin-top: 20px;
    }




    /* --------------- NAVIGATION ------------------ */

    nav ul {
      list-style: none;
      padding: 15px;
      margin: 0px;
    }

    nav ul li:first-child { display: none; }

    nav li {
      float: left;
    }

    nav li:hover a {
      background: url("http://delusioninabox.com/sj/tex2res4.png") repeat fixed;
      font-weight: bold;
    }

    nav li a {
      padding: 10px 20px;
      text-transform: uppercase;
    }



    /* --------------- HEADER ICON ------------------ */

    .headIcon {
      width: 200px;
      height: 200px;
      margin-bottom: 10px;
      background: url("http://delusioninabox.com/sj/sample-icon.png");
      background-size: cover;
      border-radius: 100%;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      margin-right: 30px;
      box-shadow: 10px 5px #99efc1;
      -webkit-transition: all 4s;
       transition: all 4s;
    }

    header:hover .headIcon {
      border-radius: 0;
      -moz-border-radius: 0;
      -webkit-border-radius: 0;
      -webkit-transition: all 4s;
      transition: all 4s;
    }



    /* --------------- HOMEPAGE: LATEST PAGE IMAGE  ------------------ */

    #imgBlock {
      width: 100%;
      height: 300px;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      -webkit-transition: height 2s;
      transition: height 2s;
    }

    #imgBlock:hover { height: 450px; -webkit-transition: height 2s; transition: height 2s; }

    .announce {
      width: 60%;
      margin: 0 auto;
      position: relative;
      padding: 10px;
      background-color: rgba(33,171,205, 0.2);
      border: 3px solid rgba(33,171,205, 0.8);
      color: #FFF;
      text-align: center;
      font-size: 1.3em;
      top: 100px;
      -webkit-transition: all 2s;
      transition: all 2s;
      text-shadow: 2px 2px 4px #000;
    }
   
    .announce h1 { color: #FFF; padding: 5px; margin: 0; }

    .announce a:hover { color: #99efc1; }

    #imgBlock:hover .announce {
      background: rgba(33,171,205, 0.8);
      border: 3px solid rgba(33,171,205, 0.0);
      border-radius: 50px 0px 50px 0px;
      -webkit-transition: all 2s;
      transition: all 2s;
      top: 170px;
    }



    /* --------------- ARCHIVE PAGE ANIMATIONS ------------------ */

    .in {
      animation: TwirlIn ease-in-out 3s;
      animation-iteration-count: 1;
      transform-origin: 50% 50%;
      -webkit-animation: TwirlIn ease-in-out 3s;
      -webkit-animation-iteration-count: 1;
      -webkit-transform-origin: 50% 50%;
      -moz-animation: TwirlIn ease-in-out 3s;
      -moz-animation-iteration-count: 1;
      -moz-transform-origin: 50% 50%;
      -o-animation: TwirlIn ease-in-out 3s;
      -o-animation-iteration-count: 1;
      -o-transform-origin: 50% 50%;
      -ms-animation: TwirlIn ease-in-out 3s;
      -ms-animation-iteration-count: 1;
      -ms-transform-origin: 50% 50%;
    }

    @keyframes TwirlIn{
      0% {
        opacity:0;
        transform:  rotate(0deg) ;
      }
      100% {
        opacity:1;
        transform:  rotate(360deg) ;
      }
    }

    @-moz-keyframes TwirlIn{
      0% {
        opacity:0;
        -moz-transform:  rotate(0deg) ;
      }
      100% {
        opacity:1;
        -moz-transform:  rotate(360deg) ;
      }
    }

    @-webkit-keyframes TwirlIn {
      0% {
        opacity:0;
        -webkit-transform:  rotate(0deg) ;
      }
      100% {
        opacity:1;
        -webkit-transform:  rotate(360deg) ;
      }
    }

    @-o-keyframes TwirlIn {
      0% {
        opacity:0;
        -o-transform:  rotate(0deg) ;
      }
      100% {
        opacity:1;
        -o-transform:  rotate(360deg) ;
      }
    }

    @-ms-keyframes TwirlIn {
      0% {
        opacity:0;
        -ms-transform:  rotate(0deg) ;
      }
        100% {
        opacity:1;
        -ms-transform:  rotate(360deg) ;
      }
    }

    .out{
      animation: TwirlOut linear 2s;
      animation-iteration-count: 1;
      transform-origin: 50% 50%;
      -webkit-animation: TwirlOut linear 2s;
      -webkit-animation-iteration-count: 1;
      -webkit-transform-origin: 50% 50%;
      -moz-animation: TwirlOut linear 2s;
      -moz-animation-iteration-count: 1;
      -moz-transform-origin: 50% 50%;
      -o-animation: TwirlOut linear 2s;
      -o-animation-iteration-count: 1;
      -o-transform-origin: 50% 50%;
      -ms-animation: TwirlOut linear 2s;
      -ms-animation-iteration-count: 1;
      -ms-transform-origin: 50% 50%;
    }

    @keyframes TwirlOut{
      0% {
        opacity:1;
        transform:  rotate(0deg) ;
      }
      100% {
        opacity:0;
        transform:  rotate(360deg) ;
      }
    }

    @-moz-keyframes TwirlOut{
      0% {
        opacity:1;
        -moz-transform:  rotate(0deg) ;
      }
      100% {
        opacity:0;
        -moz-transform:  rotate(360deg) ;
      }
    }

    @-webkit-keyframes TwirlOut {
      0% {
        opacity:1;
        -webkit-transform:  rotate(0deg) ;
      }
      100% {
        opacity:0;
        -webkit-transform:  rotate(360deg) ;
      }
    }

    @-o-keyframes TwirlOut {
      0% {
        opacity:1;
        -o-transform:  rotate(0deg) ;
      }
      100% {
        opacity:0;
        -o-transform:  rotate(360deg) ;
      }
    }

    @-ms-keyframes TwirlOut {
      0% {
        opacity:1;
        -ms-transform:  rotate(0deg) ;
      }
      100% {
        opacity:0;
        -ms-transform:  rotate(360deg) ;
      }
    }



    /* --------------- ARCHIVE PAGE ------------------ */

    .archive {
      width: 10.5%;
      min-width: 140px;
      padding: 1%;
      margin: 1%;
      border: 2px solid black;
      float: left;
      text-align: center;
      background-color: rgba(33,171,205, 0.2);
      border: 3px solid rgba(33,171,205, 0.8);
      color: #2180cd;
      text-align: center;
      -webkit-transition: all 2s;
      transition: all 2s;
    }

    .archive:hover {
      background-color: rgba(33,171,205, 0.8);
      border: 3px solid rgba(33,171,205, 0.0);
      border-radius: 50px 0px 50px 0px;
      -moz-border-radius: 50px 0px 50px 0px;
      -webkit-border-radius: 50px 0px 50px 0px;
      color: #FFF;
      -webkit-transition: all 2s;
      transition: all 2s;
    }


    .archive .display { display: block; }
    .archive .displayAlt { display: none; }
    .archive:hover .display { display: none; }
    .archive:hover .displayAlt { display: block; }

    .archive img { border: 5px solid rgba(255, 255, 255, 0.0); margin: 0 auto; }

    .archive:hover img {
      border: 5px solid #99efc1;
    }

    .archive h2,
    .displayAlt h2 { padding: 0px; margin: 0px; }

    .archive p { margin: 0px; }

    .archTitle {
      padding: 15px;
      float: left;
      background: #2180cd;
      color: #fff;
      margin: 15px;
      -webkit-transition: all 2s;
      transition: all 2s;
    }
   
    .archTitle:hover {
      background: #21abcd;
      border-radius: 30px 0px 30px 0px;
      -moz-border-radius: 30px 0px 30px 0px;
      -webkit-border-radius: 30px 0px 30px 0px;
      -webkit-transition: all 1s;
      transition: all 1s;
    }




    /* --------------- BUTTON ------------------ */

    .button {
      width: 80%;
      margin: 0 auto;
      position: relative;
      padding: 10px;
      background-color: rgba(33,171,205, 0.2);
      border: 3px solid rgba(33,171,205, 0.8);
      color: #FFF;
      text-align: center;
      font-size: 1.5em;
      -webkit-transition: all 2s;
      transition: all 2s;
    }

    .button:hover {
      background: rgba(33,171,205, 0.8);
      border: 3px solid rgba(33,171,205, 0.0);
      border-radius: 50px 0px 50px 0px;
      -webkit-transition: all 2s;
      transition: all 2s;
    }

    .button a:hover { color: #FFF; }




    /* --------------- COMIC PAGE ------------------ */

    #comic img {
      text-align: center;
      max-width: 100%;
      margin: 0 auto;
    }

    .starBar {
      list-style-type: none;
      display: inline-block;
    }

    .starBar li {
      display: inline-block;
      margin: 0px 5px;
    }

    .comic-head-block {
      float: right;
      text-align: right;
    }

    .comic {
      clear: both;
      width: 100%;
      text-align: center;
    }

    #sm-box a { display: inline-block; }

    .comicnav a {
      padding: 2%;
      margin: 0;
      width: 20%;
      display: inline-block;
      text-align: center;
    }

    .comicnav .fa {
      margin: 0px 15px;
    }




    /* --------------- COMMENTS ------------------ */

     .comment {
        width: 100%;
      margin-bottom: 20px;
      background-color: rgba(33,171,205, 0.0);
      border: 3px solid rgba(33,171,205, 0.8);
      -webkit-transition: all 4s;
      transition: all 4s;
     }

    .comment:hover {
      background: rgba(33,171,205, 0.2);
      border: 3px solid rgba(33,171,205, 0.2);
      border-radius: 50px 0px 50px 0px;
      -webkit-transition: all 4s;
      transition: all 4s;
    }

    .comment:hover .commentHead {
      border-radius: 50px 0px 0px 0px;
      -webkit-transition: all 4s;
      transition: all 4s;
    }
   
    .comment.reply {
   margin: 0 0 20px 5%;
        width: 95%;
    }

    .commentHead {
      background-color: rgba(33,171,205, 0.1);
      padding: 10px 10px 10px 145px;
      margin-bottom: 7px;
      -webkit-transition: all 4s;
      transition: all 4s;
    }

    .commentHead span a {
      padding: 0px 5px;
    }

    .commentHead h3 { margin: 0; }

    .commentPost p {
      line-height: 1.5em;
    }

    .commentPost { padding: 15px; }

    .commentPost h2 { padding: 0px; margin: 0px; }
   
    .avatar {
      border-radius: 100%;
      box-shadow: 10px 5px #99EFC1;
      margin: 15px;
      transition: all 1.5s;
      -webkit-transition: all 1.5s;
    }

    .comment:hover .avatar {
      border-radius: 0%;
      transition: all 4s;
      -webkit-transition: all 4s;
    }

    .guest {
      height: 125px;
      width: 125px;
      background: #21abcd;
      color: #c5ecf6;
    }

    .guest i {
      position: relative;
      left: 24%;
      top: 18%;
      font-size: 5em;
      -webkit-transition: all 2s;
      transition: all 2s;
    }



    /* --------------- ARCHIVE ADJUSTMENT, SCREEN BETWEEN 800-1200px ------------------ */

    @media all and (max-width: 1200px) {
      .archive { width: 20%; }
    }

    /* --------------- ADJUSTMENTS,SCREEN 800px OR LESS (mobile) ------------------ */

    @media all and (max-width: 800px) {

      .headIcon {
          width: 100px;
          height: 100px;
          top:-10px;
          left: -25px;
      }

      header h1 { text-align: center; }

      nav {
          position: fixed;
          right: 5px;
          top: -8px;
          font-size: x-large;
          background: #21abcd;
          z-index: 1;
          background: linear-gradient(
           rgba(33,171,205, 0.6),
           rgba(33,171,205, 0.6)
            ),
            url("http://delusioninabox.com/sj/tex2res4.png") repeat fixed;
      }

      nav:hover { border: 2px solid #99efc1; }

      nav li a {
          padding: 5px;
          margin: 5px;
          width: 100%;
      }

      nav li { float: none; width: 100%; }

      nav ul li {
          display: none;
          text-align: center;
      }

      nav ul:hover li {
          display: block;
          text-align: right;
      }

      nav ul li:hover a {
          background: url("http://delusioninabox.com/sj/tex2res4.png") repeat fixed;
      }

      nav ul li:first-child {
          display: block;
          font-size: 2em;
      }

      .announce { top: 50px; }

      #imgBlock:hover .announce {
          top: 120px;
      }

      .archive { width: 44%; }

      .commentHead {
          background-color: rgba(33,171,205, 0.1);
          padding: 10px;
          margin-bottom: 7px;
          font-size: .9em;
          -webkit-transition: all 2s;
          transition: all 2s;
      }

      .avatar {
          width: 50px;
          height: 50px;
          -webkit-transition: all 2s;
          transition: all 2s;
      }

      .guest i { font-size: 2em; -webkit-transition: all 2s;
          transition: all 2s;}

    }




    /* --------------- NEWS POSTS ------------------ */

    .post {
      margin: 0 auto;
      position: relative;
      padding: 10px 30px;
      background-color: rgba(33,171,205, 0.0);
      border: 3px solid rgba(33,171,205, 0.8);
      -webkit-transition: all 4s;
      transition: all 4s;
    }

    .post:hover {
      background: rgba(33,171,205, 0.2);
      border: 3px solid rgba(33,171,205, 0.2);
      border-radius: 50px 0px 50px 0px;
      -webkit-transition: all 4s;
      transition: all 4s;
     }

    .post-body { clear: both; }

    .post h2 { font-size: 1.8em; }

    .post-footer {
      padding: 5px 20px;
      background-color: rgba(33,171,205, 0.1);
    }

    .code { font-family: monospace; font-size: 1.2em; }

    .months {
      width: 100%;
      background: #c5ecf6;
      color: #fff;
      margin: 0;
      padding: 0px 15%;
      list-style: none;
    }

    .months li {
      display: inline-block;
      padding: 15px 15px;
      margin: 0;
      -webkit-transition: all .5s;
      transition: all .5s;
    }

    .months li:hover {
      background: #99efc1;
      -webkit-transition: all .5s;
      transition: all .5s;
    }

    .months .post-item-selected { background: #FFF; }



   </style>


</head>


<body>

  <div id="fullpage">

    <header>

      <div class="headIcon left"></div>

          <a href="{SITE_URL_FULL}">

         <h1>{SITE_NAME}</h1>

          </a>

          <p>This is a responsive SmackJeeves template that's easy to use, easy to edit, and optimized for all devices!</p>

        <nav>

           {MENU}

        </nav>

    </header>

    <div id="content">

        {CONTENT}

   </div>

   <footer>
      <a href="TWITTER LINK" target="_BLANK"><i class="fa fa-2x fa-twitter"></i></a>&nbsp;
      <a href="TUMBLR LINK" target="_BLANK"><i class="fa fa-2x fa-tumblr"></i></a>&nbsp;
      <a href="DA LINK" target="_BLANK"><i class="fa fa-2x fa-deviantart"></i></a>&nbsp;
      <a href="FB LINK" target="_BLANK"><i class="fa fa-2x fa-facebook"></i></a>&nbsp;
      <p>
        &copy; YOUR USERNAME HERE
      </p>
      <p style="font-size: x-small; font-style: italic;">Template by <a href="http://delusioninabox.com/" target="_blank">Delusion in a Box Design</a></p>
   </footer>

</div>

</body>
</html>


MENU:
Code: Select all
<ul>
      <li><a href="#"><span class="fa fa-bars"></span></a></li>
      <!-- BEGIN links -->
           <li><a href="{links.URL}">{links.TEXT}</a></li>
      <!-- END links -->
</ul>


NEWS/WELCOME PAGE:
Code: Select all
<!-- BEGIN latest_comic -->

  <div id="imgBlock" style="background: url('{latest_comic.IMG_SRC}'); background-size: cover; background-repeat: no-repeat;">
      <div class="announce">
        <h1>Latest Comic:
        <a href="{latest_comic.URL}">{latest_comic.TITLE}</a></h1>
      </div>
  </div>

<!-- END latest_comic -->

<div class="container">

  <h2>Welcome to {SITE_NAME}</h2>
  <p>{SITE_DESCRIPTION}</p>

  <div class='button'><a href="{FIRST_COMIC_URL}">Start at the Beginning</a></div>

  <h1><i class="fa fa-newspaper-o"></i> News</h1>

  <!-- BEGIN news_loop -->

    <!-- Begin .post -->

    <div class="post"><a name="{news_loop.POST_ID}"></a>


       <h2 class="left">
         <a href="{news_loop.COMMENT_LINK}">{news_loop.POST_TITLE}</a>
         <h3 class="right">{news_loop.POST_DATE}</h3>
       </h2>
   
       <div class="post-body">
         <p>{news_loop.MESSAGE_BODY}</p>
       </div>
   
       <p class="post-footer">
        <em>posted by <a href="{news_loop.AUTHOR_PROFILE_URL}" target="_profile">{news_loop.POST_AUTHOR}</a> @ {news_loop.POST_DATE}</em> &nbsp;
         <a class="comment-link" href="{news_loop.COMMENT_LINK}">{news_loop.COMMENT_COUNT} comment(s)</a>
      </p>

    </div>
   
    <!-- End .post -->
   
  <!-- END news_loop -->

  <p style="text-align: right;"><a href="{NEWS_ARCHIVE_LINK}">News Archive >></a></p>

</div>


NEWS ARCHIVE:
Code: Select all
<ul class="months">

  <!-- BEGIN loop_months -->

     <li><a href="{loop_months.MONTH_LINK}">{loop_months.MONTH}</a></li>


    <!-- BEGIN loop_posts -->

         <!-- BEGIN switch_selected_post -->

              <li class="post-item-selected">

         <!-- END switch_selected post -->

         <!-- BEGIN switch_unselected_post -->

              <li class="post-item">

         <!-- END switch_unselected_post -->

         <a href="{loop_months.loop_posts.LINK}">{loop_months.loop_posts.TITLE}</a>

      </li>

    <!-- END loop_posts -->

  <!-- END loop_months -->

</ul>


<div class="container">

  <h1>News Archive</h1>

    <!-- Begin .post -->

      <div class="post"><a name="{POST_ID}"></a>

         <h2 class="left">{POST_TITLE} <h3 class="right">{POST_DATE}</h3></h2>

        <div class="post-body">

          <p>{POST_CONTENT}</p>

         </div>


         <p class="post-footer">

          <em>posted by <a href="{AUTHOR_PROFILE_URL}" target="_profile">{POST_AUTHOR}</a> @ {POST_DATE}</em> &nbsp;
           <a class="comment-link" href="#">{COMMENT_COUNT} comments</a>

        </p>

      </div>


    <!-- End .post -->


    <!-- BEGIN switch_comments -->

       <h2>Comments:</h2>

     <!-- END switch_comments -->
   
     <!-- BEGIN loop_comments -->
       <div class="comment {loop_comments.REPLY_CLASS}">
   
        <div class="commentHead"><h3>
            <span class="left">
              <a href="{loop_comments.REPLY_LINK}" onClick="var new_window = window.open('{loop_comments.REPLY_LINK}', 'sj_comment', 'height=340, width=420'); new_window.focus(); return false;">Reply</a>
              <!-- BEGIN switch_user_can_edit -->
                  <a href="{loop_comments.EDIT_LINK}" onClick="var new_window = window.open('{loop_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_comments.DELETE_LINK}" onClick="var new_window = window.open('{loop_comments.DELETE_LINK}', 'sj_comment', 'height=340, width=420'); new_window.focus(); return false;">Delete</a>
              <!-- END switch_user_can_delete -->
            </span>
            <div class="right"><a href="{loop_comments.POSTER_PROFILE_URL}" target="_profile">{loop_comments.NAME}</a>, {loop_comments.DATE_POSTED}</div>
        </h3><div class="clear"></div>
      </div>

        <div class="commentPost clear">
          <!-- BEGIN switch_poster_avatar -->
              <img src="{loop_comments.POSTER_AVATAR_IMG_SRC}" height="{loop_comments.POSTER_AVATAR_IMG_HEIGHT}" width="{loop_comments.POSTER_AVATAR_IMG_WIDTH}" class="left avatar" />
          <!-- END switch_poster_avatar -->
        <!-- BEGIN switch_poster_no_avatar -->
            <div class="left guest avatar"><i class="fa fa-user"></i>
            </div>
        <!-- END switch_poster_no_avatar -->
          <h2>{loop_user_comments.POST_TITLE}</h2>
          {loop_comments.MESSAGE}
          <div class="clear"></div>
        </div>
    </div>
   
      {loop_comments.COMMENT_REPLIES}
   
    <!-- END loop_comments -->

  <div class="button">
      <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;">Post A Comment</a>
  </div>

</div>


COMIC PAGE:
Code: Select all
<div class="container">

  <script language="JavaScript">

    var pic_unselected = "fa fa-2x fa-star-o";
    var pic_selected = "fa fa-2x fa-star";

  <!-- 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('<ul class="starBar">');
     for (n = 1; n<= 5; n++)
     {
        if (n <= default_rating)
         {
             default_pic = pic_selected;
          } else {
             default_pic = pic_unselected;
          }

        document.write('<li><a href="#" onClick="vote(' + n + '); return false;" onMouseOver="rateover(' + n + ');" onMouseOut="rateover(default_rating);"><i class="' + default_pic + '" id="star_' + n + '"></i></a></li>');
     }
     document.write('</ul>');
  }

  function rateover(star_num)
  {
   
     for (n = 1; n <= 5; n++)
     {
        if (n <= star_num)
        {
           da_code = 'document.getElementById("star_' + n + '").className="' + pic_selected + '"';
        } else {
           da_code = 'document.getElementById("star_' + n + '").className="' + 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>

  <h1 style='text-align: center;'>{COMIC_TITLE}</h1>

  <div class="comic-head-block">

    <div id="rating">

      Average Rating: <b>{AVERAGE_RATING}</b>

    </div>

    <div id="rate">

      <script language="JavaScript">build_vote();</script>

    </div>

  </div>

  <h2>{COMIC_POST_DATE}</h2>

  <div class="comic">

    <!-- BEGIN comic_image -->
        {comic_image.FORMATTED}
    <!-- END comic_image -->

    <!-- BEGIN switch_no_comic_image -->
        <img src="http://www.smackjeeves.com/images/image_na.gif" width="600" height="400">
    <!-- END switch_no_comic_image -->

    <div style="padding: 8px 0 3px">{SHARE_THIS_COMIC}
      <p>Jump To: {JUMPBOX_FORMATTED}</p>
    </div>
  </div>

  <div class="comicnav">

      <a href="{NAV_FIRST}"><i class="fa fa-fast-backward"></i> First</a>
      <a href="{NAV_PREV}"><i class="fa fa-backward"></i> Previous</a>
   
      <a href="{NAV_NEXT}">Next <i class="fa fa-forward"></i></a>
      <a href="{NAV_LAST}">Latest<i class="fa fa-fast-forward"></i></a>

  </div>

  <!-- BEGIN switch_author_comments -->
    <h2>Author's Comments:</h2>
   <!-- END switch_author_comments -->
   
   <!-- BEGIN loop_author_comments -->
     <div class="comment {loop_author_comments.REPLY_CLASS}">
   
      <div class="commentHead"><h3>
          <span class="left">
              <a href="{loop_author_comments.REPLY_LINK}" onClick="var new_window = window.open('{loop_author_comments.REPLY_LINK}', 'sj_comment', 'height=340, width=420'); new_window.focus(); return false;">Reply</a>
              <!-- 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 -->
          </span>
          <div class="right"><a href="{loop_author_comments.POSTER_PROFILE_URL}" target="_profile">{loop_author_comments.NAME}</a>, {loop_author_comments.DATE_POSTED}</div>
        </h3><div class="clear"></div>
      </div>

        <div class="commentPost clear">
          <!-- BEGIN switch_poster_avatar -->
              <img src="{loop_author_comments.POSTER_AVATAR_IMG_SRC}" height="{loop_author_comments.POSTER_AVATAR_IMG_HEIGHT}" width="{loop_author_comments.POSTER_AVATAR_IMG_WIDTH}" class="left avatar" />
          <!-- END switch_poster_avatar -->
        <!-- BEGIN switch_poster_no_avatar -->
            <div class="left guest avatar"><i class="fa fa-user"></i>
            </div>
        <!-- END switch_poster_no_avatar -->
          <h2>{loop_author_comments.POST_TITLE}</h2>
          {loop_author_comments.MESSAGE}
          <div class="clear"></div>
        </div>
    </div>
   
     {loop_author_comments.COMMENT_REPLIES}
   
  <!-- END loop_author_comments -->
   

  <!-- BEGIN switch_user_comments -->
       <h2>User Comments:</h2>
   <!-- END switch_user_comments -->
   
   <!-- BEGIN loop_user_comments -->
     <div class="comment {loop_user_comments.REPLY_CLASS}">
   
      <div class="commentHead"><h3>
          <span class="left">
            <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=340, 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=340, width=420'); new_window.focus(); return false;">Delete</a>
            <!-- END switch_user_can_delete -->
          </span>
          <div class="right"><a href="{loop_user_comments.POSTER_PROFILE_URL}" target="_profile">{loop_user_comments.NAME}</a>, {loop_user_comments.DATE_POSTED}</div>
        </h3><div class="clear"></div>
      </div>

        <div class="commentPost clear">
            <!-- BEGIN switch_poster_avatar -->
                  <img src="{loop_user_comments.POSTER_AVATAR_IMG_SRC}" height="{loop_user_comments.POSTER_AVATAR_IMG_HEIGHT}" width="{loop_user_comments.POSTER_AVATAR_IMG_WIDTH}" class="left avatar" />
            <!-- END switch_poster_avatar -->
          <!-- BEGIN switch_poster_no_avatar -->
                <div class="left guest avatar"><i class="fa fa-user"></i>
              </div>
          <!-- END switch_poster_no_avatar -->

            <h2>{loop_user_comments.POST_TITLE}</h2>
            {loop_user_comments.MESSAGE}
            <div class="clear"></div>
        </div>
    </div>
   
      {loop_user_comments.COMMENT_REPLIES}
   
   
   <!-- END loop_user_comments -->

    <div class='button' style="margin-top: 15px;">
        <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;">Post A Comment</a>
    </div>

</div>


COMIC ARCHIVE:
Code: Select all
<div class="container">

  <h1><i class="fa fa-calendar"></i> Comic Archive</h1>

  <!-- BEGIN switch_comic_has_chapters -->

    <div class='archTitle' onClick="changeDisplay('all')">All</div>
   
     <!-- BEGIN archive_chapters -->

      <div class='archTitle' onClick="changeDisplay('ch_{archive_chapters.CHAPTER_ID}')">{archive_chapters.CHAPTER_TITLE}</div>

    <!-- END archive_chapters -->
   
    <div style='clear:both;'></div>
    
  <!-- END switch_comic_has_chapters -->

   <!-- BEGIN archive_chapters -->


      <!-- BEGIN switch_comic_has_chapters -->

          <div id="ch_{archive_chapters.CHAPTER_ID}">

       <!-- END switch_comic_has_chapters -->

               
      <!-- BEGIN archive_comics -->
          <div class="archive in" onClick="location.href='{archive_chapters.archive_comics.COMIC_URL}';">

            <div class="display">

                <img src="{archive_chapters.archive_comics.THUMBNAIL_IMG_SRC}">
                <h2># {archive_chapters.archive_comics.COMIC_NUMBER}</h2>
                <p>{archive_chapters.archive_comics.COMIC_TITLE}</p>
                   
            </div>

            <div class="displayAlt">
                <img src="{archive_chapters.archive_comics.THUMBNAIL_IMG_SRC}">
                <h2><script type="text/javascript">
                        var theDate="{archive_chapters.archive_comics.DATE_RELEASED}";
                        var displayDate = theDate.substr(0,11);
                        document.write(displayDate);
                      </script></h2>
                <p>{archive_chapters.archive_comics.NUMBER_COMMENTS} comments</p>
            </div>

          </div>
      <!-- END archive_comics -->
   
    </div>

   <!-- END archive_chapters -->
   
  <div style="clear:both; min-height: 15px;">&nbsp;</div>
</div>

<script>
  function changeDisplay (chapter) {

    var x = document.getElementsByClassName("archive");
    var i;
    for (i = 0; i < x.length; i++) {
        x[i].className = "archive";
        x[i].className = "archive out";
        setTimeout(function(x, i){ x[i].style.display = "none"; }, 1000, x, i);
    }

    if(chapter=='all') {
      var x = document.getElementsByClassName("archive");
      var i;
      for (i = 0; i < x.length; i++) {
        x[i].className = "archive";
        x[i].className = "archive in";
        setTimeout(function(x, i){ x[i].style.display = "block"; }, 1000, x, i);
      }
    } else {
      var n = document.getElementById(chapter).getElementsByClassName("archive");
      var y;
      for (y = 0; y < n.length; y++) {
        n[y].className = "archive";
        n[y].className = "archive in";
        setTimeout(function(n, y){ n[y].style.display = "block"; }, 1000, n, y);
      }
    }

  }
</script>


Next, minor editing.

To get this template immediately good for your comic, you'll want to edit out some of the placeholder content. So go into the Overall Layout and replace the following sections that are in red:

/* --------------- HEADER ICON ------------------ */

.headIcon {
width: 200px;
height: 200px;
margin-bottom: 10px;
background: url("http://delusioninabox.com/sj/sample-icon.png");
background-size: cover;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
margin-right: 30px;
box-shadow: 10px 5px #99efc1;
-webkit-transition: all 4s;
transition: all 4s;
}


Replace the above URL in red with a link to the image you'd like in the header. For best results, keep it a 200px by 200px square.

Next:

<h1>{SITE_NAME}</h1>

</a>

<p>This is a responsive SmackJeeves template that's easy to use, easy to edit, and optimized for all devices!</p>

<nav>


Replace that sentence with one describing your comic. KEEP IT SHORT! This is meant to be a place for a tag-line, slogan,or one-line pitch.

Finally, the footer:

<footer>
<a href="TWITTER LINK" target="_BLANK"><i class="fa fa-2x fa-twitter"></i></a>&nbsp;
<a href="TUMBLR LINK" target="_BLANK"><i class="fa fa-2x fa-tumblr"></i></a>&nbsp;
<a href="DA LINK" target="_BLANK"><i class="fa fa-2x fa-deviantart"></i></a>&nbsp;
<a href="FB LINK" target="_BLANK"><i class="fa fa-2x fa-facebook"></i></a>&nbsp;
<p>
&copy; YOUR USERNAME HERE
</p>
<p style="font-size: x-small; font-style: italic;">Template by <a href="http://delusioninabox.com/" target="_blank">Delusion in a Box Design</a></p>
</footer>


For the social media icons, just replace the all cap links with URLs to your social media sites. Don't use one? Simply delete that line! Want to add another? Replace the "fa-whatever" with the name of the social media site ("fa-pintrest", "fa-linkedin", etc.)

Finally, replace "YOUR USERNAME HERE" with your name.

Changing Images

Aside from the image we changed in the header above, there are also background textures we can change to your own textures or images. The preset is two--one behind the header and footer, and one behind the body text. You can find them in the following places:

MAIN PAGE

#fullpage {
padding: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
background: url("http://delusioninabox.com/sj/greyzz.png") #FFEFEC;
color: #000;
font-family: 'Roboto', arial, sans-serif;
}


HEADER

header {
background: linear-gradient(
rgba(33,171,205, 0.3),
rgba(33,171,205, 0.3)
),
url("http://delusioninabox.com/sj/tex2res4.png") repeat fixed;
padding: 20px 40px;
color: #c5ecf6;
min-height: 210px;
-webkit-transition: all 1.5s;
transition: all 1.5s;
}

header:hover {
background: linear-gradient(
rgba(33,171,205, 0.3),
rgba(33,171,205, 0.3)
),
url("http://delusioninabox.com/sj/tex2res4.png") repeat fixed;
-webkit-transition: all 1.5s;
transition: all 1.5s;
}


FOOTER

footer {
clear: both;
background: linear-gradient(
rgba(33,171,205, 0.5),
rgba(33,171,205, 0.5)
),
url("http://delusioninabox.com/sj/tex2res4.png") repeat fixed;
padding: 20px 40px;
color: #c5ecf6;
text-align: center;
margin-top: 20px;
}


NAVIGATION

nav li:hover a {
background: url("http://delusioninabox.com/sj/tex2res4.png") repeat fixed;
font-weight: bold;
}


NAVIGATION, MOBILE

nav {
position: fixed;
right: 5px;
top: -8px;
font-size: x-large;
background: #21abcd;
z-index: 1;
background: linear-gradient(
rgba(33,171,205, 0.6),
rgba(33,171,205, 0.6)
),
url("http://delusioninabox.com/sj/tex2res4.png") repeat fixed;
}


nav ul li:hover a {
background: url("http://delusioninabox.com/sj/tex2res4.png") repeat fixed;
}


Of course, the easiest way to swap these with your own images is to copy the text in a text editor and do a find & replace! :)

Changing Fonts

I encourage you to use google fonts to get more unique fonts to use on your comic's site. Google hosts them for you, which is great if you can't upload files and don't know how to install custom fonts. In the Overall Layout, you'll find this line:

<link href='http://fonts.googleapis.com/css?family=Lobster|Roboto:400,300' rel='stylesheet' type='text/css'>


This is where it imports two fonts from Google: Lobster, and Roboto. When you find a font you want, simply click "add to collection", and when you're all set, hit "use" and you will see a similar line as above. Just replace the new one over the old! Then find & replace the previous fonts in the CSS.

h1, h2, h3, h4, h5, h6 {
font-family: 'Lobster', cursive;
color: #2180cd;
}


#fullpage {
padding: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
background: url("http://delusioninabox.com/sj/greyzz.png") #FFEFEC;
color: #000;
font-family: 'Roboto', arial, sans-serif;
}


I recommend using only two fonts--one for headings, and the other for the body text. Make sure to choose fonts that are contrasted and distinguishable, but also work together. :) If you don't want to use Google Fonts, remove the "<link href..." line and replace "Lobster" and "Roboto" with standard web-safe fonts.

Changing Colors

To make your life as easy as possible, I have started off the CSS on the Overall Layout page with a list of all colors used.

/* --------------- COLOR/FONT REFERENCE ------------------ */

// LIGHT SHADE : #c5ecf6
// MIDDLE SHADE : #21abcd || rgb(33,171,205)
// DARK SHADE : #2180cd
// ACCENT COLOR 2: #99efc1
// ACCENT COLOR 2, LIGHT: #20cf72
// HEADING FONT (google) : Lobster
// BODY FONT (google) : Roboto


"Light Shade" and "Accent Color 2" are used in links. "Accent Color 2, Light" is the shadow color on the header icon and avatars. "Middle Shade" is used on the majority of the site--the header, footer, posts, comments, and buttons. "Dark Shade" is used on the headings.

Because I've listed out all the colors for you, swapping your color scheme should be a piece of cake! Again, copy the Overall Layout into a text editor and just find & replace the old colors with your new ones. If you make a similar list with your colors, it'll be easy for you to keep track of the old VS new.

Now, you probably have noticed one oddball color--"Middle Shade" has an rgb value next with it with the numbers 22(red), 171(green), and 205(blue). This color is the only one that is used transparently, and to be used transparently, I use rgba [red, green, blue, alpha (opacity)]. You will find these lines like so:

background-color: rgba(33,171,205, 0.2);
border: 3px solid rgba(33,171,205, 0.8);


The alpha value is the opacity, where 1.0 is completely solid and 0.0 is completely transparent. To change these, take your "Middle Shade" color and search for it on a site like Color Hexa. When you look up your color value, scroll down to "Color Conversions". See the RGB Decimal? That has the numbers you want! So find and replace "33,171,205" with the three numbers of your new color.

And that's it!

Changing Icons

All of the icons use Font Awesome. You'll find them on the News/Welcome Page, the Comic Archive, and the Comic Page. We also used them in the Overall Layout for the social media icons. They are all in the same format, like so:

<i class="fa fa-calendar"></i>


The word in red identifies the name of the icon to be used. Font Awesome gives you a LOT to choose from! So feel free to find these lines and swap them out with whatever icon you like. They are used on avatars for guests and for the voting rating as well.

To replace the voting icons, change this section:

var pic_unselected = "fa fa-2x fa-star-o";
var pic_selected = "fa fa-2x fa-star";


with the names of the icons you wish to use.

Removing or Editing Animations

This site uses two primary animation types: transitions, and keyframes for the comic archive.

"I don't like the spinning effect on the comic archive."

Go into the Overall Layout, find the section labeled "ARCHIVE PAGE ANIMATIONS" and then delete every line that looks like this:

transform: rotate(0deg) ;
transform: rotate(360deg) ;
-moz-transform: rotate(0deg) ;
-moz-transform: rotate(360deg) ;
-webkit-transform: rotate(0deg) ;
-webkit-transform: rotate(360deg) ;
-o-transform: rotate(0deg) ;
-o-transform: rotate(360deg) ;
-ms-transform: rotate(0deg) ;
-ms-transform: rotate(360deg) ;


(The different prefixes are for cross-browser compatibility.) Once those are removed, you're done!

"The animations are too slow/too fast."

The duration every animation takes is measured in seconds.

4s = 4 seconds, 2s = 2 seconds, and so on.

To alter them, find where these values are used and change the value of the seconds. A longer time will slow it down, making it more subtle. Shorter will make them more sudden. Most of them look like this:

-webkit-transition: all 4s;
transition: all 4s;


If you only want to alter certain effects, find the correctly labeled section and change the seconds only on that particular class.

"Can it hover in at a different speed than out?"

Yes. For the transitions used on hover effects, you can change the seconds on the [className]:hover to be different from [className]. The transitions on the normal class are for when the mouse is moved off the object.

"I don't want to use any animations."

Complete remove ALL transition lines that look like this:

-webkit-transition: all 4s;
transition: all 4s;


Remove the entire "archive page animations" from the CSS, and then go to the Comic Archive page.

Remove the following in red:

<script>
function changeDisplay (chapter) {

var x = document.getElementsByClassName("archive");
var i;
for (i = 0; i < x.length; i++) {
x[i].className = "archive";
x[i].className = "archive out";
setTimeout(function(x, i){ x[i].style.display = "none"; }, 1000, x, i);
}

if(chapter=='all') {
var x = document.getElementsByClassName("archive");
var i;
for (i = 0; i < x.length; i++) {
x[i].className = "archive";
x[i].className = "archive in";
setTimeout(function(x, i){ x[i].style.display = "block"; }, 1000, x, i);
}
} else {
var n = document.getElementById(chapter).getElementsByClassName("archive");
var y;
for (y = 0; y < n.length; y++) {
n[y].className = "archive";
n[y].className = "archive in";
setTimeout(function(n, y){ n[y].style.display = "block"; }, 1000, n, y);
}
}

}
</script>


Final Tips

  • The homepage image will look best if you upload a large, higher resolution version of your comic to reduce fuzziness on larger screens. Uploading a larger image will not affect the size on the comic page; this template automatically scales the image to fit.

  • I advise against putting an image behind the header unless it's very light/dark and low contrast. If it draws too much attention, it'll distract from your comic pages and make the text on the header too hard to read.

  • If you have too many links, the menu may "break" at certain resolutions. To prevent this, go into the Overall Layout and find the following section:

    /* --------------- ADJUSTMENTS,SCREEN 800px OR LESS (mobile) ------------------ */

    @media all and (max-width: 800px) {


    Gradually increase the "800px" until it no longer breaks. If it continues to break, you will likely have to create submenus. I have not coded for these (yet). Alternatively, you can increase the height of the header and let the navigation fall on its own line. Or, of course, you can just reduce the size of the header image or remove it entirely.

  • Make it fun! ;)

Questions? Comments?

Hopefully everything is easy to follow, but if I have missed anything or if you encounter any problems, please post here and I'll be more than happy to help you. :) Thanks! Hope you like it!
Last edited by Falconer on February 21st, 2015, 10:17 pm, edited 2 times in total.
Image
Image
User avatar
Falconer
 
Posts: 1061
Joined: April 17th, 2006, 4:09 pm

Re: .: Streamlined :. responsive, animated, & easy to use

Postby Amante » January 5th, 2015, 1:35 am

Wow this is awesome. You put a lot of detailed work into it. Thanks for this.
Any SJ related questions? Feel free to look around, and if you can't find an answer, make a topic here and we'll get to you as fast as we can! :D

BlackBlade Rising revamp COMING SOON!
User avatar
Amante
 
Posts: 3019
Joined: June 5th, 2009, 6:52 pm

Re: .: Streamlined :. responsive, animated, & easy to use

Postby Mr Aids » January 5th, 2015, 2:16 am

Oh shit, this is really well done. Nice one!
kevansevans wrote:
robybang wrote:Also, it's the internet, people always argue over dumb stuff.

Nuh uh
User avatar
Mr Aids
 
Posts: 5703
Joined: April 9th, 2007, 7:02 pm
Location: STRAYA M8

Re: .: Streamlined :. responsive, animated, & easy to use

Postby Falconer » January 5th, 2015, 10:47 pm

Thanks guys!

I've installed it on my daily strips as well so you can check it out in a different color scheme, and with the twirling animation on the archive removed. :)
Image
Image
User avatar
Falconer
 
Posts: 1061
Joined: April 17th, 2006, 4:09 pm

Re: .: Streamlined :. responsive, animated, & easy to use

Postby Admin » January 7th, 2015, 5:10 am

Really awesome. I'm going to add this to the site templates once I've had a chance to play around with it.
User avatar
Admin
Site Admin
 
Posts: 1293
Joined: August 17th, 2005, 11:10 pm

Re: .: Streamlined :. responsive, animated, & easy to use

Postby eishiya » January 7th, 2015, 9:54 am

Admin wrote:Really awesome. I'm going to add this to the site templates once I've had a chance to play around with it.

When you do, I think it would be a good idea to add a comment with the URL of this thread somewhere near the top of Overall Layout, so that people editing it can more easily find this documentation.
Image
User avatar
eishiya
 
Posts: 9267
Joined: December 5th, 2009, 11:17 am

Re: .: Streamlined :. responsive, animated, & easy to use

Postby Admin » January 7th, 2015, 11:11 am

eishiya wrote:
Admin wrote:Really awesome. I'm going to add this to the site templates once I've had a chance to play around with it.

When you do, I think it would be a good idea to add a comment with the URL of this thread somewhere near the top of Overall Layout, so that people editing it can more easily find this documentation.


Yes, great idea.
User avatar
Admin
Site Admin
 
Posts: 1293
Joined: August 17th, 2005, 11:10 pm

Re: .: Streamlined :. responsive, animated, & easy to use

Postby Amante » January 7th, 2015, 4:09 pm

eishiya wrote:
Admin wrote:Really awesome. I'm going to add this to the site templates once I've had a chance to play around with it.

When you do, I think it would be a good idea to add a comment with the URL of this thread somewhere near the top of Overall Layout, so that people editing it can more easily find this documentation.


Yeah, itll also give good credit to Falconer since she has her Pantheon and stuff linked on this thread so people can support her if they want to.
Any SJ related questions? Feel free to look around, and if you can't find an answer, make a topic here and we'll get to you as fast as we can! :D

BlackBlade Rising revamp COMING SOON!
User avatar
Amante
 
Posts: 3019
Joined: June 5th, 2009, 6:52 pm

Re: .: Streamlined :. responsive, animated, & easy to use

Postby Falconer » January 7th, 2015, 6:26 pm

Thanks guys! Sounds good to me. 8-) I'm hoping I can make a few more templates like this in the future when I have time.

@Admin: If you run into any problems or anything that needs tweaking before you add it, let me know. :)
Image
Image
User avatar
Falconer
 
Posts: 1061
Joined: April 17th, 2006, 4:09 pm

Re: .: Streamlined :. responsive, animated, & easy to use

Postby Patotie » February 4th, 2015, 12:28 pm

Any idea on how can i center the header texts? (comic name and description)
User avatar
Patotie
 
Posts: 1
Joined: July 27th, 2013, 9:23 pm

Re: .: Streamlined :. responsive, animated, & easy to use

Postby THEWesMolebash » February 4th, 2015, 3:52 pm

I want to make a header background image. Any recommendations on what dimensions I should use?
User avatar
THEWesMolebash
 
Posts: 12
Joined: February 4th, 2015, 8:31 am

Re: .: Streamlined :. responsive, animated, & easy to use

Postby Falconer » February 9th, 2015, 11:27 pm

Sorry for the bit of a delayed response; I didn't get e-mailed when you guys posted for some reason.

Patotie wrote:Any idea on how can i center the header texts? (comic name and description)


On the header? Add the following blue to the CSS.

header h1 {
font-size: 3.5em;
border-bottom: solid 2px #fff;
width:90%; margin: 30px 10px 10px 5%;
padding-bottom: 25px;
text-shadow: 2px 2px 4px #000;
text-align: center;
}

header p { margin: 0; text-align: center; }


THEWesMolebash wrote:I want to make a header background image. Any recommendations on what dimensions I should use?


250px tall. The width is tougher due to different monitor sizes, but I'd say around 1700-2000px but don't put any important imagery on the right side under the assumption that's the side that will be cut off on small screens.
Image
Image
User avatar
Falconer
 
Posts: 1061
Joined: April 17th, 2006, 4:09 pm

Re: .: Streamlined :. responsive, animated, & easy to use

Postby THEWesMolebash » February 10th, 2015, 8:07 am

Thank you so much!!!!
User avatar
THEWesMolebash
 
Posts: 12
Joined: February 4th, 2015, 8:31 am

Re: .: Streamlined :. responsive, animated, & easy to use

Postby THEWesMolebash » February 12th, 2015, 4:06 pm

Here's how I've got my header coded:

Code: Select all
 header h1 {
      font-size: 3.5em;
      background: url("https://googledrive.com/host/0BxaKgi4lTCqPfmVYRTBWWHktLThJUjdldmZ4WEgwWUNrb3QzYXpFQXVHNElNMC1SWUlUQ1E/header-test.jpg");     
      width:90%; margin: 30px 10px 10px 5%;
      padding-bottom: 25px;
      text-shadow: 2px 2px 4px #000;
    }


I can see the header image, but how do I make it NOT repeat?
User avatar
THEWesMolebash
 
Posts: 12
Joined: February 4th, 2015, 8:31 am

Re: .: Streamlined :. responsive, animated, & easy to use

Postby eishiya » February 12th, 2015, 4:28 pm

THEWesMolebash wrote:Here's how I've got my header coded:

Code: Select all
 header h1 {
      font-size: 3.5em;
      background: url("https://googledrive.com/host/0BxaKgi4lTCqPfmVYRTBWWHktLThJUjdldmZ4WEgwWUNrb3QzYXpFQXVHNElNMC1SWUlUQ1E/header-test.jpg");     
      width:90%; margin: 30px 10px 10px 5%;
      padding-bottom: 25px;
      text-shadow: 2px 2px 4px #000;
    }


I can see the header image, but how do I make it NOT repeat?

Add no-repeat to the background line, like this:
Code: Select all
background: url("https://googledrive.com/host/0BxaKgi4lTCqPfmVYRTBWWHktLThJUjdldmZ4WEgwWUNrb3QzYXpFQXVHNElNMC1SWUlUQ1E/header-test.jpg") no-repeat;
Image
User avatar
eishiya
 
Posts: 9267
Joined: December 5th, 2009, 11:17 am

Next

Return to Template Submission

Who is online

Users browsing this forum: No registered users and 1 guest