A little help with Streamlined, please.

Working on a new template and need help? Come here for support.

Moderator: Help Desk Team

Re: A little help with Streamlined, please.

Postby eishiya » September 25th, 2018, 10:40 pm

I noticed a problem with the News archive: the "months" header is super-wide and stretches the page horizontally. To fix, find this CSS:
Code: Select all
.months {
   width: 100%;
   background: #3e71e3;
   color: #fff;
   margin: 0;
   padding: 0px 15%;
   list-style: none;
}

Remove "width: 100%;"

The footer thing is a consequence of the padding being added to the calculated height of the page, which is 100% in the case of short pages. Easy fix, just add this to #fullpage:
Code: Select all
box-sizing: border-box;


Another nitpick: You have tag soup in your logo/header.
<a href="{SITE_URL_FULL}">
<logo><img src="https://i.imgur.com/Rh3CGVK.png" alt="Cup of Olea" width="45%" style="margin: 0;">
</a>
<nav>
{MENU}
</nav></logo>
(Extra spaces removed for readability.)
See the problem? The logo element should be inside of the <a>, but for some reason, the closing </logo> is way outside it. Move the </logo> to right before the </a>.

The chapters at the top don't have the correct cursor when you hover because for some reason, they're not links, but rather just text. I guess it's because they have the "changeDisplay" code instead of just being links. For some reason, the changeDisplay code isn't even working on my end though. Is it working for you?
If you want an old-skool archive page without the per-chapter display, you can turn the chapter links at the top into regular links that just point to the right spot in the chapter. Here's how:
Spoiler! :
In your Archive code, find:
Code: Select all
<!-- BEGIN archive_chapters -->
<div class='archTitle' onClick="changeDisplay('ch_{archive_chapters.CHAPTER_ID}')">{archive_chapters.CHAPTER_TITLE}</div>
<!-- END archive_chapters -->

REPLACE the middle line with:
Code: Select all
<a href="#chapter_{archive_chapters.CHAPTER_ID}')"><div class='archTitle'>{archive_chapters.CHAPTER_TITLE}</div></a>

and then find:
Code: Select all
<!-- BEGIN archive_chapters -->
<div id="ch_{archive_chapters.CHAPTER_ID}">

and ADD this line after it:
Code: Select all
<a id="chapter_{archive_chapters.CHAPTER_ID}></a>

If you do these changes, you should probably also delete the "All" button.


Custom descriptions in the archive are possible, via CSS. You'll need to have something like
Code: Select all
<div class="chapterDescription"><span class="chapter{archive_chapters.CHAPTER_ID}"></span></div>

wherever you want the description to appear (somewhere within the main chapters loop, e.g. right after <div id="ch_{archive_chapters.CHAPTER_ID}">), and then for each chapter have CSS like this:
Code: Select all
.chapterDescription>chapterBLAHBLAH::after {
content: "description for chapter BLAHBLAH";
}

It's somewhat limited in what you can add, but it's something, and definitely worth playing with!

The pages in your archive are currently not arranged in rows because each page is in a different chapter. If multiple pages are in a chapter, they should end up in rows (screenshot, copied the same archive entry a few times). It's current not a table in that the number of pages on each row depends on the size of the window, which is usually better than having a fixed number. Are you sure that's something you want to change?

Are your #1s, etc the title of the page, or do you want the actual archive number?
If it's whatever's currently there, then, in your Archive code:
Code: Select all
<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>

REMOVE the line that has COMIC_TITLE in it. Note that this will make the hover effect look weird, since the size of the hover element will not match the size of the original one. Do you want the hover stuff at all? If not then:
Spoiler! :
REMOVE this code in the Archive:
Code: Select all
<div class="displayAlt">
<img src="{archive_chapters.archive_comics.THUMBNAIL_IMG_SRC}">
<h2><script type="text/javascript">
document.write('{archive_chapters.archive_comics.DATE_RELEASED}'.substr(0,11));
</script></h2>
<p>{archive_chapters.archive_comics.NUMBER_COMMENTS} comments</p>
</div>


And REMOVE this CSS in Overall Layout:
Code: Select all
.archive .displayAlt { display: none; }
.archive:hover .display { display: none; }
.archive:hover .displayAlt { display: block; }


