1
deka87
Xoops Form styles
  • 2012/8/13 11:35

  • deka87

  • Friend of XOOPS

  • Posts: 1125

  • Since: 2007/10/5


Hi guys,

There is a xoops form I need to style another way than other xoops forms. HTML of a general form is hardcorded in class/xoopsforum/themeform.php and is a table with an "outer" class. What I need is not a table with different styles but a divs based form with custom styling. I don't want to touch the core. Any ideas how to implement this?

Thanks in advance

2
playsome
Re: Xoops Form styles
  • 2012/8/13 13:11

  • playsome

  • Not too shy to talk

  • Posts: 197

  • Since: 2009/4/15


Hi deka,

if the <table class="outer"> is hardcoded into the php file you would need to edit the core file to remove the table and include divs instead, theres probably no other way to do it.

If you need to just style form elements i.e. inputs, text areas, buttons, etc then I believe all xoops form element styles are in /xoops.css

Of course no html should be in a php file, especially not when xoops has a templating system, it kinds of defeats the purpose of using templates.

Hopefully in the next major release core team will remove all html from php files and hopefully module devs will folow suit.

Ive edited themeform.php for you and removed table, tr, td, th and replaced with divs. i havent tested it or anything.

code is from line 63 to line 106

function render()
    {
        
$ele_name $this->getName();
        
$ret '<form name="' $ele_name '" id="' $ele_name '" action="' $this->getAction() . '" method="' $this->getMethod() . '" onsubmit="return xoopsFormValidate_' $ele_name '();"' $this->getExtra() . '>
            <div class="tableWrap">
            <div class="tableTitle"><span>' 
$this->getTitle() . '</span></div>
        '
;
        
$hidden '';
        
$class 'even';
        foreach (
$this->getElements() as $ele) {
            if (!
is_object($ele)) {
                
$ret .= $ele;
            } else if (!
$ele->isHidden()) {
                if (!
$ele->getNocolspan()) {
                    
$ret .= '<div class="tableInner"><div class="head">';
                    if ((
$caption $ele->getCaption()) != '') {
                        
$ret .= '<div class="xoops-form-element-caption' . ($ele->isRequired() ? '-required' '') . '">';
                        
$ret .= '<span class="caption-text">' $caption '</span>';
                        
$ret .= '<span class="caption-marker">*</span>';
                        
$ret .= '</div>';
                    }
                    if ((
$desc $ele->getDescription()) != '') {
                        
$ret .= '<div class="xoops-form-element-help">' $desc '</div>';
                    }
                    
$ret .= '</div><div class="' $class '">' $ele->render() . '</div></div>' NWLINE//this is possibley where it adds odd/even class?
                
} else {
                    
$ret .= '<div><div class="head">';
                    if ((
$caption $ele->getCaption()) != '') {
                        
$ret .= '<div class="xoops-form-element-caption' . ($ele->isRequired() ? '-required' '') . '">';
                        
$ret .= '<span class="caption-text">' $caption '</span>';
                        
$ret .= '<span class="caption-marker">*</span>';
                        
$ret .= '</div>';
                    }
                    
$ret .= '</div></div><div><div class="' $class '">' $ele->render() . '</div></div>';
                }
            } else {
                
$hidden .= $ele->render();
            }
        }
        
$ret .= '</div>' NWLINE ' ' $hidden '</form>' NWLINE;    //end tableWrap
        
$ret .= $this->renderValidationJS(true);
        return 
$ret;
    }
}


Edit: you might have to edit the td's & tr's in function insertBreak (line 37) in case it that insearts empty rows in the main form table.

3
deka87
Re: Xoops Form styles
  • 2012/8/13 13:34

  • deka87

  • Friend of XOOPS

  • Posts: 1125

  • Since: 2007/10/5


playsome,

Thanks for the work done. The thing is if I touch the core it will affect all my website forms and I only need one of the forms to have custom styling. Seems like it needs some more sophisticated solution.

Quote:

Deka, maybe extending the class will help you. See this tutorial


Thanks for the link, Mamba. I will try it now and report the results.

4
Mamba
Re: Xoops Form styles
  • 2012/8/13 13:36

  • Mamba

  • Moderator

  • Posts: 11366

  • Since: 2004/4/23


Quote:
if the table class="outer" is hardcoded into the php file you would need to edit the core file to remove the table and include divs instead, theres probably no other way to do it.

Deka, maybe extending the class will help you. See this tutorial

Quote:
Hopefully in the next major release core team will remove all html from php files and hopefully module devs will folow suit.

Yes, that's the goal for XOOPS 2.6.0
Support XOOPS => DONATE
Use 2.5.10 | Docs | Modules | Bugs

5
playsome
Re: Xoops Form styles
  • 2012/8/13 15:44

  • playsome

  • Not too shy to talk

  • Posts: 197

  • Since: 2009/4/15


Hi Mamba,

thanks for the link to the tutorial, I think that will be useful for me also. Bookmarked.

Cheers.

6
zyspec
Re: Xoops Form styles
  • 2012/8/13 15:54

  • zyspec

  • Module Developer

  • Posts: 1095

  • Since: 2004/9/21


In this case you really only need to extend the XoopsForm class as Mamba suggests. You'll just need to create a render() method. You can see ./class/xoopsform/simpleform.php as an example.

7
deka87
Re: Xoops Form styles
  • 2012/8/13 16:31

  • deka87

  • Friend of XOOPS

  • Posts: 1125

  • Since: 2007/10/5


Quote:

In this case you really only need to extend the XoopsForm class as Mamba suggests. You'll just need to create a render() method. You can see ./class/xoopsform/simpleform.php as an example.


Really, it turned out to be that easy. Thanks guys, it's all done now!

8
Mamba
Re: Xoops Form styles
  • 2012/8/13 21:07

  • Mamba

  • Moderator

  • Posts: 11366

  • Since: 2004/4/23


Quote:
Really, it turned out to be that easy. Thanks guys, it's all done now!

Excellent! The power of OOP at work!
Support XOOPS => DONATE
Use 2.5.10 | Docs | Modules | Bugs

Login

Who's Online

232 user(s) are online (130 user(s) are browsing Support Forums)


Members: 0


Guests: 232


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Mar 31
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits