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

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

Home Forums Support Css to fix Post Custom Fields problem with theme

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #188622
    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 ?

    #188718
    Tom
    Lead Developer
    Lead Developer

    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.

    #188762
    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}

    #188899
    Tom
    Lead Developer
    Lead Developer

    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.

    #188912
    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

    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

    layout

    J

    #188947
    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 5 years, 7 months ago by Joanne Smith.
    #188969
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #189091
    Joanne Smith

    Perfect!…. thank you

    Joanne

    #189117
    Tom
    Lead Developer
    Lead Developer
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.