Lastly, I noticed the archive is missing the nice transition animations that the Post a Comment (which I'm guessing are the source of the styling) have. If you want that on there, then add this CSS to .archive:
Code: Select all
transition: all 300ms;
Image
User avatar
eishiya
 
Posts: 9665
Joined: December 5th, 2009, 11:17 am

Re: A little help with Streamlined, please.

Postby MasterComic » September 26th, 2018, 7:34 pm

Okay, making progress! My archive broke somehow though. The comics in the same chapters are not lining up except for the bottom two.

I also do want some sort of hover effect similar to the ones at the bottom. I'd just like to make the portion that lights up to be much smaller around the image and number, about 5px. I'd also like to make it so the thumbnail doesn't change size or move when hovering over it, either.

Basically, after those changes, I would just add the links to the chapters manually at the top and have them set to drop the scroll bar down to the chapter itself.

Overall:
Spoiler! :
<!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 ------------------ */

.commentbuttons {
padding: 10px 10px 10px 145px;
}

logo {
margin: auto;
}

.header {
margin: auto;
}

.authorComments {
width: 100%;
}
.readerComments {
width: 90%;
margin-left: auto;
}

.readerComments .comment.reply {
margin-left: 5%;

}

.authorComments .comment.reply {
margin-right: 5%;
margin-bottom: 20px;
}


body {
padding: 0 0;
}

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

h1, h2, h3, h4, h5, h6 {
font-family: 'Rockwell', cursive;
color: #fff;
}


p { line-height: 1.5em; }

a:link, a:active, a:visited {
text-decoration: none;
color: #fff;

}

a:hover {
text-decoration: none;
color: #a9c3ff;

}



#fullpage {
position: absolute;
top: 0;
left: 0;
width: 100%;
min-height: 100%;
padding-bottom: 100px;
box-sizing: border-box;
background-image: url("https://i.imgur.com/NgoaknP.png");
color: #fff;
background-repeat: repeat;
font-family: 'Verdana', 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 #a9c3ff; }

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

header {
background-color: #3460c4;
padding: 10px 0px 20px 0px;
color: #325cbc;
min-height: auto;
margin: auto;

}





header h1 {
font-size: 3.5em;
border-bottom: solid 2px #fff;
width:90%; margin:25px 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: #a9c3ff;
}

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

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




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

footer {
clear: both;
background-color: #3460c4;
padding: 1px 1px;
color: #fff;
text-align: center;

position: absolute;
left: 0;
right: 0;
bottom: 0;
}




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

nav ul {
list-style: none;
padding: 0px;
margin: 0px;
text-align: center;

}

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

nav li {
display: inline;
}

nav li:hover a {
background: repeat fixed;
}

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







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

#imgBlock {
width: 100%;
height: 300px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;

}



.announce {
width: 60%;
margin: 0 auto;
position: relative;
padding: 10px;

border: 3px solid #fff;
color: #FFF;
text-align: center;
font-size: 1.3em;
top: 100px;

text-shadow: 2px 2px 4px #000;
}

