RapidWeaver CSS Tutorials

RapidWeaver is an amazingly powerful web design tool, and part of that power comes from its use of themes, sometimes also called web templates.

Eventually there comes a time when you want to change some aspect of the RapidWeaver themes you’re using, but none of the built-in options for that theme allow you to do so.

This is where adding custom CSS code to a particular RapidWeaver page can help get the job done for you, but what if you don’t know how to add custom CSS to RapidWeaver, or even what CSS is?

This is such a common issue for so many RapidWeaver users all over the world, that we decided to make a free series of CSS tutorials geared specifically for customizing RapidWeaver themes. Enjoy~!

RapidWeaver CSS Tutorials - Tools Introduction
Troubleshooting Video Coming Soon!

This site is the brainchild of Jonathan Head from NimbleHost.com – a professional developer of great RapidWeaver themes and plugins. Visit the NimbleHost website for more info on RapidWeaver themes and plugins designed to help make your web design life easier.

If you’re looking for more premium, in-depth video tutorials for RapidWeaver, be sure to check RapidWeaver Classroom and SupportCasts.

{ 54 comments… read them below or add one }

viktorriemer August 24, 2010 at 8:59 am

Great Job Jonathan!!!
Thank you so much for your tutorials.
I’m eager to get the next
Viktor

Reply

RWPro August 26, 2010 at 3:34 am

Thanks, Viktor. Very glad to help out. We’ll be uploading the rest of the videos soon!

Jonathan

Reply

mig2000 October 5, 2010 at 12:53 am

Jonathan,

As always. You have done a great job in every aspect when it comes to RW.

Reply

wbullard October 5, 2010 at 1:37 pm

Excellent work. Looking forward to seeing more videos.

Reply

RWPro October 7, 2010 at 5:41 pm

Thanks guys, it’s a pleasure to contribute to the RapidWeaver community. :-)

Reply

Juergen Kiefner October 7, 2010 at 8:12 pm

Hello Jonathan

You are very generous with sharing your knowledge. Thank you!
I´m still in doubt wether RW is the right tool for me. Okay, I´m new with it, there is a learning curve, all the instructions are in a foreign language and the working-methods are totally different to what I know from InDesign, QuarkXpress, Photoshop, Illustrator etc.

In this situation your tutorials might make the decisive difference.
Many thanks again!

Jürgen

PS: Sorry, in case my English isn´t adequate.

Reply

RWPro October 11, 2010 at 2:06 pm

Glad to help out, Juergen. The RapidWeaver workflow certainly is different from a lot of other tools. It abstracts a lot of the “hard” stuff so that beginners don’t have to worry about the details, but once you get to know more about RW, it’s really amazing how versatile a tool it can be. :-)

By the way, your English is exceptional~

Jonathan

Reply

SteveP July 13, 2011 at 6:45 pm

Hi Jürgen,

If you’re still having second thoughts about using Rapidweaver, then let steer you on the right path.

I’ve used the Adobe & old Macromedia applications for decades, they’re great, but like the old Mac OS9, they’ve become so overloaded with gimmicks, that they’ve become clunky.

With Rapidweaver, things are different. Extra themes & plug-in & snippets of code, are added when you think you’re ready to use them. Some are free, while most are priced at a reasonable rates. And with Nimblehost, you’re buying into Jonathan’s very helpful knowledge.

I’m not a website designer, I first bought RW for my own website, when I found that iWeb was a piece of un-flexible junk. Since then I’ve built quite a few site for people who, “Just want a website that works well & looks cool”.

With Nimblehost you’ll get simplicity & flexibility, all working seamlessly within the RW environment – and help whenever you need it.

Steve

P.S. Your English is ruthlessly efficient, even the apostrophes are in the right places…. I bet your German!! LOL.

Reply

wbullard October 7, 2010 at 8:53 pm

Another great video. If you could make one explaining chaos theory that would be great since you a natural teacher.

Reply

RWPro October 11, 2010 at 2:08 pm

ROFL ~ Chaos theory, well, I guess I could give that a whirl sometime – though it’ll probably take a while to wrap my head around it! ;-) In all seriousness though, many thanks for the compliment.

Jonathan

Reply

Lupin-III October 17, 2010 at 6:10 pm

Jonathan – Thanks for taking the time to make the videos. They are very helpful. One suggestion and forgive me if I missed it, but you might want to mention about the “selector” being case sensitive. This caused me a few issues early on.

Again, thanks for the videos and the great themes. I’m itching to try Dexture.

Dan

Reply

RWPro November 3, 2010 at 4:48 am

Hi Lupin – CSS being case-sensitive is something we’re going to mention in the troubleshooting video. ;-)

Reply

Mirek November 1, 2010 at 7:54 pm

Hi

