Css to fix Post Custom Fields problem with theme

Hi there,

Does the plugin come with any styling at all? As far as I can tell there's no styling whatsoever and it's depending on the theme to style it?

You may want to ask the developer just to check if there's a stylesheet that should be loading but isn't.

If not, I might be able to help out with a little CSS.

Just checked the zipped file
it has 2 files in the CSS folder

However_ am sure some CUSTOM css would help ??

here are the files below

cptui.css

.posttypesui .cptui-section:first-child, .taxonomiesui .cptui-section:first-child {
margin-top: 30px;
}

.cptui-table #excerpt {
display: inline-block;
height: 16px;
margin: 12px 4px 12px 0;
width: auto;
}

.cptui-table td.outter {
vertical-align: top;
width: 50%;
}

.cptui-table input[type="text"],
.cptui-new .cptui-table textarea,
.cptui-edit .cptui-table textarea {
width: 50%;
}

.cptui-table .question:hover {
cursor: pointer;
}

.cptui-table th p {
font-weight: 400;
font-size: 12px;
}

.cptui-table .cptui-slug-details {
margin-top: 15px;
}

#support .question {
font-size: 18px;
font-weight: bold;
}

#support .question:before {
content: "\f139";
display: inline-block;
font: normal 25px/1 'dashicons';
margin-left: -25px;
position: absolute;
-webkit-font-smoothing: antialiased;
}

#support .question.active:before {
content: "\f140";
}

#support .answer {
margin: 10px 0 0 20px;
}

#support ol li {
list-style: none;
}

#support li {
position: relative;
}

.required {
color: red;
}

.cptui-field-description {
font-style: italic;
}

#cptui_select_post_type,
#cptui_select_taxonomy {
margin-top: 15px;
}

.cptui_post_import,
.cptui_tax_import {
height: 200px;
margin-bottom: 10px;
resize: vertical;
width: 100%;
}

.cptui_post_type_get_code,
.cptui_tax_get_code {
height: 300px;
resize: vertical;
width: 100%;
}

.one-third {
width: 33%;
}

.valign {
vertical-align: top;
}

.about-wrap .cptui-feature {
overflow: visible !important;
*zoom: 1;
}

.about-wrap .cptui-feature:before, .about-wrap .cptui-feature:after {
content: " ";
display: table;
}

.about-wrap .cptui-feature:after {
clear: both;
}

.about-wrap h3 + .cptui-feature {
margin-top: 0;
}

.about-wrap .feature-rest div {
width: 50% !important;
padding-right: 100px;
box-sizing: border-box;
margin: 0 !important;
}

.about-wrap .feature-rest div.last-feature {
padding-left: 100px;
padding-right: 0;
}

.about-wrap .feature-rest div.icon {
width: 0 !important;
padding: 0;
margin: 0;
}

.about-wrap .feature-rest div.icon:before {
font-weight: normal;
width: 100%;
font-size: 170px;
line-height: 125px;
color: #9c5d90;
display: inline-block;
position: relative;
text-align: center;
speak: none;
margin: 0 0 0 -100px;
content: "\e01d";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.rtl .about-wrap .feature-rest div {
padding-left: 100px;
}

.rtl .about-wrap .feature-rest div.last-feature {
padding-right: 100px;
padding-left: 0;
}

.rtl .about-wrap .feature-rest div.icon:before {
margin: 0 -100px 0 0;
}

.about-integrations {
background: #fff;
margin: 20px 0;
padding: 1px 20px 10px;
}

.changelog h4 {
line-height: 1.4;
}

.cptui-about-text {
margin-bottom: 1em !important;
}

.js #cptui_select_post_type input[type='submit'],
.js #cptui_select_taxonomy input[type='submit'] {
display: none;
}

#togglelabels {
display: none;
}

.js #togglelabels {
display: inline-block;
}

.cptui-help {
color: #424242;
margin-left: 4px;
opacity: 0.5;
text-decoration: none;
width: 16px;
}

fieldset .cptui-help {
position: relative;
top: 4px;
}

.cptui-help:hover {
color: #0074a2;
opacity: 1;
}

.cptui-help:focus {
box-shadow: none;
}

#toplevel_page_cptui_main_menu img {
height: 20px;
margin-top: -2px;
width: 20px;
}

.visuallyhidden {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}

.cptui-section fieldset {
border: solid #cccccc 1px;
display: block;
margin-bottom: 30px;
padding: 10px;
overflow: hidden;
}

.js .cptui-section fieldset.toggledclosed {
height: 1px;
}

.cptui-section legend {
border: solid #cccccc 1px;
border-bottom: 0px;
font-size: 14px;
font-weight: bold;
padding: 5px;
}