.announce h1 { color: #FFF; padding: 5px; margin: 0; }

.announce a:hover { color: #fff; }

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

.archive {
width: 10.5%;
min-width: 140px;
padding: 5px;
margin: 5px;
float: left;
text-align: center;
color: #fff;
text-align: center;
}

.archive:hover {
background: #a9c3ff;
border: 3px solid #a9c3ff;
color: #FFF;

}


.archive .display { display: block; }


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

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

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

.archive p { margin: 0px; }

.archTitle {
padding: 15px;
float: left;
color: #fff;
border: 3px solid #325cbc;
background-color: #3867d2;
margin: 15px;

}

.archTitle:hover {
background: #a9c3ff;

}




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

.button {
width: 80%;
margin-right: -6px;
position: relative;
padding: 10px 10px 10px 10px;
border: 3px solid #325cbc;
background-color: #3867d2;
color: #325cbc;
text-align: center;
font-size: 1.5em;

}

.button:hover {
border: 3px solid #a9c3ff;


}

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




/* --------------- 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: 15px;

border: 3px solid #325cbc;

}

.comment.reply {
margin: 0 0 20px 5%;
width: 95%;
}



.commentHead {
background-color: #3867d2;
padding: 7px 7px 7px 7px;
margin-bottom: 7px;

}

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

.commentHead h3 { margin: 0; }

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

.commentPost { padding: 10px; }

.commentPost h2 { padding: 0px; margin: 0px; }

.authoravatar {
border-radius: 0%;
border: 3px solid gold;
margin: -6px 20px 0px 0px;

}

.useravatar {
border-radius: 0%;
border: 3px solid #325cbc;
margin: -6px 20px 0px 0px;

}

.comment:hover .avatar {
border-radius: 0%;

}

.guest {
height: 125px;
width: 125px;
background: #fff;
color: #a9c3ff;
}

.guest i {
position: relative;
left: 24%;
top: 18%;
font-size: 5em;

}



/* --------------- 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: #fff;
z-index: 1;
background: linear-gradient(
rgba(33,171,205, 0.6),
rgba(33,171,205, 0.6)
),
url("http://www.smackjeeves.com/templates/streamlined/images/tex2res4.png") repeat fixed;
}

nav:hover { border: 2px solid #fff;}

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://www.smackjeeves.com/templates/streamlined/images/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;

}

.avatar {
width: 50px;
height: 50px;

}



}




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

.post {
margin: 0 auto;
position: relative;
padding: 10px 30px;
width: 95%;
margin-bottom: 15px;
border: 3px solid #325cbc;


}



.post-body { clear: both; }

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

.post-footer {
padding: 5px 20px;

}

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

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

.months li {
display: inline-block;
padding: 15px 15px;
margin: 0;

}

.months li:hover {
background: #fff .5s;
transition: all .5s;
}

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



</style>


</head>


<body>

<div id="fullpage">

<header>

<center>

<a href="{SITE_URL_FULL}"><logo>

<img src="https://i.imgur.com/Rh3CGVK.png" alt="Cup of Olea" width="45%" style="margin: 0;">


</logo>
</a>



<nav>

{MENU}

</nav>

</center>

</header>


<div id="content">

{CONTENT}

</div>

<footer>

<p style="font-size: x-small; font-style: italic;">Hosted by <a href="smackjeeves.com">SmackJeeves</a> &#8226; Template by <a href="http://delusioninabox.com/" target="_blank">Delusion in a Box Design</a></p>
</footer>

</div>

</body>
</html>


Archive:
Spoiler! :
<div class="container">

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

<!-- BEGIN switch_comic_has_chapters -->


<!-- BEGIN archive_chapters -->
<a href="#chapter_{archive_chapters.CHAPTER_ID}')"><div class='archTitle'>{archive_chapters.CHAPTER_TITLE}</div></a>
<!-- END archive_chapters -->

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

<!-- BEGIN archive_chapters -->
<div id="ch_{archive_chapters.CHAPTER_ID}">
<a id="chapter_{archive_chapters.CHAPTER_ID}></a>

<!-- 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}">
<h3># {archive_chapters.archive_comics.COMIC_NUMBER}</h3>
</div>



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

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

</div>
<!-- END archive_chapters -->

</div>

<script>

window.onload = function() {

var maxH = -1,
x = document.getElementsByClassName("archive");

for (var i = 0; i < x.length; i++) {

if (x[i].clientHeight > maxH) maxH = x[i].clientHeight;

}

for (var i = 0; i < x.length; i++) {

x[i].style.minHeight = (maxH - 24) + 'px';

}

};

function changeDisplay(chapter) {

var x = document.getElementsByClassName("archive");
var i;
for (i = 0; i < x.length; i++) {
x[i].className = "archive";

{
x[i].style.display = "none";

}

if (chapter == 'all') {
var x = document.getElementsByClassName("archive");
var i;
for (i = 0; i < x.length; i++) {
x[i].className = "archive";

{
x[i].style.display = "block";

}
} else {
var n = document.getElementById(chapter).getElementsByClassName("archive");
var y;
for (y = 0; y < n.length; y++) {
n[y].className = "archive";

{
n[y].style.display = "block";

}
}

}

</script>
Image
Cup of Olea is an interactive webcomic. YOU decide what Cliff does!
To play, simply go to the latest page and submit a command! It's easy~
User avatar
MasterComic
 
Posts: 690
Joined: May 16th, 2009, 5:25 pm

Re: A little help with Streamlined, please.

Postby eishiya » September 26th, 2018, 8:51 pm

I'm not feeling great today and can't devote the energy to figure out what broke, sorry >_< Do you know what changes you made that might've broken the archive?

The thumbnails changing/moving are just the result of your hover thing having differently sizing (different padding, etc) to the non-hover one, so once you get your styling all sorted, that problem should resolve itself.
Image
User avatar
eishiya
 
Posts: 9665
Joined: December 5th, 2009, 11:17 am

Re: A little help with Streamlined, please.

Postby MasterComic » September 27th, 2018, 10:46 am

Of course, please rest and feel better!
Image
Cup of Olea is an interactive webcomic. YOU decide what Cliff does!
To play, simply go to the latest page and submit a command! It's easy~
User avatar
MasterComic
 
Posts: 690
Joined: May 16th, 2009, 5:25 pm

Re: A little help with Streamlined, please.

Postby MasterComic » September 29th, 2018, 10:04 pm

I hope you're feeling better! If not, please feel free to ignore this post, Eishiya.

I am almost finished with my site! Only a few more things to fix and then it's complete. http://lkadhf.smackjeeves.com/archive/

1. I decided I wanted to change up my archive because I liked the dropdown style that another template had. I got it to a good place, but I just can't figure out how to get the comic thumbnails to stretch across the whole screen. They seem to stop 60% of the way across the screen. Along with this, I've also tried getting rid of the break between the thumbnail and comic #, and the break between the comic # and title. Finally, I'd like to center the comic # and title with the thumbnail. (Inspect didn't help with this one!)

2. I tried using a previous post where you helped me put chapter descriptions in the archive under the chapter titles.
eishiya wrote:As for the chapter summaries, there's no easy way to do it, since you can't interrupt the code while it's generating chapters. What you can do is use each chapter's ID to generate an empty <div> with a unique ID, and then use either JavaScript or CSS's :before or :after selectors to add content (the summaries).
In your archive code, find:
Code: Select all
<tr><td colspan="4" class="chapter_title"><a name="ch_{archive_chapters.CHAPTER_ID}"><h2>{archive_chapters.CHAPTER_TITLE}</h2></a></td></tr>

Right after the </h2></a> add:
<div id="chapter{archive_chapters.CHAPTER_ID}"></div>
This will add a uniquely identified space for you to add your summaries.
Then, add this CSS for each chapter:
Code: Select all
#chapterCHAPTERIDHERE:before {
content: "Your summary goes here."
}

You should probably have these archive-related things in a <style> tag on the archive page itself, since it's a lot of text that would unnecessarily increase the loading times of other pages.
You will need to look at final generated the code of your archive page to get those chapter IDs to replace "CHAPTERIDHERE" with.
Screenshot of results.
You can add additional styling to this if you want, similar to how you would any other element.

I applied this code, but I may have just put some things in the wrong place. I'm trying to place these descriptions on the button you use to drop down the archive, right beneath the chapter title. I'm not seeing them at all, however. I'm not sure why.

3. Finally, I got my extras page the way I want it. http://lkadhf.smackjeeves.com/extras/ For some reason, my css ignores the Youtube embed code and thinks there is nothing there, because the content continues on behind the footer. In my code, there is still some content that gets cut off from the bottom as well.

Overall Code
Spoiler! :
<!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'>

<link href="https://fonts.googleapis.com/css?family=Love+Ya+Like+A+Sister|Raleway:300" rel="stylesheet">
<script src="https://use.fontawesome.com/9f7c3c6598.js"></script>
<link rel="alternate" type="application/rss+xml" title="{SITE_NAME} RSS" href="{SITE_URL_FULL}rss/">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<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 ------------------ */

.chapterdescription {
font-size: x-small;
padding-left: 30px;
padding-right: 12px;
padding-bottom: 12px;
}


.commentbuttons {
padding: 10px 10px 10px 145px;
}

logo {
margin: auto;
}

.header {
margin: auto;
}

.authorComments {
width: 100%;
}
.readerComments {
width: 90%;
margin-left: auto;
}

.readerComments .comment.reply {
margin-left: 5%;

}

.authorComments .comment.reply {
margin-right: 5%;
margin-bottom: 20px;
}


body {
padding: 0 0;
}

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

h1, h2, h3, h4, h5, h6 {
font-family: 'Rockwell', cursive;
color: #fff;
}


p { line-height: 1.5em; }

a:link, a:active, a:visited {
text-decoration: bold;
color: #fff;

}

a:hover {
text-decoration: none;
color: #a9c3ff;

}



#fullpage {
position: absolute;
top: 0;
left: 0;
width: 100%;
min-height: 100%;
padding-bottom: 100px;
box-sizing: border-box;
background-image: url("https://i.imgur.com/NgoaknP.png");
color: #fff;
background-repeat: repeat;
font-family: 'Verdana', 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 #a9c3ff; }

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

header {
background-color: #3460c4;
padding: 10px 0px 20px 0px;
color: #325cbc;
min-height: auto;
margin: auto;

}





header h1 {
font-size: 3.5em;
border-bottom: solid 2px #fff;
width:90%; margin:25px 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: #a9c3ff;
}

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

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




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

footer {
clear: both;
background-color: #3460c4;
padding: 1px 1px;
color: #fff;
text-align: center;

position: absolute;
left: 0;
right: 0;
bottom: 0;
}




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

nav ul {
list-style: none;
padding: 0px;
margin: 0px;
text-align: center;

}

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

nav li {
display: inline;
}

nav li:hover a {
background: repeat fixed;
}

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







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

#imgBlock {
width: 100%;
height: 300px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;

}



.announce {
width: 60%;
margin: 0 auto;
position: relative;
padding: 10px;

border: 3px solid #fff;
color: #FFF;
text-align: center;
font-size: 1.3em;
top: 100px;

text-shadow: 2px 2px 4px #000;
}

.announce h1 { color: #FFF; padding: 5px; margin: 0; }

.announce a:hover { color: #fff; }

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

#archive_list {
position: relative;
}

#archive_list .dd {
position: absolute;
width: 50%;
top: 0;
right: 0;
}

#archive_list .months,
#archive_list .dropdown-toggle.primary {
display: block;
background: #3867d2;
list-style: none;
padding: 0px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

#archive_list .months {
position: absolute;
top: 100%;
width: 100%;
z-index: 4;
margin: 0;
}

