StyleGuide

 

Style

 

Hyves Themes

Hyves Themes

Pre-release documentation – Hyves Themes on Hyves

This document describes how to make a custom layout on Hyves with Hyves Themes.

What is Hyves Themes?

Hyvers can change the Theme of Hyves with an easy to use interface. A Hyver can choose from a couple pre-defined Themes in the gallery. There he can find some sponsored- and artist Themes.
A user who selects a Theme will see this design on all pages. On profile pages with a pimp installed the pimp will be shown, just like Hyve networks. This creates fantastic branding opportunity’s

With Hyves Themes a partner can create a complete new look & feel for all Hyves pages. All this can be accomplished with a basic editor. (Just like regular Hyves pimps). Alongside of this, Hyves wil make an editor available to partners which can change almost the whole site.

How to make a Hyves Theme?

Partners can subscribe for access to the Hyves Theme Editor. With this editor you can make a Theme which can be placed in the gallery.

To get access send the Hyves username from the Theme developer to your contact at Hyves. After activation you can access the editor got to http://hyves.nl/layout/pimp.

Submitting a Theme

Partners of Hyves can submit a Theme with an extra button “Apply for Gallery”.

After submitting a copy of the Theme, it wil be checked by Hyves before it will be placed in the gallery. It’s not possible to change the Theme after it's been placed in the gallery. Newer versions of the Theme can be submitted with a new name and version number.

After the Theme is checked by Hyves it will be placed inside the artist gallery. A thumbnail (120x120) will be shown as preview. Partners can submit a thumbnail by themselves which will be automatically be scaled to 120 x 120. In the future the thumbnails can be shown in a bigger format. It’s recommended to make the thumbnails 700x700 pixels.

Steps

Some standard elements can be changed with the Hyves Theme Editor. Additional CSS will be used to edit the details and pictures. Images will be hosted on our servers; they can be send to the account executive by mail.

1. Flying start

The Hyver can choose from different Themes inside the flying start function. The Themes are made by Hyves. In the future there will be more Themes to choose from. The predefined Theme can be changed inside the tab custumize.

2. Costumize

You can skip the flying start tab and begin to make your own Theme. The following elements can be changed bij color, border, transparency and font.

  • screen background (color or image)
  • page background (everything between the header and footer)
  • header (Yellow bar with Hyves logo on top)
  • main menu (Blue bar on top)
  • left menu (The blue blocks, for example the profileblock
  • all blocks
  • titles of all boxes
  • tekst and hyperlinks

These elements are used all through the site and will immediately reflect the changes.

3. CSS editor

Note: The CSS Editor requires advanced knowledge of HTML and CSS. If required, Hyves Studio can help you with some tips & tricks.

The CSS editor offers you more possibilities compared to the customize tab. It's full potential can be achieved by using it in combination with a DOM inspector like Firebug or Webkit inspector. You can use the inspector to look up the classes and overwrite them using CSS.

The CSS editor contains a couple of clever functionalities to quickly make a Theme. In short:

  • all CSS will be validated an compressed with a DOM inspector. All CSS expressions & JavaScript will be filtered out, just like behavior and -moz-binding properties.
  • variables can be defined using standard CSS properties.
  • multiple properties can be compressed to one variable.
  • we offer a couple of "shortcuts" so a line has to be defined once.
  • The base.css (see below) contains some examples and is extensively documented.
Variables:

hss-set-variables { white: #fff; } 
body { background: $white$; }

More properties inside 1 variable:

hss-set-variables { defaultFont: 11px/1.65 Verdana, sans-serif; }
body { font: $defaultFont$; }

Shortcuts:
Method Result
div { -hss-clear: all; } div { zoom: 1; }
div:after { content: " "; display: block; height: 0;
clear: both; visibility: hidden; }
div { -hss-set-transparency: 80; } div { -moz-opacity: 0.2; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20); filter:alpha(opacity=20); opacity: 0.2; }

Note: more shortcuts will be added

For questions contact Jeroen Coumans (jeroen[at]hyves.nl).

Examples of a avanced Themes

You can see that the above example does not only change the style, but the complete lay out of Hyves.

Rules:

A Hyves Themes must meet the following requirements to be accepted in the gallery.

  • Content or interface elements can't be set to hidden
  • The Hyves Logo has to be on top of page; See style guide for more information.
  • The Theme has to be tested within the following browsers: IE6 and higher, Firefox 3 and higher, Chrome 4 and higher. We know that IE6 is a problem, some advanced styles are difficult. We advise to work according the principle of Progressive Enhancement.
  • Try to be conservative with the CSS editor. The more changes the harder it gets t maintain the Themes.
  • CSS is limited to 64 KB in size
Example CSS:

The next CSS example uses the Helvetihyves theme. Most elements are changed inside the editor, a couple are set with CSS. A couple of variables are used to make the changes easy.

hss-set-variables { 
    helvetica: Helvetica, arial, "Bitstream Vera Sans", sans-serif; 
    black: #000;
    darkGrey: #666;
    lightGrey: #ddd;
    lighterGrey: #eee;
    white: #fff;
    red: #d90000;
    darkRed: 730000;
}
 
body { font: 11px/1.65 $helvetica$; }
h1,h2,h3,h4,h5,h6 { color: $red$; font: bold 13px/1.65 $helvetica$;}
h1 { font-size: 24px; }
h2, h3, h4 { font-size: 12px; }
 
/* Insert the correct logo */
#logo { background: url(http://farm3.static.flickr.com/2718/4321914189_7402345b96.jpg); height: 23px; width: 69px; }
#logo img { display: none; }
 
/* Menu tweaks */
#menu .open .sub-menu-title,
#menu .current .sub-menu-title  { background: none; }
#menu .current .sub-menu-title { font-weight: bold; color: $black$; }
.sub-menu .sub-menu-secondary { border: 0; border-top: 1px solid $lightGrey$; }
.sub-menu-bg-mf-pimp { border: 1px solid $lightGrey$; }
 
/* Override user menu */
#usr-optns { padding: 0; }
#usr-optns .avatar { display: none; }
.usr-optns-menu { clear: none }
 
/* Homepage */
.buzz .buzz-respects, 
.buzz .buzz-presence,
.buzz .buzz-reaction-list li,
.buzz .buzz-reaction-list li.friend-reaction,
.buzz .buzz-reaction-list, 
.meta-box-hdr-inner, .meta-box-con-inner,
.buzz .reaction-form,
.buzz-reaction-list-more a { border-color: $darkGrey$; background-color: $lightGrey$; }
.buzz-item { border-color: $darkGrey$; }
 
.meta-box-hdr,
.no-hdr .meta-box-con { padding: 0 }
 
li.alt,
.buzz-overview .box-con li,
.buzz-overview h3,
 .box-con-sctn,
.reactions .paging.top,
.profile-overview .box-con-sctn { border-color: $lightGrey$; background: none; }
 
/* Hyvertising */
#skyscraper { top: 3px; border-left: 1px solid $lightGrey$; padding-left: 6px; }
#skyscraper .hyvertising-hdr { display: none; }
 
/* Override all hardcoded fonts */
.tabs,
#menu .sub-menu-title { font: 12px/1.5 $helvetica$; }