Augment Pic allows you to place captions on images anywhere in your site. Comments can glide beautifully in from the top, bottom, left and right sides.
Augment Pic also takes advantage of some very cool effects currently supported only by Chrome & Safari, but trends suggest support in all other modern browsers will soon follow. These image effects include
Blur, Brightness, Contrast, Grayscale, Hue-Rotate, Invert, Opacity, Saturate, and Sepia.
Our cleanAccordion jQuery accordion stack is one of our most popular stacks, fully responsive, and SUPER light weight (low cost loading time).
Due to its popularity and power we get a ton of update requests and deal out a ton of free updates.
Our latest update includes the following additional features and fixes:
If you already own then go grab your free update HERE.
A couple very small patches were made to cleanTabs and the Carpe Diem theme.
For updates please use our Purchase Order Lookup page.
Clean Response is a fully responsive layout stack. It will ensure that content will look good no matter the size of screen. Basically, all your columns and content will fit and adjust to any screen and device.
This stack runs at $7.95, though if you are subscribed to our e-mail list or if you Like us on Facebook you’ll receive a 30% discount code good until April 5th.
cleanTabs is one of our top selling stacks and we have received tons of requests over time, which has led to a huge update adding some awesome new features and some compatibility fixes.
If you wanted separate install options for the snippets used in the Simple Text page, which come as free installs with the free stack, then you have a couple other options.
1. You can manually add them yourself using the codes below.
2. You can simple copy and paste the code below without ever installing them as snippets.
The code in these snippets controls the CSS and can be dragged and dropped in the Page Info > Header > CSS section.You then need to create the HTML that will take the CSS styling. These are not in the Snippets and can be easily created by copying and pasting this code:
1 2 3 |
<a class="buttonDark" href="http://YourLinkSomewhere.com">Button for Dark Backgrounds</a> <a class="buttonLight" href="http://YourLinkSomewhere.com">Button for Light Backgrounds</a> <a class="buttonSimple" href="http://YourLinkSomewhere.com">Button that's just dang Simple</a> |
The snippets are not necessary to have in your Snippets section in Edit Mode either (so if you want that section cleaned up you can use the following codes):
For Button on Dark backgrounds
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
.buttonDark {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 1px #000;
width: 80px;
text-align: center;
cursor: pointer;
margin: 20px auto;
display: block;
padding: 7px 15px !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: 0px 1px 2px rgba(0, 0, 0, .7);
border: 1px solid rgba(0,0,0,0.5);
box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
-webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
-moz-box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
-ms-box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
-o-box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
background-image: -moz-linear-gradient(top, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.05) 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,0.05)), color- stop(100%,rgba(0,0,0,0.05)));
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
background-image: -o-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
background-image: -ms-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
background-image: linear-gradient(to bottom, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
}
|
For Button on Light backgrounds
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
.buttonLight {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 1px #FFF;
width: 80px;
text-align: center;
cursor: pointer;
margin: 20px auto;
display: block;
padding: 7px 15px !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: 0px 1px 2px rgba(0, 0, 0, .7);
border: 1px solid rgba(0,0,0,0.5);
box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
-webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
-moz-box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
-ms-box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
-o-box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
background-image: -moz-linear-gradient(top, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.05) 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,0.05)), color-stop(100%,rgba(0,0,0,0.05)));
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
background-image: -o-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
background-image: -ms-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
background-image: linear-gradient(to bottom, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
}
|
The Simple Button
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.buttonSimple {
text-align: center;
cursor: pointer;
background: #349BCE;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 3px solid #4CAAD9;
padding: 7px 15px !important;
display: block;
margin: 20px auto;
width: 90px;
}
.buttonSimple:hover {
background: #4CAAD9;
}
.buttonSimple:active {
background: #349BCE;
border: 3px solid #349BCE;
}
|
Poseidon powerfully & beautifully brings subtle design features, powerful functionality, and a fully responsive design. The navigation menu is fixed to the top of the page so every user never loses their ability to quickly navigate through your site. As users move throughout the site subtle web animation techniques employ an unforgettable experience without being too flashy. This theme is perfect for coupling with Hang Glider creating a dazzling experience as user’s screen sizes change from landscape to portrait on mobile devices and tablets.
Huge update to cleanAccordion adds some great new customization options that allows for some new theming – definitely check out the new preview page on the Light & Dark theme pages for ideas.
Changelog:
Simple Text is a Free RapidWeaver Stack that takes the existing Text stack and adds some extra customization options. These customization options allow you to change text and link colors, transition effects for links, HTML 5 wrapping elements, text justification, text shadow, and most significantly text side changes based on screen sizes (i.e. iPads & iPhones).
Comes with 3 Free button snippets.
There’s no questioning it, typography is a huge issue in web design. Actually, this is really of little surprise considering its importance in all published materials throughout history, though more significantly in the last century. A choice of font can be used to emphasize things, to convey volume and mood, to look professional or friendly. These days typography is becoming more of an art than ever before as well – many artists turn to it to display their expressions.
Friendly
HEADLINE
Consider these two very familiar fonts, Verdana & Times New Roman, which can convey very different feelings basic on the simple serif or lack of serif on the font. The use of all uppercase or combination of uppercase and lowercase can make a huge different as well.
In the end, when you design you want options. Some of this is an art, though a lot of it can be done well by most people off of gut instinct (in my opinion).
There are currently only 2 predominant commercial free font suppliers in the market: Font Squirrel and Google Web Fonts. My personal favorite, based on better web browser compatibility and selection is Font Squirrel, though Google Web Fonts are not a good idea to ignore. Both are very easy to use and implement into your site, though don’t get carried away as fonts have a significant impact on website load time currently (something I imagine will change in the near future, but hasn’t yet).
If you have several projects then paying for fonts is not a bad way to go either and can supply you with a lot of very impressive fonts. For this I highly recommend, above all other paid font services and vendors, Adobe Type.
There were some display issues with the previous version that appeared in Opera and Firefox. These issues were caused by some CSS 3 techniques that are not fully supported in those browsers at the time, though I was able to find a solution that did not use any CSS 3, which should help in backwards compatibility and cross-browser support.
In the world of Search Engine Optimization (SEO) not only does Google write the rules, but they also give away a ton of powerful and free tools. I’m not going to go into great detail about each one, but they are all worth your time if you are aiming to do some stellar SEO link building and will help you out in extreme ways when conducting any SEO campaign.
Another service that is not free, though worth the cost for many businesses is SEM Rush. SEM Rush is far more intuitive than any of the Free Tools when it comes to helping suggest keywords and giving a competitive insight.
We do often purchase stock photos from professionals at a variety of sites, such as Big Stock though often you can find some great free goodies out there. For Photos the best Commercial Free place to look is Flickr, though you can’t just go there and start looking or it will be impossible to sort through everything that is commercial free and not commercial free. The trick is to utilize the Flickr: Advanced Search option. When on that page navigate to the bottom and locate the “Creative Commons” section and check all the boxes that apply (I usually select them all).
Note that you should still always check the conditions of the photo used as they can have requirements, such as photographer recognition, and they can vary from photo to photo throughout the photographers flickr page.
There are actually quite a lot of websites out there that offer free textures or patterns and also a good amount of sites that sell them. However, I am going to highlight one that is perhaps the most popular out of them and provides a great inventory that can be used for nearly any website – Subtle Patterns.
Sorry for an update so close to the release – this is definitely not typical. Embarrassingly I had left a line of code commented out during some last minute testing and forget to un-comment the line of much-needed code.
The result, some of you may already notice a broken image displayed below cleanQuotes with no Author Icon. I believe this is occurring only in Firefox and Opera. Regardless, I have un-commented this section and the code is active once more removing this annoying visual.
Please download once more – sorry for the inconvenience too.
Major Update to Hang Glider in the new 2.0 version makes some much needed improvements as well as implements an all new lightbox that is fully responsive and animated – making Hang Glider truly fully responsive and fully animated. New options are added to turn the Hang Glider jQuery call and Lightbox call On/Off if you are using other tools or multiple instances of the Stack.
Read more about the update in the Changelog.
Fully Responsive stack with beautiful design and animation built specifically to display customer reviews, testimonials and other site promotions. Great customization options coupled with simple and intuitive controls make cleanQuotes enjoyable and impressive.
Easily drag and drop quote sections designed specifically for customer reviews and testimonials. Simple design with subtle animation makes cleanQuotes great for any online business.
Testimonial / cleanQuote’s inner section allows you to place other stacks inside easily. This is designed to perfectly implement the built-in Stacks (i.e. Text, HTML).
Built-in Themes and Customization options allow you to adapt cleanQuotes to any RapidWeaver theme. The light weight plugins ensures fast loading speed and browser adaptability.
I had a request from a customer recently who’s responsive site created a drop down menu when the users screen was under a certain size (standard for all responsive designs and done for mobile devices in this instance). The drop down menu on mobile simple displayed the text “MENU” though the user wanted to replace that with an image instead. Fortunately this is very simple to do with JavaScript, though I thought this was worthwhile to save here as a snippet in case it benefits other users as well.
The HTML in this example is as follows:
1 |
<a href="http://YOUR_HOME_PAGE.com" class="imageSwitch">MENU</a> |
1 2 3 4 5 6 |
$().ready(function () {
$('.imageSwitch').each(function () {
string = $(this).text('MENU');
$(this).html('<img src="YOUR_IMAGE_LOCATION/NAME.png" alt="' + string + '" />');
});
});
|
Obviously the image source (SRC) needs to change to the image location and name of your image. Likely you’ll have this image uploaded in your Resources section, which you can then click on the image and see the uploaded directory and name provided that you’ve already published your site.
Offers a simple to use and customize fully responsive slider stack. GlideSlide uses the latest CSS3 techniques to emulate parallax animation effects creating a beautiful and modern design for your sliders.
GlideSlide is built as 3 Stacks in one creating a easy and intuitive drag and drop design to its use. GlideSlide is specifically made for themes that offer extra content sections in the Slider or Top Banner section of the theme.
To find resources to help improve your coding is not difficult on the internet these days – fact it’s hard not to find your answers in many cases. You can find blogs and forums from just about any web design topic such as HTML, CSS, jQuery, JavaScript or even more advanced topics like MySQL and PHP. Over time I’ve found a hand full that are my personal favorites and that I’d like to recommend if you are a RapidWeaver user who wants to sharpen their coding skills. RapidWeaver is great software for users who want to avoid having to know much if any code, though knowing code is only going to enhance your experience and unlock more possibilities for you. The choice is yours.
1. Code Academy
For free help it really is hard to beat Code Academy. They don’t cover every topic, though they do touch on some great foundation topics and give you a chance to see your code live.
2.
I’ve been a member at Lynda.com for years now and have used it to learn most of what I know today. They do not cover all topics or even every piece of software, but they do have a very extensive library and its growing all the time. In addition, they cover not only topics of web design, but also graphic design, SEO, business, and much much more.
On the downside Lynda.com does require a $25/mo membership fee, though I think it’s well worth every penny. You can also upgrade your membership and pay $37.50/mo which will give you access to all their exercise files.
3. CSS-Tricks
If you subscribe to a blog and want to improve your coding then definitely add CSS-Tricks to your list… if you haven’t already. Chris Coyier continues to delve deeper into some fun and amazing coding that doesn’t stop at CSS. In addition, he provides great example and snippets for achieving CSS and jQuery techniques.
What’s Yours?
There are lots more tools out there in the internet for increasing your skills and I’ve only touched on 3 ones that I love here. If you have one you love please comment and share what you love about it so much. If you want to explore other great ones that are not my personal favorites, but still very useful, check out these:
If the headline of this post didn’t interest you much then hats off to you – you’ve probably realized that Microsoft’s onslaught of advertisements, as impressive as they were, had little to no truth in them and the Internet Explorer (IE) is perhaps the worst internet browser on the market. Perhaps you don’t use IE for another purpose though… there’s probably a slew of reasons not to use it.
If you are a developer IE 10 does move in the right direction now finally supporting much needed CSS3 effects that pretty much every other browser already supports. On top of that you’ll still need to code accordion to IE 9 because IE doesn’t automatically upgrade its users (in any versions of the browser) and IE 10 requires Windows 7.
The browser does run a tested 20% faster, though if you are running Windows XP and upgrade to 7 to get IE 10 then your Windows software will now be running about 20% slower (or worse), which means your browser may not be running faster at all and now your whole computer runs slower.
If you are not a developer and you already have Windows 7 then the upgrade is a “no brainer” and you should definitely go download it. Though I’m guessing you will not notice too much change. Maybe it will launch a tiny bit quicker and you will now be able to see some of the cool CSS 3 effects such as gradients and transitions (subtle animation effects). However, you still will not have access to inspect code elements like you can in most other browsers now, which is a huge downside in my opinion.
My recommendation – if you haven’t already just forget IE all together and go get Google Chrome.
If you just can resist though, go ahead and upgrade to IE 10.
Resources – SitePoint
Our new theme Aether offers a minimal & business design with a rich set of customization options and all new design features. Aether is fully responsive and works in all modern browsers (works back to IE8). The theme takes advantage of some very awesome HTML5 & CSS3 effects to add an even more beautiful experience for visitors using the latest browsers, though will still appear great in older browsers.
Aether features both a built in slider and an extra content section for imported sliders (this is typically done with plugins like PlusKit). In addition, Aether comes packed with the Glide Slide slider completely FREE. Glide Slide is a fully responsive slider that allows inner content to be placed with a transition effect that emulates parallax animations.
WeaverPix has been tested inside the extra content slider section and performs beautifully – demos of some of our favorite sliders from WeaverPix has been displayed inside the preview of Aether as well.
Finally, Aether comes loaded with a fully responsive lightbox for your photo galleries.
