Forums

Edit inline styles in Registration page

Permalink
I need to edit the inline style on one of the form input fields in a Registration single page.

http://www.emfunds.net/index.php/register/...

The Telephone Number field is too short. I can see in the output code that its width is being controlled by an inline style:

<input id="akID[18][value]" type="text" name="akID[18][value]" value="" style="width:80px" class="ccm-input-text">


I have tried to add an ID style to my main.css document but it doesn't work. 

#akID[18][value]{width:280px;}


Presumably because inline styles take priority over external style sheets. The odd characters make me suspect that it wouldn't work anyway but that's what the ID is...

Does anyone know how I can change this inline style?

Thanks,
Olly
 
citytech2 replied on at Permalink Reply
citytech2
Hi
You can easily remove the style="width:80px" from the code. Also you can put extra css class in that input. E.g. class="ccm-input-text your-classname"

Note: The "ccm-input-text" is C5's default class & you need to put an extra space between your own class & c5's class.

Hope it will help.

Citytech
olivercoquelin replied on at Permalink Reply
Thanks Citytech

How do I remove the inline style from the code? Also how do I add my own class to the input? There is no option to do this in the user attributes panel.
citytech2 replied on at Permalink Reply
citytech2
Hi
If you are using c5's single page then you should go to YOUR-PROJECT\concrete\single_pages\register.php & find the code.

Citytech
adajad replied on at Permalink Reply
adajad
You should really make an override of the single page before doing any changes.

Just copy 'root\concrete\single_pages.php\register.php' to 'root\single_pages\register.php' and make your changes to that file. That way if something goes wrong you can easily revert by just delete the file which will make c5 go back to the original file.
olivercoquelin replied on at Permalink Reply
Thank you both for your replies.

I have already added the copy of the Single file to the root/single_pages/ directory and have customised it there.

As this input element is a custom attribute that has been added through the control panel, the code for it does not appear in the registration.php single page the way that it does for the default input elements such as Email Address and Username. This is why I'm having difficulty working out how to control it. I can't see where this inline style is being assigned from.
adajad replied on at Permalink Best Answer Reply
adajad
Ok, I have looked into this further and found where the inline styles are set.

Once again I suggest making an override.

1. Copy 'root/concrete/models/attribute/types/number' to 'root/models/attribute/types/number'.
2. Open up controller.php in your newly copied folder ('root/models/attribute/types/number').
3. Edit line 45 and set the width to whatever you want
print Loader::helper('form')->text($this->field('value'), $value, array('style' => 'width:80px'));  //set it something else, i.e. 280px or change 'style' => 'width:80px' into 'class' => 'span5'
olivercoquelin replied on at Permalink Reply
Perfect. Thank you!
INTcommunications replied on at Permalink Reply
INTcommunications
Hi,
This may be an old thread but I too would like to restyle the register form - I can skin it okay so it goes into the theme but the styling is not consistent down the page. The part that you marked as the best answer has a path to inline styles oot/concrete/models/attribute/types/number in the controller on my install there is no line 45. So I don't know where to put styles for this form - After hours of searching I don't see infinitive answers for styling this form.
adajad replied on at Permalink Reply
adajad
The original post was regarding c5 v5.5 and since then there is a new override structure.

So what you need to do is to just override the function you are in need of changing.

In this particular case you should copy 'root\concrete\models\attribute\types\number\controller.php' to 'root\models\attribute\types\number\controller.php'

That file will now only contain
<?php 
defined('C5_EXECUTE') or die("Access Denied.");
class NumberAttributeTypeController extends Concrete5_Controller_AttributeType_Number  {}


If you now look up the corresponding file located in 'root\concrete\core\models\attribute\types\number.php' you will find all the functions used by the controller. Browse through that file until you find the function you need (line 41-46) and copy that complete function.

Now open up and edit 'root\models\attribute\types\number\controller.php' and add the function you want to override:
<?php 
defined('C5_EXECUTE') or die("Access Denied.");
class NumberAttributeTypeController extends Concrete5_Controller_AttributeType_Number  {
   public function form() {
      if (is_object($this->attributeValue)) {
         $value = $this->getAttributeValue()->getValue();
      }
      print Loader::helper('form')->text($this->field('value'), $value, array('style' => 'width:80px'));
   }
}

Now edit away to your hearts desire.

Don't forget to clear your site and browser cache to see the results.