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

Do not show labels of Custom Fields

DerTobi75

New Member
SC Premium
Hi,

I use the custom fields to show Social Media Profiles such as Twitter, Instagram and so on. With the HTML rewrite I show a banner, and that is fine. I do not need to show "Twitter" as label for the custom field.

Tobi
 
Which display area? Each display area has slightly different CSS. Each field adds the field ID as a class to the element, so you can easily modify the layout for an individual field via Extra.css. Comes in real handy ;) Also, IIRC, in one of the upcoming versions, there are plans for a new field option to display the Label or not (which comes in handy for fields that don't require a label).
 
Which display area? Each display area has slightly different CSS. Each field adds the field ID as a class to the element, so you can easily modify the layout for an individual field via Extra.css. Comes in real handy ;) Also, IIRC, in one of the upcoming versions, there are plans for a new field option to display the Label or not (which comes in handy for fields that don't require a label).
Sounds good!

It's Item View, where I need this!
 
OK, here we go.

This first image shows you that the Custom Fields that display at the Top of Tabs 1-5 are in a single div and a unique ID of the specific tab (tab2 in this case). This is so you can customize the layout for the fields for ONLY a specific tab without effecting others (that is the entire purpose of CSS classes). (go to the next image)

Selection_033.png


As you can see below, there are TWO fields each in their own element (a dl tag). Each element has a unique CSS class. We'll focus on the first one (customShowcaseField_tanksize2). (go to next image)

Selection_034.png



The core XF layout for fields consists of a DL with a DT and DD. The LABEL is located within the DT tag. (go to next image)

Selection_035.png


Since you don't want to display the Label, lets HIDE it. Simply use the unique class to do that. Simply add this to extra.css (for each style) .customShowcaseField_tanksize2 dt {display:none;} NOTE: you need to use the specific fieldID which you created for the field.

You'll see that it (the label) is now gone (well, hidden). (go to next image)

Selection_036.png

You'll note that the field VALUE did not slide over to the left. That is because there is a LAYOUT involved. The layout is specifically designed to have a label to the left and content to the right in rows and columns. Never fear tho as you CAN move it to the left if you want to (see next image)

Selection_037.png

Again, using the same unique ID but with the DD tag this time... Add this to Extra.css .customShowcaseField_tanksize2 dd {margin-left: 0px !important;} and you can see that with the margin-left set to 0px for the specific element, it moves to the left.

Selection_038.png



This is just a really basic example of what you can do. You can also use SELF PLACEMENT fields and create your own custom html layouts.

Hope this made sense?
 
Just remember to have FUN when doing it. If you get frustrated, take a deep breath and shoot me a message :D I more than happy to help out.
 
Back
Top