Do not show labels of Custom Fields

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

 

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

 

OK, screen shots made and am going to try and explain the best I can... hang tight

 

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)




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)





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)




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)



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)



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.





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 I more than happy to help out.