Styling a specific element in custom.css detail template

[georgie]

Hi

I tried to customize a specific element in custom.css detail template, to my PDF export. But without success...

I have tried this, in a lot of kind, but it does not work:

.fb_el_tablename___elementname  {
    background-color: red !important;
}

Any idea ?

THX

 

[rob]

yeah my bad, as its a details view and not a form view you need to append "_ro" to the class name:

.fb_el_tablename___elementname_ro  {
    background-color: red !important;
}

 

[georgie]

Ahhh, the "_ro" !!! Ok it works ! THX !

OK, but again some question about the same subject:

How to catch the label of a field? I have tried this, without success:

.fb_el_projets___titre_ro label.fabrikLabel.control-label.fabrikTip{
    display: none;
}

THX

 

[troester]

.fb_el_projets___titre_ro label {
display: none;
}
should do.

 

[georgie]

No, I have tried before, and some others kinds, no success...

 

[troester]

Do you have a link to the details view?
Which template are you using for the PDF?

 

[georgie]

I use a custom template detail (in form settings), called "projet_validation".

Here a link, but you've got to be connected:

http://www.driihm.fr/validation-des-projets/form/47/573

It is ok ?

 

[troester]

I can't see a Fabrik template projet_validation loading in details view, it's loading bootstrap.
It also isn't loaded if appending ?layout=projet_validation, so I assume it does not exist.

Anyway, for PDF you must select the "PDF template".

For PDF/details the label is set via
.fabrikForm.fabrikDetails .fb_el_projets___titre_ro .fabrikLabel {display:none}
or
.fb_el_projets___titre_ro .fabrikLabel {display:none!important}

Is there a reason that you don't use custom_css.php with
#$form ....
which would create more specific css (so it's not necessary to use !important)?

 

[georgie]

OK

In fact, with your last precision ("...fabrikLabel" and no just "...label"), it work !
So, to hide a label in PDF export, I use, with success:

.fb_el_TABLE___FIELD_ro .fabrikLabel{display:none;}

I have no reason to use or not use "#{$form} ...". It is just that I do not understand the difference, it work with or without. Can you explain me the difference please ?

PS:My PDF template is called "projets_validation", with a "s", sorry, my mistake.
And indeed, my detail view use "bootstrap" (it is just my PDF template which use "projets_validation").

Thanks !

 

[troester]

The problem on my site is that the custom_css.php setting
.fb_el_TABLE___FIELD_ro .fabrikLabel {display:none;}
is overridden by the J!template
.row-fluid [class*="span"] {display:block}

so I have to be more specific or use !important

If it's working on your site, ok.

For testing the PDF layout you can append ?layout=your-PDF-layout&tmpl=component to the details view URL.
This will not necessaryly look exactly as in PDF (e.g. screen does handle float, PDF does not) - but if something is NOT working on the screen display it usually won't in PDF, too.

 

[cheesegrits]

Adding the #{$form} simply makes the CSS selector more specific. $form contains the ID of the form, so will result in a CSS selector like ...

#form_7 .fb_el_foo .fabrikLabel { ...}

... which restricts the selector to those classes within the #form_7 container (in this case, elements of class fabrikLabel which are within an element of class fb_el_foo, which are within an element of ID form_7). In this case it won't make much difference, but in general when specifying custom CSS which you only want to apply to a specific form, it's best to put that in. It never hurts, and can help.

See any CSS selector tutorial for details on how CSS selection works.

-- hugh

 

[georgie]

OK thanks for details.

In fact, your details about the template give me an idea about another similar form behaviour, then a really good improvement, and then a new problem linked... I go to open a new ticket...

 

[rob]

FYI, For debugging pdf output you can also turn on "pdf debug" in fabrik's global settings. This rendered the pdf markup in the browser window.

 

[troester]

@rob: it should...
But it's showing the details' template, not the PDF's