1. Fabrik 3.9 has been released. If you have updated Joomla to 3.9, this is a required update.
    Dismiss Notice

form detail custom_css.php

Discussion in 'Community' started by smart, Sep 16, 2020 at 4:33 PM.

  1. smart

    smart Member

    Level: Community
    Hi,

    I love Fabrik and using it on my hobby project. I appreciate all the developers and members on the forum.
    I have a little issue with setting a custom font size for my form. I did follow the instruction but I still can't figure out.
    http://fabrikar.com/forums/index.php?wiki/css-styling-examples-fabrik3-3/

    Here is the custom_css.php and it is placed properly in components/com_fabrik/views/details/tmpl
    Any help is greatly appreciated.

    PHP:
    header('Content-type: text/css');
    $c = (int) $_REQUEST['c'];
    $view = isset($_REQUEST['view']) ? $_REQUEST['view'] : 'form';
    $rowid = isset($_REQUEST['rowid']) ? $_REQUEST['rowid'] : '';
    $form = $view . '_' . $c;
    if ($rowid !== '')
    {
            $form .= '_' . $rowid;
    }
    echo <<<EOT

    /* BEGIN - Your CSS styling starts here */

    #$form #83 > ul {
       font-size: 18px;
    }

    .fb_el_fqbddata___Names {
        font-size: 18px;
        border: 2px solid red;
        padding: 40px;
    }

     
     
  2. smart

    smart Member

    Level: Community
    I have solved one issue here. I'll have to place the css template file in components/com_fabrik/views/form/tmpl folder. not in details. But font-size cannot be assigned. With individual field using (.fb_el_fqbddata___Names ), other properties could be assigned like bold, border, padding except for the font size. Below is the code I have been trying to fix this.

    Code (Text):


    .fb_el_fqbddata___Names {
        font-size 200%;
        border: 4px solid green;
        padding: 40px;
    }

    #$form #83 > ul {
        font-size: 32px;
    }

    div.fabrikLabel {
    font-weight: bold;
    }

    #$form div.fabrikLabel {
    font-weight: bold;
    }
     
     
  3. lousyfool

    lousyfool Active Member

    Level: Community
    You have errors in you code:
    Code (Text):
    font-size 200%;
    is missing a colon and should instead be
    Code (Text):
    font-size: 200%;
    Also, I believe you do not have an element with id="83" in your page. Please double-check and rectify.

    The second declaration for font-size might still not work as it's typically the "li" being spec'd in CSS. So, your template or other CSS may well override it. In that case try the selector
    Code (Text):
    #$form #whatever > ul > li
     
  4. smart

    smart Member

    Level: Community
    Thank you. I fix that font-size: but still not working yet.

    Code (Text):
    #$form #fqbddata___Amount {
    font-size: 150%;
    }
    The above code works for the element control but not the label.
    I tried the code below but not working either

    Code (Text):
    #$form div.fabrikLabel {
    font-weight: bold;
    }

    #$form div.fabrikDetails .fabrikLabel {
    font-weight: bold;
    }
     
    On the Html, for the label, the class name is class="fabrikLabel control-label" . I don't know how to declare in css.
     
  5. lousyfool

    lousyfool Active Member

    Level: Community
    In CSS that would then be the selector
    Code (Text):
    .fabrikLabel.control-label
    You may also try with an added "!important" for the values.

    I guess more can't be said without seeing the page. Have a link?
     
  6. smart

    smart Member

    Level: Community
  7. smart

    smart Member

    Level: Community
    I am just wondering if Joomla main (protostar) template css or its custom css is overwritting the fabrik form custom css. I thought Fabrik css is the last css apply to it. That's why I could change the border and padding. May be I am not using the right name or syntax. Still learning. :)
     
  8. lousyfool

    lousyfool Active Member

    Level: Community
    So, this is the content of the custom_css.php file as loaded in the form, e.g. https://www.alintann.org/about/settings/test-2/form/68/7
    Code (Text):

    /* BEGIN - Your CSS styling starts here */

    #form_68_7 #group83 > ul  {
        font-size: 32px;
    }

    .fb_el_fqbddata___Names {
        font-size: 200% !important;
        font-weight: bold;
    /*  border: 4px solid green;
        padding: 4px;   */
    }

    #form_68_7 #fqbddata___Names{
        font-weight: bold;
        font-size: 200% !important;
    }

    #form_68_7 #fqbddata___Amount {
    font-size: 120%;
    }

    .fb_el_fqbddata___Amount_row {
        font-size: 150%;
      border: 4px solid green;
        padding: 4px;
    }

    div.fabrikLabel.control-label {
        font-size: 200% !important;
    }


    #form_68_7 div.fabrikLabel.control-Label {
         font-size: 200% !important;
    }

    /*
    #form_68_7 div.fabrikDetails .fabrikLabel {
    font-weight: bold;
    }
    */

    /* END - Your CSS styling ends here */
     
    Inspecting the HTML on the page (right-click -> inspect -> elements) shows:

    "#form_68_7 #group83 > ul" does not exist, there is no ul as direct child under #group83.

    The declaration for ".fb_el_fqbddata___Names" works, obviously: the font is bold and huge because it's 2 x 200% (once from this and once again from the next declaration for "#form_68_7 #fqbddata___Names"), but only in the form field as the label gets its CSS from template.css.

    "#form_68_7 #fqbddata___Amount" also works, the font is larger than normal.

    "div.fabrikLabel.control-label" is wrong since it's not a <div> but a <label>. To be safe, it should be ".form-horizontal .fabrikLabel.control-label".

    Ditto for "#form_68_7 div.fabrikLabel.control-Label". If you corrected it and left it in together with the previous declaration, it would end up 200% + 200% again. Don't take this too seriously, but if you repeat the same error multiple times, it won't get better, haha.

    And ditto for "#form_68_7 div.fabrikDetails .fabrikLabel".

    Bottom line:
    You'll have to study CSS more. There's a lot on the web about it... more can't be said here, sorry.

    Good luck! ;)
     
  9. lousyfool

    lousyfool Active Member

    Level: Community
    Nope, it's not. You can see when inspecting the page HTML and study the order of stuff loaded in the <head> tag: it's somewhere in the middle of various CSS files, but before the template CSS files.
    Means you'll have to use either high-priority selectors (you're sort of on the right way by at least sometimes using IDs) or "!important" (though even that alone is sometimes not enough if you're "sloppy" with selectors).
     
  10. smart

    smart Member

    Level: Community
    Thank you, Sir. I am able to change the label font size from your instruction. ".form-horizontal .fabrikLabel.control-label". Now I'll study more on CSS and will try to increase the text/number input text sizes later.
     

Share This Page