# How to add CSS to component settings?

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?

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. 1. 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>';
}
}

• Thank you, that looks interesting. Although, do I understand it correcly, that I need a separate plugin to install in addition to the component? I found this to combine the com and plugin, but I would prefer if I could just integrate it with the component link – jost21 Oct 2 '17 at 3:22
• I have edited original answer with 2nd option – jamesgarrett Oct 2 '17 at 7:41
• Thank you, that's perfect. I used custom form fields before, but it didn't come to my mind to use them for this purpose – jost21 Oct 2 '17 at 16:35
• I chose your second option and it works well. However, it doesn't just include the <style>...</style> but also some label and div tags, which cause a "gap" in the layout. I therefore build on your idea and extended the url form field to get a "longurl" form field. More details in my posted answer – jost21 Oct 2 '17 at 17:55

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');

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