Custom Field Styling

[mehranfazili]

Hi all,

What is the best method to customize custom fields styling in the blog and single article layout?

Appreciate a small example.

Thanks,

[diinekis]

Hi

1. Add to your Custom Field a unique CSS class in Edit Fields >Options tab > Render Class
Let's say our class is myCFclass

2. In your CSS you can customize this specific class by this selector:

Code: Select all

.blog .fields-container .field-entry.myCFclass {
	color:red;
	font-weight:600;
}

With the above css your specific Custom Field will be bold and red in Blog Category view.

3. If you want only the label or the value of this CF to be different change accordingly:

Code: Select all

.blog .fields-container .field-entry.myCFclass span.field-label { /*or span.field-value */
	color:red;
	font-weight:600;
}

Good luck!

[mehranfazili]

Hi diinekis,

I tried your method and copied the exact code to the Fields >Options tab > Render Class field. Using the Chrome "Inspect Element" tool I see that the custom CSS class is applied to class="fields-container" however, Custom fields are rendered as before and are not updated with CSS rules.

Here is the link to the page:
http://epattern.ca/index.php?option=com ... Itemid=297

What do you think I am doing wrong?

Appreciate your input.
Thanks,

[diinekis]

Hi

Inside the " Fields >Options tab > Render Class field" you must enter ONLY the class "myCFclass"
Then inside your template css file (i.e. custom.css) you will enter the class with properties.

[diinekis]

I see you are using the Protostar template so inside your Joomla ../templates/protostar/css/ create a file user.css, enter there the class and it will work.

[mehranfazili]

Thank you very much, worked beautifully.

So my takeaway is that: Using "Module Class Suffix" or In Custome Fields case using the "Render Class", I can call any custom CSS class, given that the CSS file containing the custom class is placed in the CSS folder of the template. Is this statement correct?


Regards,
Mehran

[diinekis]

Yes!
But in our case in Protostar Template inside user.css.
Why? Because Protostar is looking for this file and reads the content.
In future, if you use another template you must know what css files are loaded by this template.

About Protostar take a look here:

https://extensions.joomla.org/blog/item ... -template/

[mehranfazili]

Great. Yes we discussed the Protostar example but I learned a lot from you.

Thanks again for your help.

Regards,
Mehran

[vkengo]

Is there a way to wrap the field group with a class, it would be good to have a class in the settings for field groups that would avoid multiple layers i.e. add the groups in a module just to be able to wrap it?

[diinekis]

Hi
There is already a class for the custom fields the " .fields-container" so you can make changes in your .css file

[vkengo]

Thanks for your response.

To detail the problem I'm facing, is that I have 2 field groups displaying in one article for the moment (this can more), the current class '.fields-container' is the for both groups, so we don't have a unique identifier for each group.

Using a pseudo class for child works only if the elements stays in the same position which is not guaranteed and not that practical to use with existing classes.

My query mainly is can we get a unique identifier to the Field Group e.g. it's ID or have the option to add a class to the setting like in the Fields Item (Render Class) or in Modules. Once that's available I not even need to customise a layout to position them, this can be done JS, one entry can save a lot of extra code and help site admins who are none technical to just add a class if they create a new group.

I have tried to add a field group inside div with a class {fieldgroup 1}, it gets rendered in the div - fine for me but not non-technical - and they make typo this may affect the whole look.

If not I will have to hard code it in an alternative template, but not ideal if some changes one field for a new one, as they will be identified by id.

Hope this makes sense. Thanks.

[DV-admin]

To detail the problem I'm facing, is that I have 2 field groups displaying in one article for the moment (this can more), the current class '.fields-container' is the for both groups, so we don't have a unique identifier for each group.

I think Vengko is identifying something I find really important also. The work around is hardly efficient whilst it could be such an easy solution to add a class field to identify a custom group of fields. Are there any new solutions yet?

[annahersh]

It will be a complex process to to add a field group class due to the way the fields are rendered. The field display position is defined by the field's position option, and it doesn't matter what group the field is assigned.

If there are 2 fields and each are assigned to different groups and different positions, 2 fields-container classes will output. However if both fields are assigned to the same position, only a single container will output.

What would be better is a method to add the position name as a class to the fields-container eg: after-title, before-display, after-display. That way each position could be individually styled.

Without a current means to add a class to groups, to achieve the goal of pseudo styling groups, you could add the same Render Class to each field option within its respective group. output eg:

Code: Select all

<dl class="fields-container">
    <dd class="field-entry g1class">
      <span class="field-label">First Field: </span>
      <span class="field-value">First field in group 1</span>
    </dd>
    <dd class="field-entry g1class">
      <span class="field-label">Other Field: </span>
      <span class="field-value">Other field in group 1</span>
    </dd>
</dl>

<dl class="fields-container">
    <dd class="field-entry g2class">
      <span class="field-label">First Field: </span>
      <span class="field-value">First field in group 2</span>
    </dd>
    <dd class="field-entry g2class">
      <span class="field-label">Other Field: </span>
      <span class="field-value">Other field in group 2</span>
    </dd>
</dl>

Then add a jquery function in the template document to dynamically add a class to the parent <dl>

Code: Select all

jQuery(function($) {
$(".g1class").parent().addClass("group1");
$(".g2class").parent().addClass("group2");
});

The out put would then be

Code: Select all

<dl class="fields-container group1">
    <dd class="field-entry g1class">
      <span class="field-label">First Field: </span>
      <span class="field-value">First field in group 1</span>
    </dd>
    <dd class="field-entry g1class">
      <span class="field-label">Other Field: </span>
      <span class="field-value">Other field in group 1</span>
    </dd>
</dl>

<dl class="fields-container group2">
    <dd class="field-entry g2class">
      <span class="field-label">First Field: </span>
      <span class="field-value">First field in group 2</span>
    </dd>
    <dd class="field-entry g2class">
      <span class="field-label">Other Field: </span>
      <span class="field-value">Other field in group 2</span>
    </dd>
</dl>