/ Register

  1. 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

Discussion in 'Showcase Support' started by Dadparvar, Jan 20, 2016.

  1. Jan 20, 2016 #1
    Dadparvar

    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: Jan 20, 2016
  2. Jan 20, 2016 #2
    Bob

    Bob Developer Staff Member

    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
     
    Dadparvar likes this.
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Accept Learn More...