Thanks very much for providing these templates. It was an excellent idea.
I am modifying the version 1.4 template. I have a question and an issue:
1. I prefer the pagination buttons from 1.3.1 over the ones in 1.4. How do I use 1.3.1 pagination buttons in 1.4?
2. The facebook and google plus buttons do not display on my page. Only the twitter button and callout show up. How do I get the others to display (this was the case even before modifying the code and is the case from different computers and different networks). Here is a copy of the code:<div class="socialButtons"> <div class="item first"><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div> <div class="item"> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#appId=154863967938949&xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class="fb-like" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false" data-font="arial"></div> </div> <div class="item"> <!-- Place this tag where you want the +1 button to render --> <div class="g-plusone" data-size="medium" data-annotation="none"></div> <!-- Place this render call where appropriate --> <script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> </div> <div class="clear"></div> </div> <div class="clear"></div>
I just reread my suggestion and realized it could be misinterpreted. I'm not speaking of the grid size as in the 960.gs grids. I'm thinking the size of the map grids and the image thumbnail you see in the "featuredMaps" element. Here are a couple specific areas that come to mind in the global.css file (this may different for you if you are using template 1.3.1):
* The styling of ".mapsGrid .item" where "width:200px;"
* the styling of ".mapsGrid .item img" where "width:200px;"
*The styling of ".mapsList .item img" where width:200px;" and "height:133px;"
Keep in mind I'm using the 1.4 template. Basically just be mindful that the default dimensions of the thumbnail maps is 200x133px. Hopefully I'm not forgetting anything else. Always save a copy before making such drastic changes or record the default values before making your changes.
Unfortunately, I don't think there's an easy way to use the other style without getting into the CSS. Is there a reason you like the previous pagination better? Just styling perhaps? Just wondering.
I think the social buttons don't work unless it's running on an external web page. They don't show up if you run it from your local computer so that may be the issue. I still need to test these a bit. Look for 1.4 to be released soon. Within a week or so.
Thanks for the response. I was going to play around with the "clear" tags to see whether that was the problem. Your answer may be the correct explanation (I'm hoping at least). I'll throw it up on my web server some time soon to test.
I prefer the pagination in 1.3.1 because I think it's more aesthetically pleasing. Am I out of luck here? Please say it isn't so.
Thanks again, and keep up the good work.
/*-------------------------------------------------- */ /* Pagination */ /*-------------------------------------------------- */ .pagination { margin:0 0 20px 0; display:none; font-size:12px; line-height:16px; } .pagination ul { list-style:none; margin:0; padding:0; } .pagination ul li { float:left; margin-right:5px; padding:0; height:26px; overflow:hidden; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; } .pagination ul li span { display:inline-block; padding:4px 8px; cursor:pointer; background:#eee; border:1px solid #fff; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; min-width:18px; text-align:center; } .pagination ul li sub { display:inline-block; padding:10px 4px 0 4px; } .pagination ul li span.loadingAjax { display:inline-block; cursor:default; background:none; border:0; width:26px; height:26px; margin:0; padding:0; background:url(../graphics/ui/ajax-loader.gif) no-repeat center center; } .pagination ul li.selected span, .pagination ul li.selected span:hover { border:1px solid #fff; background:#2A7433; cursor:default; font-weight:bold; color:#eee; } .pagination ul li.disabled span, .pagination ul li.disabled span:hover { zoom: 1; background-color:#eee; cursor:default; opacity:0.3; filter:alpha(opacity=30); } .pagination ul li.next span span { padding:0; border:0; background:url(../graphics/ui/uiSprite.png) no-repeat -32px 0; _background:url(../graphics/ui/uiSprite.gif) no-repeat -32px 0; height:16px; width:16px; min-width:16px; } .pagination ul li.previous span span { padding:0; border:0; background:url(../graphics/ui/uiSprite.png) no-repeat -16px 0; _background:url(../graphics/ui/uiSprite.gif) no-repeat -16px 0; width:16px; height:16px; min-width:16px; } .pagination ul li span:hover { background-color:#ccc; } .pagination ul li.last { margin-left:20px; } .pagination ul li.first { margin-right:20px; }
Just a follow up to report that I put the site out on our web server and as you suggested, the fb and +1 buttons now display after doing so. Thanks again.