.cptui-spacer {
display: block;
margin-top: 25px;
}

.wdspromos {
float: right;
margin-left: 20px;
margin-top: 10px;
width: 275px;
}

.wdspromos img {
margin-bottom: 10px;
}

and then

cptui.min

.posttypesui .cptui-section:first-child,.taxonomiesui .cptui-section:first-child{margin-top:30px}.cptui-table #excerpt{display:inline-block;height:16px;margin:12px 4px 12px 0;width:auto}.cptui-table td.outter{vertical-align:top;width:50%}.cptui-edit .cptui-table textarea,.cptui-new .cptui-table textarea,.cptui-table input[type=text]{width:50%}.cptui-table .question:hover{cursor:pointer}.cptui-table th p{font-weight:400;font-size:12px}.cptui-table .cptui-slug-details{margin-top:15px}#support .question{font-size:18px;font-weight:700}#support .question:before{content:"\f139";display:inline-block;font:normal 25px/1 dashicons;margin-left:-25px;position:absolute;-webkit-font-smoothing:antialiased}#support .question.active:before{content:"\f140"}#support .answer{margin:10px 0 0 20px}#support ol li{list-style:none}#support li{position:relative}.required{color:red}.cptui-field-description{font-style:italic}#cptui_select_post_type,#cptui_select_taxonomy{margin-top:15px}.cptui_post_import,.cptui_tax_import{height:200px;margin-bottom:10px;resize:vertical;width:100%}.cptui_post_type_get_code,.cptui_tax_get_code{height:300px;resize:vertical;width:100%}.one-third{width:33%}.valign{vertical-align:top}.about-wrap .cptui-feature{overflow:visible!important;*zoom:1}.about-wrap .cptui-feature:after,.about-wrap .cptui-feature:before{content:" ";display:table}.about-wrap .cptui-feature:after{clear:both}.about-wrap h3+.cptui-feature{margin-top:0}.about-wrap .feature-rest div{width:50%!important;padding-right:100px;box-sizing:border-box;margin:0!important}.about-wrap .feature-rest div.last-feature{padding-left:100px;padding-right:0}.about-wrap .feature-rest div.icon{width:0!important;padding:0;margin:0}.about-wrap .feature-rest div.icon:before{font-weight:400;width:100%;font-size:170px;line-height:125px;color:#9c5d90;display:inline-block;position:relative;text-align:center;speak:none;margin:0 0 0 -100px;content:"\e01d";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.rtl .about-wrap .feature-rest div{padding-left:100px}.rtl .about-wrap .feature-rest div.last-feature{padding-right:100px;padding-left:0}.rtl .about-wrap .feature-rest div.icon:before{margin:0 -100px 0 0}.about-integrations{background:#fff;margin:20px 0;padding:1px 20px 10px}.changelog h4{line-height:1.4}.cptui-about-text{margin-bottom:1em!important}#togglelabels,.js #cptui_select_post_type input[type=submit],.js #cptui_select_taxonomy input[type=submit]{display:none}.js #togglelabels{display:inline-block}.cptui-help{color:#424242;margin-left:4px;opacity:.5;text-decoration:none;width:16px}fieldset .cptui-help{position:relative;top:4px}.cptui-help:hover{color:#0074a2;opacity:1}.cptui-help:focus{box-shadow:none}#toplevel_page_cptui_main_menu img{height:20px;margin-top:-2px;width:20px}.visuallyhidden{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}.cptui-section fieldset{border:1px solid #ccc;display:block;margin-bottom:30px;padding:10px;overflow:hidden}.js .cptui-section fieldset.toggledclosed{height:1px}.cptui-section legend{border:1px solid #ccc;border-bottom:0;font-size:14px;font-weight:700;padding:5px}.cptui-spacer{display:block;margin-top:25px}.wdspromos{float:right;margin-left:20px;margin-top:10px;width:275px}.wdspromos img{margin-bottom:10px}

Hmm, can you ask the plugin developer if they can take a look and see if it looks off? As far as I can tell there's no CSS being applied at all.

there is a BOX in the settings called CUSTOM CSS

Maybe they think the theme will set the CSS for the POST result layout and that's why they have not applied any css so as not to cause a conflict with your theme ?? Strange how they actually have a CSS box to be filled in called custom CSS

ALL I need to apply is

1) Separate the elements by 20 or 30Px

and also have some PX between the text elements too

what do you suggest ?

Here is image of funny squashed up layout

J

answer from developers

The layout depends on your theme. Our plugin just submits the data from the front end. You can use this css-