Consolidate CSS

What is it?

The Consolidate CSS option can be found in the RapidWeaver > Preferences section as a Publishing > Advanced option.

Consolidate CSS

By default RapidWeaver will not consolidate your CSS files.

If selected, all your CSS files will be combined into one CSS file. This works well with RapidWeaver’s built-in themes, but can cause major conflicts with 3rd party developers’ themes and more specifically with those that have a high amount of customization options.

What Use It?

The only reason, that I’m aware of, why anyone would like to use this option is entirely due to Internet Explorer’s (IE) nonsensical structure. IE is the only mainstream browser on the market that limits the amount of stylesheets that can be called within a single webpage. If you go over that limit, 31 stylesheets, all additional stylesheets (32 and up) will be completely ignored.

Well of course Microsoft has realized this problem and made sure to stop such nonsense in the latest versions of IE (8, 9, 10) right? NOPE! They haven’t – nothing has changed in this area. If you’re running IE6 or IE10 you are still limited to this archaic rule. Will they ever fix this? My guess is no, because they don’t care at all about their customers or developers as you might have noticed, whether you follow any of their products (i.e. Windows, Office, XBox, etc).

My Recommendation

If you’re using a browsers with built-in code inspecting tools, my favorite being Chrome, you can right click and select “Inspect Element,” which will bring up a section in your browser where you can view the code. If you go to “Resources” you can see all the stylesheets that are being called in.

I recommend that if this amount is not over 31 then you really have no reason to consolidate CSS.

A majority of our themes often contain a stylesheet count somewhere in the lower 20’s. Why so many? RapidWeaver structure requires theme style options to work largely by alternating between different stylesheets – in other words, it’s just the way RapidWeaver is built.

What if I have a ton of Stacks on a page? No worries there – Stacks already consolidates the CSS, so if you have one stack or several there is still only a single stylesheet being called in.

Control Panel RapidWeaver Stack

Control Panel – New CSS3 Animation Stack

Take control of powerful CSS and CSS3 web animation with ease!

Control Panel provides full control over page elements for those who don’t know how to code, as well as improve the workflow for those who do code. With nearly 100 control options, you can make your site look exactly the way you want it and add a new level of interactivity and audience engagement.

Check it out!

Lynda.com Online Tutorials

Improving Your Coding Skills

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. lynda.com

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:

RapidWeaver Snippets Button

Justifying Text in RapidWeaver

Unfortunately there is no button to simply justify text inside RapidWeaver’s WYSIWYG editing toolbar. HTML & CSS can be used to achieved this effect with a symbol copy and paste of the following code:

1
<p style="text-align: justify;">Enter Your Text</p>

Note that it is always best practice to highlight sections where you add HTML and hit CMD + . which simply protects the syntax from RapidWeaver’s built in auto-correct feature.

RapidWeaver Snippets Button

Change Your RapidWeaver Theme’s Default Font

I’ve had a customers ask me over time how to change the global font in RapidWeaver.

Of course you can manually change the font, but you’d have to do it page after page, section after section, sure would be easier to set a new global font if the theme you were using implementing font selections different that the one you wanted.

Fortunately, with some simple CSS that’s not a problem.

Step 1: Locate your Page Inspector (example):

RapidWeaver Page Info Button Screenshot

Step 2: Select Header (example) and then CSS:

Page Inspector's Header Button

Step 3: Finally, enter the following code and that should do the trick:

1
 * {font-family: arial, tahoma, sans-serif}

You can, of course, change the fonts listed to meet any font you would like (custom fonts will require the importing of font files or linking to the remote font server, such as Google’s Web Fonts). Note that whatever font is on the left will be loaded first and every font to the right is a fallback in case the font does not or cannot load.