We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 10191
    • 12 Posts
    I’m having some troubles ... the star rating isn’t catching my CSS for the "CSS Star Rating 1.0" .... when i copy all the css into the head all the code just shows up above the site .... also when i click on a rating ... it takes me to a page not found. Please help
      • 10487 MODX Staff
      • 1,535 Posts
      Garry Nutting Reply #2, 20 years ago
      Hi frisko54,

      Few questions:

      1. How are you including the CSS? Preferably, you should be referencing the external CSS file and not copying straight into the template. (Keeps it all in one place that way and makes life easier in general)
      2. What is the snippet call you are using for the CSS Star Rating?
      3. I don’t suppose you have a URL? (Would really make life easier)

      If you can post the above information as best you can then that might give a hint as to what’s going on. smiley

      Cheers,
      Garry
        Garry Nutting
        Senior Developer
        MODX, LLC

        Email: [email protected]
        Twitter: @garryn
        Web: modx.com
        • 28042 ☆ A M B ☆
        • 24,524 Posts
        Indeed, if all you did was copy the css into the head of your template, without the enclosing <style type="text/css">...</style> tags, the css code will show up on your page, since the browser has no way to know that it’s not plain text.
          Studying MODX in the desert - http://sottwell.com
          Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
          Join the Slack Community - http://modx.org
          • 10191
          • 12 Posts
          Thanks a lot guys ... okay here’s how i’m including the snippet call in the template ..

          "
              <h3 id="post-">[*longtitle*]<br /></h3>
                  <p>[[star_rating]]</p>
                  [*#content*]		</div>"


          Here’s the link ... seems to be recognizing the snippet, just not the stars ... and doesn’t recognize when a vote is made.

          And this is what the CSS looks like in the head of the template ...
              <head>
                  <title>[(site_name)] | [*pagetitle*]</title>
                  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                  <link rel="stylesheet" href="[(base_url)]assets/templates/default/site.css" type="text/css" media="screen" />
                  <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="[(site_url)][~11~]" />
                  <base href="[(site_url)]" />
          <style type="text/css">	.star-rating{
          		list-style:none;
          		margin: 0px;
          		padding:0px;
          		width: 125px;
          		height: 25px;
          		position: relative;
          		background: url(alt_star.gif) top left repeat-x;		
          	}
          	.star-rating li{
          		padding:0px;
          		margin:0px;
          		/*\*/
          		float: left;
          		/* */
          	}
          	.star-rating li a {
          		display:block;
          		width:25px;
          		height: 25px;
          		text-decoration: none;
          		text-indent: -9000px;
          		z-index: 20;
          		position: absolute;
          		padding: 0px;
          		overflow: hidden;
          		outline: none;
          		border:0;
          	} 
          	
           	.star-rating li {
          		text-indent:-9000px;
          	}
          	
          	.star-rating li a:hover{
          		background: url(alt_star.gif) left bottom;
          		z-index: 2;
          		left: 0px;
          	}
          	.star-rating a.one-star, .star-rating li.one-star {
          		left: 0px;
          	}
          	.star-rating a.one-star:hover{
          		width:25px;
          	}
          	.star-rating a.two-stars, .star-rating li.two-stars {
          		left:25px;
          	}
          	.star-rating a.two-stars:hover{
          		width: 50px;
          	}
          	.star-rating a.three-stars, .star-rating li.three-stars {
          		left: 50px;
          	}
          	.star-rating a.three-stars:hover{
          		width: 75px;
          	}
          	.star-rating a.four-stars, .star-rating li.four-stars {
          		left: 75px;
          	}	
          	.star-rating a.four-stars:hover{
          		width: 100px;
          	}
          	.star-rating a.five-stars, .star-rating li.five-stars {
          		left: 100px;
          	}
          	.star-rating a.five-stars:hover{
          		width: 125px;
          	}
          	.star-rating li.current-rating{
          		background: url(alt_star.gif) left center;
          		position: absolute;
          		height: 25px;
          		display: block;
          		text-indent: -9000px;
          		z-index: 1;
          	}
          	
          	.star-rating-warning {
          		font-size:smaller;
          		color: maroon;
          	}		
          </style>
          
              </head>


          mod note: use code blocks!
            • 10487 MODX Staff
            • 1,535 Posts
            Garry Nutting Reply #5, 20 years ago
            Hi,

            If you’re including the CSS in your template then you need to update the background URL’s in the CSS to have the path to where the image is stored. You’ll have much less overhead per page (and won’t have to correct the image paths if the image is saved in the same folder as the CSS) if you call the external CSS file instead, for example:
            <link rel="stylesheet" href="assets/snippets/star_rating/star.css" type="text/css" />

            And to make it recognise your votes, call the snippet uncached, like: [!star_rating!]
              Garry Nutting
              Senior Developer
              MODX, LLC

              Email: [email protected]
              Twitter: @garryn
              Web: modx.com
              • 11975
              • 2,542 Posts
              Hi garryn,

              Unfortunately as the snippet must be called uncached we cannot add it to the ditto listing (I mean called form the ditto tpl).
              In such a case the snippet call appears in stead of the expected stars.

              Is there anyway to fix this ?
              Or do we have to wait for the recursive parser.

              :-)
                Made with MODx : [url=http://www.copadel.com]copadel, fruits et l
                • 10487 MODX Staff
                • 1,535 Posts
                Garry Nutting Reply #7, 20 years ago
                Hi heliotrope,

                The only way I can think (and I haven’t tried this) is to have the page uncached, not optimal but should work. The reason it has to be called uncached (or called on a page that is uncached) is because it has to process the $_GET variables to register the vote.

                Cheers,
                Garry
                  Garry Nutting
                  Senior Developer
                  MODX, LLC

                  Email: [email protected]
                  Twitter: @garryn
                  Web: modx.com
                  • 10191
                  • 12 Posts
                  Thanks Garryn,

                  Linking to the CSS worked perfectly, however the votes are not counting ... it’s saying "404 (page Not found).
                  http://www.palmpoon.com/index.php?q=how_to_handle_multiple_relationships.html

                  I’m calling the snippet from the template as you suggested, and the document I’ve tried setting as both cacheable and non-cacheable ...

                  Any ideas? Thanks a bunch.
                    • 10487 MODX Staff
                    • 1,535 Posts
                    Garry Nutting Reply #9, 20 years ago
                    This is because you are using the ’index.php?q=’ alias prefix and the parser function that renders the links does not take this into account on versions of MODx 0.9.2.1 and below causing the url to fail when GET variables are appended.

                    Two options are:

                    1. Upgrade to the 0.9.5 public beta 3 as this problem is fixed in that.
                    2. Hack the code slightly to append the GET variables onto the end of the url after the makeUrl function call.

                    If you decide on option 2, then let me know if you need any help on rearranging the code.

                      Garry Nutting
                      Senior Developer
                      MODX, LLC

                      Email: [email protected]
                      Twitter: @garryn
                      Web: modx.com
                      • 10191
                      • 12 Posts
                      I think I’ll hack the code slightly after the makeUrl function call. I do need some help thanks