Modern Template Rating Stars GUIDE (for lazy people like me)

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

Moderator: Help Desk Team

Modern Template Rating Stars GUIDE (for lazy people like me)

Postby Orwell » July 31st, 2018, 9:01 am

Are you trying to add the missing rating icons on the Modern Template and failing miserably?
Do you know fuck all about coding?
Are you losing your mind trying to understand where to put the damn missing code?
Do you feel dumber and dumber by the minute?

Well ladies and gents', I present to you :

"How to add rating stars to the Modern template if you're a dumbass like me"
aka "I don't care how, just let me add rating stars to my comic for the love of God"

Image

This is what it looks like : above the comic page, just below the page title and upload date. Because it's usually where it goes and also I'm too dumb and lazy to figure out another way.

Disclaimer: this is just copy-pasting. I'm not even gonna explain what does what, let's just assume you're as lost as I was.

1) First, go to : Webcomic Management -> Page Design/Appearance -> Comic Page
That big scary wall of code ? Delete the whole thing, and copy-paste this instead:
Code: Select all
<script language="JavaScript">

var dir = "";
var pic_unselected = "http://www.smackjeeves.com/templates/default/images/star-unselected.gif";
var pic_selected = "http://www.smackjeeves.com/templates/default/images/star-selected.gif";

// "Buffers" the image to the browser
document.write('<img style="display: none" src="' + pic_unselected + '" />');
document.write('<img style="display: none" src="' + pic_selected + '" />');

<!-- BEGIN switch_user_has_voted -->
var default_rating = {switch_user_has_voted.RATING};
var rate_it_pic = "http://www.smackjeeves.com/templates/default/images/your-rating-2.gif";
<!-- END switch_user_has_voted -->
<!-- BEGIN switch_user_hasnt_voted -->
var default_rating = 0;
var rate_it_pic = "http://www.smackjeeves.com/templates/default/images/rate-it.gif";
<!-- END switch_user_hasnt_voted -->

function build_vote()
{
   document.write('<img id="text" src="' + rate_it_pic + '" /><ul>');
   for (n = 1; n<= 5; n++)
   {
      if (n <= default_rating)
      {
         default_pic = pic_selected;
      } else {
         default_pic = pic_unselected;
      }

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

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

function vote(rating)
{
   var new_window = window.open("/ratecomic.php?cid={COMIC_ID}&rating=" + rating, "sj_ratecomic", "height=300, width=400");
   new_window.focus();
}
</script>

<div id="comic_header">

   <h1>{COMIC_TITLE}</h1>
   <div class="subheader">{COMIC_POST_DATE}</div>
<div id="ratings">
<div id="averageRating">Average Rating: {AVERAGE_RATING}</div>
<div id="rating"><script language="JavaScript">build_vote();</script></div>

</div>

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

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

<div class="comic_nav">

   <a href="{NAV_FIRST}"><img src="http://www.smackjeeves.com/templates/modern/images/nav_first.png" alt="<< First" /></a>
   <a href="{NAV_PREV}"><img src="http://www.smackjeeves.com/templates/modern/images/nav_prev.png" alt="< Previous" /></a>
   
   <div id="comic_jumpbox">{JUMPBOX_FORMATTED}</div>
   
   <a href="{NAV_NEXT}"><img src="http://www.smackjeeves.com/templates/modern/images/nav_next.png" alt="Next >" /></a>
   <a href="{NAV_LAST}"><img src="http://www.smackjeeves.com/templates/modern/images/nav_last.png" alt="Most Recent >>" /></a>

</div>

<div id="comic_comments_wrapper">

   <div class="card author comments-container vertical"><div>
   
      <div class="header">
      
         <div class="title">From the Author</div>
         
         <!-- BEGIN switch_user_is_author -->
         <a class="post_comment" 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;">Leave a Comment</a>
         <!-- END switch_user_is_author -->
         
      </div>
      
      <!-- BEGIN loop_author_comments -->
      <div class="comment {loop_author_comments.REPLY_CLASS}">
      
         <ul class="post_tools">
         
            <li><a class="reply" 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;"></a></li>
            
            <!-- BEGIN switch_user_can_edit -->
            <li><a class="edit" 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;"></a></li>
            <!-- END switch_user_can_edit -->
            
            <!-- BEGIN switch_user_can_delete -->
            <li><a class="delete" 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;"></a></li>
            <!-- END switch_user_can_delete -->
            
         </ul>
      
         <div class="avatar">
         
            <!-- BEGIN switch_poster_avatar -->
            <img src="{loop_author_comments.POSTER_AVATAR_IMG_SRC}" />
            <!-- END switch_poster_avatar -->
            
            <!-- BEGIN switch_poster_no_avatar -->
            <img src="http://www.smackjeeves.com/templates/modern/images/guest.png" />
            <!-- END switch_poster_no_avatar -->
         
         </div>
         
         <div class="content">
         
            <div class="poster">
            
               <a href="{loop_author_comments.POSTER_PROFILE_URL}" target="_blank">{loop_author_comments.NAME}</a>
               <span class="date">{loop_author_comments.DATE_POSTED}</span>
               
            </div>
            
            <div class="body">
               
               <span class="title">{loop_author_comments.POST_TITLE}</span>
               {loop_author_comments.MESSAGE}
            
            </div>
         
         </div>
      
         <div class="clear"></div>
      
      </div>
         
      {loop_author_comments.COMMENT_REPLIES}
      <!-- END loop_author_comments -->
      
   </div></div>
   
   <!-- BEGIN switch_author_comments -->
   <script type="text/javascript">
   
      cdata.authorComments = true;
   
   </script>
   <!-- END switch_author_comments -->
   
   <div class="card reader comments-container vertical"><div>
   
      <div class="header">
      
         <div class="title">Reader Comments</div>
         <a class="post_comment" 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;">Leave a Comment</a>
         
      </div>
      
      <!-- BEGIN loop_user_comments -->
      <div class="comment {loop_user_comments.REPLY_CLASS}">
      
         <ul class="post_tools">
         
            <li><a class="reply" 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;"></a></li>
            
            <!-- BEGIN switch_user_can_edit -->
            <li><a class="edit" 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;"></a></li>
            <!-- END switch_user_can_edit -->
            
            <!-- BEGIN switch_user_can_delete -->
            <li><a class="delete" 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;"></a></li>
            <!-- END switch_user_can_delete -->
            
         </ul>
      
         <div class="avatar">
         
            <!-- BEGIN switch_poster_avatar -->
            <img src="{loop_user_comments.POSTER_AVATAR_IMG_SRC}" />
            <!-- END switch_poster_avatar -->
            
            <!-- BEGIN switch_poster_no_avatar -->
            <img src="http://www.smackjeeves.com/templates/modern/images/guest.png" />
            <!-- END switch_poster_no_avatar -->
         
         </div>
         
         <div class="content">
         
            <div class="poster">
            
               <a href="{loop_user_comments.POSTER_PROFILE_URL}" target="_blank">{loop_user_comments.NAME}</a>
               <span class="date">{loop_user_comments.DATE_POSTED}</span>
               
            </div>
            
            <div class="body">
               
               <span class="title">{loop_user_comments.POST_TITLE}</span>
               {loop_user_comments.MESSAGE}
            
            </div>
         
         </div>
      
         <div class="clear"></div>
      
      </div>
   
      <!-- BEGIN switch_user_comments -->
      <script type="text/javascript">
      
         cdata.readerComments = true;
      
      </script>
      <!-- END switch_user_comments -->
         
      {loop_user_comments.COMMENT_REPLIES}
      <!-- END loop_user_comments -->
      
      <div class="footer">
      
         <a class="post_comment" 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;">Leave a Comment</a>
      
      </div>
      
   </div></div>

</div>

   
<script type="text/javascript">

   if( !cdata.authorComments ) {
      
      $('#comic_comments_wrapper .card.author.comments-container').hide();
      $('#comic_comments_wrapper .card.reader.comments-container').removeClass('vertical');
      
   }
   
   if( !cdata.readerComments ) {
      
      $('#comic_comments_wrapper .reader .footer').remove();
      
   }

</script>

Click "Submit" at the bottom to save the changes.

2) Then go to : Webcomic Management -> Page Design/Appearance -> Overall Layout
Again, delete the whole thing. Copy-paste this instead:
Code: Select all
<!doctype html>

<html lang="en">
<head>

  <meta charset="utf-8">

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

   <link rel="stylesheet" href="http://www.smackjeeves.com/templates/modern/style.css?v=3">
   <link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700" rel="stylesheet" type="text/css">
   <link rel="alternate" type="application/rss+xml" title="{SITE_NAME} RSS" href="{SITE_URL_FULL}rss/">
 
   <meta name="Description" content="{SITE_DESCRIPTION}">
   {SOCIAL_META_TAGS}

   <!--[if lt IE 9]>
   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->
   
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
   <script type="text/javascript">
   
      var cdata = {};
   
   </script>
 
</head>

<body>

   <div id="overall_wrapper">
   
      <div id="overall_header">
      
         <a class="title" href="{SITE_URL_FULL}">
      
            {SITE_NAME}
            
         </a>
         
         <ul id="oh_icons">
         
            <!-- Yo! Authors! You can put your Patreon/Facebook/Twitter links here! -->
            <!-- <li><a href="#" class="patreon" target="_blank"></a></li> -->
            <!-- <li><a href="#" class="facebook" target="_blank"></a></li> -->
            <!-- <li><a href="#" class="twitter" target="_blank"></a></li> -->
                                       <li><a href="{SITE_URL_FULL}rss/" class="rss" target="_blank"></a></li>
            <li><a href="http://www.smackjeeves.com/favorites.php?add={SITE_ID}" class="fav" target="_blank"></a></li>
         
         </ul>
      
      </div>

<style>
#rating, #rating ul {
    margin: none;
    display: inline-block;
    text-align: right;
}
#rating li {
    display: inline;
    list-style-type: none;
    margin: none;
}
</style>
      
      {MENU}
      
      <div id="overall_content">
      
         {CONTENT}
      
      </div>
      
      <div id="footer_ph"></div>
   
      <div id="overall_footer">
      
         Powered by <a class="sj" href="http://www.smackjeeves.com/" target="_blank">Smack Jeeves<span class="subtle"> Webcomic Hosting</span></a>
      
      </div>
   
   </div>

