|
|
K2CSSandCustomCSS
An overview of styles.css and how to use custom CSS files.
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 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>
Sign in to add a comment
Is that the only place to change to make the header a different size?
It would be nice to put a link to a (the?) styles' list..
I am using the Vader2 theme for my blog and recent posts are not being displayed correctly. The backgrounnd the text of the comment fields are white and the text is the wrong color. THe data is formatted correctly for the 1st few entries(comments on posts) but every new entry is not formatted properly on the page.
这里没有样式下载么?
I was looking for this page forever :)
Is that Style Footer: thing broken? Can we get a bit more implementation details.
I'm trying to get it to say "site by xentek" instead of the default, "Styled with ..."
Okay, Got it now... after reading the code.
The style header is only parsed when you're in the K2 Options, and then Update them... they are read in and stored in the DB. However, it is still prefixed with Styled By - which seems like a bug to me. Override should do just that... override the whole thing!
Hi Guys, busy developing a theme using K2 and though the dynamic widths thing is a cool feature I don't want it for this specific site. How can i fix the width? Or do i just make all the widths the same?
@eric.marden: Good idea. I'll add that to the list of TODOs.
@nomadnur: I have considered that. There will be an option to disable dynamic columns.
love the new api hooks. daddy likes.
the dream of being able to do EVERYTHING outside of the k2 files has finally arrived. good job k2 team!
can we have a sample style with a "functions.php"? because i still don't know how to make use of it, althought i love the idea.
@gray88: To use these, in your functions.php you need a line like :
add_action('template_footer', 'my_footer_function');for each action you want to hook into, then you write your code as
function my_footer_function () { //some code to run at the footer }It will be of great help if you can add the following additional K2 Hooks:
In Header.php
1) Just before // Load localizations
2) Just before </head>
In Footer.php
3) Just before </body>
#1, don't forget that there may be WP native hooks you can use as well.
For #2, there are great plugins that address this already. The one for G. Analytics will even tag links correctly, and the one for favicons works with K2 without a hitch.
#3, take a look at wp_enqueue_script() - this is the proper way to load jscripts with wordpress, though YMMV if you are looking to write functions to the page and not just including scripts. Also, see my answer to #1, as it may apply here as well.
Is there any way you could add a hook to add content to the sidebar? I don't think there are either K2 or WP native hooks to do that.
Never mind. I guess the best way to work with the sidebar is with widgets