Unfortunately only the fist video works :-(

I tried in Firefox and Safari

Regards

Reply

RWPro November 3, 2010 at 4:49 am

Hi Mirek, sorry to hear about the problems you’re having. I’ve accessed the site from both Firefox and Safari on multiple macs without any problems, so I’m not sure what issue you’re running into. By popular demand we’ll be making these videos available on YouTube in the next week or two, which should clear up any problems like this.

Reply

Kob January 27, 2011 at 9:44 pm

Oh, thanks, thanks, thanks for the last 2 videos. That is exactly what I’ve been looking for for months, if not years.
Congratulations and I don’t regret I’ve been a NimbleHost fanatic since I discovered your *GREAT* themes! :-)))

Reply

RWPro January 28, 2011 at 2:42 am

Very glad to hear that, Kob. :-)

Reply

Peter Beckwith February 3, 2011 at 7:16 pm

Does anyone here know where I can find an RW designer for hire?

Thanks
Peter

Reply

RWPro February 4, 2011 at 8:22 am

Hi Peter,

If you’re looking for a custom theme of some kind, then I’d recommend Will Woodgate over at ThemeFlood. If you already have a theme you’d like to use, but want some customizations made to it, then I’d recommend Marten over at RapidWeaverCentral.net.

Reply

Brian Naja February 19, 2011 at 7:02 pm

I just wanted to say thank you for the videos. They helped me out alot.

Reply

RWPro February 20, 2011 at 6:58 am

My pleasure, Brian. :-)

Reply

Fran Meehan February 23, 2011 at 4:49 pm

Thank you so much for these videos. They are invaluable, and so well done. Pretty much like everything you do!

Fran

Reply

Glenn April 17, 2011 at 4:27 am

Thanks Jonathan for the easy to follow videos. They have been very helpful. I’m looking forward to future videos :)

I believe that some RW themes use CSS. How can I make more permanent changes to the look and feel of the theme? instead of ‘overriding’ things in the page header?

Reply

RWPro April 17, 2011 at 8:46 am

Hi Glenn,

Glad to hear the tutorials have been of help. To make more “permanent” changes, you’ll need to edit the core theme files.

Most themes store the majority of styles in the styles.css file (which you can access by right-clicking on your theme in RW and selecting “Reveal Content in Finder”). Other stylesheets are added to the page by RapidWeaver when you make various changes via the Styles tab in the Page Inspector. Any permanent changes will need to be made to the styles.css file, and/or the supporting stylesheets.

Please keep in mind, however, that some 3rd party theme developers don’t support themes that have been customized in this way. Just fyi~ ;-)

Best,

Jonathan
NimbleHost.com

Reply

claude dupre June 12, 2011 at 1:58 pm

Good job.
Very clear. I love the speed to talk, your voice is perfect and the recap at the end is very smart.
Thanks

Reply

Dan June 19, 2011 at 11:18 am

Absolutely awesome. I wish you could teach more Mac stuff. May be even IOS programming. Perfect explanations and great coverage of topic. Wish there were more like you teaching.

Cheers again. Made a great impression on me mate.

Dan

Reply

RWPro June 19, 2011 at 12:05 pm

Many thanks, Dan. That’s a tremendous compliment.

What other Mac-related stuff would you be interested in?

Reply

Marcel July 13, 2011 at 9:00 am

Thanks,
Very good education, go on with this please, useful!

• I use Stacks all the time. I have have a lot of theme, in the right column is it sometimes hard to find the Stack you want use. Is there an other way to find the Stack easier?

Marcel.

Reply

RWPro July 14, 2011 at 6:52 am

Hi Marcel,

I agree that it can be difficult to find the stack you want to use, especially when you have a lot to choose from. Unfortunately, there’s no special “trick” that I know to make find a stack easier. However, I’m sure that Isaiah at Yourhead is aware of this, and imagine he’ll be improving this in a future Stacks updated.

Reply

xavier July 13, 2011 at 9:05 am

bonjour
en français merci pour ces vidéos.
A+ xavier

Reply

RWPro July 13, 2011 at 9:20 am

Hi Xavier, J’ai le plaisir!

Reply

Ron July 13, 2011 at 9:44 am

Incredibly useful reference videos, Jonathan, and superbly put together. The content at SupportCasts is well done, but yours sets a new standard. This is exactly the content I’ve been needing. Thanks for your generosity.

Reply

RWPro July 14, 2011 at 6:51 am

My pleasure, Ron. :-)

Reply

Lynn July 16, 2011 at 3:59 pm

Thanks for the great tutorials Jonathan! They are clear and easy to follow. Can’t wait for more in the future. Keep up the good work!

Reply

Niji Beck August 10, 2011 at 7:44 am

Thanks Jonathan, a great tutorials and most of all, totally understandable. Looking forward for more great tutorials.
Cheers

Reply

Peter September 15, 2011 at 9:40 am

Cool tutorial – great job :) !

Reply

Randy November 11, 2011 at 9:47 pm

Great videos! Really helps a lot! thanks so much!

Reply

Mike Fordice November 20, 2011 at 6:15 pm

I tried the footer align right procedure on the home page of 4dice .com and it worked great! But only on the home page. Is there a way to make this across all pages on a site, or do you have to do it page by page.

thanks…mike

Reply

RWPro November 20, 2011 at 6:33 pm

