[Resolved] Css to fix Post Custom Fields problem with theme

[Joanne Smith]

Hi

I have installed a plugin called ‘ WP User Frontend Pro ‘

and was wondering if it were a theme issue

on the POSTS page ( after the form is submitted ) the post is approved by the admin and when it goes live

for example this test post

http://virtual-museum.rpfcp.com.au/view-virtual-museum/

as you can see the IMAGES and the PDF file ( which are Custom Fields in post ) are not looking good on the page

1) Squashed together –can we separate with some CSS – spaces between them ?

2) The image is a Thumbnail ( if you click it goes to full size ) I have ticked a setting in the plugin to show the image LARGE — so not sure what is going on there ?

any ideas how to make it look better on the page ?

Not sure if it is the plugin or the Theme that’s causing this layout problem ?

[Tom]

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.

[Joanne Smith]

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}

[Tom]

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.

[Joanne Smith]

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

[Joanne Smith]

answer from developers

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

li {
padding-top: 5%;
list-style: none;
}

If you want to show bigger thumbnail into the post content area then you can increase the thumbnail size from wp-admin/settings/media.

ANY SUGGESTIONS

on some nicer CSS to make the layout look more professional that works with your theme ?

J

• This reply was modified 8 years ago by Joanne Smith.

[Tom]

Let’s see…

ul.wpuf_customs {
    margin: 0;
    list-style-type: none;
}

.wpuf_customs label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

.wpuf_customs li {
    margin-bottom: 20px;
}

Maybe that will help 🙂

[Joanne Smith]

Perfect!…. thank you

Joanne

[Tom]

You’re welcome 🙂

[Author]

Posts