• I am trying to develop a custom post type for non-coders to enter information about events. Custom post type: Events.

    With the Custom Field Template, I have succeeded in displaying the Events Template on the Post writing window (ONLY with “both” Page and Post selected though). Among the options are Month, Day, Year. All display vertically below each other.

    Is there a way in the Template to display them next to other? It would make more sense that way.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Yes there is.

    You will need to wrap your field in fieldsets.

    here’s an example of one fieldset

    [accordion_fieldset]
    type = fieldset_open
    class=accordion
    
    [accordion_title]
    type = textfield
    label = Accodion Title
    class = text
    blank = true
    
    [accordion_introtext]
    type = textfield
    label = Teaser text for the Accordion
    class = text
    blank = true
    
    [accordion_content]
    type = textarea
    hideKey = true
    label = Content for the Accordion
    blank = true
    class = sharedescription
    
    [accordion_fieldset]
    type = fieldset_close

    Then using CSS you can float the fieldset left.

    #cftdiv .accordion {
    width:45%
    float:left;
    margin-right:4%
    }

    Just add 2 fieldsets that encloses your fields

    Thread Starter Moodles

    (@moodles)

    Ah, thanks for that! I will give it a try and report back.

    Thread Starter Moodles

    (@moodles)

    It’s not working completely. Probably styles issue. I have added the fieldset to the options; the fieldset is floated and wraps, but the select and radio options take up the full width of the fieldset, and so cannot float next to each other.

    [date_fieldset]
    type = fieldset_open
    class = fieldGroup
    
    [Month]
    type = select
    value = Jan # Feb # Mar # Apr # May # Jun # Jul # Aug # Sep # Oct # Nov # Dec
    
    [Day]
    type = select
    value = 1 # 2 # 3 # 4 # 5 # 6 # 7 # 8 # 9 # 10 # 11 # 12 # 13 # 14 # 15 # 16 # 17 # 18 # 19 # 20 # 21 # 22 # 23 # 24 # 25 # 26 # 27 # 28 # 29 # 30 # 31
    
    [Year]
    type = radio
    value = 2010 # 2011 # 2012
    
    [date_fieldset]
    type = fieldset_close

    I’ve tried setting a width for each one using the ID for each option (#dl_month1_0, #dl_day2_0, #dl_year3_0), nested classes, nothing affects the width of the select and radio button areas. Apparently I’m not overriding the plugin styles.

    I also tried, using the ID for each option, setting display:inline-block to shrink-wrap them, but no effect either.

    Currently have this in my stylesheet, trying for just the 2 select options:

    #cftdiv .fieldGroup .select #dl_month1_0, #cftdiv .fieldGroup .select #dl_day2_0 {
    	width:45%;
    	margin-right:5%;
    	float:left;
    	}

    Note for developer: the fieldset options are listed in the installation remarks,

    * Adds the fieldset type. (type = fieldset_open, type = fieldset_close)

    but don’t show in the plugin option list in the settings/admin.

    Thread Starter Moodles

    (@moodles)

    I think the width is actually the dl/dd but not able to over-ride that either… about to give up as this is not that important. I just wanted to make using the form as easy as possible for non-coder types.

    Hello,

    I’ve got something similar and it works except for one problem.

    It seems there is an issue with using type = file in the multiple fieldsets. If you hit Add New, it seems to copy (in this case) the image to the new item you are creating. It shows a thumbnail with the delete checkbox next to it. If you hit browse and select another file then update, it deletes the image on the fieldset above.

    It only seems to happen to the type= file field, all text is fine.

    proximity2008, do you have any ideas?

    [thumbnails_item_fieldset]
    type = fieldset_open
    legend = Thumbnail
    multiple = true
    multipleButton = true
    
    [thumbnails_item_title]
    type = text
    size = 90
    label = Title
    hideKey = true
    blank = true
    before = Title
    
    [thumbnails_item_image]
    type=file
    relation=true
    class=file
    label = Image
    hideKey = true
    blank = true
    before = Image: 590x240px
    
    [thumbnails_item_link]
    type = text
    size = 90
    label = Thumbnails Link
    Before = Link
    hideKey = true
    blank = true
    
    [thumbnails_item_order]
    type = text
    size = 5
    label = Thumbnails Order
    hideKey = true
    blank = true
    
    [thumbnails_item_fieldset]
    type = fieldset_close
    Andrew

    (@andrewkantor)

    FYI, in prox’s initial post, the CSS code has a typo — it’s missing a semicolon after 45% (and after 4% as well, but that might not matter).

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘[Plugin: Custom Field Template] display several options side by side?’ is closed to new replies.