Tweaking Themes on Multiply

Hi! Since posting this entry on my site, I found out how a lot of people are seriously interested in 'personalizing' or tweaking themes on their own multiply site. This is an updated version and would like to think it's better than what I presented before.

This particular theme I'm using is based on the "AVLACK" theme with a few CSS coding for that finished look. Initially, I was looking for a style like Kubrick that could've been possibly ported for Multiply but there was none. I know somebody from Movable Type once said that Kubrick is just so 2004-ish, but I beg to disagree. I don't think a simple but elegant design idea like Kubrick can get out of style. Now on to more sensible discussion on tweaking your Multiply site. I will try my best and attempt to retrace the steps I took to tweak my layout:

1. First thing's first, you gotta add Multiply Customized Themes as your group. To do that, go to http://customizedthemes.multiply.com/ then click 'Join Group' located on the right sidebar.
2. Once you're a member, you can view their themes. Click on the photo of the theme that you particularly like and follow the instructions on that page.
3. Now if you're pretty lazy to read, continue with my tutorial at your own risk. I will be discussing in detail how to apply the Chamada contra a Pobreza Theme with a customized banner.
4. Now It's pretty straightforward after that. You have to first choose a theme (which we will call your 'base theme'). To do that, click http://multiply.com/set-up/pages/themes/avlack. caution: your current theme at the moment will be completely overriden if you click that link.
5. Once your 'base theme' is changed, you will need to customize your CSS. But first, Go back to the Chamada contra a Pobreza Theme page under Multiply Customized Themes by clicking this link:
   http://customizedthemes.multiply.com/photos/album/3.
6. Copy the CSS code on that page (hint: The font is bold and starts with /**** Chamada Contra Pobreza******* all the way to the last line before the pictures). You can copy it by selecting the whole code then hold CTRL+C or right click on your mouse then click 'copy'. Paste it on your Custom CSS page by:
   
   1. clicking http://multiply.com/setup/pages/upload-css
   2. Select everything by clicking anywhere inside the box and hold CTRL+A
   3. Hold CTRL+V or right click on your mouse then click 'paste' on the box you will see.
   4. Hit the 'save' button.
7. Once that theme is placed, you need to customize your banner. 2 important things you need to know before you proceed:
   1. Your banner is consisted of 2 parts:
      • the upper banner - it will show your title, desired pictures, etc.
      • the lower banner - it will be a thin strip of line to show your links (home, blog, photos, vidoe, calendar, links)
   2. You need to do this in Photoshop or CorelDraw or any Image Manipulation Program. Let me recommend something free: The Gimp - which is open-source & a popular graphics editor for Linux but can now be run on Windows & MacOSX. For windows, you can download it from here.
8. Make a banner from scratch with these specific dimensions: width=780 height=264. Now this is the juicy part of tweaking your own theme. You can now add pictures, draw on it if you like, etc. Let me give you a few tips:
   • the upper left of the banner should have a lighter shade because this is where your title will appear in red (note, you can also change the font color anytime).
   • the bottom part of the banner should have a darker shade since your links will appear in white & red.
9. After designing your banner, you now have to slice it in two or crop (in other words also, cut) the upper part & the lower part of the banner & save it as two new graphics:
   1. upper banner (e.g. banner1.jpg) - should have these dimensions: width=780 height=224.
   2. lower banner (e.g. banner2.jpg) - should have these dimensions: width=780 height=40. For the visual learners, below is a sample banner as a guide.
      
      
10. Upload them to your favorite photo hosting site (I recommend photobucket). Be sure to copy the URLs (or the exact location of each banner).
11. Now, you have to paste those URLs properly. Go back to your Custom CSS page by clicking this link: http://multiply.com/setup/pages/upload-css and then look out for two sets of codes inside the box:
    
    1. For your upper banner, look out for the code below & replace the link there with the URL of your upper banner. Let the red font below be your guide:

       /*PAGE TOP*/
       div#owner_nav.owner_nav {
       margin: 10px 0px 0px 35px;
       height:247px;}

       div.owner_nav {
       border: none;
       margin: 10px 0px 0px 0px;
       height: 247px;
       width: 780px;
       border: 0px solid #fff;
       border-bottom: none;
       padding: 39px 0px 0px 0px;
       background:
       url(http://example.com/the_URL_of_your_upper_banner.jpg)
       no-repeat top left;
       background-color: #fff;
       background-position: 0 -1px;
       }

    2. Now, for your lower banner, look out for the code below & replace the link there with the URL of your lower banner. Let the red font below be your guide:

       /* MENU */
       #subnav .toptsel {color:#f66;
       font-size:20px;
       padding: 0px 0px 2px 5px;
       }

       #subnav .topt {color:#fff;
       font-size:14px;
       font-weight: bold;
       margin: 2px 0px 0px 5px;
       text-align:top;
       padding: 0px10px 0px 0px;}

       div#subnavc {
       padding: 107px 0 0 0;
       background-color: #FFF;
       border: none;
       width: 780px;
       height: 40px;
       background: url(http://example.com/URL_of_lower_banner.jpg)
       no-repeat bottom center;
       }
       div#subnav {background: none; border:none; padding-top: 6px;}

12. Paste the URL of both your banners replacing the URL supplied just like in the code above (the bold red font) by holding CTRL+V or right click on your mouse then click 'paste'. Hit the 'save' button. Then you're done!

Pretty nifty, huh? If you followed this, I'd appreciate it if you could leave a comment and tell me how you fared with it.