Co-branding explained.

Co-branding is fully customizable part of your Fotki experience. If you don’t like the look of your Fotki page, you can re-design it your way. Even if you have a very little experience with CSS and HTML you CAN DO THAT.


Now let us guide through the process of making your Fotki look like YOU want.

Basics.

  • 1. Your co-branding address is YourUserName.fotki.com
  • 2. To start modifying your theme, go to co-branding settings: http://myaccount.fotki.com/settings/cobranding/
  • 3. You will find 2 parts here: “Custom HTML” and “Custom CSS”.
  • 4. Your Fotki gallery represented by “##content##” tag in the Custom HTML window. Everything else you can customize right away: backgrounds, colors, navigation, header, footer and all other standard elements.
  • 5. That’s not all. You can customize all elements of your gallery too by redefining Fotki’s standard CSS values. Read further to learn more.


Tools you’ll need.
We will cover most popular tools here, however you can use any CSS and HTML grabbing tools.


Chrome web browser
Chrome has a build-in extension for getting code of any element on the page. Let us show you how it works.

  • 1. Open your co-branding page in Chrome.
  • 2. Right click on the element you want to change.
  • 3. Play with its properties on your co-branding settings page in “Custom CSS” window.
  • 4. Save changes to see the result.







Firefox web browser
Install “Web developer” extension forFirefox. Restart Firefox to complete installation.


  • 1. Open your co-branding page in Firefox.
  • 2. Click “CSS” box on top and choose “View style info”.
  • 3. Hove over any element to get its value.
  • 4. Copy/paste and play with its properties on your co-branding settings page in “Custom CSS” window.
  • 4. Save changes to see the result.







Here are some basic Fotki CSS values you can change to completely change your Fotki experience.


Body.CSS values responsible for the appearance of your background.

body { background-image: url(Link to your image here); background-color:#YourColor;} – allow you to change the background color or place background image.


Menu. CSS values responsible for the appearance of your top menu.

#menu
#menu a
#menu li



Center the page. Here is how you can center your content.

Wrap your content INSIDE </body> tag with a “wrap div”:

<body>
<div id="wrap">
All your other content including header, navigation and footer goes here.
</div>
</body>


Then use these CSS properties to center it:


#wrap { width:1000px; margin-left: auto ;margin-right: auto ;}



Examples.
After tweaking our standard “blue” theme we have come with the following result


Boring.

This is a standard theme without tweaking.





Stylish black theme.

This is the same content with a different design. Only CSS values were tweaked. Imagine what you can do if you add your own design elements and graphics.





We encourage you to experiment with your pages and send us your cool designs. We will list them in our Co-branding examples block.