#archive_list .months li ul.month-dropdown {
list-style: none;
padding: 0px;
}

#archive_list .months .post-item {
margin: 0 20px 10px;
}

#archive_list .months .post-item.selected {
background: #3867d2;
}

#archive_list .months li a,
#archive_list .dropdown-toggle.primary {
display: block;
padding: 10px 20px;
}

#archive_list .months ul.month-dropdown li a:before {
content: "\f178";
font-family: FontAwesome;
display: inline-block;
margin-left: -0.6em;
width: 1.3em;
}

#archive_list .dropdown-toggle.primary:before {
content: "\f073";
font-family: FontAwesome;
display: inline-block;
margin: 0 0.25em 0 -0.6em;
width: 1.3em;
}

#archive_list .months li a:before {
content: "\f271";
font-family: FontAwesome;
display: inline-block;
margin: 0 0.25em 0 -0.6em;
width: 1.3em;
color: #3867d2;
}

#archive_list .months li.selected,
#archive_list .months li.selected a {
background: #fff;
}

#archive_list .months li .dropdown-toggle {
width: 97%;
display: inline-block;
}

#archive_list .months,
#archive_list [id^=pridrop] {
display: none;
}

#archive_list [id^=pridrop]:checked+ul.months {
display: block;
}


.chapter-title {
background: #325cbc;
padding: 10px 60px;
font-size: 1.5em;
}

