Configuration: Site Branding Options

Configuration tutorials for Kinetic

Configuration: Site Branding Options

Postby Don Chambers » Tue Jan 06, 2009 12:17 pm

This tutorial will discuss the Site Branding options for Kinetic. As with all template options, enter the serendipity admin panel and select "Manage Styles" in the left sidebar. Options are numbered below for tutorial clarity, but are not actually numbered in the Theme/Style options page.

site-brand-1.png
Site Branding Options - screenshot
site-brand-1.png (35.59 KiB) Viewed 7410 times

1) Colorset. [select].
Select the colorset you wish to use from the drop down list of all installed colorsets. Kinetic is distributed with 11 basic colorsets. The default is Burgundy. Plenty of additional colorsets are planned for Kinetic.

2) Use additional user stylesheet. [yes/no]
Users have to create this stylesheet in the template directory. It has to be named user.css and can be used to override selected styles. This stylesheet is the last to load, meaning it will override any rules defined by previously loaded stylesheets. It can also be used to add new/additional rules not defined by the colorset stylesheets.

3) Use favicon. [yes/no]
This file must be named favicon.ico and exist in root installation folder. A default favicon is included with Kinetic but, like any favicon, must be placed in the root installation folder.

4) Left and Right sidebar widths in pixels (px). [select]
Left and Right sidebars, if used, are positioned by default below the "double" and "tabbed" sidebars. The widths of these can be equal, or one can be wider than the other. The width may be particularly important to you if you want to use Interactive Advertising Bureau (IAB) standard ad widths in these sidebars. 120 pixel width matches IAB Skyscraper, IAB vertical banner and a number of IAB button widths. 160 pixel width matches IAB Wide Skyscraper.

    134,134: Sidebars will be equal width enabling 134 pixels of content width for both left and right sidebars.
    108,160: Left sidebar provides 108 pixels of content width; right sidebar provides 160 pixels of content width equaling IAB Wide Skyscraper width.
    160,108: Left sidebar provides 160 pixels of content width equaling IAB Wide Skyscraper width; right sidebar provides 108 pixels of content width.
    148,120: Left sidebar provides 148 pixels of content width; right sidebar provides 120 pixels of content width equaling IAB skyscraper, IAB vertical banner, IAB Button 1 and IAB Button 2 widths.
    120,148: Left sidebar provides 120 pixels of content width equaling IAB skyscraper, IAB vertical banner, IAB Button 1 and IAB Button 2 widths; right sidebar provides 148 pixels of content width.

5a) Custom full banner image from media database [yes/no]
A full width banner image can be selected from the media database. Full width does not necessarily mean the image itself is the full banner width of 990px, but rather is an image that will be positioned within the full banner space which, itself, is 990px wide.

5b) Choose image [input]
Input the path to the full banner image, or click on the link to Media Library to select the image using the media manager. The media manager input will allow uploading of an image if it has not already been placed in the media library.

5c) Tiling of image [select]

    Single Image: the image will be displayed a single time.
    Horizontally Tiled: image will be repeated across the full width of the banner. These images are typically full banner height (default, 100px).
    Vertically Tiled: image will be repeated across the full height of the banner. These images are typically full banner width (default, 990px).
    Tiled Horizontally and Vertically: image will be repeated across both the full width, and height of the banner.

5d) Horizontal alignment [select]
Image will be positioned left, center or right depending on selection.

5e) Vertical alignment [select]
Image will be positioned top, center or bottom depending on selection.

6a) Custom left banner image from media database. [yes/no]
A partial width banner image can be selected from the media database and positioned in approximately the left half of the banner. The total available width for this image is 510px. This image will overlay the full width background image. A left banner image can be useful for site logos superimposed over a full width banner image. Selection and alignment options are identical to the full width banner image.

6b) Choose image [input]
Input the path to the full banner image, or click on the link to Media Library to select the image using the media manager. The media manager input will allow uploading of an image if it has not already been placed in the media library.

6c) Tiling of image [select]

    Single Image: the image will be displayed a single time.
    Horizontally Tiled: image will be repeated across the full width of the banner. These images are typically full banner height (default, 100px).
    Vertically Tiled: image will be repeated across the full height of the banner. These images are typically full banner width (default, 990px).
    Tiled Horizontally and Vertically: image will be repeated across both the full width, and height of the banner.

6d) Horizontal alignment [select]
Image will be positioned left, center or right depending on selection.

6e) Vertical alignment [select]
Image will be positioned top, center or bottom depending on selection.

7) Show website title in the banner [yes/no]
This option determines whether or not the website name/title will display in the banner. This text changes depending on the actual page viewed, and includes, among others, the entry title, category title and static page title. Sites using graphic banner logos will typically turn off this text.

8) Show website description in the banner [yes/no]
Like the website title, this text also changes depending on view, typically changing to the website title on page views other than the front page. Sites using graphic banner logos will typically turn off this text.

9a) Enable Page Bottom Text [yes/no]
Include text below the page. As this option is a toggle, the text can be "turned off" without actually deleting the value of the input field below.

9b) Text to display at the bottom of the page [input]
Full HTML markup is supported in this field. Page bottom text is often used for copyright and attribution notices.
=Don=
User avatar
Don Chambers
Site Admin
 
Posts: 226
Joined: Mon Jan 05, 2009 9:58 am
Location: Chicago, IL, USA

Return to Template: Kinetic

Who is online

Users browsing this forum: No registered users and 1 guest

cron