15 Posts
10 years ago
3
Topic
Hi
When I used Seblod v2, I’d poste a little tutorial on the forum for this version to explain how to make some custom css on a specific field.
On Seblod v3 it work too ! Then may be it will be useful for some Sebloders who don’t want to create a template from 0.
1. I create a custom.css file in the css folder of my site template protostar like this: /sitename/templates/protostar/ccs/custom.css
2. I put in the header of the index.php of this template the link to the custom.css: in /sitename/templates/protostar/index.php
3. I put some css in the custom.css (be carefull of the seblod css divs "format", firebug is your friend):
/* note the name "mystyle" we'll need it latter, you can use whatever you want but this name must not be used elsewhere in other css files! */
4. In the Seblod option 3 panel of my content construction I put the name of the class I create before in the custom.css, ie "mystyle" .
You can add more than one class in the field like this "mystyle1 mystyle2 mystyle3" without the quotes but with one space between each css names. I test it, it work.
With this method you preserve your site template and Seblod and their is no problem when you upgrade
Best regards
Oberon
When I used Seblod v2, I’d poste a little tutorial on the forum for this version to explain how to make some custom css on a specific field.
On Seblod v3 it work too ! Then may be it will be useful for some Sebloders who don’t want to create a template from 0.
1. I create a custom.css file in the css folder of my site template protostar like this: /sitename/templates/protostar/ccs/custom.css
2. I put in the header of the index.php of this template the link to the custom.css: in /sitename/templates/protostar/index.php
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<jdoc:include type="head" />
<?php
// Use of Google Font
if ($this->params->get('googleFont'))
{
?>
<link rel="stylesheet" href="/sitename/templates/protostar/css/custom.css" type="text/css" /> <!--here is the link to my custom css file !-->
<link href='//fonts.googleapis.com/css?family=<?php echo $this->params->get('googleFontName');?>' rel='stylesheet' type='text/css' />
3. I put some css in the custom.css (be carefull of the seblod css divs "format", firebug is your friend):
div.cck_contents.cck_content.cck_field_type.myfield div.cck_value.cck_value_field_type.mystyle {
border: solid 1px #ffffff; <---just simple css for the test
}
/* note the name "mystyle" we'll need it latter, you can use whatever you want but this name must not be used elsewhere in other css files! */
- Replace field_type by the type of your field (text, wysiwyg_editor, etc..)
- Replace myfield by the alias of you field.
- 'value' may be replace by ‘label’ if you want to apply ccs to the…label ;-)
4. In the Seblod option 3 panel of my content construction I put the name of the class I create before in the custom.css, ie "mystyle" .
You can add more than one class in the field like this "mystyle1 mystyle2 mystyle3" without the quotes but with one space between each css names. I test it, it work.
With this method you preserve your site template and Seblod and their is no problem when you upgrade
Best regards
Oberon
4229 Posts
10 years ago
1
Level 1
You can use Code pack CSS plugin http://www.seblod.com/products/1854 to insert CSS directly from CCK or load external css file using css import http://www.w3.org/TR/CSS21/cascade.html#at-import
9 years ago
0
Level 2
Or you can in your Joomla template create html override for the com_ckk and then load your custom css with
JFactory::getDocument()->addStyleSheet($tpath.'/css/template.css');
You can easily and automatically create files for html overrides from the "Template Manager: Customise Template" view of your template in the "Create Overrides" tab.
310 Posts
9 years ago
0
Level 1
Thank you Oberon.