A little help with Streamlined, please.

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

Moderator: Help Desk Team

A little help with Streamlined, please.

Postby MasterComic » September 21st, 2018, 4:45 pm

Hey all, I'm trying to make some small changes to the comic page of Streamlined currently. Here is my site so far:

http://lkadhf.smackjeeves.com/comics/1903595/shhysrdy/

I'd like to shrink all the comments horizontally by 80%, and shift the Author comments to the left while shifting the user comments to the right.

There are a couple replies on the page as well. I'd love to make it so user replies have a break below them, the same as the reply to the author comment. I'd also like to shrink these replies further so that they are indented and line up to the left side for author replies and the right side for user replies. I hope that makes sense.

I know some basic html, but this one has me stumped. Any help I can get would be greatly appreciated!

Here is my comic html so far:

Spoiler! :
<div class="container">

<br>
<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 style="margin-top: 15px;">
<a class="button" 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>
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 21st, 2018, 5:03 pm

Just to clarify, you want to have two columns of replies, one column for author comments, the other column for reader comments, like this? https://i.imgur.com/g7AvgTa.png (large image)

To achieve that, you will need to wrap your author comments (including the "Author's Comments" header) in a div, and do the same with the reader comments, and apply CSS to reduce the widths and move them to the appropriate sides. Rough code:
Code: Select all
<div class="left" style="box-sizing:border-box; width: 50%; padding-right: 20px">
Author comment code in here
</div>
<div class="right" style="box-sizing:border-box; width: 50%; padding-left: 20px">
Reader comment code in here
</div>

Feel free to adjust the width and padding to taste, but make sure the combined widths do not exceed 100%.
The "left" and "right" classes exist in the template's CSS already, they position elements to float left and right, respectively.

You will also need to put the CSS "clear: both" on the "post a comment" button below so that it's correctly positioned below the floating comment containers, e.g.
Code: Select all
<div style="margin-top: 15px; clear: both;">
   (post a comment button code)
</div>

(the margin-top: 15px code should already be in there)

If this is what you want, then try implementing this, and then we can address your other desired changes once this adjusted structure is in place :D
Image
User avatar
eishiya
 
Posts: 9736
Joined: December 5th, 2009, 11:17 am

Re: A little help with Streamlined, please.

Postby MasterComic » September 21st, 2018, 5:11 pm

I definitely should have explained better. I'm sorry you went to the trouble of making that!

The author comments on top and the user comments at the bottom is good. I just want to make them 80% less wide, so I can indent the author comments to line up with the left side of the screen and indent the user comments to line up with the right side of the screen. Like this.

Author Comments:
Hey, this is fun.

--Reply:
--Yes it is!

-----User Comments:
-----I disagree. Not fun.

-------Reply:
-------You're right.
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 21st, 2018, 5:26 pm

Oh! Alrighty. You'll still need to put containers around them in order to differentiate author comments from reader comments in the CSS, but the classes and code will be a little different:

Code: Select all
<div class="authorComments">
Author comment code in here
</div>
<div class="readerComments">
Reader comment code in here
</div>


CSS to reduce the widths (are you sure you want to reduce the width by 80%? 20% width is very narrow!):
Code: Select all
.authorComments {
   width: 20%;
}
.readerComments {
   width: 20%;
   margin-left: auto;
}


CSS to change the reply spacing and alignment:
Code: Select all
.readerComments .comment.reply {
   margin-left: 5%;
   margin-bottom: 20px;
}
.authorComments .comment.reply {
   margin-right: 5%;
   margin-bottom: 20px;
}


I'm not sure I understood how you want the comments aligned, but hopefully this gets you most of the way there. You can use your browser's inspect tools (right-click in the vicinity of the comments, click "Inspect Element" or "Inspect") to look at the CSS affecting that element, and play around with other possible values.
Image
User avatar
eishiya
 
Posts: 9736
Joined: December 5th, 2009, 11:17 am

Re: A little help with Streamlined, please.

Postby MasterComic » September 21st, 2018, 5:47 pm

This is great! Thank you!

http://lkadhf.smackjeeves.com/comics/1903595/shhysrdy/

I meant reduce by 20% earlier :lol: for a total of 80% width. I ended up going with 90% as 80% seemed too small. I will definitely come back if I need more help.

Is there anything I can do for you, 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 21st, 2018, 5:54 pm

Glad you've got it where you like it! You don't have to do anything for me, but thank you!

