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

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

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

Postby eishiya » October 24th, 2016, 7:28 pm

Foxblaze wrote:I've been trying to make it so the background image doesn't repeat or more specifically, make it fit the whole screen, but I can't figure out how to do it. I tried using html guides, but it seems you're using a different kind making it difficult to fix that. The closest I got was having it with a gap on the right side, but I have no idea how to stretch the image to fill that since resizing the original image doesn't work

By background, do you mean the header image?
Add
Code: Select all
background-size: cover;

to your CSS for the .header class (near where you set the background image).

If you mean you want that image to go outside of the header, then it needs to be a background on the page rather than the header, and you will need to remove the other backgrounds.
Image
User avatar
eishiya
 
Posts: 9205
Joined: December 5th, 2009, 11:17 am

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

Postby Foxblaze » October 24th, 2016, 10:56 pm

eishiya wrote:
Foxblaze wrote:I've been trying to make it so the background image doesn't repeat or more specifically, make it fit the whole screen, but I can't figure out how to do it. I tried using html guides, but it seems you're using a different kind making it difficult to fix that. The closest I got was having it with a gap on the right side, but I have no idea how to stretch the image to fill that since resizing the original image doesn't work

By background, do you mean the header image?
Add
Code: Select all
background-size: cover;

to your CSS for the .header class (near where you set the background image).

If you mean you want that image to go outside of the header, then it needs to be a background on the page rather than the header, and you will need to remove the other backgrounds.


I don't know, that part behind the icon where it's like a dark greenish color

Am I just supposed to insert the background-size: cover; above where I put the image? I tried that but it didn't work
User avatar
Foxblaze
 
Posts: 12
Joined: November 16th, 2010, 12:01 am

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

Postby eishiya » October 25th, 2016, 8:29 am

Foxblaze wrote:
eishiya wrote:
Foxblaze wrote:I've been trying to make it so the background image doesn't repeat or more specifically, make it fit the whole screen, but I can't figure out how to do it. I tried using html guides, but it seems you're using a different kind making it difficult to fix that. The closest I got was having it with a gap on the right side, but I have no idea how to stretch the image to fill that since resizing the original image doesn't work

By background, do you mean the header image?
Add
Code: Select all
background-size: cover;

to your CSS for the .header class (near where you set the background image).

If you mean you want that image to go outside of the header, then it needs to be a background on the page rather than the header, and you will need to remove the other backgrounds.


I don't know, that part behind the icon where it's like a dark greenish color

Am I just supposed to insert the background-size: cover; above where I put the image? I tried that but it didn't work

Below. Otherwise the background rule overrides it. I am sorry for not being more specific before, I forgot that the template uses the "background" shorthand which sets all the properties at once.

If that doesn't work, please make a new thread in Template Development & Support and I will continue to try to help you there. These threads in Template Submission are mainly for feedback, not customization support, so I don't want to go off-topic.


To template designers who might read this:
Do not use shorthand properties in your CSS if you can avoid it! They make it much harder for less-experienced people (i.e. most people who'll be using and customizing your template) to figure out how to customize different aspects of your template. Set one property at a time. It makes for wordier CSS, but also for a much better editing experience.
Image
User avatar
eishiya
 
Posts: 9205
Joined: December 5th, 2009, 11:17 am

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

Postby Foxblaze » October 25th, 2016, 7:45 pm

Ah okay, thank you! It works now~

Sorry about that, I'll try to remember that for the future
User avatar
Foxblaze
 
Posts: 12
Joined: November 16th, 2010, 12:01 am

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

Postby Tehpikachu » January 18th, 2017, 3:26 am

Hi, I hope you still come help people who post here, it has been several months. I don't know a lot about the finer details of coding, and I have a minor problem I'm not sure how to change.

The layout seems to treat images oddly, it doesn't let them sit site-by-side and stacks them no matter what I do. The blank space on either side of them is also a highlighted link (because they're just thumbnails that lead to the full image), which is also a little annoying.

Image

I'd like to find a way to put them side-by-side like they are in my plain html:

Image


Thanks <3
Image
User avatar
Tehpikachu
 
Posts: 13
Joined: October 3rd, 2012, 10:22 pm

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

Postby eishiya » January 18th, 2017, 9:45 am

This is because all images in Streamlined have display: block, rather than display: inline as is the norm. It's designed to make the images the templates expect behave nicely, but it doesn't account for things like a fan art page.

Three fixes, you only need to choose one:

A. Get rid of the unusual img display property.
As far as I can tell, it only affects the archive page, but I don't know, it could have other effects elsewhere, such as on mobile. For that reason, I don't recommend this option unless you're willing to test your template so make sure you've not broken anything. If you want an easy solution that just works but requires a bit more work, see below.
To get rid of the img display property, add this to your CSS:
Code: Select all
img {
display: inline;
}


B. If you expect only a few images, a per-image solution:
Put class="fanart" in the img tag for each thumbnail, e.g.:
Code: Select all
<img src="http://i.imgur.com/yMT9brM.png" class="fanart">

