Custom Field Styling

Everything to do with Joomla! 3.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Locked
mehranfazili
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Tue Oct 14, 2014 4:58 am

Custom Field Styling

Post by mehranfazili » Mon May 08, 2017 11:07 pm

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
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 170
Joined: Wed Dec 03, 2008 9:02 am

Re: Custom Field Styling

Post by diinekis » Tue May 09, 2017 4:53 am

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Tue Oct 14, 2014 4:58 am

Re: Custom Field Styling

Post by mehranfazili » Wed May 10, 2017 11:06 pm

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
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 170
Joined: Wed Dec 03, 2008 9:02 am

Re: Custom Field Styling

Post by diinekis » Thu May 11, 2017 4:12 am

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
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 170
Joined: Wed Dec 03, 2008 9:02 am

Re: Custom Field Styling

Post by diinekis » Thu May 11, 2017 4:44 am

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Tue Oct 14, 2014 4:58 am

Re: Custom Field Styling

Post by mehranfazili » Thu May 11, 2017 2:15 pm

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
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 170
Joined: Wed Dec 03, 2008 9:02 am

Re: Custom Field Styling

Post by diinekis » Thu May 11, 2017 3:29 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Tue Oct 14, 2014 4:58 am

Re: Custom Field Styling

Post by mehranfazili » Thu May 11, 2017 5:42 pm

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

Thanks again for your help.

Regards,
Mehran

vkengo
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Wed Feb 01, 2012 2:08 pm

Re: Custom Field Styling

Post by vkengo » Thu Jun 22, 2017 6:40 am

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
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 170
Joined: Wed Dec 03, 2008 9:02 am

Re: Custom Field Styling

Post by diinekis » Thu Jun 22, 2017 7:59 am

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

vkengo
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Wed Feb 01, 2012 2:08 pm

Re: Custom Field Styling

Post by vkengo » Fri Jun 23, 2017 7:57 am

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.

User avatar
DV-admin
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 165
Joined: Wed Sep 20, 2017 7:24 am
Location: Genova
Contact:

Re: Custom Field Styling

Post by DV-admin » Sun Oct 14, 2018 8:09 am

vkengo wrote:
Fri Jun 23, 2017 7:57 am

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
Joomla! Guru
Joomla! Guru
Posts: 734
Joined: Wed Aug 15, 2018 8:23 pm

Re: Custom Field Styling

Post by annahersh » Mon Oct 15, 2018 4:37 am

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>



Locked

Return to “Templates for Joomla! 3.x”