By the way, if you want, you can reduce the vertical space between replies and the comments they're replying to, by giving .comment.reply a negative top margin, e.g.
Code: Select all
.comment.reply {
   margin-top: -10px;
}
Image
User avatar
eishiya
 
Posts: 9736
Joined: December 5th, 2009, 11:17 am

Re: A little help with Streamlined, please.

Postby MasterComic » September 22nd, 2018, 6:54 pm

Okay, I have hit a wall. I've tried quite a few things, but I can't get my header logo centered on the screen with the menu underneath it.

http://detoxcamp.smackjeeves.com/
Similar to this, but centered.

I'm trying to center my comic image as well along with the navigation, but none of the css I'm trying is working. (Also, somehow I scaled down my comic image? I don't even know how that happened. It's supposed to be 600px by 600px)

Any help would be greatly appreciated.

http://lkadhf.smackjeeves.com/comics/1769864/x/

Here is my 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'>

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

.header {
position: center;
}

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

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


body {
padding: 0 0;
}

img {
border: 0;
max-width: 100%;
display: block;
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;
-webkit-transition: color 0.5s;
transition: color 0.5s;
}

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

#fullpage {
padding: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
background: #447dff;
color: #447dff;
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:
url("https://i.imgur.com/ZhgN0Iv.png") repeat fixed;
padding: 20px 40px;
color: #325cbc;
min-height: 100px;


}





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: #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: linear-gradient(
rgba(33,171,205, 0.5),
rgba(33,171,205, 0.5)
),
url("https://i.imgur.com/ZhgN0Iv.png") repeat fixed;
padding: 20px 40px;
color: #325cbc;
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: middle;
}

nav li:hover a {
background: repeat fixed;
font-weight: bold;
}

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







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

border: 3px solid #fff;
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: #fff; }



