1. REGISTRATION REQUIREMENTS:

    Register with your xenforo.com Username then 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

Discussion in 'Showcase Support' started by DerTobi75, Sep 23, 2015.

  1. DerTobi75

    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
     
  2. Bob

    Bob Developer Staff Member

    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).
     
  3. DerTobi75

    DerTobi75 New Member SC Premium

    Sounds good!

    It's Item View, where I need this!
     
  4. Bob

    Bob Developer Staff Member

    I mean the Custom Field location (Header, Tabs 1-5, sidebar etc). The CSS for those locations are different.
     
  5. DerTobi75

    DerTobi75 New Member SC Premium

    Tab2
     
  6. Bob

    Bob Developer Staff Member

    OK, screen shots made and am going to try and explain the best I can... hang tight :)
     
    DerTobi75 likes this.
  7. Bob

    Bob Developer Staff Member

    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?
     
    BT012SS and DerTobi75 like this.
  8. DerTobi75

    DerTobi75 New Member SC Premium

    Wow, many thanks for this one! Going to try this tomorrow, today it is already to late :)

    Thanks again!
     
  9. Bob

    Bob Developer Staff Member

    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.
     
    alfa1 likes this.
  10. DerTobi75

    DerTobi75 New Member SC Premium

    Works like a charm! Thanks :)

    label.jpg
     
    Bob 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.