Difference between revisions of "Website update 2011/HOWTO Update Website Front Page"

From Creative Commons
Jump to: navigation, search
(Custom Buckets)
(Carousel)
 
Line 61: Line 61:
 
==== Carousel ====
 
==== Carousel ====
  
The best image size for the carousel is 800 pixels wide by 533 pixels high.
+
The image ratio varies at different screen sizes, but always preserves the
 +
horizontal dimension.
 +
 
 +
It is possible for the bottom of the image to be clipped, but also for it to be
 +
too short.
 +
 
 +
In order to ensure full coverage of the carousel, I'd recommend an image ratio
 +
of 2:3. The minimum size for an image would be 640 pixels by 427 pixels high.
 +
 
 +
An example image size for the carousel is 800 pixels wide by 533 pixels high.
  
 
An example is:
 
An example is:

Latest revision as of 03:00, 13 October 2011


This is how to update the new website's main page.

Fresh Creative Commons Site

  • login to wordpress
  • Go to the "Home" page and change the template to "Home Dynamic"
  • If you visit the main home page, there should be no change.
    • NOTE: If no results with the right category or found, default carousel and buckes are selected.
  • click on "All Links" in left-hand menu
  • select all links and delete them (these are the generic defaults)

Creating New Links

Categories

  • Carousel
  • Bucket
    • Case Studies
    • CC Store

Buttons

Buttons have a simple scheme with the "Button" + "Text for Button" which if were a category, would be: "Button Text for Button" would produce a button with the text "Text for Button" inside of a button. There are three button types.

  • Button Some text inside
    • Standard gray button with the text inside, in this instance "Some text inside"
  • Green Button Some text inside
    • A green button with "Some text inside"
  • Text Button Read Some text inside
    • A text only button with no button chrome

Ratings

The link ratings are used for waiting. There is a rating from 0 - 10.

  • Rating 1 is the first bucket out of six in the first row
  • Rating 2 is the second bucket out of six in the first row
  • Rating 3 is the third bucket out of six in the first row
  • Rating 4 is the fourth bucket out of six in the second row
  • Rating 5 is reserved for the case studies carousel, and is the 5th spot on the 2nd row
  • Rating 6 is reserved for the CC Store caoursel and is the 6th spot out of six buckets, on the bottom row
  • Rating 7, 8, 9, and 10 are for the carousel really and are used to weight the order of the carousels.

Images

You can use the wordpress media upload to put an image up, just make sure to copy the full url to that image and paste that into the image "Image Address" field if you want to use an image.

The best dimensions for an image is: 300 pixels wide by 200 pixels high.

Every bucket is capable of displaying images.

Other Fields

The other fields are generally used how one would expect.

Custom Buckets

Carousel

The image ratio varies at different screen sizes, but always preserves the horizontal dimension.

It is possible for the bottom of the image to be clipped, but also for it to be too short.

In order to ensure full coverage of the carousel, I'd recommend an image ratio of 2:3. The minimum size for an image would be 640 pixels by 427 pixels high.

An example image size for the carousel is 800 pixels wide by 533 pixels high.

An example is:

http://cc.localhost/wp-content/themes/creativecommons.org/img/2251780221_5a21c2591a_o.jpg

Case Studies

The category "Case Studies" is used for case studies and the main thing is that the Name of the link is not the name of the bucket.

CC Store

This is a bucket with a carousel inside, and the content of the category "CC Store" is used to create the changing graphic in the CC Store block.

NOTE: The RSS field in the links is actually used to create a custom link around the image in this block.

The button on the carousel is the main link on the link/bookmark and the button is defined by the category. By default buttons on the carousel are green buttons.