You are not logged in. Please login or register.
I am using the following...
http://manos.malihu.gr/jquery-custom-content-scroller/
to try to create a better looking site, instead of the scrollbar. However I cannot figure out what I am doing wrong, and why it will not work when inside Monstra. (It works perfectly, and without a problem outside of Monstra.)
@korey.badgley
here is only monstra cms and not wordpress is your site friend Mano
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Google Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- Reset iPhone Viewport & Initial Scale -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> malihu
| web design</title>
<link rel="shortcut icon" href="http://manos.malihu.gr/wp-content/themes/malihu/images/favicon.ico" type="image/x-icon">
<!-- HTML5 and css3 media queries - old IE enabling scripts -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<!-- rss, pingback url, archives etc. -->
<link rel="alternate" type="text/xml" title="malihu Posts RSS feed - RSS .92" href="http://feeds.feedburner.com/malihu" />
<link rel="alternate" type="application/rss+xml" title="malihu Posts RSS feed - RSS 2.0" href="http://feeds.feedburner.com/malihu" />
<link rel="alternate" type="application/atom+xml" title="malihu Posts RSS feed - Atom 0.3" href="http://feeds.feedburner.com/malihu" />
<link rel="alternate" type="application/rss+xml" title="malihu Comments RSS feed" href="http://feeds.feedburner.com/CommentsForMalihu" />
<link href='http://fonts.googleapis.com/css?family=Damion|Oswald|Alice' rel='stylesheet' type='text/css'>
<script type="text/javascript">
window._wpemojiSettings = {"baseUrl":"http:\/\/s.w.org\/images\/core\/emoji\/72x72\/","ext":".png","source":{"concatemoji":"http:\/\/manos.malihu.gr\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.2.4"}};
!function(a,b,c){function d(a){var c=b.createElement("canvas"),d=c.getContext&&c.getContext("2d");return d&&d.fillText?(d.textBaseline="top",d.font="600 32px Arial","flag"===a?(d.fillText(String.fromCharCode(55356,56812,55356,56807),0,0),c.toDataURL().length>3e3):(d.fillText(String.fromCharCode(55357,56835),0,0),0!==d.getImageData(16,16,1,1).data[0])):!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g;c.supports={simple:d("simple"),flag:d("flag")},c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.simple&&c.supports.flag||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
</script>
<style type="text/css">
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>
<!-- CSS -->
<link rel="stylesheet" href="http://manos.malihu.gr/wp-content/themes/malihu/style.css" />
</head>
<body id="top" style="min-width:0;" itemscope itemtype="http://schema.org/WebPage">
<header class="clearfix" itemscope itemtype="http://schema.org/WPHeader">
<style>
#malihu-cookies{
display: none;
clear: both;
width: 100%;
font-family: georgia,serif;
font-size: 13px;
position: absolute;
top: 10px;
color: #eb3755;
text-align: center;
padding: 5px 0;
font-style: italic;
}
#malihu-cookies-accept{
display: inline-block;
text-decoration: none;
text-transform: uppercase;
padding: 0 6px;
border-radius: 5px;
border: 1px solid #eb3755;
margin-left: 10px;
font-size: 10px;
font-style: normal;
text-shadow: none;
font-family: verdana;
}
/*#comments .comment-container,*/ /*#comments>ol{ overflow: auto; }*/
#comments .comment-container .comment-content{ /*min-width: 320px;*/ }
#comments li{ min-width: 480px; }
#comments>ol>li{ overflow: auto; min-width: 0; }
.gen-ad-placeholder .in-content-responsive-ad{ display:inline-block;min-width:100px;max-width:970px;width:100%;max-height:300px; }
.articles .single .content ul._faq-list{ list-style: none; }
._faq-list ._faq{ padding: 10px 0; }
._faq-list ._q h4{ font-size: 115% }
._faq-list ._q a{ text-decoration: none; }
._faq-list ._q + div{ display: none; border-left: 1px dotted #ccc; margin: 10px; padding: 10px 20px; }
._faq-list ._faq:target ._q + div{ display: block; }
#filterform{ margin: 20px; }
#filterinput{
padding: 8px;
width: 320px;
max-width: 100%;
border: 0;
background: rgba(255,255,255,.9);
color: #3927bb;
font-family: georgia,serif;
font-size: 15px;
font-style: italic;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.2); -moz-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.2); box-shadow: inset 1px 1px 1px rgba(0,0,0,0.2);
}
.comment-content :not(pre)>code[class*="language-"]{ padding: 0; }
#comments .comment-content p>br+code{
display: inline;
margin-top: 0;
}
@media (max-width: 640px){
.links-ad, .content .gen-ad-placeholder{ /*display: none;*/ }
code{ word-break: break-all; }
#comments code{ word-break: normal; }
#comments ul li{ margin-left: 40px; }
}
</style>
<div id="malihu-cookies">
<span>This website uses cookies to <a href="http://www.google.com/intl/en/policies/privacy/partners/" target="_blank" title="learn more">personalise ads and to analyse traffic</a> <a id="malihu-cookies-accept" href="#">ok</a></span>
</div>
<div class="logo"><a href="http://manos.malihu.gr">malihu</a></div>
<span class="tagline">web design</span>
<nav>
<ul class="clearfix">
<li><a href="http://feeds.feedburner.com/malihu" title="RSS feed" target="_blank" class="gen-icon social-rss"><span><svg version="1.1" viewBox="0 0 32 32" preserveAspectRatio="xMinYMin meet"><g></g><path d="M4.259 23.467c-2.35 0-4.259 1.917-4.259 4.252 0 2.349 1.909 4.244 4.259 4.244 2.358 0 4.265-1.895 4.265-4.244-0-2.336-1.907-4.252-4.265-4.252zM0.005 10.873v6.133c3.993 0 7.749 1.562 10.577 4.391 2.825 2.822 4.384 6.595 4.384 10.603h6.16c-0-11.651-9.478-21.127-21.121-21.127zM0.012 0v6.136c14.243 0 25.836 11.604 25.836 25.864h6.152c0-17.64-14.352-32-31.988-32z"></path></svg></span></a></li>
<li><a href="https://twitter.com/malihu" title="@Twitter" target="_blank" class="gen-icon social-twitter"><span><svg version="1.1" viewBox="0 0 32 32" preserveAspectRatio="xMinYMin meet"><g></g><path d="M32 6.076c-1.177 0.522-2.443 0.875-3.771 1.034 1.355-0.813 2.396-2.099 2.887-3.632-1.269 0.752-2.674 1.299-4.169 1.593-1.198-1.276-2.904-2.073-4.792-2.073-3.626 0-6.565 2.939-6.565 6.565 0 0.515 0.058 1.016 0.17 1.496-5.456-0.274-10.294-2.888-13.532-6.86-0.565 0.97-0.889 2.097-0.889 3.301 0 2.278 1.159 4.287 2.921 5.465-1.076-0.034-2.088-0.329-2.974-0.821-0.001 0.027-0.001 0.055-0.001 0.083 0 3.181 2.263 5.834 5.266 6.437-0.551 0.15-1.131 0.23-1.73 0.23-0.423 0-0.834-0.041-1.235-0.118 0.835 2.608 3.26 4.506 6.133 4.559-2.247 1.761-5.078 2.81-8.154 2.81-0.53 0-1.052-0.031-1.566-0.092 2.905 1.863 6.356 2.95 10.064 2.95 12.076 0 18.679-10.004 18.679-18.68 0-0.285-0.006-0.568-0.019-0.849 1.283-0.926 2.396-2.082 3.276-3.398z"></path></svg></span></a></li>
<li><a href="http://www.facebook.com/malihuz" title="on Facebook" target="_blank" class="gen-icon social-fb"><span><svg version="1.1" viewBox="0 0 32 32" preserveAspectRatio="xMinYMin meet"><g></g><path d="M17.996 32h-5.996v-16h-4v-5.514l4-0.002-0.007-3.248c0-4.498 1.22-7.236 6.519-7.236h4.412v5.515h-2.757c-2.064 0-2.163 0.771-2.163 2.209l-0.008 2.76h4.959l-0.584 5.514-4.37 0.002-0.004 16z"></path></svg></span></a></li>
<li><a href="https://github.com/malihu" title="GitHub" target="_blank" class="gen-icon social-github"><span><svg version="1.1" viewBox="0 0 32 32" preserveAspectRatio="xMinYMin meet"><g></g><path d="M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM25.502 25.502c-1.235 1.235-2.672 2.204-4.272 2.881-0.406 0.172-0.819 0.323-1.238 0.453v-2.398c0-1.26-0.432-2.188-1.297-2.781 0.542-0.052 1.039-0.125 1.492-0.219s0.932-0.229 1.438-0.406 0.958-0.388 1.359-0.633 0.786-0.563 1.156-0.953 0.68-0.833 0.93-1.328 0.448-1.089 0.594-1.781 0.219-1.456 0.219-2.289c0-1.615-0.526-2.99-1.578-4.125 0.479-1.25 0.427-2.609-0.156-4.078l-0.391-0.047c-0.271-0.031-0.758 0.083-1.461 0.344s-1.492 0.688-2.367 1.281c-1.24-0.344-2.526-0.516-3.859-0.516-1.344 0-2.625 0.172-3.844 0.516-0.552-0.375-1.075-0.685-1.57-0.93s-0.891-0.411-1.188-0.5-0.573-0.143-0.828-0.164-0.419-0.026-0.492-0.016-0.125 0.021-0.156 0.031c-0.583 1.479-0.635 2.839-0.156 4.078-1.052 1.135-1.578 2.51-1.578 4.125 0 0.833 0.073 1.596 0.219 2.289s0.344 1.286 0.594 1.781 0.56 0.938 0.93 1.328 0.755 0.708 1.156 0.953 0.854 0.456 1.359 0.633 0.984 0.313 1.438 0.406 0.95 0.167 1.492 0.219c-0.854 0.583-1.281 1.51-1.281 2.781v2.445c-0.472-0.14-0.937-0.306-1.394-0.5-1.6-0.677-3.037-1.646-4.272-2.881s-2.204-2.672-2.881-4.272c-0.7-1.655-1.055-3.414-1.055-5.23s0.355-3.575 1.055-5.23c0.677-1.6 1.646-3.037 2.881-4.272s2.672-2.204 4.272-2.881c1.655-0.7 3.415-1.055 5.23-1.055s3.575 0.355 5.23 1.055c1.6 0.677 3.037 1.646 4.272 2.881s2.204 2.672 2.881 4.272c0.7 1.655 1.055 3.415 1.055 5.23s-0.355 3.575-1.055 5.23c-0.677 1.6-1.646 3.037-2.881 4.272z"></path></svg></span></a></li>
</ul>
</nav>
</header>
<nav id="drawer-menu">
<div class="drawer">
<div id="drawer-about-section">
<h4><a href="http://manos.malihu.gr/about">Hello!</a></h4>
<p class="clearfix"><span class="malihu-avatar-medium"></span> <strong>I’m Manos</strong> and this is my blog which is all about creating and sharing (free) stuff for developing websites.<br /> <a href="http://manos.malihu.gr/about#more-about">Read more</a> or <a href="http://manos.malihu.gr/contact">contact me</a>.</p>
</div>
<ul>
<li class="categories-list">
<h4>stuff</h4>
<ul>
<li><a href="http://manos.malihu.gr/category/plugins">Plugins</a></li>
<li><a href="http://manos.malihu.gr/category/templates-web-apps">Templates & web apps</a></li>
<li><a href="http://manos.malihu.gr/category/tutorials-snippets">Tutorials & snippets</a></li>
<li><a href="http://manos.malihu.gr/category/wordpress">WordPress</a></li>
</ul>
</li>
<li class="popular-list">
<h4>popular</h4>
<ul>
<li><a href="http://manos.malihu.gr/jquery-custom-content-scroller/">jQuery custom scrollbar</a></li>
<li><a href="http://manos.malihu.gr/page-scroll-to-id/">Page scroll to id</a></li>
<li><a href="http://manos.malihu.gr/jquery-thumbnail-scroller/">jQuery image/thumbnail scroller</a></li>
</ul>
</li>
<li class="tags-list">
<h4>tags</h4>
<ul class='wp-tag-cloud'>
<li><a href='http://manos.malihu.gr/tag/actionscript/' class='tag-link-47' title='4 topics' style='font-size: 14.5294117647px;'>Actionscript</a></li>
<li><a href='http://manos.malihu.gr/tag/css-2/' class='tag-link-37' title='2 topics' style='font-size: 12.5882352941px;'>css</a></li>
<li><a href='http://manos.malihu.gr/tag/image-gallery/' class='tag-link-30' title='3 topics' style='font-size: 13.6470588235px;'>image gallery</a></li>
<li><a href='http://manos.malihu.gr/tag/jquery/' class='tag-link-4' title='20 topics' style='font-size: 20px;'>jquery</a></li>
<li><a href='http://manos.malihu.gr/tag/navigation/' class='tag-link-16' title='7 topics' style='font-size: 16.2941176471px;'>navigation</a></li>
<li><a href='http://manos.malihu.gr/tag/page-scroll-to-id/' class='tag-link-49' title='2 topics' style='font-size: 12.5882352941px;'>page-scroll-to-id</a></li>
<li><a href='http://manos.malihu.gr/tag/resizable/' class='tag-link-50' title='1 topic' style='font-size: 11px;'>resizable</a></li>
<li><a href='http://manos.malihu.gr/tag/single-page-template/' class='tag-link-46' title='1 topic' style='font-size: 11px;'>Single-page template</a></li>
</ul>
</li>
<li>
<h4>archive</h4>
<a href="/blog/">View all articles chronologically</a>
</li>
</ul>
</div>
<a href="#" id="drawer-menu-toggle"><span></span><span></span><span></span></a>
<a href="#" id="drawer-menu-close">×</a>
</nav>
<section id="content" class="clearfix">
<section id="main" itemscope itemprop="mainContentOfPage">
<div class="articles">
<div id="text-4" class="whats-up widget_text"><h3>What’s new?</h3> <div class="textwidget"><p>Updated <a href="http://manos.malihu.gr/jquery-thumbnail-scroller/">Thumbnail scroller plugin</a> to version 2.0.3.<br />
Updated <a href="http://manos.malihu.gr/jquery-custom-content-scroller/">Custom scrollbar plugin</a> to version 3.0.9.<br />
Updated <a href="http://manos.malihu.gr/event-based-jquery-element-resize/">Event based jQuery element resize plugin</a> to version 1.0.1.</p>
</div>
</div>
<article class="post-1182 post type-post status-publish format-standard sticky hentry category-plugins category-tutorials-snippets tag-jquery tag-resizable" itemscope itemtype="http://schema.org/CreativeWork">
<h1 itemprop="headline"><a href="http://manos.malihu.gr/event-based-jquery-element-resize/">Event based jQuery element resize</a></h1>
<div class="article-excerpt clearfix">
<div class="article-description" itemprop="text">
<p>The script does not use any kind of timer(s) to detect size changes. It uses the resize event on (invincible) iframe(s) which makes it perform much better than other solutions which use timers to poll element size. The script detects size changes made from JS, CSS, animations etc. and it works on any element able to contain other elements (e.g. div, p, li etc.).</p>
</div>
<p class="article-meta"><a href="http://manos.malihu.gr/event-based-jquery-element-resize/#comments" title="4 Comments" class="comments-info" itemprop="commentCount">4</a>
<span class="update-info" itemprop="dateModified">Last updated on Apr 19, 2015</span>
Originally published on April 4, 2015 by <a href="http://manos.malihu.gr/author/admin/" title="Posts by malihu" rel="author">malihu</a>, under <a href="http://manos.malihu.gr/category/plugins/" rel="category tag">Plugins</a>, <a href="http://manos.malihu.gr/category/tutorials-snippets/" rel="category tag">Tutorials & snippets</a>.</p>
</div>
</article>
<article class="post-753 post type-post status-publish format-standard sticky hentry category-plugins category-wordpress tag-jquery tag-navigation tag-page-scroll-to-id" itemscope itemtype="http://schema.org/CreativeWork">
<h1 itemprop="headline"><a href="http://manos.malihu.gr/page-scroll-to-id/">Page scroll to id</a></h1>
<div class="article-excerpt clearfix">
<div class="article-description" itemprop="text">
<p><em>Page scroll to id</em> is an easy-to-use jQuery plugin that enables animated page scrolling to specific id within the document. The plugin replaces the default browser behaviour of “jumping” to page sections when links with href value containing hash (#) are clicked, by smoothly animating the page to those sections. You can use it for simple back-to-top links or complex, single-page website navigation and features include: adjustable animation speed, advanced animation easings, vertical and/or horizontal scrolling, ready-to-use classes for links highlighting etc.</p>
</div>
<p class="article-meta"><a href="http://manos.malihu.gr/page-scroll-to-id/#comments" title="299 Comments" class="comments-info" itemprop="commentCount">299</a>
<span class="update-info" itemprop="dateModified">Last updated on Oct 7, 2014</span>
Originally published on January 3, 2014 by <a href="http://manos.malihu.gr/author/admin/" title="Posts by malihu" rel="author">malihu</a>, under <a href="http://manos.malihu.gr/category/plugins/" rel="category tag">Plugins</a>, <a href="http://manos.malihu.gr/category/wordpress/" rel="category tag">WordPress</a>.</p>
</div>
</article>
<article class="post-197 post type-post status-publish format-standard has-post-thumbnail sticky hentry category-plugins tag-jquery" itemscope itemtype="http://schema.org/CreativeWork">
<h1 itemprop="headline"><a href="http://manos.malihu.gr/jquery-custom-content-scroller/">jQuery custom content scroller</a></h1>
<div class="article-excerpt clearfix">
<a href="http://manos.malihu.gr/jquery-custom-content-scroller/" title="jQuery custom content scroller" class="featured-image" itemprop="image">
<img width="400" height="300" src="http://manos.malihu.gr/wp-content/uploads/2014/10/custom-scrollbar.png" class=" wp-post-image" alt="jQuery custom content scroller" title="" /> </a>
<div class="article-description" itemprop="text">
<p>Highly customizable custom scrollbar jQuery plugin. Features include vertical and/or horizontal scrollbar(s), adjustable scrolling momentum, mouse-wheel (via <a href="https://github.com/brandonaaron/jquery-mousewheel" target="_blank">jQuery mousewheel plugin</a>), keyboard and touch support, ready-to-use themes and customization via CSS, RTL direction support, option parameters for full control of scrollbar functionality, methods for triggering actions like scroll-to, update, destroy etc., user-defined callbacks and more.</p>
</div>
<p class="article-meta"><a href="http://manos.malihu.gr/jquery-custom-content-scroller/#comments" title="4,568 Comments" class="comments-info" itemprop="commentCount">4,568</a>
<span class="update-info" itemprop="dateModified">Last updated on Jun 9, 2015</span>
Originally published on August 1, 2010 by <a href="http://manos.malihu.gr/author/admin/" title="Posts by malihu" rel="author">malihu</a>, under <a href="http://manos.malihu.gr/category/plugins/" rel="category tag">Plugins</a>.</p>
</div>
</article>
<article class="post-172 post type-post status-publish format-standard has-post-thumbnail sticky hentry category-plugins tag-jquery" itemscope itemtype="http://schema.org/CreativeWork">
<h1 itemprop="headline"><a href="http://manos.malihu.gr/jquery-thumbnail-scroller/">jQuery thumbnail scroller</a></h1>
<div class="article-excerpt clearfix">
<a href="http://manos.malihu.gr/jquery-thumbnail-scroller/" title="jQuery thumbnail scroller" class="featured-image" itemprop="image">
<img width="400" height="200" src="http://manos.malihu.gr/wp-content/uploads/2010/07/thumbnail-scroller-2.png" class=" wp-post-image" alt="jQuery thumbnail scroller" title="" /> </a>
<div class="article-description" itemprop="text">
<p>A thumbnail/image scroller that can be used as standalone or alongside lightboxes, gallery scripts etc. Features include: scrolling by cursor movement, buttons and/or touch, vertical and/or horizontal scrolling, customization via CSS and option parameters, methods for triggering events like scroll-to, update, destroy etc., user-defined callbacks functions and more.</p>
</div>
<p class="article-meta"><a href="http://manos.malihu.gr/jquery-thumbnail-scroller/#comments" title="680 Comments" class="comments-info" itemprop="commentCount">680</a>
<span class="update-info" itemprop="dateModified">Last updated on Aug 5, 2015</span>
Originally published on July 28, 2010 by <a href="http://manos.malihu.gr/author/admin/" title="Posts by malihu" rel="author">malihu</a>, under <a href="http://manos.malihu.gr/category/plugins/" rel="category tag">Plugins</a>.</p>
</div>
</article>
<div class="articles-nav clearfix">
<a href="/blog/" title="View all articles chronologically">Article archive</a>
</div>
</div>
</section>
<aside itemscope itemtype="http://schema.org/WPSideBar">
<div class="aside-section">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Sidebar top ad 3 -->
<ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px"
data-ad-client="ca-pub-2489642366368969"
data-ad-slot="3193548331"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class="aside-section clearfix">
<a href="https://secure1.inmotionhosting.com/cgi-bin/gby/clickthru.cgi?id=malihu&page=8&campaign=featured_link" class="aside-ad-link">VPS Hosting by InMotion Hosting</a><br />
Plans Starting at Just <strong>$29.99/mo</strong><br />
Rated 3 Out of 3 Stars by CNET.com!
</div>
<div class="aside-section">
<span class="donate-message">Everything published here is free</span>
<h3>
<form action="/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="S9GGW9ZSSRS8G">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
and be Awesome.
</h3>
<p>Did you find something useful that saved you time and effort? Did I somehow helped you make a great site? <a href="/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=UYJ5G65M6ZA28" target="_blank">Donate</a> and help keep software free and up-to-date :)</p>
</div>
<div class="aside-section">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Sidebar long ad -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:600px"
data-ad-client="ca-pub-2489642366368969"
data-ad-slot="6178124735"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</aside> </section>
<footer itemscope itemtype="http://schema.org/WPFooter">
<div class="content">
<div class="footer-section about contact">
<p><a href="http://manos.malihu.gr/about" title="About me">Manos Malihutsakis</a> blog. Creating and sharing (completely free) all kinds of web stuff.
<br /><a href="http://manos.malihu.gr/contact">Contact me</a> at <span class="address"></span>.</p>
</div>
<p>The work published on this blog is licensed under the <a rel="license" href="http://opensource.org/licenses/MIT" target="_blank">MIT License</a>. Like to help? <a href="https://github.com/malihu/" target="_blank">contribute code on Github</a> or <a href="/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=UYJ5G65M6ZA28" target="_blank">make a donation</a> :)</p>
<blockquote cite="http://www.gnu.org/philosophy/free-sw.html">«Free software» means software that respects users' freedom and community. Roughly, the users have the freedom to run, copy, distribute, study, change and improve the software. With these freedoms, the users (both individually and collectively) control the program and what it does for them. <span class="quote-source">— GNU, <em>The Free Software Definition</em></span></blockquote>
<a href="#top" class="back-to-top"><span><svg version="1.1" viewBox="0 0 24 24" preserveAspectRatio="xMinYMin meet"><g></g><path d="M20.561 9.439l-7.5-7.5c-0.586-0.586-1.535-0.586-2.121 0l-7.5 7.5c-0.586 0.586-0.586 1.536 0 2.121s1.536 0.586 2.121 0l4.939-4.939v14.379c0 0.828 0.672 1.5 1.5 1.5s1.5-0.672 1.5-1.5v-14.379l4.939 4.939c0.293 0.293 0.677 0.439 1.061 0.439s0.768-0.146 1.061-0.439c0.586-0.586 0.586-1.535 0-2.121z"></path></svg></span></a>
</div>
</footer>
<img alt='css.php' src="http://manos.malihu.gr/wp-content/plugins/cookies-for-comments/css.php?k=0e9dc04a18459b158cda1f04dcf3e422&o=i&t=447660714" width='1' height='1' /><script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script type='text/javascript' src='http://manos.malihu.gr/wp-content/themes/malihu/js/custom.min.js'></script>
<!-- analytics -->
<script type="text/javascript"></script>
<script>
(function($){
$(document).ready(function(){
if(!localStorage.getItem("malihu-cookies")){
$("#malihu-cookies").css("display","block");
}
$("#malihu-cookies-accept").click(function(e){
e.preventDefault();
$("#malihu-cookies").css("display","none");
localStorage.setItem("malihu-cookies", "true");
});
//faq filter test
var filterform=$("#filterform"),filterinput=$("#filterinput"),delay;
filterform.submit(function(e){
e.preventDefault();
});
filterinput.on("change search",function(){
var filter=$(this).val();
if(delay){
clearTimeout(delay);
delay=null;
}
delay=setTimeout(function(){
if(filter){
if(filter.replace(/\s/g, "").length>2){
var matches=$("._faq").find("._q:icontains("+filter+")").parent();
$("._faq","._faq-list").not(matches).css("display","none");
matches.css("display","block");
}
}else{
$("._faq").css("display","block");
}
},500);
}).keyup(function(){
$(this).trigger("change");
});
$.expr[":"].icontains=$.expr.createPseudo(function(arg){
return function(elem){
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
//comments code
$(".comment-content code[data-lang-html]").addClass("language-markup");
$(".comment-content code[data-lang-css]").addClass("language-css");
$(".comment-content code[data-lang-js]").addClass("language-javascript");
$(".comment-content code[data-lang-php]").addClass("language-php");
$(".comment-content code:not([class])").addClass("language-clike");
});
$(window).load(function(){
//adsense ad-block detection and message
setTimeout(function(){
var testad=$(".aside-section:first .adsbygoogle");
if(testad.length && !testad.html().length){
testad.after("<p id='ads-blocked-message' style='font-size:17px;line-height:24px;color:#eb3755;'><b>Hey!</b> If you're using <em>ad-block</em> software, please consider disabling it for this website. Thanks :)</p>");
}
},500);
});
})(jQuery);
</script>
</body>
</html>
<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/
Page Caching using disk
Served from: manos.malihu.gr @ 2015-08-16 08:17:06 by W3 Total Cache -->
i believe that he just gave a link to the actual plugin not to his website 
RomanArt is right.... This is just a jquery plugin that works on non-wp sites. Is there something I'm missing to make a jquery plugin work?
they asked u to use this code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="/path/to/jquery.mCustomScrollbar.concat.min.js"></script>
so put this one instead cause monstra has jquery connected already
<script src="/path/to/jquery.mCustomScrollbar.concat.min.js"></script>
add it in here footer.chunk.php and then add this one under the JS
<script>
(function($){
$(window).load(function(){
$(".content").mCustomScrollbar();
});
})(jQuery);
</script>Alright, I have tried that... and still have no luck. The only difference from when I tried was....
I put....the script (in the footer) in a snippet (If I remember right, that is what it is called, much like the included Google Analytics), then pasted that portion into the footer.chunk.php
Would that cause an issue?
I did some tests ... I noticed that when I add the code in morfy disappears the content itself and monstra
when I made a simple template worked without any problem
ok i found the problem!
the bootstrap problem breaks the Jquery Custom Scrollbar!
test template bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="http://manos.malihu.gr/repository/custom-scrollbar/demo/jquery.mCustomScrollbar.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div id="content-d">
<h1>Hello, world!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales est ac nulla consectetur vehicula. Vivamus at dolor rutrum, auctor nunc ut, dapibus turpis. Fusce metus nunc, maximus eget pulvinar sed, tincidunt vel lacus. Cras dapibus odio vel dui feugiat, vel tincidunt velit convallis. Pellentesque posuere venenatis justo, sit amet tristique lorem lobortis at. Vivamus sit amet eros leo. Nunc venenatis arcu mattis imperdiet pulvinar. Donec eu elit ornare, elementum nunc rutrum, fringilla leo. Sed imperdiet eu ipsum nec pulvinar. Vivamus ut hendrerit massa. Sed sed suscipit sapien. Proin velit leo, tincidunt ac dui sed, pretium tempor augue.</p>
<p>Cras et odio id ligula accumsan ullamcorper ac quis arcu. Nullam mattis libero massa, non hendrerit felis aliquet rhoncus. Vestibulum sit amet justo malesuada, blandit dolor ac, tristique justo. Ut orci mauris, semper vel orci et, efficitur eleifend lacus. Curabitur dapibus tincidunt massa ac congue. Donec egestas ipsum facilisis finibus convallis. Nullam eros lectus, luctus et ligula finibus, euismod vestibulum lorem. Sed mattis pulvinar eros, faucibus faucibus sapien volutpat sed. Nam blandit efficitur quam, id feugiat sapien ornare ut. Vestibulum vestibulum, enim sit amet aliquam lobortis, turpis turpis placerat ipsum, non posuere orci velit vitae augue.</p>
<p>Etiam at imperdiet magna. Pellentesque imperdiet tristique turpis eu eleifend. Vivamus a quam eu lacus viverra interdum sed et tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla interdum mi hendrerit sapien interdum, ut fringilla arcu convallis. Ut leo neque, luctus non venenatis quis, condimentum sit amet massa. Phasellus ut aliquet lorem. Sed et auctor nisl. Cras consequat tellus sed sem ultricies rhoncus. Mauris auctor placerat erat id rhoncus. Nunc dignissim suscipit nisl, a hendrerit lacus consectetur quis.</p>
<p>Nullam efficitur dapibus scelerisque. Sed commodo odio ornare elementum lobortis. Sed ut purus turpis. Cras in dapibus mi. Donec rutrum, eros auctor consectetur ornare, lectus orci congue nulla, quis lacinia ex metus eget mi. Suspendisse lobortis at ex vel hendrerit. Nulla porta est est, et convallis libero euismod ac. Nunc venenatis tortor vel bibendum rhoncus. Maecenas consequat scelerisque ante, sit amet fermentum urna. Vestibulum hendrerit semper aliquam. Mauris varius, risus sed pharetra ultricies, nulla dui viverra mi, ut elementum dui diam quis nibh. Donec pellentesque odio mi, porttitor efficitur augue molestie nec.</p>
<p>Integer et erat pellentesque, posuere massa ut, facilisis leo. Quisque vitae euismod risus, non rhoncus diam. Phasellus leo dolor, gravida at nisl id, suscipit porttitor mauris. Pellentesque tincidunt lacinia nunc sit amet ultrices. Sed a lacinia ex. Praesent sagittis mollis tempus. Praesent volutpat justo luctus, iaculis nunc eu, aliquet arcu. Nam et accumsan libero, quis lobortis lacus. Nullam interdum, turpis ut gravida pretium, lectus risus scelerisque justo, ut volutpat orci tellus eget lectus. Fusce nec pellentesque ante. Quisque congue ligula diam, a lobortis tortor porta ut.</p>
<p>Vestibulum malesuada diam facilisis quam pharetra, semper posuere neque volutpat. Nam massa libero, ornare a volutpat sed, sollicitudin sed risus. Integer gravida tempor augue quis pellentesque. Vivamus in nunc eu dolor hendrerit placerat nec eu nisl. Donec nec fermentum mi. Quisque efficitur vitae urna eget porttitor. Nunc non semper sem. Maecenas a sollicitudin orci. Morbi gravida eros eu neque sollicitudin sagittis. Quisque congue diam sit amet nunc dictum, at iaculis massa varius. Pellentesque viverra lorem vel porta aliquet. Nunc aliquam turpis quis ex tempus fringilla. Mauris laoreet diam eu justo sagittis, non aliquet purus viverra. Suspendisse potenti. Vestibulum ullamcorper eros ipsum, ac ultricies mi feugiat in.</p>
<p>Nunc tortor tellus, sollicitudin id felis vitae, condimentum accumsan lacus. Pellentesque suscipit porta justo, quis fermentum massa varius ornare. In nulla nulla, lobortis sed lectus vel, viverra maximus augue. Vivamus imperdiet sit amet diam ac scelerisque. Nunc nunc libero, mattis quis gravida nec, maximus vitae turpis. In hac habitasse platea dictumst. Fusce hendrerit dui at arcu tincidunt finibus. Etiam aliquet eget nisl eu pretium. Proin leo nisl, condimentum id justo nec, blandit pulvinar sapien. Pellentesque sodales risus eget quam porttitor mattis. Aenean rutrum tortor augue, eu accumsan dolor mattis a. Maecenas quis hendrerit lectus.</p>
<p>Vivamus feugiat mollis arcu, non dictum purus ultricies id. Morbi volutpat quam et leo tristique, vitae ornare tortor fringilla. Duis ac augue ut dui malesuada iaculis. Phasellus mollis orci sodales pretium elementum. Etiam varius nunc justo, et varius orci aliquet id. Cras sollicitudin felis sed dictum efficitur. Phasellus bibendum dolor vitae aliquet vehicula. Suspendisse potenti. Vivamus felis purus, viverra rutrum libero ac, tempus hendrerit lectus. Duis arcu enim, consequat a diam sit amet, iaculis vestibulum ante. Curabitur eget justo vitae nibh aliquam vulputate.</p>
<p>Praesent gravida in risus faucibus fermentum. Suspendisse a libero blandit, scelerisque lacus et, iaculis orci. Mauris dapibus, tortor feugiat congue rhoncus, erat ipsum vulputate urna, et mattis quam magna quis tortor. Aenean vehicula massa erat, et varius lacus dignissim sit amet. Ut scelerisque aliquam erat, non egestas est bibendum sagittis. Aliquam vulputate eros mauris, nec accumsan elit fermentum non. Proin at velit elit. Duis convallis nisl ac odio facilisis, ut sollicitudin nulla ornare. Vestibulum sagittis massa et vestibulum mattis. In consectetur odio nec ante congue, sit amet maximus mauris lacinia. In eleifend euismod mauris ac sollicitudin. Cras accumsan nulla sed varius commodo. Mauris suscipit ipsum ultrices efficitur tincidunt. Nulla ac consequat tortor.</p>
<p>Integer quis ligula tempor nulla maximus mattis. Sed elementum ligula neque, ac consequat sem rutrum vitae. Etiam a sagittis nibh. Maecenas metus velit, placerat eu ex eget, laoreet sollicitudin diam. Nunc vehicula a mi nec eleifend. Duis sed ligula ac lectus tincidunt aliquet at ac lectus. Morbi id elit vitae sapien condimentum fringilla et ut libero. Fusce massa mauris, dapibus et maximus sit amet, laoreet gravida metus.</p>
<p>Vivamus non nulla accumsan, pulvinar magna ut, iaculis magna. Quisque egestas ac sapien a condimentum. Phasellus nulla nibh, efficitur nec lorem ac, eleifend blandit ligula. Proin interdum, leo id condimentum euismod, mi nisl pellentesque massa, a varius lectus nisi non nulla. Morbi porttitor accumsan congue. Phasellus vel commodo augue. Maecenas purus tortor, imperdiet quis sagittis nec, viverra ut nisl. Fusce quis mauris nulla. Nam a libero varius, sollicitudin lorem vel, vulputate massa. Etiam et nunc volutpat, sollicitudin neque sit amet, accumsan mi. Sed viverra diam ut massa mollis dignissim.</p>
<p>Sed odio ante, malesuada sit amet turpis laoreet, lobortis suscipit mi. In facilisis mollis libero vitae tincidunt. Donec a neque nec justo iaculis commodo. Aliquam erat volutpat. Duis sit amet nibh vitae metus aliquet semper. Etiam quis ex in eros commodo scelerisque ut eget augue. Aliquam erat volutpat. Donec bibendum purus nec dictum accumsan. Cras iaculis eget eros ac dictum.</p>
<p>Donec at tellus odio. Pellentesque aliquam ultricies dignissim. Vestibulum eget hendrerit purus. Fusce lorem diam, mollis quis cursus eu, cursus at metus. Morbi euismod odio sit amet tellus molestie gravida. Integer lobortis nulla sit amet ullamcorper semper. Nulla a molestie mauris. Morbi malesuada facilisis enim, in pulvinar elit tempor vitae. Nunc cursus purus vel tortor consequat, ut condimentum quam vulputate. Praesent tincidunt leo in pulvinar malesuada. Quisque diam leo, mattis sed odio vel, vehicula rhoncus libero. Aenean lobortis ipsum condimentum sem accumsan, dignissim pretium neque tincidunt. Etiam vulputate, lectus et interdum porttitor, risus urna accumsan nunc, vitae ullamcorper ipsum enim id dolor. Donec nec quam quis mauris pretium egestas quis nec enim. Suspendisse semper aliquet est sit amet lobortis.</p>
<p>Nunc rutrum, lectus non maximus vehicula, eros enim iaculis lectus, eu pharetra dui ipsum in massa. Aliquam erat volutpat. Praesent mi diam, feugiat in libero vitae, egestas tincidunt sapien. Mauris nec massa convallis, dictum mi a, dignissim augue. Sed a nisi fringilla, congue libero in, ultricies dui. Cras sed varius lacus, eu rhoncus velit. Proin eget lobortis nisl. Donec rhoncus ultrices tincidunt. Cras venenatis porttitor odio, et pharetra leo molestie in. Fusce non dui felis. Phasellus auctor sem lorem, imperdiet vehicula dui vestibulum vel. Quisque vel enim et lacus euismod mattis. Quisque pretium, dui a auctor egestas, dui metus mollis eros, id faucibus risus diam eget neque.</p>
<p>Duis ut velit lacinia, pulvinar urna eu, condimentum massa. Aenean auctor purus velit, et fringilla ligula cursus sit amet. Vestibulum elementum justo nec vulputate feugiat. Pellentesque mollis consequat nunc sit amet posuere. Proin rhoncus eget nibh in vehicula. Maecenas consequat egestas nibh, nec rutrum mi malesuada ac. Ut facilisis ligula et odio lobortis ullamcorper vitae ac ipsum. Nunc eget leo interdum, aliquet orci sit amet, consectetur neque. Sed in dui ante.</p>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://manos.malihu.gr/repository/custom-scrollbar/demo/jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).load(function(){
$("#content-d").mCustomScrollbar({theme:"dark"});
});
})(jQuery);
</script>
</body>
</html>Could you explain the solution in more detail?
Ok... so here is my code..... (Using PHP calls to get full path in some instances..)
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="http://localhost/TestCMS">
<link rel="dns-prefetch" href="//www.google-analytics.com">
<title>Getting CMS working - Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Site description">
<meta name="keywords" content="Site keywords">
<meta name="robots" content="index, follow">
<meta name="generator" content="Powered by Monstra 3.0.1">
<meta property="og:site_name" content="Getting CMS working">
<meta property="og:url" content="http://localhost/TestCMS/">
<meta property="og:title" content="Home | Getting CMS working">
<meta itemprop="url" content="http://localhost/TestCMS/">
<meta itemprop="name" content="Home | Getting CMS working">
<link rel="stylesheet" href="http://localhost/TestCMS/tmp/minify/frontend_site.minify.css?2" type="text/css">
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.js"></script>
<![endif]-->
<link rel="icon" href="http://localhost/TestCMS/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="http://localhost/TestCMS/favicon.ico" type="image/x-icon">
</head>
<body>
<div class="wrapper mCustomScrollbar _mCS_1 mCS-autoHide mCS_no_scrollbar" style="position: relative; overflow: visible;">
<div id="mCSB_1" class="mCustomScrollBox mCS-minimal-dark mCSB_vertical mCSB_outside" tabindex="0">
<div id="mCSB_1_container" class="mCSB_container mCS_y_hidden mCS_no_scrollbar_y" style="position: relative; left: 0px; top: 0px;" dir="ltr">
<header class="header">
<h2 class="logoText">KB-Web</h2>
<nav class="nav">
<div class="mobileNav"></div>
<ul>
<li>
<a href="#Home" data-title="Home">Home
<span class="rotateLine">|</span>
</a>
</li>
<li>
<a href="#About" data-title="About">About
<span class="rotateLine">|</span>
</a>
</li>
<li>
<a href="#Projects" data-title="Projects">Projects
<span class="rotateLine">|</span>
</a>
</li>
<li>
<a href="#Contact" data-title="Contact">Contact
<span class="rotateLine">|</span>
</a>
</li>
</ul>
</nav>
</header>
<main class="main">
<section class="sections" title="Home" id="Home">
</section>
<section class="sections" title="About Me" id="About">
</section>
<section class="sections" title="Projects" id="Projects">
</section>
<section class="sections" title="Contact" id="Contact">
</section>
</main>
<footer class="footer">
<h5>
© Korey Badgley 2015
</h5>
</footer>
<div class="top">
<a href="#" data-title="Home">Top</a>
</div>
</div>
</div>
<div id="mCSB_1_scrollbar_vertical" class="mCSB_scrollTools mCSB_1_scrollbar mCS-minimal-dark mCSB_scrollTools_vertical" style="display: none;">
<div class="mCSB_draggerContainer">
<div id="mCSB_1_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height: 50px; height: 0px; top: 0px;" oncontextmenu="return false;">
<div class="mCSB_dragger_bar" style="line-height: 50px;"></div>
</div>
<div class="mCSB_draggerRail"></div>
</div>
</div>
</div>
<script src="http://localhost/TestCMS/public/assets/js/jquery.min.js"></script>
<script src="http://localhost/TestCMS/public/assets/js/jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript">
(function($){
$(window).load(function(){
$(".wrapper").mCustomScrollbar({
theme: "minimal-dark",
scrollInertia: 200,
mouseWheel: {
enable: true
},
keyboard:{
enable: true
},
contentTouchScroll: true
});
//alert(" WINDOW LOADED!");
});
$(".nav a").click(function(e){
e.preventDefault();/*
alert($('header').height());*/
var title = e.target.getAttribute("data-title");
var clickedName = "#" + title;
var containHeight = $(clickedName).position().top-60;
//alert(containHeight);
if(title == "Home"){
$('.wrapper').mCustomScrollbar(
'scrollTo',
['top', null],
{
scrollEasing: "easeIn",
scrollInertia: 600
}
);
} else {
$('.wrapper').mCustomScrollbar(
'scrollTo',
containHeight,
{
scrollEasing: "easeIn",
scrollInertia: 600
}
);
}
});
})(jQuery);
</script>
</body>
</html>This does NOT work.... (Not sure what I'm doing wrong....Is Bootstrap Mandatory?)
Good morning friend Manos,
yes mandatory bootstrap monstra end morfy made with bootstrap!
I do not know to tell you more information why breaks Jquery Custom Scrollbar when he is together with bootstrap
xxwebplus, this still does not work. I used your exact code, posted...and it did not work. The normal scrollbar for browsers should not be there, and instead be replaced with the jquery scrollbar.
@mano
we can talk more directly;
well it works just fine for me on default monstra, u had to add style.css as well, their documentation suck
u can download my default theme and see how i did it, actually it was really easy/fast/ just copy pasting lol
Download Default.zip
but u will need to find our which classes in "style.css" u have to remove cause there are a lot of styles u do not need
i clear the file style.css removed all useless crap for this specific scrolling:
body{
background-color: #222;
color: #eee;
font-size: 14px;
margin: 0;
padding: 0;
min-width: 480px;
}
.content{
overflow: auto;
position: relative;
padding: 20px;
background: #333;
margin: 10px;
width: 740px;
max-width: 97%;
height: 400px;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.content.hidden{ display: none; }
.content.light{
background-color: #ddd;
color: #333;
}
.content hr{
margin-bottom: -10px;
border-top: 1px solid rgba(0,0,0,0.7);
}
.content.light hr{
border-bottom: 1px solid rgba(255,255,255,0.6);
border-top: 1px solid rgba(0,0,0,0.1);
}
.content p{ margin: 30px 0; }
.content p:last-child{ margin-bottom: 5px; }
.content p:nth-child(odd), .content.light p:nth-child(odd){
background: #444;
background: rgba(255,255,255,0.1);
padding: 5px 10px;
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
}
.content p:nth-child(3n+3){
color: #bbb;
background: none;
padding: 0;
}
.content.light p:nth-child(odd){
background: #fff;
background: rgba(255,255,255,0.8);
}
.content.light p:nth-child(3n+3){ color: #666; }
.content p.full:nth-child(odd), .content p.half:nth-child(odd),
.content p.full:nth-child(3n+3), .content p.half:nth-child(3n+3){
background: none;
padding: 0;
}
.content h2{
font-size: 200%;
line-height: 130%;
}
.content h2:first-child{ margin-top: 5px; }
.content:nth-child(odd) h2{
font-family: "Oswald", sans-serif;
font-weight: 300;
font-style: normal;
}
hr + .content:nth-child(odd) h2{
font-family: "Lobster Two", "Georgia", serif;
font-weight: 700;
font-style: italic;
}
.content.light h2{ color: inherit; }
.content img{
margin: 0;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
padding: 3px;
background: rgba(0,0,0,0.2);
}
.content.light img{ background: rgba(255,255,255,0.4); }
.content input[type='text'], .content textarea{
border: none;
background: transparent;
background-color: #bbb;
background-color: rgba(255,255,255,0.6);
min-height: 20px;
padding: 5px;
-moz-box-shadow: inset -1px -1px 1px rgba(255,255,255,0.6), inset 3px 3px 20px rgba(0,0,0,0.5);
-webkit-box-shadow: inset -1px -1px 1px rgba(255,255,255,0.6), inset 3px 3px 20px rgba(0,0,0,0.5);
box-shadow: inset -1px -1px 1px rgba(255,255,255,0.6), inset 3px 3px 20px rgba(0,0,0,0.5);
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
width: 50%;
font-size: inherit;
font-family: inherit;
color: #222;
}
.content textarea{
min-height: 80px;
width: 70%;
}
.content .half img{
max-width: 48%;
margin: 0 0 2% 2%;
}
.content .half img:nth-child(odd){ margin: 0 2% 2% 0; }
.showcase .content{
float: left;
width: 340px;
height: 300px;
}Gonna try your .zip Roman... I'll let you know if it works, and if so, then that will be perfect!
Ok..... Update..... It did work, however it does not do the entire page, only does the small area?
OH WAIT, I see what your doing... however I need it to be on the full page, (<div class="wrapper"/>) so I was trying to do the JS way of this, but it seems that only the HTML way of initializing it works?