/* --------------- 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: #fff;
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 #fff;
}

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

.archive p { margin: 0px; }

.archTitle {
padding: 15px;
float: left;
background: #fff;
color: #fff;
margin: 15px;
-webkit-transition: all 2s;
transition: all 2s;
}

.archTitle:hover {
background: #fff;
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;

border: 3px solid #325cbc;
-webkit-transition: all 4s;
transition: all 4s;
}



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

.commentHead {
background-color: #3867d2;
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%;
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: #fff;
color: #a9c3ff;
}

.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: #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;
-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: #a9c3ff;
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: #fff .5s;
transition: all .5s;
}

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



</style>


</head>


<body>

<div id="fullpage">

<header>



<a href="{SITE_URL_FULL}">

<logo><img src="https://i.imgur.com/JhOLQRI.pngg" alt="Cup of Olea" width="50%">


</a>



<nav>

{MENU}

</nav></logo>



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


Here is my Comic code:
Spoiler! :
<div class="container">

<div id="content">

<a name="top"></a>

<table border="0" width="100%" align="center">

<tr><td align="center"></td>

</tr>

</table>





<table style="width: 706px; border-spacing: 6px;">
<tr>
<td valign="bottom">
<a href="{NAV_PREV}"><img alt="previous page" height="150" src="http://i.imgur.com/k6d0UCZ.png" onmouseover="this.src='http://i.imgur.com/0PrMApA.png'" onmouseout="this.src='http://i.imgur.com/k6d0UCZ.png'" width="72" /></a></td>
<td rowspan="2">
<!-- BEGIN comic_image -->

<div style="text-align:center">

<div style="display: inline-block;">

{comic_image.FORMATTED}

<!-- END comic_image -->
</div>


<!-- BEGIN switch_no_comic_image -->

<img src="http://www.smackjeeves.com/images/image_na.gif" width="600" height="400" alt="" />

<!-- END switch_no_comic_image -->

</div>
</td>
<td valign="bottom">
<a href="{NAV_NEXT}"><img alt="next page" height="150" src="http://i.imgur.com/y27opdH.png" onmouseover="this.src='http://i.imgur.com/iBAfaag.png'" onmouseout="this.src='http://i.imgur.com/y27opdH.png'" width="72" /></a></td>
</tr>
<tr>
<td valign="top">
<a href="{NAV_FIRST}"><img alt="first page" height="150" src="http://i.imgur.com/bFdYswZ.png" onmouseover="this.src='http://i.imgur.com/TRsgnJ8.png'" onmouseout="this.src='http://i.imgur.com/bFdYswZ.png'" width="72" /></a></td>
<td valign="top">
<a href="{NAV_LAST}"><img alt="latest page" height="150" src="http://i.imgur.com/SxEAmWT.png" onmouseover="this.src='http://i.imgur.com/TVAjIx4.png'" onmouseout="this.src='http://i.imgur.com/SxEAmWT.png'" width="72" /></a></td>
</tr>
</table>

<br>

{JUMPBOX_FORMATTED}

<br><br><br>

<!-- BEGIN switch_author_comments -->
<h2>Author's Comments:</h2>
<!-- END switch_author_comments -->


<div class="authorComments">
<!-- 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 -->
</div>

<div class="readerComments">
<!-- 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>

<div style="margin-top: 15px;">
<a class="button" 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>
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 22nd, 2018, 8:11 pm

To fix the comic size, remove the width code from this line in Comic Page:
Code: Select all
<table style="width: 706px; border-spacing: 6px;">

(This is why you shouldn't just copy+paste code between layouts ;D)
To center the comic, put margin: auto in the CSS for that table, where you removed the width.

Also, a bit above that, this code seems entirely useless:
Code: Select all
<table border="0" width="100%" align="center">

<tr><td align="center"></td>

</tr>

</table>


Center your logo, CSS:
Code: Select all
logo>img {
margin: auto;
}


Center your menu and make it horizontal gather than a column, CSS:
Code: Select all
nav ul {
   text-align: center;
}
nav li {
   display: inline;
}

You already have CSS with these selectors (nav ul and nav li), so you just need to add the rules to the existing ones, you don't need the whole CSS I've given here. Also, remove the "float: middle" from nav li, that's invalid.

You seem to have some CSS that hides the first menu item, it looks like you're meant to have a drop-down menu (perhaps for mobile?). You may want to look into what that does and whether it works as expected on mobile, etc.
Image
User avatar
eishiya
 
Posts: 9736
Joined: December 5th, 2009, 11:17 am

Re: A little help with Streamlined, please.

Postby MasterComic » September 22nd, 2018, 9:55 pm

Thank you! Alright, making progress! The menu is now centered. For some reason the logo and comic/navigation did not, however. I'm not sure what went wrong there.

The second thing I was having trouble with was that I'd like to get rid of that large space in front of the Username in the comments. I have no idea what's causing that.

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

logo>img {
margin: auto;
}

.header {
margin: auto;
}

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

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


body {
padding: 0 0;
}

img {
border: 0;
max-width: 100%;
display: block;
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;
-webkit-transition: color 0.5s;
transition: color 0.5s;
}

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

#fullpage {
padding: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
background: #447dff;
color: #447dff;
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:
url("https://i.imgur.com/ZhgN0Iv.png") repeat fixed;
padding: 20px 40px;
color: #325cbc;
min-height: 100px;


}





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: #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: linear-gradient(
rgba(33,171,205, 0.5),
rgba(33,171,205, 0.5)
),
url("https://i.imgur.com/ZhgN0Iv.png") repeat fixed;
padding: 20px 40px;
color: #325cbc;
text-align: center;
margin-top: 20px;
}




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

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

}

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

nav li {
display: inline;
}

nav li:hover a {
background: repeat fixed;
font-weight: bold;
}

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







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

border: 3px solid #fff;
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: #fff; }



/* --------------- 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: #fff;
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 #fff;
}

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

.archive p { margin: 0px; }

.archTitle {
padding: 15px;
float: left;
background: #fff;
color: #fff;
margin: 15px;
-webkit-transition: all 2s;
transition: all 2s;
}

.archTitle:hover {
background: #fff;
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;

border: 3px solid #325cbc;
-webkit-transition: all 4s;
transition: all 4s;
}



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

.commentHead {
background-color: #3867d2;
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%;
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: #fff;
color: #a9c3ff;
}

.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: #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;
-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: #a9c3ff;
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: #fff .5s;
transition: all .5s;
}

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



</style>


</head>


<body>

<div id="fullpage">

<header>



<a href="{SITE_URL_FULL}">

<logo><img src="https://i.imgur.com/JhOLQRI.pngg" alt="Cup of Olea" width="50%">


</a>



<nav>

{MENU}

</nav></logo>



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


Comic Page:
Spoiler! :
<div class="container">

<div id="content">

<a name="top"></a>

<table style="border-spacing: 6px;" margin: auto>
<tr>
<td valign="bottom">
<a href="{NAV_PREV}"><img alt="previous page" height="150" src="http://i.imgur.com/k6d0UCZ.png" onmouseover="this.src='http://i.imgur.com/0PrMApA.png'" onmouseout="this.src='http://i.imgur.com/k6d0UCZ.png'" width="72" /></a></td>
<td rowspan="2">
<!-- BEGIN comic_image -->

<div style="text-align:center">

<div style="display: inline-block;">

{comic_image.FORMATTED}

<!-- END comic_image -->
</div>


<!-- BEGIN switch_no_comic_image -->

<img src="http://www.smackjeeves.com/images/image_na.gif" width="600" height="400" alt="" />

<!-- END switch_no_comic_image -->

</div>
</td>
<td valign="bottom">
<a href="{NAV_NEXT}"><img alt="next page" height="150" src="http://i.imgur.com/y27opdH.png" onmouseover="this.src='http://i.imgur.com/iBAfaag.png'" onmouseout="this.src='http://i.imgur.com/y27opdH.png'" width="72" /></a></td>
</tr>
<tr>
<td valign="top">
<a href="{NAV_FIRST}"><img alt="first page" height="150" src="http://i.imgur.com/bFdYswZ.png" onmouseover="this.src='http://i.imgur.com/TRsgnJ8.png'" onmouseout="this.src='http://i.imgur.com/bFdYswZ.png'" width="72" /></a></td>
<td valign="top">
<a href="{NAV_LAST}"><img alt="latest page" height="150" src="http://i.imgur.com/SxEAmWT.png" onmouseover="this.src='http://i.imgur.com/TVAjIx4.png'" onmouseout="this.src='http://i.imgur.com/SxEAmWT.png'" width="72" /></a></td>
</tr>
</table>

<br>

{JUMPBOX_FORMATTED}

<br><br><br>

<!-- BEGIN switch_author_comments -->
<h2>Author's Comments:</h2>
<!-- END switch_author_comments -->


<div class="authorComments">
<!-- BEGIN loop_author_comments -->
<div class="comment {loop_author_comments.REPLY_CLASS}">

<div class="commentHead">
<h3>
<span class="left">
<a href="{loop_author_comments.POSTER_PROFILE_URL}" target="_profile">{loop_author_comments.NAME}</a>, {loop_author_comments.DATE_POSTED}
</span>
<div class="right">
<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 -->

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

<div class="readerComments">
<!-- 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>

<div style="margin-top: 15px;">
<a class="button" 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>
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 23rd, 2018, 8:05 am

The centering is off because you made a mistake in adding "margin: auto", it goes inside the style attribute, inside the quotes, but you put it outside:
Code: Select all
<table style="border-spacing: 6px;" margin: auto>

should be
Code: Select all
<table style="border-spacing: 6px; margin: auto;">


The big space in front of the username is added here in your Overall Layout CSS, in the padding:
Code: Select all
.commentHead {
background-color: #3867d2;
padding: 10px 10px 10px 145px;
margin-bottom: 7px;
-webkit-transition: all 4s;
transition: all 4s;
}

Change that 145px to a smaller value and that will reduce the space. 10px should do.
Image
User avatar
eishiya
 
Posts: 9736
Joined: December 5th, 2009, 11:17 am

Re: A little help with Streamlined, please.

Postby MasterComic » September 23rd, 2018, 10:18 pm

Thank you again! I'm on the home-stretch. I hope you don't mind helping a little more.

1. I put some outlines around the author and user avatars, but for some reason, my divs broke the comments so now text only appears under the avatars rather then beside them. I can't find what is breaking it.
2. I'd like to add a space above the Post A Comment button that's the same size as the spaces between comments. I could not get any CSS to work on that, however.
3. I'd like it if the items in the menu only changed color when hovering over them rather than turn bold and further spaced apart.
4. I'd like if I could make all my custom pages (How to Command, Characters, Artwork, Other Stuff) on the next line in the menu, and make only the top line of the menu bold (Home, First Comic, Last Comic, Archive)

After that, the only thing I can forsee giving me trouble is the archive and some mobile stuff, but I'll cross that bridge when I get to it.

I hope I'm not being a bother...

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'>

<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%;
margin-bottom: 20px;
}
.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 {
padding: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
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: 20px 40px;
color: #fff;
text-align: center;
margin-top: 20px;
}




/* --------------- 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;
font-weight: bold;
}

nav li a {
padding: 10px 20px;
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: 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: #fff;
text-align: center;

}

.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;

}


.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 #fff;
}

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

.archive p { margin: 0px; }

.archTitle {
padding: 15px;
float: left;
background: #fff;
color: #fff;
margin: 15px;

}

.archTitle:hover {
background: #fff;
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-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 5px;
}

.commentHead h3 { margin: 0; }

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

.commentPost { padding: 10px; }

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

.avatar {
border-radius: 0%;
margin: 0px 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;
background-color: rgba(33,171,205, 0.0);
border: 3px solid rgba(33,171,205, 0.8);

}

.post:hover {
background: rgba(33,171,205, 0.2);
border: 3px solid rgba(33,171,205, 0.2);
border-radius: 50px 0px 50px 0px;

}

.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: #a9c3ff;
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: #FFF; }



</style>


</head>


<body>

<div id="fullpage">

<header>


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

<logo><img src="https://i.imgur.com/JhOLQRI.pngg" alt="Cup of Olea" width="40%" style="margin: auto;">


</a>

</center>

<nav>

{MENU}

</nav></logo>



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


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

<div id="content">

<a name="top"></a>

<table style="border-spacing: 6px; margin: auto;">
<tr>
<td valign="bottom">
<a href="{NAV_PREV}"><img alt="previous page" height="150" src="http://i.imgur.com/k6d0UCZ.png" onmouseover="this.src='http://i.imgur.com/0PrMApA.png'" onmouseout="this.src='http://i.imgur.com/k6d0UCZ.png'" width="72" /></a></td>
<td rowspan="2">
<!-- BEGIN comic_image -->

<div style="text-align:center">

<div style="display: inline-block;">

{comic_image.FORMATTED}

<!-- END comic_image -->
</div>


<!-- BEGIN switch_no_comic_image -->

<img src="http://www.smackjeeves.com/images/image_na.gif" width="600" height="400" alt="" />

<!-- END switch_no_comic_image -->

</div>
</td>
<td valign="bottom">
<a href="{NAV_NEXT}"><img alt="next page" height="150" src="http://i.imgur.com/y27opdH.png" onmouseover="this.src='http://i.imgur.com/iBAfaag.png'" onmouseout="this.src='http://i.imgur.com/y27opdH.png'" width="72" /></a></td>
</tr>
<tr>
<td valign="top">
<a href="{NAV_FIRST}"><img alt="first page" height="150" src="http://i.imgur.com/bFdYswZ.png" onmouseover="this.src='http://i.imgur.com/TRsgnJ8.png'" onmouseout="this.src='http://i.imgur.com/bFdYswZ.png'" width="72" /></a></td>
<td valign="top">
<a href="{NAV_LAST}"><img alt="latest page" height="150" src="http://i.imgur.com/SxEAmWT.png" onmouseover="this.src='http://i.imgur.com/TVAjIx4.png'" onmouseout="this.src='http://i.imgur.com/SxEAmWT.png'" width="72" /></a></td>
</tr>
</table>

<br>

<center>
{JUMPBOX_FORMATTED}
</center>

<br><br><br>

<!-- BEGIN switch_author_comments -->

<!-- END switch_author_comments -->


<div class="authorComments">
<!-- BEGIN loop_author_comments -->
<div class="comment {loop_author_comments.REPLY_CLASS}">

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

</div>
</h3><div class="clear"></div>
</div>

<div class="commentPost clear">
<!-- BEGIN switch_poster_avatar -->

<div style="display: inline-block; border: 3px solid gold; width:125px; height:125px;">

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

{loop_author_comments.COMMENT_REPLIES}

<!-- END loop_author_comments -->
</div>

<div class="readerComments">
<!-- BEGIN switch_user_comments -->
<h2>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.POSTER_PROFILE_URL}" target="_profile">{loop_user_comments.NAME}</a>, {loop_user_comments.DATE_POSTED}
</span>
<div class="right">
<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>&ensp;
<!-- 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>&ensp;
<!-- 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 -->

</div>
</h3>
<div class="clear"></div>
</div>

<div class="commentPost clear">

<div style="display: inline-block; border: 3px solid #fff; width:125px; height:125px;">
<!-- 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>
</div>

{loop_user_comments.COMMENT_REPLIES}
<!-- END loop_user_comments -->
</div>


<div style="margin-top: 15px; text-align: right;">
<a class="button" 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>
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 23rd, 2018, 10:49 pm

1. You don't need a div to add the outlines. The problem is that you put your </div> in the wrong place, breaking the existing code xP Remove the extra code you added, and use this CSS to add the borders instead:
Code: Select all
.avatar {
border: 3px solid gold;
}

(There are already .avatar CSS rules in your Overall layout, so you should add this to one of them.)

2. The "Post A Comment" button is enclosed in a div with a margin-top:
Code: Select all
<div style="margin-top: 15px; text-align: right;">
<a class="button" 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>

Change that "15px" to some higher value. You may need to experiment, since this margin is measured excluding the padding and border. The button currently has 10px padding and 3px border, so you'll want to set the margin-top to be 13px larger than your desired spacing.

3. To remove the bold on the menu, find this in your Overall Layout CSS:
Code: Select all
nav li:hover a {
background: repeat fixed;
font-weight: bold;
}

Remove "font-weight: bold;" and you should be set. The apparent increased spacing is actually just the result of the bold taking up more space, I believe, so this should fix both problems.

4. To break your menu into two sections, you'll need to manually code your menu instead of using the automatic loop, so that you can put some of the menu items in their own list with its own, distinct class name (e.g. "submenu"), so that you can apply different styling to them and have them one above the other. If you need help with that, please post your Menu code.
Image
User avatar
eishiya
 
Posts: 9736
Joined: December 5th, 2009, 11:17 am

Re: A little help with Streamlined, please.

Postby MasterComic » September 24th, 2018, 12:41 am

Thank you so much for the help! The only nitpicky thing I have is that I cannot get rid of that space between usernames and the comma afterwards. I'm not sure if there is a way to get rid of it.

Here is the finished product for the comic page! http://lkadhf.smackjeeves.com/comics/1903595/shhysrdy/

Something else I have noticed is that short pages, like the homepage currently, have white space at the bottom where there is no content. I'd definitely like to eliminate that, just in case. I'd like blue background and footer to stretch to the very bottom, regardless of content.

http://lkadhf.smackjeeves.com/

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'>

<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 {
padding: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
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;
margin-top: 20px;
}




/* --------------- 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: 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: #fff;
text-align: center;

}

.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;

}


.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 #fff;
}

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

.archive p { margin: 0px; }

.archTitle {
padding: 15px;
float: left;
background: #fff;
color: #fff;
margin: 15px;

}

.archTitle:hover {
background: #fff;
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-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 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;
background-color: rgba(33,171,205, 0.0);
border: 3px solid rgba(33,171,205, 0.8);

}

.post:hover {
background: rgba(33,171,205, 0.2);
border: 3px solid rgba(33,171,205, 0.2);
border-radius: 50px 0px 50px 0px;

}

.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: #a9c3ff;
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: #FFF; }



</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;">



</a>



<nav>

{MENU}

</nav></logo>

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


Comic Code:
Spoiler! :
http://www.smackjeeves.com/managecomic.php?id=134071&mode=appearance&tpl=comic
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 24th, 2018, 9:27 am

Comment poster name and comma space:
Change this CSS in Overall Layout:
Code: Select all
.commentHead span a {
padding: 0px 5px;
}

to
Code: Select all
.commentHead span a {
padding: 0px 0px 0px 5px;
}

(i.e. make the padding 5px only on the left, not on both the left and right)
You're not using your browser's inspection tools, are you? ;D

Your menu is currently broken, your extra pages all point to /comics/, make sure you fix that for the live version!

Eliminate the white space on the bottom:
In Overall Layout, you have some CSS rules for #fullpage. Add this one to make sure it always fills the window if there's not enough content:
Code: Select all
min-height: 100%;


You also already have some CSS for the footer. Add some more:
Code: Select all
position: absolute;
left: 0;
right: 0;
bottom: 0;

"position: absolute" changes the way the position is calculated, it lets is position in absolute terms relative to the parent (in this case, that's #fullpage, which should now always take up at least the entire screen), and bottom: 0 positions it at the bottom of the parent. left: 0 and right: 0 make sure it stretches to fill the available horizontal space.

You may also want to give #fullpage some additional padding on the bottom to make room for the footer, so that it doesn't get too close to content, e.g.
Code: Select all
padding-bottom: 40px;
Image
User avatar
eishiya
 
Posts: 9736
Joined: December 5th, 2009, 11:17 am

Re: A little help with Streamlined, please.

Postby MasterComic » September 25th, 2018, 8:42 pm

I promise I'm trying! :P

Everything is looking great. I noticed that on pages like the News Archive, however, that that the new code actually bumped the footer off-screen. I would prefer it rest at the bottom of the screen on short pages. It's kind of nitpicky, so if it stays this way, it's not a huge deal.

The archive will need some work. I'd like if I could line up the thumbnails sort of in a table. 8 columns and as many rows as needed (my comic has 1300 pages...). Below each thumbnail would be only the # page that it is (EG #1, #2...) I also would like to be able to write a brief summary above each chapter for readers skimming through. I have no idea where to even start on that, however... The chapters at the top are fine the way they are, except that my mouse changes to the "highlight text" "capital I" shape when hovering over them. I don't know if that can be changed. Hopefully you can help with this. If you can't thank you very much for all the help you've given so far!

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'>

<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;
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: 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: #fff;
text-align: center;

}

.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;

}


.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 #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 {
width: 100%;
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;">



</a>



<nav>

{MENU}

</nav></logo>

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


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

<div id="content">

<a name="top"></a>

<table style="border-spacing: 6px; margin: auto;">
<tr>
<td valign="bottom">
<a href="{NAV_PREV}"><img alt="previous page" height="150" src="http://i.imgur.com/k6d0UCZ.png" onmouseover="this.src='http://i.imgur.com/0PrMApA.png'" onmouseout="this.src='http://i.imgur.com/k6d0UCZ.png'" width="72" /></a></td>
<td rowspan="2">
<!-- BEGIN comic_image -->

<div style="text-align:center">

<div style="display: inline-block;">

{comic_image.FORMATTED}

<!-- END comic_image -->
</div>


<!-- BEGIN switch_no_comic_image -->

<img src="http://www.smackjeeves.com/images/image_na.gif" width="600" height="400" alt="" />

<!-- END switch_no_comic_image -->

</div>
</td>
<td valign="bottom">
<a href="{NAV_NEXT}"><img alt="next page" height="150" src="http://i.imgur.com/y27opdH.png" onmouseover="this.src='http://i.imgur.com/iBAfaag.png'" onmouseout="this.src='http://i.imgur.com/y27opdH.png'" width="72" /></a></td>
</tr>
<tr>
<td valign="top">
<a href="{NAV_FIRST}"><img alt="first page" height="150" src="http://i.imgur.com/bFdYswZ.png" onmouseover="this.src='http://i.imgur.com/TRsgnJ8.png'" onmouseout="this.src='http://i.imgur.com/bFdYswZ.png'" width="72" /></a></td>
<td valign="top">
<a href="{NAV_LAST}"><img alt="latest page" height="150" src="http://i.imgur.com/SxEAmWT.png" onmouseover="this.src='http://i.imgur.com/TVAjIx4.png'" onmouseout="this.src='http://i.imgur.com/SxEAmWT.png'" width="72" /></a></td>
</tr>
</table>

<br>

<center>
{JUMPBOX_FORMATTED}
</center>

<br><br><br>

<!-- BEGIN switch_author_comments -->

<!-- END switch_author_comments -->


<div class="authorComments">
<!-- BEGIN loop_author_comments -->
<div class="comment {loop_author_comments.REPLY_CLASS}">

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

</div>
</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 authoravatar" />


<!-- 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 -->
</div>

<div class="readerComments">
<!-- BEGIN switch_user_comments -->
<h2>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.POSTER_PROFILE_URL}" target="_profile">{loop_user_comments.NAME}</a>, {loop_user_comments.DATE_POSTED}
</span>
<div class="right">
<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>&ensp;
<!-- 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>&ensp;
<!-- 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 -->

</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 useravatar" />
<!-- 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>


<div style="margin-top: 27px; text-align: right;">
<a class="button" 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>


Archive Code:
Spoiler! :
<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 -->
<div id="ch_{archive_chapters.CHAPTER_ID}">

<!-- 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">
document.write('{archive_chapters.archive_comics.DATE_RELEASED}'.substr(0,11));
</script></h2>
<p>{archive_chapters.archive_comics.NUMBER_COMMENTS} comments</p>
</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

Next

Return to Template Development & Support

Who is online

Users browsing this forum: No registered users and 1 guest