How to add CSS to component settings?

Question

I am working on a Joomla component, which includes hyperlinks. I'd like to include the URLs for the links in the configuration of the component. Therefore I added a config.xml to the main directory with the form fields for the URLs.
The xml for the fields looks like this:

<field 
    name="url-json" 
    type="url" 
    class="inputUrl"
    default="http://www.website...&amp;option=A&amp;id=1234" 
    label="COM_CUSTOM_CONFIG_LABEL" 
    description="COM_CUSTOM_CONFIG_DESC" 
    size="50" 
/>

I have multiple URLs and the important part are the query parameters. I set the size to size="50" but that is overriden by CSS and all the input fields have the same width. This way one can not see the query parameters of the URLs, since the are cut off.

Is there a way to add custom CSS to make the text fields wider?

I already added class="inputUrl" to the fields, but I don't know where I would add the CSS rules for it. Can I $document->addStyleDeclaration( $style ); somewhere to load styles just for the config page of my component?

Answer 1

There are a couple of alternatives.

1. A Plugin.

You can add styles or a style sheet into the administrator using the technique here:

How to add custom JS/CSS file, without modifying the template (from extension)?

Using $app->isClient('administrator') will allow you to add css just to the administrator. If you really want to load only on your page you can dig into the jinput as much as you want to get specific. eg.

class plgSystemRandomname extends JPlugin
{
   function onBeforeCompileHead()
   {
       $doc = JFactory::getDocument();
       $app = JFactory::getApplication();

       if ($app->isClient('administrator')){

           $jinput = $app->input;
           $option = $jinput->get('option','','CMD');
           $component = $jinput->get('component','','CMD');           
           if($option == "com_config" && $component == "com_yourcomponent"){
               $doc->addStyleDeclaration('.inputUrl{width:90% !important;}');
           }
      }
   }
}

Note that isClient is J3.7+ only.

2. A custom form field

Believe it or not, by using a custom form field you can insert anything you wish into a jform where you're otherwise limited to the xml schema.

https://docs.joomla.org/Creating_a_custom_form_field_type

Once you've set your field path in the xml config eg.

<fieldset name="basic" addfieldpath="components/com_something/fields">

You can then include a custom form field eg.

<field name="customscript" type="customscript" label="" description="" />

Then your actual form field code in components/com_something/fields/customscript.php looks something like:

defined('_JEXEC') or die('Restricted access');

jimport('joomla.form.formfield');

class JFormFieldCustomscript extends JFormField {

    protected $type = 'customscript';

    public function getInput() {
        return '<style>.inputUrl{width:90% !important;}</style>';
    }
}

Answer 2

Inspired by the second option of jamesgarett's answer, I build a custom form field that extends the url form field.
A minor issue with james' method is that joomla doesn't just include the <style>...</style> but also some tags around it. Which looks something like this:

<div class="control-label">
    <label id="jform...></label>
</div>
<div class="controls">
    <style> ... </style>
</div>

This causes a gap in the layout since there is no content.

Instead of using a separate form field that includes the style, I extended the url form field to make a longurl form field, which has added inline styles.

defined('_JEXEC') or die('Restricted access');

jimport('joomla.form.helper');
JFormHelper::loadFieldClass('url');

class JFormFieldLongurl extends JFormFieldUrl {

    protected $type = 'longurl';

    public function getInput() {
        $input = parent::getInput();

        $pattern = 'type="url"';
        $style= ' style="width:90%"';
        return str_replace($pattern, $pattern.$style, $input);
    }

}

By including

<fieldset name="basic" addfieldpath="administrator/components/com_something/fields">  

one can use a form field with the type longurl for URLs that need more space

<field 
    name="url-json" 
    type="longurl" 
    default="http://www.website...&amp;option=A&amp;id=1234" 
    label="COM_CUSTOM_CONFIG_LABEL" 
    description="COM_CUSTOM_CONFIG_DESC" 
    size="50" 
/>