form detail custom_css.php

[smart]

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.

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;
}

 

[smart]

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.

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

 

[lousyfool]

You have errors in you code:

font-size 200%;

is missing a colon and should instead be

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

#$form #whatever > ul > li

 

[smart]

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

#$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

#$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.

 

[lousyfool]

On the Html, for the label, the class name is class="fabrikLabel control-label" . I don't know how to declare in css.

In CSS that would then be the selector

.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?

 

[smart]

Thanks. I'll try that. Here is the link if you want to look at it. I appreciate it.
https://www.alintann.org/about/settings/test-2

 

[smart]

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.

 

[lousyfool]

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

/* 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!

 

[lousyfool]

I thought Fabrik css is the last css apply to it.

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).

 

[smart]

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).

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.