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~!
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.
{ 60 comments… read them below or add one }
Great Job Jonathan!!!
Thank you so much for your tutorials.
I’m eager to get the next
Viktor
Thanks, Viktor. Very glad to help out. We’ll be uploading the rest of the videos soon!
Jonathan
Jonathan,
As always. You have done a great job in every aspect when it comes to RW.
Excellent work. Looking forward to seeing more videos.
Thanks guys, it’s a pleasure to contribute to the RapidWeaver community. 🙂
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.
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
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.
Another great video. If you could make one explaining chaos theory that would be great since you a natural teacher.
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
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
Hi Lupin – CSS being case-sensitive is something we’re going to mention in the troubleshooting video. 😉
Hi
Unfortunately only the fist video works 🙁
I tried in Firefox and Safari
Regards
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.
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! :-)))
Very glad to hear that, Kob. 🙂
Does anyone here know where I can find an RW designer for hire?
Thanks
Peter
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.
I just wanted to say thank you for the videos. They helped me out alot.
My pleasure, Brian. 🙂
Thank you so much for these videos. They are invaluable, and so well done. Pretty much like everything you do!
Fran
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?
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
Good job.
Very clear. I love the speed to talk, your voice is perfect and the recap at the end is very smart.
Thanks
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
Many thanks, Dan. That’s a tremendous compliment.
What other Mac-related stuff would you be interested in?
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.
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.
bonjour
en français merci pour ces vidéos.
A+ xavier
Hi Xavier, J’ai le plaisir!
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.
My pleasure, Ron. 🙂
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!
Thanks Jonathan, a great tutorials and most of all, totally understandable. Looking forward for more great tutorials.
Cheers
Cool tutorial – great job 🙂 !
Great videos! Really helps a lot! thanks so much!
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
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.
Thanks a lot for this !
A big help.
Thanks
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
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
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.
Thanks very much, Renee! Glad these tutorials have been of help. We’ll continue to add more and improve them over time. 🙂
Best,
Jonathan
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
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
Very glad to be of help, Cathy. Thanks for the feedback!
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
My pleasure, Zach. Let me know if you have any questions. 🙂
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
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
Glad to help, Paul. 🙂 Let us know if you have feedback or suggestions for improvements!
Hey,
Thank you so much for your videos, its exactly what I’ve been trying to do for about a month now and its finally working!! Sorry I’m completely new to this and only have to make a website for final year university project.
I am just wondering how you get the css changes you’ve made to affect all the pages and not just the homepage? I have tried clicking apply to all pages, the code appears in the CSS window when I click through all the pages but it doesn’t actually do anything on anything other than the homepage.
Please help,
Emma
In RW5 applying CSS (or any code) to all the pages in your site has to be done via the Google Analytics field. Any code added there is added to all the pages in your site automatically, but only on export or publish, not in Preview mode (and you’ll need to add some
tags at the beginning and end). In RW6 there is a special sitewide code field where you can add the code. 🙂
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
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.
Excellent set of tutorials for someone like myself who is is a beginner in Rapidweaver. I’ve bookmarked the links in Firefox and downloaded Firebug. Having followed what you have described on a seperate theme within Rapidweaver everything worked perfectly following the simple and clear advice given in the tutorials
Thank you for a nice set of instructional videos. I recently took a ten week college class on this and your work has refreshed my memory. I understood all that you did, especially Firebug. Thank you.
Thanks for these, Jonathan. They’re a great help.
My pleasure, thanks for the feedback!