Clicky

RapidWeaver Stacks, PlugIns, Themes ...
menu Menu

rjhweb design

rjhweb design

fast, flexible fair

Ninja News

RapidWeaver News & Reviews

Back To The Top

There are a number of stacks available that can add a button that will beam your visitor back to the top of a RapidWeaver Stacks page. RWExtras just published one with a difference. Apart from being extremely customisable, Back To Top lets you add the button to non-Stacks pages.

RWExtras Back To TopBack To Top is the stack that you'll need if you wish to build attractive buttons to send a user back to the top of a webpage, but don't want to use Photoshop to build sprites and don't want to do any complicated programming .
A choice of customisable options lets you create a button of just about any shape, size, position and colour. And a useful 'view generated source code' setting lets you copy the generated code quickly for reuse in non-Stack pages.

Stack settings

Back To Top General Settings
Placement - Fixed (default) Relative,
Position – Top/Bottom/Left/Right
Margins
Offset – Page scroll before active
Scroll Speed
Vertical (offset)
Z-Index

Back To Top Styling
Content – Font Awesome Icon
Content Colour (Normal/Hover)
Animation – Time ms
Font Size
Line Height
Border Radius
Sizing - Width/Height
Background – None, Colour Fill, Gradient Diagonal 1/2, Gradient Horizontal, Gradient Vertical (default), Gradiant Radial, Image (Dragged and Dropped), Image (Warehoused)
Top/Lower Fill – Normal/Hover
Border Weight
Border – Normal/Hover

The very first checkbox in the Settings panel is View Generated Source Code. When the checkbox is activated, the HTML, the CSS and the JS output for your button for your newly created button will be displayed in preview mode. A single click in any of these fields will allow you to copy the code necessary for your Back To Top button to be included within non-Stacks pages.

Without a doubt, a useful stack to have in your collection!

Comments

RapidWeaver Links Hijacked

Would you like to convert links in your theme navigation menu to do powerful things such as switch languages, print the current page or view a shopping cart? How would you like to have a link on a webpage force a linked image or video to download?
A client recently askedd me to add a Botton to his page to reload the current page. All these things and many, many more are feasible with the ActionHost stack. This powerful stack modifies simple links and anchors; making them do things you never thought were previously possible!

What makes ActionHost innovative is the fact that it doesn't force you to write seriously complicated Javascript code or to try to manipulate links with awkward URLs. Simply tell ActionHost which links to look for, select an 'action' from a pull-down menu and configure the action properties. Within a couple of seconds, you can radically change the behaviour of any conventional links within the webpage.

An eon ago, I purchased ActionHost from Tsooj Media, but found it too complicated to use. Will Woodgate has now reworked ActionHost and added more standard options to those previously available. Will also cleaned up the interface and made it simpler to use.
ActionHost is now available on the S4S website.

An example: You have an RWML page (I think I talked about RWML just recently?). By default, you can add a menu, or a stack (i.e. image) to change languages. You, however, decide that you'd like a simple text link somewhere within the opening text.

With ActionHost this is really simple to do – without knowledge of the necessary parameters. Just add a link to your text 'javascript:void(0)', drop an ActionHost stack onto your page. Set the parameters to look for part of the text contained within your link 'French' for instance, or 'language' (case sensitive!) and tell ActionHost that you wish to change 'lang' – in this case to 'fr'.
If you'd like to have a button in the menu bar that prints your page, or returns your visitor to the previous page, it's as simple as adding the corresponding text to the menu and setting an action as described above.

The following new action types have been added to ActionHost v2:
• Add an HTML5 data attribute and value to the link
• Apply a unique ID selector name to the link
• Force a linked file to download (in newer web browsers) and give it a new file name
• Print the current webpage (or save it as a PDF)
• Reload the current webpage
• Navigate back to the previous webpage, that the user came from
• Switch the website language using RWML v2 (due for release very shortly)
• Execute custom jQuery Javascript code

ActionHost has now morphed into a stack that even I can understand and find useful!

Stack Settings

Trigger Properties
Trigger Type - Link Text, Link URL.
Trigger Condition - Equal To, Contains, Starts With.
Trigger Value - The succession of characters to look for.
Action Properties
15 Options - As listed above, plus options such as View PaySnap Cart, Cartloom etc.
The remaining options are variable, depending upon the action requested.

When ActionHost was originally released, it was a stack with interesting possibilities. However, it required coding skills for most actions.
ActionHost version 2 now has a much cleaner interface and includes options that will be useful to many Weavers.

Comments

CodeBox – an Indispensable Tool For Weavers (And Other Coders)

Years ago, when I found a useful snippet of code, I would copy it, insert it directly into RapidWeaver and rejoice at the results (if it worked). When it came to re-using the snippets, it was case of first remembering the project that I used them in and then trying to isolate them from other snippets that I'd added to said project. Thanks to CodeBox that is no longer the case.

