-
AuthorPosts
-
April 17, 2014 at 11:55 am #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
April 18, 2014 at 9:29 am #253054Hey 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,
PeterMay 29, 2014 at 12:37 pm #271726Hi 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.
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
MCMay 29, 2014 at 12:38 pm #271727May 29, 2014 at 12:40 pm #271728http://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.
May 29, 2014 at 2:03 pm #271792Hey!
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,
PeterMay 29, 2014 at 3:27 pm #271837Thank 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
MCMay 29, 2014 at 9:47 pm #272068Hey 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,
JosueMay 30, 2014 at 1:01 am #272175Hi 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
MCMay 30, 2014 at 1:09 am #272184No, i was referring to the built-in Enfold forms, if you are going to use the plugin forms only that should be ok.
Cheers!
JosueMay 30, 2014 at 2:41 am #272210Awesome I am only using the FSQM forms so I will give it a go with the edit and post the outcome.
Cheers
MCMay 30, 2014 at 2:44 am #272211We looking forward to hearing from you MC :)
Regards,
JosueMay 30, 2014 at 2:53 am #272212Fantastic 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
MCMay 30, 2014 at 2:59 am #272215You 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-194148Regards,
JosueMay 30, 2014 at 3:57 am #272224Thank 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
MCMay 30, 2014 at 4:34 am #272228Just 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 :)
MCMay 30, 2014 at 5:29 am #272235Great news, case closed :)
-
AuthorPosts
- The topic ‘Visual Problem Related to FSQM Plugin’ is closed to new replies.