Not logged in. · Lost password · Register

All posts by Kedes (6)

topic: Changing the HTML Layout of Forms (Add classes and change structure.)  in the forum: General Help and Support Templates and Layout
Avatar
Kedes #1
Member since Mar 2018 · 6 posts
Group memberships: Members
Show profile · Link to this post
Quote by sascha.leib:
(...)
/sascha

Hi Sascha and ach,

thank you for your responses, indeed the bulma style needs this kind of wrapping to get the css flexbox working. But after my plugin for reordering seems to crash some forms (I get an error 500), I think I'm going to go the lazy "less" way ;)

Too bad there is no template system like fatfreeframework or laravel is using it where I define a structure with elements that get replaced with the actual data:

Psydocode:

_login_tmpl.php
<div class="example">
  <div class="anotherExample">
     <? input_label('text', 'classes_or_other_attributes'); ?>
     <? input_field('typ', 'name', 'standardvalue', 'classes_or_other_attributes'); ?>
  </div>
  <div class="yetanotherExample">
      <? input_label('text', 'classes_or_other_attributes'); ?>
     <? input_field('typ', 'name', 'standardvalue', 'classes_or_other_attributes'); ?>
  </div>
</div>

_register_tmpl.php
<div class="example">
  <div class="anotherExample">
     <? input_label('text', 'classes_or_other_attributes'); ?>
     <? input_field('typ', 'name', 'standardvalue', 'classes_or_other_attributes'); ?>
  </div>
  <div class="yetanotherExample">
      <? input_label('text', 'classes_or_other_attributes'); ?>
     <? input_field('typ', 'name', 'standardvalue', 'classes_or_other_attributes'); ?>
  </div>
  <div class="yetanotherExample">
      <? input_label('text', 'classes_or_other_attributes'); ?>
     <? input_field('typ', 'name', 'standardvalue', 'classes_or_other_attributes'); ?>
  </div>
  <div class="yetanotherExample">
      <? input_label('text', 'classes_or_other_attributes'); ?>
     <? input_field('typ', 'name', 'standardvalue', 'classes_or_other_attributes'); ?>
  </div>
</div>

Greetings
Kedes
topic: Changing the HTML Layout of Forms (Add classes and change structure.)  in the forum: General Help and Support Templates and Layout
Avatar
Kedes #2
Member since Mar 2018 · 6 posts
Group memberships: Members
Show profile · Link to this post
In reply to post ID 60017
I'l think I will do it another way...

I use the register_hook TPL_CONTENT_DISPLAY and manipulate the content inside the <form></form> with some simple regex... seems to be the best way in my opinion. A parser like simple_html_dom is way too large for that simple purpose.

Or do you have another idea?

Greetings
Kedes
topic: Changing the HTML Layout of Forms (Add classes and change structure.)  in the forum: General Help and Support Templates and Layout
Avatar
Kedes #3
Member since Mar 2018 · 6 posts
Group memberships: Members
Show profile · Link to this post
In reply to post ID 60014
EDIT 3)

I've had a look inside form.php and there is no configuration for replacing the label or span Element... it is hard coded.
So I think I've to call some kind of preg_replace after rendering the form or I have to replace to whole function (for example the form_field)

BUT: is there a clean way to replace some of these functions? They are not grouped together in one class :(

Greetings
Kedes


EDIT: Got this one... I made a logical mistake ;)

I've done some scripting, but I'm not able to append / change the class :(

This is what I've got so far... The Plugin itself is called but the new classes are ignored:

public function bulmastyler(&$event, $param) {

  print_r($event);

  // Loop through each form element
  foreach ($event->data->_content as $key => $val) {

    // Does the element identifier exist?
    if( is_array($val) && array_key_exists('_elem' , $val) ) {

        // Check if element is a form element we want to change
        if( $val['_elem'] === 'openfieldset' ) {
            # wrong: $val['class'] = "field";
            # wrong: $val['_class'] = "field";
            $event->data->_content[$key]['class'] = "field";
            $event->data->_content[$key]['_class'] = "field";
        }

        //print_r($key);
        //echo "---";
        //print_r($val);

    }

  }

}


EDIT 2)
Ok, changing / adding classes works, but currently I get this:

<fieldset class="field">

    <legend>Registrieren</legend>

    <label class="control">
        <span>Benutzername</span>
        <input type="text" name="login" class="input" size="50" required="required">
     </label>

(...)

    <button type="submit" class="button is-info">Registrieren</button>
</fieldset>

What I want to archive:

<div class="wrapper">

    <h3>Registrieren</h3>

     <div class="field">
        <label class="label">Benutzername</label>
        <div class="control">
            <input type="text" name="login" class="input" size="50" required="required">
        </div>
     </div>
    
(...)

    <button type="submit" class="button is-info">Registrieren</button>
</div>

Layout goal: https://bulma.io/documentation/form/general/

Is there any way to change the order of the elements and replace/remove or add wrapper elements?

Greetings
This post was edited 3 times, last on 2018-03-13, 10:27 by Kedes.
topic: Changing the HTML Layout of Forms (Add classes and change structure.)  in the forum: General Help and Support Templates and Layout
Avatar
Kedes #4
Member since Mar 2018 · 6 posts
Group memberships: Members
Show profile · Link to this post
In reply to post ID 60013
Hi turnermm,

thank you for your response. It's awesome, I didn't know this is possible.

So I have to create an Action Plugin and monitor the *FORM_OUTPUT Events.
When an event is triggered, I have to manipulate the data stream, correct?

I'll try to program that plugin and then get back to you :)

Sincerelly
Kedes
topic: Changing the HTML Layout of Forms (Add classes and change structure.)  in the forum: General Help and Support Templates and Layout
Avatar
Kedes #5
Member since Mar 2018 · 6 posts
Group memberships: Members
Show profile · Link to this post
Subject: Changing the HTML Layout of Forms
Hello, everyone,

I would like to switch from Wordpress to DokuWiki. Now I'm a big fan of the Bulma. io framework and I'm in the process of changing the whole DokuWiki layout to it.

However, I'm stuck with the forms. These are probably generated deep in the system (/inc/html. php or /inc/form. php). Since I'm a friend of clean solutions, I don't want to change them, because that wouldn't stand up to any upgrade and you learn from your mistakes (like Wordpress...). Another theme (BootstrapV3) uses jQuery to customize... but I think that's a workaround and not really a clean solution.

To cut a long story short: how can I change the (form) structure? With an action plugin? If so, how?

Many greetings
kedes
This post was edited on 2018-03-12, 14:27 by andi.
topic: HTML Layout der Formulare ändern (Klassen hinzufügen und Struktur ändern.)  in the forum: Non-English Discussion German discussion
Avatar
Kedes #6
Member since Mar 2018 · 6 posts
Group memberships: Members
Show profile · Link to this post
Subject: HTML Layout der Formulare ändern
Hallo zusammen,

ich möchte von Wordpress auf DokuWiki umsteigen. Nun bin ich ein großer Fan des Bulma.io Framework und gerade dabei, das ganze Layout von DokuWiki darauf umzustellen.

Jedoch hänge ich an den Formularen fest. Diese werden wohl tief im System erzeugt (/inc/html.php bzw. /inc/form.php). Da ich ein Freund von sauberen Lösungen bin, möchte ich diese nicht einfach ändern, denn das würde keinem Upgrade standhalten und man lernt bekanntlich aus seinen Fehlern (so geschehen bei Wordpress...). Ein anderes Theme (BootstrapV3) verwendet zur Anpassung jQuery... das halte ich jedoch für ein Workaround und nicht wirklich für eine saubere Lösung.

Lange Rede, kurzer Sinn: wie kann ich die (Formular-)Struktur ändern? Mit einem Action Plugin? Wenn ja, wie?

Viele Grüße
Kedes
Close Smaller – Larger + Reply to this post:
Special characters:
Special queries
Go to forum
Imprint
This board is powered by the Unclassified NewsBoard software, 20150713-dev, © 2003-2015 by Yves Goergen
Current time: 2019-11-17, 12:27:43 (UTC +01:00)