RebelMouse Themes Design Tutorial


Published on

RebelMouse Themes Tutorial - by RebelLaunch Blueprint. This RebelMouse themes tutorial is a complete introduction to creating your own RebelMouse themes and design. If you would like us to design and install one of our custom RebelMouse themes - visit:

Published in: Self Improvement
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

RebelMouse Themes Design Tutorial

  1. 1. If you have received this ebook as a gift from a friendand you would like to order the complete RL Blueprint, including Custom Template, Source Code & Video for Only $17 : Click Here ©RebelLaunch Blueprint - 2012
  2. 2. This is the supporting ebook guide to an easy to useRebelMouse design template. You can easily customize this product in just a few minutes and install as your ownRebelMouse theme. Please enjoy this valuable tutorial and your new uniquely branded RebelMouse Page! Please click an icon above to like, share & tweet this guide so that it may also help others – thank you!
  3. 3. Legal DisclaimerThis publication is protected under the U.S. Copyright Act of 1976 and all other applicable international, federal, state and local laws. The purpose of this guide is to illustrate the application of the RebelLaunch Blueprint templates and design code. It may be shared with others to show the value of that electronic product. All rights to the ebook and the training video are granted under the open source free use protocol, but does not include resale rights: you are not allowed to sell this ebook Guide to anyone else, but you may share this ebook openly without removing or modifying its contents, including but not limited to; Branding, Live Links, and Social Media icon links. NOTE: The free use protocol does not apply to the RebelLaunch Blueprint Template 1 Product and/or the Source Templates and Design Code; only one-time usage is granted under your downloaded purchase.In summary: the ebook and video tutorial are editorial promotional material. The actual Templates and Code are the product. You may, and we encourage you, share this useful ebook and the video; but we reserve the right of ownership to the proprietary templates and source code for resale. ©RebelLaunch Blueprint - 2012
  4. 4. Legal - ContinuedMuch of this publication is based on personal experience and anecdotal evidence. This product is in no way affiliated or endorsed by RebelMouse, Google, or any other referenced third party. Although the author and publisher have made every reasonable attempt to achieve complete accuracy of the content in this Book, they assume no responsibility for errors or omissions. Also, you should use this information as you see fit, and at your own risk. Your particular situation may not be exactly suited to the examples illustrated here; in fact, its likely that they wont be the same, and you should adjust your use of the information and recommendations accordingly.Any trademarks, service marks, product names or named features are assumed to be the property of their respective owners, and are used only for reference. There is no implied endorsement if we use one of these terms. Finally, use your head. Nothing in this Book is intended to replace common sense, legal, or other professional advice. These contents are intended to inform and entertain the reader. So have fun and be creative with the RebelLaunch Blueprint Template 1. ©RebelLaunch Blueprint - 2012
  5. 5. Welcome and Thank You!Hey There My Friend!I am super excited to get right to work with you on this awesome opportunity tobuild your very own custom RebelMouse ‘social front page’.A few pointers: 1. I recommend you read through the training completely one time before engaging in building your site. This gives you an opportunity to get acclimatized; there may be some things that you may want to do in a bit different order than I have written out. 2. Also, this is written for people who have very little experience with design and graphic editing, so if you do have a good background in this, just skip on through those parts. The true value is in the research, design and programming we have done, so that you can place the custom code template right into your RebelMouse theme. 3. I really hope you get a lot of value out of this and I only ask that once you have a great looking page, please share it around and actively try to tell others about our service and training. Now to get on with the show…! ©RebelLaunch Blueprint - 2012
  6. 6. Overall, I really hope you enjoy the tutorial. If you have questions, please jump into ourQ&A page at the site. This is a pretty straight forward tutorial, butit should open the door for creativity and customization adventures of your own. Andremember, if you get stuck, or just don’t want to hassle with any of this, we offer greatservice at a very reasonable price for customization, publishing, and other strategicconsulting.I also encourage you to register and become a free Bronze member of the RebelLaunchBlueprint*. There will be many great RebelMouse page enhancement tutorials, moretraining publications like this, custom pre-made templates that you can literally copyand past into place, and much more!As a member, you will also be a part of our periodical newsletter; where we’ll beupdating you with news about the RebelMouse platform, new and useful strategies forimplementing into your business plans, and some bonus goodies that only memberswill have an opportunity to know about.Otherwise, get on with it… please enjoy and don’t hesitate to drop us a line withfeedback, help questions, or hopefully some great referrals to this guide!Cheers! Eric*There is a complete companion video tutorial to this guide in our MEMBERS AREA! ©RebelLaunch Blueprint - 2012
  7. 7. Step 1 – Unpack Zip And Dig In…• First you’ll need to unpack the .zip file* you downloaded. Then, open the Assets folder and open up the .jpg document called “rebellaunch-blueprint- template1.jpg” in your favorite photo editor or go to a great online tool called• Immediately, you should see the aqua blue header area which will be replaced completely with your custom header image/design.• You’ll want to now find and image to use as your main header, design one, or have someone else design one. NOTE: This header image is best at 1050px wide by 200px high (the area of blue in the template).• You will want to copy and save to your notepad the direct URL link to your images from the Web or your own files.(see video tutorial)• You can also use the tool to copy your website images if you don’t already have the files handy. (See video tutorial)• See next page for a great EASY solution to this!!!*NOTE: If someone was gracious enough to share this PDF with you and you do not have the .zip file package (image templates and custom code) you can purchase it at: ©RebelLaunch Blueprint - 2012
  8. 8. Step 2 – We’ll Do It 4 U!Quick note: As a specially priced service to all who areprivileged to get this great guide, the RebelLaunch Blueprintteam is offering custom design work for only $27*!– Go To– Click on the Get My RebelMouse Blueprint Design Button and submit your information. Once you hit “Get Instant Access” you’ll be directed to a secure order form. This IS the easy button to getting this whole tutorial done for you. We’ll put it together for you and all you’ll have to do is copy and past the customized code - which we send to you - into your RM page’s Custom Theme area - simple! CLICK HERE!– TIP: Be very clear in your instructions, keep your design request simple, and reference to examples you like…remember, it’s only $27* bucks for a nice custom RebelMouse page design.– Otherwise, keep us in mind and please share!!!– Continue on through this tutorial…*(Limited Time Introductory Offer Subject To Change – Don’t Hesitate!) Please click an icon above to like, share & tweet this great guide so that it may also help others! ©RebelLaunch Blueprint - 2012
  9. 9. Step 3 – Insert Your Header Graphic• Once you have your header graphic designed and styled the way you want - and it is 1050x200px in size - you can then place it into your “Main Template” to exactly replace the aqua blue area. Again, this file is rebellaunch-blueprint-template1.jpg or .psd if you or someone you know is a PhotoShop user – otherwise, just use use this in video)• Make sure you save the now customized “Main Template” as an image file and in a place you can remember for easy access…you’ll need that very soon!• TEMPLATE COLOR: You’ll notice the entire template image is 2000px high. IF you’d like, you can change the color of the main layer, so that your main page background – under the header and behind the post widgets – can be adjusted to a different color or a pattern. You can play with this and experiment. The video tutorial will show you more.• OR – Again, you can have the RebelLaunch team do it all for you! CLICK HERE! …just a friendly suggestion…OK, on with the project here… 8-) ©RebelLaunch Blueprint - 2012
  10. 10. Step 4 – Upload Your Image To Interwebs• Next, you’ll need a place to store your now customized template image online. This is where your RebelMouse page will find your image on the Interwebs and show it in your ‘social front page’.• If you do not have an FTP server or other place to store and retrieve your image’s direct URL link online, we recommend utilizing the save feature in• is a great for this purpose, just upload and save the image – without resizing – and then copy and paste the image link to your notepad for embedding into the code…• If you edited your image on your computer, simply upload the final version’s image file into and then go through the steps above.• See the video tutorial in the RebelLauch Members area for specific detailed walk through. ©RebelLaunch Blueprint - 2012
  11. 11. Step 4 – Cont’d• Whatever online image storage or server you use, upload your template image and locate the online link. It will look something like: template1.jpg• MAKE sure it ends in .jpg or .png - otherwise, it is NOT your raw template image file and it wont work – files that end in .html or .php are web pages…you need it to be the root image file name: .jpg or .png is best.• Once your image is online, copy the link and paste it onto your notepad to keep it handy, you’ll need it next… ©RebelLaunch Blueprint - 2012
  12. 12. Step 5 – Prepare to edit your RebelMouse page theme code.• Ok – First, don’t be scared by the title of this slide, it is actually quite easy with this simple guide.• You can use your computer’s NOTEPAD, or any other “plain text editor” – you can even find one online, but I recommend you quickly get a copy of Edit Plus++ here:• Edit Plus is a simple, yet powerful program that web developers use to customize code for web pages.• Get your editing program open and after the next step, we’ll be ready to dig into the .css (Cascading Style Sheet) file and make some very simple changes. ©RebelLaunch Blueprint - 2012
  13. 13. Step 6 – Edit Code But first, let’s get a little more familiar with the RebelMouse dashboard. Open your RebelMouse page dashboard online and click on the DESIGN tab.At the bottom of this page, you’ll see a rectangle with a big PLUS + sign under the heading “Create your own custom theme”. ©RebelLaunch Blueprint - 2012
  14. 14. Cont’d – Edit Code• Once you have clicked on the + box, you will see:• This is where we are going to paste our new code once you make a few easy adjustments! ©RebelLaunch Blueprint - 2012
  15. 15. Cont’d – Edit Code• If you haven’t got it open yet, open your Edit++ or text editor.• In the editor, go to FILE>OPEN locate your RebelLaunch Template download folder and open the file in the RebelLaunch Blueprint Template 1 folder called: changethiscode1.css• This is your main code that you will COPY and PASTE in place of the code we just saw in your RebelMouse “Add A Custom Theme Window”.• But first, let’s roll up our sleeves and make a couple quick changes. ©RebelLaunch Blueprint - 2012
  16. 16. Cont’d – Edit Code• While this code is open in your editor, locate that image link I had you set aside: blueprint-template1.jpg and copy it.• Go back to the Editor and paste this code as shown in the next page illustration… Please click an icon above to like, share & tweet this great free guide so that it may also help others! ©RebelLaunch Blueprint - 2012
  17. 17. Cont’d – Edit Code ©RebelLaunch Blueprint - 2012
  18. 18. Step 7 – Replace Code In RebelMouse Dashboard – Custom Theme Design• Cool, now you have made the change that is going to instruct the RebelMouse front page to get that template image and place it into your “Live” page.• Make sure you save this file somewhere you will remember it for future customization and tutorials. If you rename it, make sure it is a .css extension. Ex: myfile.css• Now select ALL the CSS code in your editor and copy it to the clipboard for this “copy & paste” exercise. ©RebelLaunch Blueprint - 2012
  19. 19. Step 7 - Continued• Go back to your dashboard in RebelMouse online.• Select ALL of the code inside the custom code window and hit backspace, this will clear ALL the existing code out. Paste in your New Custom Code and SAVE…you’ll see a confirmation message in a little tan box at the top of the screen to confirm. ©RebelLaunch Blueprint - 2012
  20. 20. Step 7 – Continued• If you get an error message:• Re-Copy your code from your editor and try again.• If you still get this: Re-Open the ORIGINAL code from your RebelLaunch Blueprint Template 1 download and replace your image link and try again…Basically, do it over – carefully.• The code is clean and works, so usually it is some typo or improper link.• Otherwise, as long as things are going right, every time you save your code with the save button, you will see a tan confirmation message briefly pop up at the top of the screen. ©RebelLaunch Blueprint - 2012
  21. 21. Step 8 – Woo Hoo!• Once you’ve saved your new template - return back to your Front Page…• And Voila…You Will Be Seeing Your New Custom Template…..Good Work – You are now a custom web design guru…or well on your way at least…! 8-) ©RebelLaunch Blueprint - 2012
  22. 22. Here’s an example of the raw template in place withoutcustomization. Of course, your new header design will be in its place! ©RebelLaunch Blueprint - 2012
  23. 23. BONUS 1 – Custom Background Color• If you would like a custom Background color, just go back to your .css code editor and locate the “Change Body Background” tag.• Go online and search for Hexadecimal. This will bring up images of a Hexadecimal color chart. You can select a color you like, note the 6 digit (Hexa) code and substitute it into your theme.• REPLACE #FFFFFF(default is white) – as you see in the image above, with #YOURCODENUMBER• SAVE this on your hard drive and then go do the same replacement in your RebelMouse theme code. Dashboard >Design >Custom Code Window> LINE 45> Replace color code> save> return to front page.• NOTICE we save it in our hard drive and then go change it online. This way if something goes awry, you always have a back-up. You could also copy and replace the entire code again into your RebelMouse theme, rather than changing the hexadecimal number itself in the live theme’s code. ©RebelLaunch Blueprint - 2012
  24. 24. BONUS 2 – Custom Background Image• If you would like a custom Background Image, just go back to your .css code editor and locate the “Change Body Background” tag.• Go into the download file for the RebelLaunch Blueprint Template 1 and open the changebackgroundimage.css file in your editing program.• Highlight this code completely and copy – OR…• This is the reason I wanted you to read this first: you can use the changethiscode1withimagebackground.css* file from the beginning of the tutorial. (*We start and use this in the video tutorial throughout) ©RebelLaunch Blueprint - 2012
  25. 25. Bonus 2 – Custom BG Cont’d.• Return to your Template code file and paste in place so it appears like the illustration below:• NOTE: You are replacing 5 lines of code… YOU ALSO MUST replace the image file placeholder with the location of your BG IMAGE.jpg -- You’ll do this the same way as the template image file. ©RebelLaunch Blueprint - 2012
  26. 26. BONUS 2 – Custom BG Image Cont’d.• Once you have replaced this code, save it and then copy and paste it into your RebelMouse template online. Click save and view front page.• NOTICE: This is designed to utilize a repeating image pattern. If you want a single large image, in general make sure it is larger than 1300px wide or YOU WILL get a repeating image for any part of the image that doesn’t fill up the screen size a viewer is in.• There are more coding options available, but we have saved that for future, more advanced tutorials; OR you can have our team do it for a reasonable fee. (See )• Don’t be afraid to experiment though. If you have a large image or you have a URL to an online background…place the source link into your page and see how it looks.• Here’s one resource: I quickly searched and took this as an example, we are not affiliated. ©RebelLaunch Blueprint - 2012
  27. 27. Thank You and Enjoy!Dear Friend,I hope you have enjoyed this training and now have a beautifully branded ‘socialfront page’…If you have questions, we have a dedicated Q&A page set-up with a Facebook comments andquestions area. Please utilize this so that others may easily locate it and also find it useful. Pleasedon’t hesitate to ask any related questions, because this is how we all learn and it is how we canconstantly improve and expand our training and tools.Lastly, and most importantly; THANK YOU for taking an interest in the RebelLaunch Blueprint! Iencourage you to become a member and stay up-to-date on all the new training, templates andfeatured additions to the RebelLaunch membership areas.With Kind Regards and Thanks,Eric James & The RebelLaunch Team Please click an icon above to like, share & tweet this great free guide so that it may also help others! ©RebelLaunch Blueprint - 2012
  28. 28. If you have received this ebook as a gift from a friendand you would like to order the complete RL Blueprint, including Custom Template, Source Code & Video for Only $17 : Click Here ©RebelLaunch Blueprint - 2012