I’m developing a custom module for an EE project to be used by a client. The module will have a control panel interface.
I’m having difficulty figuring out how to style the interface. Based on my searches, the only thing I’ve seen so far is to create an override.css, which I’m not sure will work for me.
Is there a simple way to maybe link a stylesheet, maybe in a css folder that is part of the module?
Thanks
Take a look at the way that I have included css and js files in this (https://github.com/themusicman/datetime_picker) field type.
class Datetime_picker_ft extends EE_Fieldtype {
/**
* Constant that holds the folder name of the field type's css and js in the third_party themes folder
*
* @const string
**/
const THEME_DIR = 'datetime_picker';
/**
* Stores the state of whether the field type has been initialized before
* @access protected
* @static
* @var bool
**/
protected static $initialized = FALSE;
/**
* Stores the base url to the themes folder
* @access public
* @var string
**/
public $theme_folder_url = '';
/**
* Holds general field type meta info
* @access public
* @var array
**/
public $info = array(
'name' => 'Date/Time Picker',
'version' => '1.0',
'author' => 'Thomas Brewer @th3mus1cman',
);
/**
* Constructor
*
* @access public
* @param void
* @return void
*
**/
public function __construct()
{
parent::__construct();
$this->theme_folder_url = $this->EE->config->item('theme_folder_url');
}
/**
* Handles the display of the field in the channel entry page
*
* @access public
* @param array $data
* @return string HTML
*
**/
function display_field($data)
{
if (self::$initialized === FALSE)
{
//only need to add this stuff once...
$timepicker_url = $this->theme_folder_url.'third_party/'.self::THEME_DIR.'/jquery.timepicker.js';
$slider_url = $this->theme_folder_url.'third_party/'.self::THEME_DIR.'/jquery.slider.js';
$style_url = $this->theme_folder_url.'third_party/'.self::THEME_DIR.'/jquery.timepicker.css';
$this->EE->cp->add_to_foot('<link href="'.$style_url.'" type="text/css" rel="stylesheet" />');
$this->EE->cp->add_to_foot('[removed][removed]');
$this->EE->cp->add_to_foot('[removed][removed]');
self::$initialized = TRUE;
}
$js_config = json_encode(
array(
'timeOnly' => $this->settings['time_only'],
'ampm' => TRUE,
)
);
$js = <<< JS
$('input[name=field_id_{$this->field_id}]').datetimepicker($js_config);
JS;
$this->EE->javascript->output($js);
if ((int) $data == 0)
{
$datetime = '';
}
else
{
if ($this->settings['time_only'])
{
$datetime = (is_numeric($data)) ? strtolower(strftime('%I:%M %p', $data)) : $data;
}
else
{
$datetime = (is_numeric($data)) ? strtolower(strftime('%m/%d/%Y %I:%M %p', $data)) : $data;
}
}
return form_input(array(
'name' => $this->field_name,
'id' => $this->field_id,
'class' => 'datetime_picker',
'value' => $datetime
));
}Packet Tide owns and develops ExpressionEngine. © Packet Tide, All Rights Reserved.