Keyword

CSS editing from K2 administrative back-end

More
14 years 2 weeks ago #81818 by Dylan
Okay, might as well get the full procedure for copying default k2.css to your joomla template. Seeing as I never use it, I naturally forgot one big step: the images called from css... duh...

Steps

1. Locate the file /components/com_k2/css/k2.css. Copy this to /templates/your_joomla_template/css/k2.css

Note: in the source directory you will also find k2_ie6.css and k2_ie7.css. You do not need to copy these as they will not be used (by way of conditional comments) when you disable use default k2 css. And besides that, in version 2.2 they are empty anyway ..?


2. Locate the directory /components/com_k2/images/ and copy the contents, including subdirs to /templates/your_joomla_template/images/

These images are used for instance for your k2 rss feed or networking buttons. Of course you can replace/modify both images and css as desired.


3. Locate your Joomla templates default css file. This will most likely be something like /templates/your_joomla_template/css/template_css.css.

Open this file and at the very top add the following @import url("k2.css");

4. Configure K2 not to use default css. In Joomla backend click on Components > K2 and then click on Parameters located in the upper right corner of the page. In the list of parameters set Enable K2 default css to no and click Save.

Now the file /templates/your_joomla_template/css/k2.css will be used for the styling of default K2 classes. You can edit this file by hand or from the Joomla backend through Extensions > Template Manager > [select template] > Edit CSS > [select k2.css]

Change according to your needs, such as for instance using the same font-family everywhere. Of course you can always clear the font-family entire, in which case all fonts will inherit from your Joomla template (as defined for body and/or html)

If you use K2 sub-templating including introducing custom styles you can add them.

Note: if for some reason you (temporarily) want to change back to default K2 css, such as when you messed up big-time... do not forget to comment the @import in your template default css file. Replace the @import url("k2.css"); from step 3 with /* @import url("k2.css"); */ or delete the line entirely.

Please Log in or Create an account to join the conversation.

More
14 years 2 weeks ago #81819 by Dylan
Note: I understand wanting to tweak a bit, adding a pixel here or there or minor things like that. In my case I extensively use php in style-sheets, the same way I use php to echo javascript in my templates index.php file. I would not want my customers to edit these files through the Joomla GUI. All the languages are mixed up and a syntax error is very easily made, especially without color coding or without having full understanding of php, html, css and javascript

A very small example would be the cross-browser opacity using php style-sheets as I described here cross-browser-opacity-using-php-stylesheets

You'll understand I don't want customers to be easily able to edit these stylesheets. You'll also understand I'm reluctant to use Joomla GUI myself to do "minor" tweaks

Please Log in or Create an account to join the conversation.


Powered by Kunena Forum