I find CodeBox to be an indispensable tool for my RapidWeaver endeavours. Usually, when you find an HTML snippet, or a CSS snippet they are interconnected, often with a snippet of JavaScript. CodeBox makes it simple to archive the snippets in a way that they can be easily discovered and used over and over again. Just copy the snippets to CodeBox, make sure that they have the same (or similar) name, add the extension HTML, CSS, JS, or even TXT and you can be sure to find the relevant pieces of code again.

The advantage of having a related name is, of course, the search function available in CodeBox. If my related snippets all have the content "curtains" then, if I search CodeBox for "curtains" I will immediately see the CSS, HTML and JavaScripts that are related to the snippet that I added years ago.

CodeBox
You'll notice that with so many of my posts, if you hover over the image above, it will change from the HTML list to the CSS list of CodeBox. If you think that I might be able to remember the code to swap an image when you hover over it, you're mistaken, I'm not a code junkie, I have an acute case of code-phobia! But CodeBox comes to my aid on a daily basis.


Something that is especially useful, is the fact that CodeBox syncs with the cloud!
Recently my hard drive crashed and – not having an adequate backup system in place – I lost a lot of information. Because CodeBox was set to sync with my Dropbox account, however, as soon as I reinstalled the app all of my snippets were immediately available again – The necessary CSS is still in place on my server, so I can still add rollovers or this link enhancement to my blog posts without having to search online for the code again!

CodeBox has a multitude of formatting options, so no matter if your code snippets are destined for Ruby On Rails, or are simply text snippets, they will aways be formatted correctly. And once you've discovered the snippet that you're looking for, just click the 'tick' box beneath the snippet and it is copied to the clipboard for use in the next application.

If you are constantly forgetting which HTML is related to which CSS, or JS snippet, then I can highly recommend CodeBox. It doesn't cost the earth an it is extremely useful.
Oh, and the social icons below — they were also added via CodeBox and I also use CodeBox to store standard replies to various forums that I'm active on ¯\_(ツ)_/¯

Comments

Scalable Vector Graphics in RapidWeaver

SVG, or Scalable Vector Graphics is the latest trend for adding logos, illustrations and animations to web pages. Or is it? SVG has actually been around since 2001, but has been more, or less ignored.
So what is SVG?
SVG is vector based as opposed to pixel based. The result is scalable images that retain their image quality at any size. Text and contours remain razor sharp, no matter to which extent they are scaled up, or down. They can also be animated.


SVG – Wiki Commons

Wiki says:

SVG is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999.
SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted, and compressed. As XML files, SVG images can be created and edited with any text editor, as well as with drawing software.
All major modern web browsers—including Mozilla Firefox, Internet Explorer, Google Chrome, Opera, Safari, and Microsoft Edge—have SVG rendering support.

The emphasis here lies on "Modern". IE8 and Android 2.3 have problems with SVG, but there are workarounds.

So why am I writing this article?
I've been using SVG images in conjunction with RapidWeaver for many years. There are a number stacks that will allow you to add SVG warehoused files (via 'Resources) to a project and I've probably used all of them at some time or other. (Graphic Stack from S4S is the ideal free option, if you're not using Foundation)
However, I've recently hit upon problems when using BWD's Sections Pro and Sections Box. I must emphasise from the beginning that the problem does not lie with BWD, but the way that SVGs are exported by default.

Today, I was experimenting with BWD Sections Box animations. I added a couple of SVGs to a project and set them to animate. The animation worked just fine – when set to 'Hover', but didn't work at all when set to 'On Page Load', or 'When In View'. I was miffed and wrote to Andrew asking about the crap he was offering RW users. (Obviously. I was a little more polite in my mail).

Within seconds, Andrew replied that the crap was of my own manufacture. (Again – Andrew and I always converse on polite terms and only badmouth our anonymous clients) And so I was forced to review my production process. Strong coffee and some patience were needed.
I began to research the web. My findings:
Most illustration applications add a load of redundant Code when exporting an SVG file, not least Adobe Illustrator CS6.

During my research, I discovered two (actually three) important web pages.
If you're just setting out with the use of SVGs – especially in combination with Adobe Illustrator, I highly recommend that you visit both this page and this page. The first explains how to export 'web-ready' SVGs from Illustrator, the second explains how to include SVGs on your web page.

However – even after following the advice from the first page, the SVG export from most illustration apps is still not ideal for the web. My new-found advice, (but perhaps Paul Russam has more input on this subject) is — visit Jake Archibald's GitHub page, drop in your shiny new SVG and save the results to a text file (TextMate, or similar) with an .svg extension. Your SVG will now be fully optimised for the web, with no redundant code and – it can still be opened and edited with your favourite illustration application (just remember to repeat the optimisation process once you re-saved).

Many thanks to Andrew Tavernor for convincing me to do some research. It was well worth the effort and I've bookmarked Jake Archibald's GitHub page. I recommend you do the same – pending feedback from Paul Russam, the SVG/Animation expert.

