The friendly web inspector for RapidWeaver
What ID is applied to that element? Does that element have a class? How tall is this button in pixels? What amount of padding is applied to this picture?
When designing and deploying websites professionally, it is often necessary to get a detailed analysis of different elements on a webpage. RapidWeaver 6 and later now includes a web inspector tool to make this information more accessible (Preferences > General > Enable Web Developer Tools).
But sometimes the web inspector tool can be overkill, especially if you're a novice. Our free Codafy stack makes it dead-simple to inspect elements in a webpage. It can tell you the following information about an individual element:
- What type of element has been selected
- The ID applied to the element (if it has one)
- The class names applied to the element (if it has any)
- Where the element is located in the DOM (document object model) hierarchy
- The dimensions (size) of the element
- Positioning and any floats applied to the element
- Border, margin and padding details
Codafy won't bombard you with masses of complicated details. You still have the web inspector if you need to know everything! This stack is intended to only display the most useful information, relating to the box-model of an element. The Codafy HUD can be dragged around on the page and you can also navigate the DOM hierarchy by clicking on the tags.
To use Codafy, follow these simple steps:
- Once installed into Stacks and RapidWeaver, open your Stacks library and find Codafy
- Drag and drop a copy of Codafy into your webpage (only one copy of the stack is required)
- Preview your webpage in RapidWeaver and click the 'Launch Codafy' button
- With your mouse, click an element in the page to view its box-model information
A good feature of Codafy is that it only works in RapidWeaver preview (the button is hidden when you export or publish your website). You can permanently keep Codafy in the webpage at all times, if you choose to. It's also possible to setup Codafy as a Partial in Stacks 3 (so you can reuse the same stack on all pages of a website) or @import Codafy into certain non-Stack pages using PlusKit.
This is a really useful stack to have installed, if you are experimenting with custom CSS code or in instances where a stack requires you to enter the class or ID of another element (like a navigation menu). It quickly gives you all the basic information about an element.
Codafy was previously sold through Nimblehost.com as a page plugin. Now that RapidWeaver already includes a web inspector, we have taken the Codafy name and applied it to this stack. The original Codafy plugin is no longer receiving any support or updates. It is recommended that you use this stack instead.
This stack requires RapidWeaver and the YourHead Stacks plugin. It will not work with other platforms (like Wordpress). We recommend you aim towards installing the latest version of RapidWeaver that your computer is capable of running (preferably RapidWeaver 6 or greater) and Stacks 3 or later.
You may use this purchased stack an unlimited number of times in personal or commercial projects, request technical support and receive free updates in future.
This stack can be installed or synced onto all computers that you own. You are permitted to make archival backup copies of the stack.
You may not resell or make this stack available for download, remove copyright credits or license information.
The software is provided "as is" without any implied or expressed warranty of merchantability or fitness for purpose. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise arising from, out of or in connection with the software or the use or other dealings in the software.
By purchasing this stack, you agree that your purchase will be available immediately via digital download and that you waive your statutory right of withdrawal.
All purchases are final and refunds will not be provided (we physically cannot un-download or remove stacks from your computer).
You are reminded to make use of the free demo version already provided on the website, to fully evaluate this stack for compatibility and suitability before purchase.
If you have questions that relate specifically to this stack, you should make contact via the support page. We aim to answer all messages within 12 hours, Monday to Friday.
If you require a faster response at weekends or during public holidays, please post your question(s) to the RapidWeaver forums, where a support volunteer may be able to assist you quicker.
Free demo versionsWe provide free demo versions of all our stacks, so you can try before you buy! In the free demo's, automatic updates are disabled, a credit is displayed below the stack, and the stack fades out of view after 60 seconds. There are no trial expiries or disabled features. Buy with the confidence of knowing what you're getting.
What is a Stack?A stack is a drag-and-drop component you can add to your webpages. These individual stack elements can be used to quickly add extra layout or functionality. Stacks work inside the Stacks plugin by YourHead software; an extremely popular plugin for RapidWeaver.
Learn more >
Customer supportQuestions, feature requests, bug reports, or advice required about our stacks? No problem, we're here to help you. Fast and friendly expert support direct from the developers. No lousy FAQs, canned responses, complicated ticket systems or outsourced support agents here!
Learn more >