.chapter-title.selected {
background: #3867d2;
color: #FFF;
}


.comic-archive .chapter-title.selected + script + .ch-list-full > .row:first-child {
border-top: 0px;
}

.comic-archive .row div img {
display: block;
margin-bottom: 0px;
}

.comic-archive .row div {
padding: 0px 40px;
display: table-cell;
vertical-align: top;
}

.comic-archive .row div.empty {
padding: 0;
}

.arch-title,
.arch-date {
display: block;
width: 100%;
}

.comic-archive .chapter-title + script + .ch-list-full,
.ch-toggle {
display: none;
}

.comic-archive .chapter-title.selected+script+.ch-list-full {
display: block;
}

.comic-archive .chapter-title label:before {
content: "\f0da";
font-family: FontAwesome;
display: inline-block;
margin-left: -0.6em;
width: 1em;
}

.comic-archive .chapter-title.selected label:before {
content: "\f0d7";
}

.chapter-title label {
width: 100%;
display: block;
}

.ch-list-full .row:first-child {
padding-top: 30px;
}

.ch-list-full .row:last-child {
padding-bottom: 30px;
}




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

.button {
width: 80%;
margin-right: -6px;
position: relative;
padding: 10px 10px 10px 10px;
border: 3px solid #325cbc;
background-color: #3867d2;
color: #325cbc;
text-align: center;
font-size: 1.5em;

}

