Custom Fields displaying unstyled above article body

toddjharrison73

Hello,

I'm using the Joomla Custom Fields on one of my categories, but for some reason, they are showing up unstyled and stuck at the top of the page, above the article body.

https://trekcommander.space/crew/22-officers-and-crew/46-cadet-james-t-kirk

Plus, the field group is not displaying, nor are any of the field descriptions.

I can put these in manually at the bottom of the page, so really just need to have them removed from displaying at the top.

And any tips on styling would also be appreciated. Would you be able to give me some CSS code to make the field titles bold or something to set them apart?

Many thanks for your help.

Todd

saguaros

Hi Todd,

Could you illustrate the modification you expect via screenshot so I can help?

toddjharrison73

Thank you! And of course I can. 🙂

Please see below:

1) Custom Field Placement: Currently the custom fields are just plonked at the top of the page with no styling. They look out of place. We can add these manually to the body of the article so we can take advantage of the awesome Playstore typography. Can we just have them removed or hidden so they're not automatically placed?

2) Custom Field Titles: We've got the custom fields added manually and have them styled using the Typography mentioned above, but is there something we can do via CSS to make the field titles stand out? Maybe make them bold? We're open to suggestions.

Thank you so much for your help with this. It is very much appreciated.

Todd

aman204

toddjharrison73 Hi

1) Can we just have them removed or hidden so they're not automatically placed?

Try add this to custom.css file :

.xblog-item dl.fields-container{display:none !important;}

2) is there something we can do via CSS to make the field titles stand out? Maybe make them bold?

Try add this also to similar CSS file :

.xblog-item ul.list-group li span.field-label{font-weight:bold !important;}

Kindly ensure to clear your browser cache if changes dont reflect

toddjharrison73

Hi Aman,

Thank you very much for this.

I have created a custom.css file in {siteroot}/templates/ja_playstore/css and added the following:

/* HIDE CUSTOM FIELDS FROM AUTOMATICALLY DISPLAYING */
.xblog-item dl.fields-container{display:none !important;}

/* MAKE CUSTOM FIELD TITLES BOLD */
.xblog-item ul.list-group li span.field-label{font-weight:bold !important;}

I have also cleared my browser cache and loaded the page with a different browser, but the changes are not taking effect.

Any idea why? This method has worked fine with all other installations of JA Templates, so I'm not sure what I've done wrong. 🙂

Thank you again for your help.

aman204

toddjharrison73 Kindly review again ensuring that steps to clear browser cache have been properly performed as I can see the changes being reflected. Ref: Screenshot -1 and Screenshot -2

toddjharrison73

Wow, that is so weird! I'm still seeing the custom fields and the field titles aren't bold.

I even downloaded and installed a completely different browser and they're still showing up.

Let me do some more testing here and come back to you.

Thank you!

Todd

saguaros

toddjharrison73
It looks fine at my side too, try to clear browser's cache.

toddjharrison73

Ok this is really weird.

I have completely reset Chrome back to factory defaults, checked the site in Edge, downloaded a fresh copy of Firefox and rebooted my computer multiple times and the changes are still not being reflected in any browser.

I have checked the site on a completely different computer and on my mobile phone. The changes are not reflected there either.

Any idea why you are seeing the updates and I am not?

aman204

toddjharrison73 It is usually server, joomla or browser cache problem which doesnt allow changes to reflect at times and might show the result of an earlier web version or a copy of data stored prior however that should have impacted globally except for browser cache where it is machine specific. You seem to have already cleared browser cache as mentioned by you

Not really sure as to why changes cannot be seen at your end as the same are reflecting as envisaged for me and @saguaros too

toddjharrison73

Hey guys,

I'm not sure why you were seeing the changes in place. I have no explanation.

However, after a bit more research, I removed the '.xblog-item' from the CSS code you gave me and the pages are displaying correctly for me now.

I'm sure this had nothing to do with caching, either client or server side.

Could you please tell me whether the removal of '.xblog-item' in the CSS descriptors will cause any other problems?

Thanks again for your help.

Todd

aman204

toddjharrison73 Could you please tell me whether the removal of '.xblog-item' in the CSS descriptors will cause any other problems?

CSS suggestion for appending ".xblog-item" had been provided in order to ensure that the custom fields removal or formatting impacts specific elements in category page only as desired however removing the specific parent selector will result in global CSS for specific element which can also extend to other sections where the specific CSS selectors will be present for custom fields

saguaros

Hi Todd,

As it shows correctly at our side, try to open your site in new private / incognito window of your browser, I believe it due to the cache / cookies on your browser.

Regards