|
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. If you intend on customizing K2 beyond the scope of CSS, see the wiki: K2ChildThemes. 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 CSSIt 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 FooterIf 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. HeadersThe 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. You don't need to include the 'px' when entering values for the Width and Height. Layout WidthsWhen 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:
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 |
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
I can see the value of having a stylesheet. So I have a couple of questions.
if, for example, I wanted to change: h1.blog-title { font-weight: bold; letter-spacing: -1px; padding: 75px 40px 0; }
to:
h1.blog-title { font-weight: normal; letter-spacing: -1px; padding: 75px 40px 0; font-family: georgia; }
and I want to put that into a custom stylesheet, where would I put it? I looked at sample.css, and I see;
#header { / Contains the H1 and menu / }
Would I put it after the comment line?
And I know how to change the background colour of the header, but where where would I put my changed background colour of the header in style.css?
And once I have finished, and want to save it, can I save it with its own name and put it in the same folder as sample.css, and will it then show up in wp-admin and I can choose that css as my stylesheet? Or should I make another folder inside styles, and put the new css in there?
@Bennettskaya
Put it after the comment.
If you do it in the k2 Custom Header admin, then you don't have to it. If not, stick it in your style sheet.
Either save over the sample.css or make a new one from it in its own folder. upload, and then activate.
I love the Vader2 style and only want one change, to make the general post font color a little brighter so it is easier to read on the dark background. I am a CSS newb and cant find where to change that. Could anyone please point me in the right direction?
How do you set how many columns K2 will display?
Is there a way I can make these a default on install automatically?:
Number of columns: 3, Style: Dueling Sidebars, Header: my chosen image in headers folder
Thanks!
我还以为这里有样式下载！
where do you have to put this "Layout Widths: 580px, 800px, 970px" to change the width of the layout.
What I actually want to do is to increase the width to around 1000px with two columns (1 sidebar).
How can I do that ?
Thank you for your answer !
Henry
I wrote up a plugin to take advantage of the new hooks that K2 RC6+ adds to the template. You can use "K2 Hook Up" to be able to enter content from the admin and have it show up in the template automatically. More info here: http://xentek.net/code/wordpress/plugins/k2-hook-up/
Comment by lebourrin91, Nov 02, 2008
where do you have to put this "Layout Widths: 580px, 800px, 970px" to change the width of the layout.
What I actually want to do is to increase the width to around 1000px with two columns (1 sidebar).
How can I do that ?
Thank you for your answer !
Please, answer him. I have the same question
Too bad nobody answered lebourrin91... I also want to do the same thing... I want two columns (1 sidebar) and a layout of 950px. Hrm.... how?
i also want two columns (1 sidebar) and a layout of 950px.
what do i have to change ?
I Would also like do the same thing
Try the experimental K2 960 child theme. It allows you to change your primary/sidebar widths without editing css. You will need to use subversion to download it:
svn checkout http://kaytwo.googlecode.com/svn/branches/k2-960/ k2-960
You will also need a copy of the K2 r762+ in the wp-themes folder and be named exactly "k2" for the K2 960 child theme to work.
looking for a way to disable the output_header_css() without modifying the file directly. thanks
I am trying to add a piece of affiliate code into the sidebar to be displayed between the tags and the links sections. I was adding it into sidebar.php between the divs however it doesn't display. I've done the same thing in footer php and it worked perfectly. Where am I going wrong? Am I entering the code into the wrong php file?
Comment by fdaohe, Dec 17, 2007 这里没有样式下载么?
@i...@ozvoxmedia.com:
If you're using widgets, then content in sidebar.php won't display. You need to add a text widget.
i've changed the columns-three width to 1050px . the problem is that now the header which is 950px is not in synch with the content area, and it repeats itself. is there a way to change the settings of the header width to 1050 as well ?