.button:hover {
border: 3px solid #a9c3ff;


}

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




/* --------------- 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: 15px;

border: 3px solid #325cbc;

}

.comment.reply {
margin: 0 0 20px 5%;
width: 95%;
}



.commentHead {
background-color: #3867d2;
padding: 7px 7px 7px 7px;
margin-bottom: 7px;

}

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

.commentHead h3 { margin: 0; }

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

.commentPost { padding: 10px; }

.commentPost h2 { padding: 0px; margin: 0px; }

.authoravatar {
border-radius: 0%;
border: 3px solid gold;
margin: -6px 20px 0px 0px;

}

.useravatar {
border-radius: 0%;
border: 3px solid #fff;
margin: -6px 20px 0px 0px;

}

.comment:hover .avatar {
border-radius: 0%;

}

.guest {
height: 125px;
width: 125px;
background: #fff;
color: #a9c3ff;
}

.guest i {
position: relative;
left: 24%;
top: 18%;
font-size: 5em;

}



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

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






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

.post {
margin: 0 auto;
position: relative;
padding: 10px 30px;
width: 95%;
margin-bottom: 15px;
border: 3px solid #325cbc;


}



.post-body { clear: both; }

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

.post-footer {
padding: 5px 20px;

}

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

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

.months li {
display: inline-block;
padding: 15px 15px;
margin: 0;

}

.months li:hover {
background: #fff .5s;
transition: all .5s;
}

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



</style>


</head>


<body>

<div id="fullpage">

<header>

<center>

<a href="{SITE_URL_FULL}"><logo>

<img src="https://i.imgur.com/Rh3CGVK.png" alt="Cup of Olea" width="45%" style="margin: 0;">


</logo>
</a>



<nav>

{MENU}

</nav>

</center>

</header>


<div id="content">

{CONTENT}

</div>


<footer>

<p style="font-size: x-small; font-style: italic;">Hosted by <a href="smackjeeves.com">SmackJeeves</a> &#8226; Template by <a href="http://delusioninabox.com/" target="_blank">Delusion in a Box Design</a></p>
</footer>

</div>

<span title="Back to Top">
<div style="position:fixed; bottom:70px; right:40px; z-index: 999";">
<a href="#top"><img src="http://i.imgur.com/QPY8hrN.png"/></a>
</span>


</body>
</html>


Archive Code
Spoiler! :
<div class="container">

<style type="text/css">

/*Chapter 1*/
#chapter134071:before {
content: "Seven years ago, in the land of Olea, the King decided to hide the Cup of Olea, an artifact that could give immense power at the cost of one's sanity. The King's most trusted knight, Geoffrey, staged a coup and forcibly took the Cup away from the King. Today, we meet a new hero named Cliff Gradel, an amnesiac controlled by YOU. After meeting the local Blacksmith, Cliff gains his own sword, and a porcupine companion named Zazoom. During a trip to the Arcade Graveyard, Cliff encounters a zombie! Cliff quickly slays the zombie, which attracts the King's attention. A Taxi Horse named Taxi is called to transport Cliff to the Royal Castle, where his destiny awaits.";
}

</style>

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

<script>
var colCount = 0,
numCols = 4;

</script>

<div class="comic-archive">

<!-- BEGIN archive_chapters -->

<!-- BEGIN switch_comic_has_chapters -->

<div class="chapter-title">
<label class="dropdown-chapter" for="ch_{archive_chapters.CHAPTER_ID}">{archive_chapters.CHAPTER_TITLE}</label>
<input id="ch_{archive_chapters.CHAPTER_ID}" class="ch-toggle" type="checkbox">



</div>

<script>
colCount = 0;
</script>

<!-- END switch_comic_has_chapters -->

<div class="ch-list-full">
<div class="row">

<!-- BEGIN archive_comics -->

<script>
colCount++;
if (colCount > numCols) {
colCount = 1;
document.write('</div><div class="row">');
}
</script>

<script>
document.write('<div class="col-' + (12 / numCols) + '">');
</script>

<div id="chapter{archive_chapters.CHAPTER_ID}"></div>

<a href="{archive_chapters.archive_comics.COMIC_URL}"><img src="{archive_chapters.archive_comics.THUMBNAIL_IMG_SRC}" />
<span class="arch-title"><h3># {archive_chapters.archive_comics.COMIC_NUMBER}</h3>{archive_chapters.archive_comics.COMIC_TITLE}
</span>

