We use cookies to improve your experience. No personal information is gathered and we don't serve ads. Cookies Policy.

ExpressionEngine Logo ExpressionEngine
Features Pricing Support Find A Developer
Partners Upgrades
Blog Add-Ons Learn
Docs Forums University
Log In or Sign Up
Log In Sign Up
ExpressionEngine Logo
Features Pro new Support Find A Developer
Partners Upgrades
Blog Add-Ons Learn
Docs Forums University Blog
  • Home
  • Forums

Styling EE Custom Module

Development and Programming

Codehack's avatar
Codehack
2 posts
15 years ago
Codehack's avatar Codehack

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

       
the3mus1can's avatar
the3mus1can
426 posts
15 years ago
the3mus1can's avatar the3mus1can

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
        ));
    }
       
Codehack's avatar
Codehack
2 posts
15 years ago
Codehack's avatar Codehack

Thanks for the response. If I read your code correctly, One possibility would be to place the custom css in the themes/third_party/ folder?

I guess I’ll try that and see how that works.

       
the3mus1can's avatar
the3mus1can
426 posts
15 years ago
the3mus1can's avatar the3mus1can

Yes. I think this is the preferred way as it keeps it out of the system folders.

       

Reply

Sign In To Reply

ExpressionEngine Home Features Pro Contact Version Support
Learn Docs University Forums
Resources Support Add-Ons Partners Blog
Privacy Terms Trademark Use License

Packet Tide owns and develops ExpressionEngine. © Packet Tide, All Rights Reserved.