page formatting
-
Hi firstly I’d like to so thank you for the plugin and the initial notes on how to make it work, it really is a breeze.
Your plug in and html works fine on my website with one exception.
The issue I have is when I move the html widget containing your code above another widget containing some short code, the formatting for the output/form produced by the shortcode is lost. The short code output/form still functions but the formatting is lost..
I am guessing it is down to the formatting html I have added to your original code.
You will see from my html code below I am a novice with coding but am prepared to have a go..
Is there a way to add some more html to the code below so that it only affects the SLB widget output??
Many Thanks,
Lee
<p style="color:black;font-size:24px;font-family:Raleway;text-align:center;"> Please supply 1 form ID or ID LITE from the following list : <a style="color:blue;font-size:24px;font-family:Raleway;" href="http://ipswichdigs.co.uk/wp-content/uploads/2021/12/ID-LITE-INTRO.png">ID LITE How & Why</a> <div style="display: none"> <a style="color:black;font-size:24px;font-family:Raleway;" href="http://ipswichdigs.co.uk/wp-content/uploads/2021/12/PASSPORTS.jpg">PASSPORT</a> <a style="color:black;font-size:24px;font-family:Raleway;" href="http://ipswichdigs.co.uk/wp-content/uploads/2021/12/LICENCE-PIC.jpg">LICENCE PIC</a> <a style="color:black;font-size:24px;font-family:Raleway;" href="http://ipswichdigs.co.uk/wp-content/uploads/2021/12/LICENCE-NO-PIC.jpg">LICENCE NO PIC</a> <a style="color:black;font-size:24px;font-family:Raleway;" href="http://ipswichdigs.co.uk/wp-content/uploads/2021/12/TAX-BILLS.jpg">TAX BILLS</a> <a style="color:black;font-size:24px;font-family:Raleway;" href="http://ipswichdigs.co.uk/wp-content/uploads/2021/12/BANK-STATEMENTS.jpg">BANK-STATEMENTS</a> /p> </div>The page I need help with: [log in to see the link]
-
`Hi Archetyped and Happy New Year,
and no need for apologies I laid off sorting this out over Christmas and New Year but really pleased you have responded now..
This is the link to the page. It looks as it should because the widget congaing your script is below the WordPress File Upload Pro shortcode under the heading “Examples of ID LITE”.
https://ipswichdigs.co.uk/booking-form/book-com/guest-book/
When I move the widget congaing your script above the File Upload widget I loose the formatting on the form.
I have added an image on google drive so you can see what it looks like when formatting is lost.
This is the link:
<a href=”https://drive.google.com/file/d/1rl8OAqB7pD9K9ULDEBsYu1tod8_Ryafb/view?usp=sharing” rel=”noopener” target=”_blank”>PIC 1</a>
The plug in generating the form from the shortcode is called:
Wordpress File Upload Pro
plugin website:
<a href=”https://www.iptanus.com/wordpress-plugins/wordpress-file-upload/” rel=”noopener” target=”_blank”></a>
Many Thanks,
Lee
Hi, if the form formatting you’re referring to is the gradient background and text alignment of the field labels, it is probably due to the fact that the CSS selector used for them is very specific and hard-coded to a specific position on the page.
This means that any changes to the order of elements on the page can cause the CSS styles to no longer “match” the form labels.
For reference, this is the full CSS selector used for the first form label:
html > body > div:nth-child(3) > div > div > section > div > div > div > section:nth-child(4) > div > div > div:nth-child(2) > div > div > div > div > div > #wordpress_file_upload_block_1 > #wordpress_file_upload_userdata_1_0 > #userdata_1_0 > #userdata_1_fieldwrapper_0 > #userdata_1_field_0For example, the
section:nth-child(4)part of the above selector used to style the form labels targets the 4th child element of the Elementor section containing the form. In your working example, the form is the 4thsectionelement in that group, so the CSS is applied to the the form elements.However, when another element is added above it, the form is now the 5th element in that group, so the CSS styles are no longer targeting the right element.
Using CSS selectors that are as broad as possible while still accurately targeting the desired elements is highly recommended. This allows CSS selectors to be more flexible and not break when a small change is made to the page.
I’m marking this ticket as resolved, as the issue is not directly related to SLB. If the form’s CSS is generated by a plugin, contacting the plugin’s developer to report the issue is recommended, as there is also a lot of excess CSS (e.g. separate duplicate styles for each form label, etc.) that could be optimized to help your site load faster.
- You must be logged in to reply to this topic.
