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
<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