Custom Field Template – CFT – plugin for WordPress

cft

CFT admin style modification

This post provides a couple of basic ADMIN CSS templates.

To make a customized compact ADMIN template use CSS break type the following way: (Set CSS of ‘#cft div’. (type = break))

Custom Field Template – ADMIN CSS Template 1

  • This style sheet will split your template in two columns.
#cft div { width:50%; float:left; clear:none; } #cft dl { clear:both; margin:0; padding:0; width:100%; } #cft dt { display:none; float:left; font-weight:bold; margin:0; text-align:left; width:20%; } #cft dt .hideKey { visibility:hidden; } #cft dd { float:left; margin:0; text-align:left; width:80%; } #cft dd p.label { font-weight:bold; font: green; margin:0; } #cft_instruction { margin:5px; }

Custom Field Template – ADMIN CSS Template 2

  • Add nice background-color
  • custom labels
  • A double column layout:
#cft div { width:50%; float:left; clear:none; } #cft dl { clear:both; margin:0; padding:0; width:100%; } #cft dt { display:none; float:left; font-weight:bold; margin:0; text-align:left; width:20%; } #cft dt .hideKey { visibility:hidden; } #cft dd { float:left; margin:0; text-align:left; width:80%; } #cft dd p.label { font-weight:bold; color:#093E56; margin:0; border-bottom:1px solid #BDBDBD;background-color:#EEEEEE;} #cft_instruction { margin:5px; }

Custom Field Template – ADMIN CSS Template 3

Here you see the CSS I added, background-color and custom labels. A 5 multi column layout:

  • Add nice background-color
  • custom labels
  • A multiple 5 column layout:
#cft div { width:19%; clear:none; float:left;}
#cft dl { clear:none; margin:0; padding:0; width:100%; }
#cft dt { float:left; font-weight:bold; font-size:1px;margin:0; text-align:left; width:5%; }
#cft dt .hideKey { visibility:hidden; }
#cft dd { float:left; clear:none; margin:0; text-align:left; width:95%; }
#cft dd p.label { font-weight:bold; color:#093E56; margin:0; border-bottom:1px solid #BDBDBD;background-color:#EEEEEE;}
#cft_instruction { margin:5px; }
#cft dd selectbox { color:#ffffff;}
#cft dd input { width:120px;}
#cft dd textarea { width:120px;}

add this line to the admin css to make some CFT fields high lighted

#dl_nameofyourcustomfield0 dd p.label { font-weight:bold; color:red; margin:0; border-bottom:1px solid #BDBDBD; background-color:#EEEEEE; }

Getting/Calling the custom field values the your template

How to get out the CFT field value in the template. Read thru the following link to make the Custom Field value appear in the template.

EXTRA LINKS

  1. Hide a custom field if is empty

  2. Default custom fields
  3. Get post with same custom field VALUE as current post
  4. WordPress Custom Fields, Part II: Tips and Tricks

Have fun, I did.

2 Responses

Leave a Reply