</body>

</html>

Click "Submit".

Done.

--------------------------------------------
OPTIONAL:
If you want to customize the icons, simply change the url near the top of the very first thing you copy-pasted, in Appearance -> Comic Page :
Code: Select all
var pic_unselected = "http://www.smackjeeves.com/templates/default/images/star-unselected.gif";
var pic_selected = "http://www.smackjeeves.com/templates/default/images/star-selected.gif";

Don't forget the quotes! The url has to be between the "".
For example, here are the ones I chose :
Code: Select all
var pic_unselected = "https://i.imgur.com/rUcGmqw.gif";
var pic_selected = "https://i.imgur.com/HM55h46.gif";

You can download other icons from sites like https://www.iconsdb.com. I recommend the 24x24 dimensions, but you can experiment. Choose your icon color (one when unselected, one when selected), download both versions.
Then host them on Imgur (or other image hosting site) (you can upload them in a "hidden" album, so it's invisible to other users but still accessible with the URL) and copy their URL in your code.
--------------------------------------------

Once you're done, go back to "Appearance". You now have the possibility to save your modified template:

Image

I called mine "Modern + rating stars"

- - - The End - - -

(Shout out to anyone else who got stuck in this Matrix-like hellhole. Godspeed.)
User avatar
Orwell
 
Posts: 5
Joined: July 4th, 2013, 12:44 pm

Return to Template Development & Support

Who is online

Users browsing this forum: No registered users and 7 guests