#summary An overview of styles.css and how to use custom CSS files.
#labels Phase-Deploy

This page details the main stylesheet file, styles.css which you'll find in the root of
K2. This file contains the styling details for all of the core K2, including at the moment
some plugin support (which will later be split into their own files). 

The CSS file is split into sections, with headers at the top of each. You can step through
the file by doing a search for /*- which marks each header (and is unique to the headers,
allowing you to step through the file this way).
	
The use of selectors has been exagerrated in some places, so as to make it easier for
people to gain an overview of what classes belong where in the hierarchy.

== Custom CSS ==

It is suggested, that you copy whatever changes you want to make, into a new CSS file,
save it in the styles directory and select it from the K2 Options panel. So as to keep
this file intact and make it easier for yourself to debug any potential problems as well
as upgrade to future K2's.

If you plan on distributing your custom style, it's highly suggested that you place the
following information at the top of the CSS file, commented out of course. This
information is placed in the footer of any site using your custom CSS. 

{{{
Author Name:
Author Site:
Style Name:
Style URI:
Version:
Comments:
}}}

=== Custom Footer ===

If you have defined the Style Name, Author Name and Style URI, K2 will display your style credits in the footer with the following format:

{{{
Styled with <a href="%stylelink%" title="%style% by %author%">%style%</a>
}}}

If you would like to overwrite this, you should include the following:

{{{
Style Footer:
}}}

Use `%author%` for Author Name, `%site%` for Author Site, `%style%` for Style Name, `%stylelink%` for Style URI, `%version%` for Version and `%comments%` for Comments.

=== Headers ===

The default dimensions for header image is 950 px by 200 px. If your custom style has different dimensions for the header, you should include the following information as well:

{{{
Header Text Color:
Header Width:
Header Height:
}}}

Be sure to use the width of your header when displaying 3 columns.

=== Layout Widths ===

When using two or more columns, K2 dynamically changes the number of columns depending on the width of the browser window. The default *#page* widths are as follows:

|| 1 Column || 2 Columns || 3 Columns ||
|| 580 px || 800 px || 970 px ||

For example, when K2 is set to display 3 columns and the user's browser width is 820 px, K2 will switch to 2 columns.

If your style uses different widths for *#page*, you'll need to include:

{{{
Layout Widths: 580px, 800px, 970px
}}}

where *580px* is the width of *#page* when using 1 column, *800px* is the width of *#page* when using 2 columns, etc. The unit px can be omitted. For example:

{{{
Layout Widths: 400, 800, 1200
}}}

=== PHP ===

You can also include a *functions.php* file with your style. Refer to the [http://codex.wordpress.org/Plugin_API WordPress Plugin API] for more info.

Below is a list of hooks provided by K2:

{{{
<?php /* K2 Hook */ do_action('template_body_top'); ?>

<div id="page">

	<?php /* K2 Hook */ do_action('template_before_header'); ?>

	<div id="header">
		<h1 class="blog-title"><a accesskey="1" href="Blog address">Blog title</a></h1>
		<p class="description">Tagline</p>

		<?php /* K2 Hook */ do_action('template_header'); ?>
	</div>

	<hr />

	<?php /* K2 Hook */ do_action('template_before_content'); ?>

	<div class="content">

		<div id="primary-wrapper">
			<div id="primary">

				<div id="notices"></div>

				<div id="current-content" class="hfeed">
					<div id="post-#" class="hentry"></div>
				</div>

				<div id="dynamic-content">
					<div id="rollingarchives"></div>

					<div id="rollingcontent" class="hfeed">
						<div id="post-#" class="hentry"></div>
					</div>
				</div>

			</div> <!-- #primary -->
		</div> <!-- #primary-wrapper -->

		<hr />

		<div id="sidebar-1" class="secondary"></div>

		<hr />

		<div id="sidebar-2" class="secondary"></div>

		<div class="clear"></div>
	</div> <!-- .content -->

	<?php /* K2 Hook */ do_action('template_after_content'); ?>

	<div class="clear"></div>
</div> <!-- Close Page -->

<hr />

<?php /* K2 Hook */ do_action('template_before_footer'); ?>

<div id="footer">

	<?php /* K2 Hook */ do_action('template_footer'); ?>

	<p class="footerpoweredby"></p>
	<p class="footerfeedlinks"></p>
</div>
}}}