</a>
</div>

<!-- END archive_comics -->

<script>
for (1; colCount < numCols; colCount++) {
document.write('<div class="col-' + (12 / numCols) + ' empty"></div>');
}
</script>

</div>
</div>

<!-- END archive_chapters -->

</div>

<script>
$(".ch-toggle").on("change", function() {
if ($(this).is(":checked")) {
$(this).parent().addClass('selected');
} else {
$(this).parent().removeClass('selected');
}
});
</script>

</div>


Extras Custom Page
Spoiler! :
<div class="container">

<h1><i class="fa"></i> Extras</h1>

<p>There were a few fun features that didn't really fit under the other sections of this website, so here they are! Things like movie trailers, maps, and other cool things can be found below.</p>

<br>

<p><iframe width="560" height="315" src="//www.youtube.com/embed/m6hM8HaUqN4?rel=0" frameborder="0" allowfullscreen></iframe></p>

<p>*SPOILERS*<br>
<iframe width="560" height="315" src="//www.youtube.com/embed/p39xOcSnCzk" frameborder="0" allowfullscreen></iframe>
</div></p>

<p>*SPOILERS*<br>
<iframe width="560" height="315" src="//www.youtube.com/embed/tsGQwUl4QdM" frameborder="0" allowfullscreen></iframe>
</div></p>

<p>*SPOILERS*<br>
<iframe width="560" height="315" src="//www.youtube.com/embed/bo3yYsLmRbA" frameborder="0" allowfullscreen></iframe>
</div></p>

<p>*SPOILERS*<br>
<iframe width="560" height="315" src="//www.youtube.com/embed/QT3KkXa5hUo" frameborder="0" allowfullscreen></iframe>
</div></p>

<p>*SPOILERS*<br>
<iframe width="560" height="315" src="//www.youtube.com/embed/-rGv94b1YtQ" frameborder="0" allowfullscreen></iframe>
</div></p>

<p>Map of the Continent of Ellum<br>
<img src="http://i.imgur.com/HUYIcq3.png" onmouseover="this.src='http://i.imgur.com/VVy10Se.png'" onmouseout="this.src='http://i.imgur.com/HUYIcq3.png'" /></a></p>

</div>


Also, thank you for all that you do, Eishiya!
Image
Cup of Olea is an interactive webcomic. YOU decide what Cliff does!
To play, simply go to the latest page and submit a command! It's easy~
User avatar
MasterComic
 
Posts: 690
Joined: May 16th, 2009, 5:25 pm

Re: A little help with Streamlined, please.

Postby eishiya » September 29th, 2018, 11:29 pm

The reason the thumbnails are limited to 4 per row is because they're generated in JavaScript to be split into rows of 4 thumbnails each. You'll need to either modify that code to generate some higher number of thumbnails per row, or remove the JavaScript entirely and generate all the thumbnails normally, and rely on CSS to keep them organized (display: inline-block works wonders in these situations!)

The chapter descriptions aren't working because the CSS doesn't point to any existing element. You've added the CSS, but not the corresponding HTML. I provided the relevant CSS and HTML earlier in this thread (ctrl+F for chapter{archive_chapters.CHAPTER_ID}). Also, you need two colons for pseudo-elements like "before". That was a mistake in the earlier post, but my post in this thread should have it right.

Your Extras page is full of tag soup, and that's probably messing things up xP There are a tonne of "</div>"s that don't have corresponding <div>, and possibly other issues. It's possible there are other problems making the footer not cooperate, but it's hard to tell with tag soup.
Image
User avatar
eishiya
 
Posts: 9665
Joined: December 5th, 2009, 11:17 am

Re: A little help with Streamlined, please.

Postby MasterComic » September 30th, 2018, 2:33 am

Yeah, you're right on all accounts. I don't feel much like messing with javascript, so I went back to the old archive. The extras page looks great now too!

http://lkadhf.smackjeeves.com/

I'm going to apply this template to my actual comic tomorrow! If you PM me your email address, I'd like to send you something for all the help you've given me and for being so patient with me. :)
Image
Cup of Olea is an interactive webcomic. YOU decide what Cliff does!
To play, simply go to the latest page and submit a command! It's easy~
User avatar
MasterComic
 
Posts: 690
Joined: May 16th, 2009, 5:25 pm

Previous

Return to Template Development & Support

Who is online

Users browsing this forum: No registered users and 3 guests