15 Posts
Oberon
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


<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

Get a VIP membership
4229 Posts
Kadministrator
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
ricco
9 years ago
0
Level 1

Thank you Oberon.

Get a Book for SEBLOD