And add this to your CSS:
Code: Select all
.fanart {
display: inline;
}


C. If you anticipate lots of images, a per-page solution:
Put a DIV with class "fanart" around the contents of your fan art page:
Code: Select all
<div class="fanart">
PAGE CONTENT HERE
</div>

And add this to your CSS:
Code: Select all
.fanart img {
display: inline;
}
Image
User avatar
eishiya
 
Posts: 9205
Joined: December 5th, 2009, 11:17 am

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

Postby Tehpikachu » January 18th, 2017, 6:12 pm

Thank you, that was very helpful! <3
Image
User avatar
Tehpikachu
 
Posts: 13
Joined: October 3rd, 2012, 10:22 pm

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

Postby key » April 11th, 2017, 7:13 pm

Howdy!

First off, awesome template!

But...

Maybe someone can help or clarify what I'm dealing with. When I go in to edit the code, the code that's being used under the Webcomic Management -> Appearance -> Overall Design section is absolutely not that is supplied here at the beginning of the thread.
I'm mostly inept at coding, but I'm great at following instructions. The code supplied in the thread I can navigate fine, but the code supplied from the SJ Appearance page is baffling to me because it seems like there is no information there.

The code from the SJ Overall Layout page:

Code: Select all
<!DOCTYPE html>

<!-- Streamlined Template by Falconer. Template information thread: http://www.smackjeeves.com/forum/viewtopic.php?f=16&t=16414 -->

<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">
   {SOCIAL_META_TAGS}
   
   <meta name="viewport" content="width=device-width, maximum-scale=1" />

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

</head>


<body>

   <div id="fullpage">
      <header>
         <div class="headIcon left"></div>
         <a href="{SITE_URL_FULL}">
            <h1>{SITE_NAME}</h1>
         </a>
         <p>{SITE_DESCRIPTION}</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>


I don't see any of the information to edit.

Code from the thread:
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>



Tried copying and pasting... that broke everything.

Suggestions?
User avatar
key
 
Posts: 2
Joined: September 2nd, 2007, 9:27 am

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

Postby eishiya » April 11th, 2017, 7:21 pm

The code SJ is using puts the CSS in a separate file for faster loading. You can still make all those changes, but instead of editing the CSS, you'll need to override the CSS. To do so, find this line in the Overall Layout:
Code: Select all
</head>

Right above it, add a style element:
Code: Select all
<style>

</style>

Inside of that, put your new CSS. You only need to put in the lines that specify what the change affects, and the changed line. So instead of
Code: Select all
.someClass {
original: rule;
original: rule;
changed: rule;
}

you'd just need to put
Code: Select all
.someClass {
changed: rule;
}
Image
User avatar
eishiya
 
Posts: 9205
Joined: December 5th, 2009, 11:17 am

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

Postby partiallystars » April 28th, 2017, 11:43 pm

Hey. Need help. So how do you change the "This is a responsive SmackJeeves template that's easy to use, easy to edit, and optimized for all devices!"?
User avatar
partiallystars
 
Posts: 2
Joined: June 9th, 2016, 4:47 pm

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

Postby eishiya » April 29th, 2017, 6:51 am

partiallystars wrote:Hey. Need help. So how do you change the "This is a responsive SmackJeeves template that's easy to use, easy to edit, and optimized for all devices!"?

The opening post describes where to change that xP It's in Overall Layout, near the top. Search for the text "responsive" in the template and you should find it right away.
Image
User avatar
eishiya
 
Posts: 9205
Joined: December 5th, 2009, 11:17 am

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

Postby partiallystars » April 29th, 2017, 4:55 pm

eishiya wrote:
partiallystars wrote:Hey. Need help. So how do you change the "This is a responsive SmackJeeves template that's easy to use, easy to edit, and optimized for all devices!"?

The opening post describes where to change that xP It's in Overall Layout, near the top. Search for the text "responsive" in the template and you should find it right away.

Oooh, it's towards the bottom so I missed it. Thank you so much, I love this template
User avatar
partiallystars
 
Posts: 2
Joined: June 9th, 2016, 4:47 pm

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

Postby key » May 9th, 2017, 10:23 am

Thanks eishiya!

I'm still going to have to fiddle quite a bit to understand the mechanics, but that definitely helps me understand what needs to happen in the coding.

You're awesome.
User avatar
key
 
Posts: 2
Joined: September 2nd, 2007, 9:27 am

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

Postby Nijuice » May 17th, 2017, 12:37 am

Thank you, Falconer! This template has definitely made my site look better!
Last edited by eishiya on May 17th, 2017, 7:42 am, edited 1 time in total.
Reason: Please don't post unsolicited links to your comic. You can use the Self-Promotion forum and your signature for that.
User avatar
Nijuice
 
Posts: 1
Joined: June 23rd, 2012, 6:23 pm

Previous

Return to Template Submission

Who is online

Users browsing this forum: No registered users and 1 guest