• REGISTRATION REQUIREMENTS:

    Your username here MUST MATCH your XenForo username (connected to your XF license).

    Once you have registered here, then you need to start a conversation at xenforo.com w/Bob and provide the following:
    1. Your XenForo License Validation Token
    2. The Domain Name associated with the License
    NOTE: Your account will be validated once ALL requirements are verified/met. Thank you for your patience.

Modify custom field's title using HTML

Dadparvar

Member
AMS Premium
CAS Premium
RMS Premium
SC Premium
UBS Premium
Hi,

As all we know, we can use "Value Display HTML" to change the way the content of a custom field appears in item page. For example I added some css here:
sh1.png

And when a user put a link in that custom field, it will show like this in item page:
sh2.png

That's awesome. We can directly and fully control it just from inside of the custom field create or edit page. But how about the custom field's title itself?
For example in this example (above) I made it to be shown as a button (and will add a float: left), and want to hide its title (its title is in right side of it with a bag icon. the title of custom field I mean) (and want to change some of other custom field's title too look in other ways). How to do it form inside of custom field edit page? I know I can do it by adding some css to EXTRA, but adding a field just like "
Value Display HTML" will be just what makes it as simple and fast as possible.

Regards
 
Last edited:
Each custom field has its OWN UNIQUE CSS CLASS that allows you customize default behavior. This is standardized part of the Core XenForo custom field output template (that all addons use (at least they SHOULD be using)).

As you can see below, each field is contained in a <dl> with a dynamic class name which is: customShowcaseField + the custom field ID (NO SPACE, its concatenated together) eg customShowcaseFieldci_rating_test

Selection_001.png



The TITLE is contained in a <dt> Each Addon has specific base CSS (which should be the same as core xf). The reason each addon does this is so you CAN modify behavior for a specific addon without effecting the entire SITE.

To modify the title CSS you can do it for the entire addon like this: .showcaseItem .showcaseItemInfo .customShowcaseFields dt {your CSS elements here}

OR you can do it just for a specific field: .showcaseItem .showcaseItemInfo .customShowcaseFields .customShowcaseFieldci_rating_test dt {your CSS elements here}

Selection_002.png


The VALUE is contained in a <dd>. You can customize this just like I showed above.

Selection_003.png
 
Back
Top