Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #252614

    Hi,

    I have a visual problem in some input boxes when I publish a questionnaire with FSQM plugin. It is publishing in this link: http://www.insanayatirim.com/online-mulakat-deneyimi-ardindan/ You can see the problem with the input boxes. The words are hiding behind the icons.
    I contacted with plugin’s author and reported this situation. What they write is here:

    You have the problem mentioned here: http://ipanelthemes.com/kb/misc/wordpress/fixing-themes-custom-wpautop-priority/

    I am not a codeman. Can you able to fix it or suggest me something?

    Thanks!

    Orhan

    #253054

    Hey erkuto!

    You can fix the styling with this css code – insert it into the quick css field:

    
    #top .ipt_uif_icon_and_form_elem_holder input{
    margin-left: 50px;
    }
    

    Implementing the suggestion here. http://ipanelthemes.com/kb/misc/wordpress/fixing-themes-custom-wpautop-priority/ is unfortunately not easily possible and you would need to hire a developer to rewrite some parts of the theme framework.

    Best regards,
    Peter

    #271726

    Hi I have the exact same problem as mentioned above, the icons are partially covering the left of the text box, unfortunately the addition of the CSS code you suggested above into the Quick CSS field didnt work for me.

    This is my test contact form,

    If I put the shortcode into a “code box” i just see the shortcode text and if i place it in a “text block” it has the incorrect formatting with the icons.

    Any advice would be greatly appreciated as I have been testing every solution I could find relating to these types of short code formatting issues and I can only seem to make it worse for my efforts not better.

    Thanks in Advance
    MC

    #271727

    Link relating to the above post. :)

    #271728

    http://coresupport.com.au/?page_id=3268

    I don’t know why the links to my test page have not been displaying, sorry about the multiple posts.

    #271792

    Hey!

    I did a quick test and this css code seems to work for me – you can insert it into the quick css field:

    
    .ipt_uif_common.ipt-uif-custom-smoothness input.ipt_uif_text {
    margin-left: 50px !important;
    }
    

    Best regards,
    Peter

    #271837

    Thank you Dude,

    Really appreciate the quick response and the code worked to move the icons too. Unfortunately the form and its elements don’t resize correctly now either.
    Is there any way to have the theme not change the format of the form at all ?

    Cheers
    MC

    #272068

    Hey MC!

    Yes there is, if you are not going to use another form in the website you can edit css/base.css, remove/comment from line 182 to line 256:

    /* #Forms
    ================================================== */
    
    	#top form {
    		margin-bottom: 20px; }
    	#top fieldset {
    		margin-bottom: 20px; }
    	#top .input-text,
    	#top input[type="text"],
    	#top input[type="input"],
    	#top input[type="password"],
    	#top input[type="email"],
    	#top input[type="number"],
        #top input[type="url"],
        #top input[type="tel"],
        #top input[type="search"],
    	#top textarea,
    	#top select {
    		 -webkit-appearance: none;
    		border: 1px solid #e1e1e1;
    		padding: 8px 6px;
    		outline: none;
    		font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    		color: #777;
    		margin: 0;
    		width: 210px;
    		max-width: 100%;
    		display: block;
    		margin-bottom: 20px;
    		background: #fff;
    		border-radius: 0px;
    		}
    
    	#top input[type="text"]:focus,
    	#top input[type="password"]:focus,
    	#top input[type="email"]:focus,
    	#top input[type="number"]:focus,
        #top input[type="url"]:focus,
        #top input[type="tel"]:focus,
        #top input[type="search"]:focus,
    	#top textarea:focus {
    		box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.2);
     		color: #555;
    		}
    	#top textarea {
    		min-height: 60px; line-height:1.5em;}
    	#top label{
    		display: block;
    		font-weight: bold;
    		font-size: 12px;  }
    	#top legend {
    		display: block;
    		font-weight: normal;
    		font-size: 15px;  }
    	#top select {
    		width: 220px; }
    	#top input[type="checkbox"] {
    		display: inline; }
    	#top label span,
    	#top legend span {
    		font-weight: normal;
    		font-size: 13px;
    		color: #444; }
    
    	#top textarea{width:100%;}
    
    #top #wrap_all .valid .text_input, #top #wrap_all .valid .text_area, #top #wrap_all .valid .select{border:1px solid #9AA600;} /*#70A41B*/
    #top #wrap_all .error .text_input, #top #wrap_all .error .text_area, #top #wrap_all .error .select{border:1px solid #DF653E;}
    #top #wrap_all .ajax_alert .text_input, #top #wrap_all .ajax_alert .text_area, #top #wrap_all .ajax_alert .select{border:1px solid #ffb628;}
    #top #wrap_all .valid  .input_checkbox_label{color:#9AA600;}
    #top #wrap_all .error  .input_checkbox_label{color:#DF653E;}

    Best regards,
    Josue

    #272175

    Hi Josue,

    Thank you for the reply and I will edit the css file as recommended above, I just wanted to clarify something thou.

    You said this will work if I am not intending on using another form in the website and unfortunately I was actually going to build several other forms using the same plugin, for feedback and a client analysis survey as well.

    If I am understanding you correctly every time I want to add a new form or change an existing one I will need to update the base.css file in order to get the form to display correctly ? If this is the case I may need to look at a new theme for my site as I require the plugins functionality over the theme layout features in this case.

    Cheers Again
    MC

    #272184

    No, i was referring to the built-in Enfold forms, if you are going to use the plugin forms only that should be ok.

    Cheers!
    Josue

    #272210

    Awesome I am only using the FSQM forms so I will give it a go with the edit and post the outcome.

    Cheers
    MC

    #272211

    We looking forward to hearing from you MC :)

    Regards,

    Josue

    #272212

    Fantastic Result !! :D

    Two thumbs up for the support team here. The mods suggested by Josue worked a treat and the plugin forms resize and display exactly as expected, the perfect outcome for my requirements.

    Thank you again for all the assistance and I’m really glad I can keep using the Enfold theme with my site.

    Cheers
    MC

    #272215

    You are welcome, always glad to help :)

    Now i’d recommend you to move base.css to your child theme, that way you can update the theme without losing the mod, refer to my reply in this topic:
    https://kriesi.at/support/topic/editing-base-css-in-a-child-theme/#post-194148

    Regards,
    Josue

    #272224

    Thank you for the suggestion, I was going to update the base.css file after updates but you make a good point about applying it via the child theme.

    In the post you linked to above you have provided a functions.php file for the child theme folder, would it be appropriate to use this php file for my child theme as well to point to my modified base.php ? With the correct template and child theme urls for my site that is :)

    Cheers
    MC

    #272228

    Just an update the php file linked to in this post: https://kriesi.at/support/topic/editing-base-css-in-a-child-theme/#post-194148
    by Josue works 100% and the forms are displaying perfectly with the functions.php file edit in the child theme folder.

    Thank you again for the assistance :)
    MC

    #272235

    Great news, case closed :)

Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘Visual Problem Related to FSQM Plugin’ is closed to new replies.