Hi Mike,

When you want to add code to a single place and have it automatically applied to all the pages in your RapidWeaver site, then I’d recommend adding your css code to the Google Analytics field in RapidWeaver. Code there is added to all the pages in your site automatically, but only on export/publish – not in Preview mode. If you decide to take this approach, you’ll need to add some extra tags:

<style type="text/css">
your code goes here...
</style>

Hope this helps.

Reply

Dave January 14, 2012 at 2:52 pm

Thanks a lot for this !

Reply

Mark Kinder February 16, 2012 at 4:30 am

A big help.
Thanks

Reply

tom February 17, 2012 at 9:43 am

evening!

i need some serious help! i cannot get tweet button or FB like button on my rapid weaver site anywhere!
when i use the tweet code it just gives me the word tweet as a hyperlink.

can you help me in anyway?

Thanks for your time

Tom

Reply

RWPro March 1, 2012 at 10:15 pm

Hi Tom,

Sorry for the delay in replying. Depending on how you are adding the code to your RapidWeaver site, you may need to highlight the entire code snippet, and apply the “Ignore Formatting” option from RapidWeaver’s Format menu. This way, RapidWeaver will know that the code is “code” and not just regular text.

Hope this helps.

Best,

Jonathan

Reply

Renee March 4, 2012 at 3:40 am

Jonathon, just a note of appreciation for these free tutorials! Just what I needed.
And I bought three of your themes: phelix, mobilize, and mobile fusion.
You are awesome.

Reply

RWPro March 4, 2012 at 4:51 pm

Thanks very much, Renee! Glad these tutorials have been of help. We’ll continue to add more and improve them over time. :-)

Best,

Jonathan

Reply

John March 18, 2012 at 10:16 pm

Jonathan

Just found and now watched these videos. Thank you so much for doing them. Very clear, easy to listen to and follow along with. Many congratulations. I found them after buying your “Gravity” theme and the “myMenu” stack.

Also very glad you left you mistakes in as it is so much more helpful to see the finding and solving of problems in a life demo than it is to see a scripted “perfect” video.

I do hope you manage to find time to add more of this excellent resource. I have learned so much and hope to now put that into practice. Off to get stuck in.

Regards
John

Reply

Catherine Casey August 21, 2012 at 10:17 am

Thank you Jonathan, very clear and precise, even in your mistakes, I have now retired from teaching systems in an Insurance office, but I can’t sit around doing nothing, so I found Rapidweaver instead of Photoshop for creating a website (I also take photographs and want to show them off) and your Tutorials (although I’m thinking not enough of them, but we will see…) are perfectly timed so I don’t get bored and feed the fish in my pond, whilst you are talking :-))

Once again, very many thanks, and lets see what I can do now.

Cathy

Reply

RWPro October 30, 2012 at 2:57 am

Very glad to be of help, Cathy. Thanks for the feedback!

Reply

Zach October 28, 2012 at 3:05 am

Outstanding!

This is exactly what I was looking for. In the space of 30 min you’ve transformed me into a theme editing pro. Thanks heaps and keep it up!

Zach

Reply

RWPro October 30, 2012 at 2:58 am

My pleasure, Zach. Let me know if you have any questions. :-)

Reply

Tori April 21, 2013 at 5:25 pm

I just want to leave a comment to let you know that this is still VERY valuable even though it was posted a while ago.

Thanks for posting the video with the mistakes – that was so helpful since we beginners always make mistakes and need to know how to figure out what went wrong.

I needed to know how to figure out the Selector names and you showed us exactly how to do that.

Thanks again,
Tori

Reply

Paul Clavett August 18, 2013 at 5:54 pm

Thanks Jonathan for these extremely useful videos and also for the pdf “ThemeEasy” reference.

These articles have made even beginners like myself comfortable in trying to change items in the themes within RapidWeaver and therefore customize pages to our liking ! Appreciate your time and efforts !

Again sincere thanks and take care !

Paul

Reply

admin August 19, 2013 at 5:01 am

Glad to help, Paul. :-) Let us know if you have feedback or suggestions for improvements!

Reply

Paulette March 29, 2014 at 11:18 pm

Thanks Jonathan. I’ve been a newbie for a week now struggling with customizing. You just made it all so much easier to understand. By the way. Could you tell me if there is a way to take a png (pic) from a header out of one theme and use it in a header in another?

Sincere thanks,
Paulette

Reply

admin April 26, 2014 at 6:07 pm

You’d have to go into the core theme files, locate the image being used in one theme, then copy it and move it the other theme, being sure that it is renamed to match one of the images already listed. This is because the theme options you use to choose an image will depend on the file name, as determined by whatever theme you are using – and doing this can be confusing, error prone, or just not work if it’s not done correctly.

I would recommend caution when doing this, however, as there are likely copyright restrictions for the image you want to use. I’d suggest getting in touch with your theme developer to see if this is something they allow, or can get you in touch with whatever artist is responsible for creating the image.

Reply

Leave a Comment

© 2010 RapidWeaver.pro & NimbleHost