Go forth and create better logos!

P.S. If you need detailed information about SVG, this page will tell you everything you wanted to know.

Paul Russam commented:

I did a test a while ago where I created a simple graphic of squares, circles, text etc in Sketch, AI, and Affinity Designer and then exported each as svg. AI's export was the biggest and showed AI's print focused origins, Sketch and AD did much better but AD came out best for a couple of reasons primarily that the exported svg was the smallest and that it was 100% x 100% not NNpx x NNpx (AI's biggest problem) thus making it perfect for web use.

Comments

Take Control Of HTML In RapidWeaver

Many professional web designers have tried the RapidWeaver demo version and rejected it for its lack of HTML support. Stacks adds an HTML box to your arsenal, we've all seen it; we've all used it, but no-one in their right mind would try to build a complete website using HTML boxes.
Now dedicated coders have no excuse for not using RapidWeaver; HTML Body Stack from 1LD even makes it easier!

So you're a hardcore coder and you want to build your website using RW. You will need Stacks 3 and a copy of the HTML Body Stack which comes with a dedicated blank theme.

You may, of course use any theme you like, but hey, you're hardcore and you want full access to the <head> and <body>, right? These are preconfigured when you use themes. Not the case with 1LD's Blank Theme – it's blank and just begging for an HTML Body stack.

Let's start a new project.
Open a new Stacks project, choose the HTML Body Blank theme and then check your Stacks' library for HTML Body. Drag this stack onto your page and hey! It looks like Stacks, but it works like HTML. It has three themes for the editing mode – the Standard Stacks' theme, Light and dark.
You added it to your page already? You now have a <head> and Before <body> elements on your page, but both have the 'Add Child' + button!
Go on – click the + button in the <head> area. Now you can link your CSS and meta tags, etc. or, may the heavens forbid, a stack.

Same thing with the <body>. Click the + button and add your HTML content, non-wrapped HTML, or a stack.
I know some people who are going to love this.
Imagine – we're halfway down our new HTML page and it's looking great. But we need an image slider. So off we go to make coffee – that always helps us concentrate when browsing that code that we need. But wait – time is tight. We need the slider now, this instant.
What is easier than dragging one in from the stacks library? So what, if you didn't code it yourself (i.e. borrow the code from the web), forget vanity; time is tight – remember?

HTML Body

But now, watch this – I'm working on a Foundation project and just discovered the source code for a cool calendar. I drag an HTML Element stack into my project and add the code to it. It is already surrounded by <divs> and I can add as many child stacks to it as I need.

1LD created HTML Body as a way to give themselves the control they wanted to have in order to create HTML templates for their own web development projects.

Using a hybrid Stacks/HTML editor gives RapidWeaver users the ability to really mold projects into whatever they need them to be, whether they need to include simple to use RapidWeaver Stacks or import advanced external libraries.
To get you started 1LD has thoughtfully included a free project file that they created with Bootstrap. The project contains 5 sections that you can save as partials for use in other projects. Perhaps we might even see a Foundation project soon?

If you have little, or no HTML/CSS experience or suffer from code phobia, this is not the stack for you — 1LD can only support the stacks and theme, but not our inability (and yes, I include myself) to understand what all those <div>s, </p>s and <span>s are about.

If you're a coder and use RapidWeaver for the obvious ease of use that it offers, HTML Body is exactly the stack that you've wished for all these years.

Comments

Show more posts

  • Stacks Image 35399
  • Stacks Image 35402
  • Stacks Image 35405
  • Stacks Image 35408
  • Stacks Image 35411
  • Stacks Image 35414
  • Stacks Image 35417
  • Stacks Image 35420
  • Stacks Image 35423
  • Stacks Image 35426
  • Stacks Image 35429
  • Stacks Image 35432
  • Stacks Image 35435
  • Stacks Image 35438
  • Stacks Image 35441
  • Stacks Image 35444
  • Stacks Image 35447
  • Stacks Image 35450
  • Stacks Image 35453
  • Stacks Image 35456
  • Stacks Image 35459
  • Stacks Image 35462
  • Stacks Image 35465
  • Stacks Image 35468
  • Stacks Image 35471
  • weaverthemes
  • Stacks Image 35477
  • Stacks Image 35480
  • Stacks Image 35483

Links to the developers ® All trademarks cited on this page are the property of their respective owners.

x

Don’t miss a post!
Sign up for our monthly newsletter.

A monthly digest of all the latest updates from our RapidWeaver blog, keeping you up to date with the hottest new stacks and themes.

* indicates required

Contact Information

My Image

rjh web design

265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
Thailand 58130

About Us

We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.

Legal

This site uses Cookies to determine the best method of display in combination with your browser.
We do not harvest or sell personal information.
© rjh web design 2010—16

This website was built with loving care on a Mac using Foundation. For more information, contact me.