Home › Forums › Quform WordPress › Job Application Example CSS
- This topic has 14 replies, 3 voices, and was last updated 10 years, 10 months ago by
Allan.
- AuthorPosts
- July 31, 2014 at 1:20 am #12022
MPx
ParticipantHi,
I am trying to create a form with the same “look and feel” of the Job Application form example. I’ve imported the job application example form but can’t seem to find out where the css code is to match the look (I assumed it was part of the light-rounded theme but it’s not). I’ve looked around the forums and kb but can’t find any reference to it.
Is it possible to get a copy of those CSS customizations?
Thanks!
M.August 1, 2014 at 6:58 am #12029Allan
Support StaffYou don't have permission to view this content. Please log in or register and then verify your purchases to gain access.
August 1, 2014 at 2:50 pm #12030MPx
ParticipantAfter spending some time, I was able to get it very close in design … only one element I’ve been unable to figure out how to modify the CSS elements for and that’s the “group” box. I want to adjust the border radius but can’t seem to find what style to modify.
Also, right now when you hover over a text field the text color goes to a dark grey, is there a way to have the background color of the textbox change vs. the actual text color?
Thanks again!
Cheers,
MarkAugust 1, 2014 at 10:16 pm #12042MPx
ParticipantAlso, what would be the css style tag to give the pop-up window (fancybox) rounded-edges? I’ve tried both fancybox-outer and fancybox-wrap but neither had any effect.
Thanks!
M.August 3, 2014 at 7:02 am #12049Allan
Support StaffYou don't have permission to view this content. Please log in or register and then verify your purchases to gain access.
August 3, 2014 at 3:49 pm #12050MPx
ParticipantHi Allan,
Thanks for your reply. I’m starting to wonder if there is a conflict with my theme (I’m using Avada). I did do some fiddling around with the CSS files, and the only way I was able to get the fancybox with a rounded border was with this code (but as you will see in the screenshot there is a light-grey transparency behind the rounded-corners that is still square – highlighted in red):
[code]
/* QuForm Modal PopUp (FancyBox) Custom Styling */#fancybox-outer {
-moz-border-radius: 15px !important;
border-radius: 15px !important;
-webkit-border-radius: 15px !important;
}#fancybox-content {
-moz-border-radius: 15px !important;
border-radius: 15px !important;
-webkit-border-radius: 15px !important;
}
[/code]I did a 15px round just to make the corner more obvious in the screenshot.
The hover code worked AWESOME. Thanks so much for that! The border group worked well as well, except for the top box – if you look at the very top box you’ll see the top corners lost their grey border – so they are just white. Which is really odd and unusual as all the other boxes work fine. I’ve been trying to narrow down why (changing columns, etc) but haven’t found it yet.
Lastly, the option buttons and option text don’t vertical-align:middle .. I’ve tried adding that code to the different option elements but no luck. I highlighted this in orange on the screenshot.
Any insights you have would be greatly appreciated. Let me know if you need access to our WordPress site to poke around.
Cheers,
M.Attachments:
You must be logged in to view attached files.August 3, 2014 at 10:00 pm #12054MPx
ParticipantHey Allan,
After some more testing it seems that the group border issue appears when I have a “Title” assigned to the group. Beyond that not sure how to fix it LOL .. but thought I would let you know my findings.
Cheers,
M.August 4, 2014 at 4:23 am #12055MPx
ParticipantHey Allan,
Has anyone reported issues with the Option choices randomly changing, duplicating existing choices into other slots? For example, my original option choices for my “number of workstations” was:
1-10 Workstations
11-25 Workstations
26-50 Workstations
51-99 Workstations
100+ Workstations… and now, after doing some CSS style editing (no changes to the actual form), it now has these for choices:
26-50 Workstations
51-99 Workstations
100+ Workstations
51-99 Workstations
100+ WorkstationsMy number of server choices have changed too. Originally, they were:
1 Server
2 Servers
3 Servers
4 Servers
5+ Servers… and now the choices are:
3 Servers
4 Servers
5+ Servers
4 Servers
5+ ServersThere is a pattern to the change as you can see … I’m just not sure why it’s happening?! This isn’t the first time, but before I chalked it up to perhaps my own error. But tonight I know all I’ve done is CSS style editing and no touching of the form code itself … and yet, the choices have changed. Odd!
Cheers,
M.August 5, 2014 at 8:02 pm #12078Allan
Support StaffYou don't have permission to view this content. Please log in or register and then verify your purchases to gain access.
August 5, 2014 at 8:05 pm #12079Allan
Support StaffYou don't have permission to view this content. Please log in or register and then verify your purchases to gain access.
August 5, 2014 at 9:23 pm #12081MPx
ParticipantHi Allan,
Thanks for the great support. Your provided code fixed most of my issues 😉 The radius issue with the group box title still exists. I’ve attached another screenshot.
I did play around with your code and added things like:
border: 1px !important;
border-color: #999 !important;
border-style: solid !important;
… I added the !important tags just to be sure lol … but that didn’t work either. Is it a layering issue, that the title box is on-top of the other element – in which case would it be as simple as using an opacity tag somewhere?
Sorry, I have a decent understanding of CSS but not advanced enough to troubleshoot this one …
Cheers!
M.Attachments:
You must be logged in to view attached files.August 5, 2014 at 11:27 pm #12085MPx
ParticipantHey Allan,
Couple more questions … I’ve been playing around with the dropdown css styling and have a couple of issues. One, the border is a mix of grey and black and I can’t figure out how to make it all a solid color with a shadow to make the design consistent with the rest of the “theme”. I’ve tried manipulating it using border-color: #999; to no effect.
Also, I want to put in some padding before the dropdown items, like padding-left: 5px; but that doesn’t work. I tried margin-left: 5px; but it shifted the whole dropdown area to the right by 5px including the border.
I am putting the custom code under Settings > Styles and Dropdown Menu Elements.
See the attached screenshot.
Thanks again,
M.Attachments:
You must be logged in to view attached files.August 6, 2014 at 4:46 pm #12089Ally
Support StaffYou don't have permission to view this content. Please log in or register and then verify your purchases to gain access.
August 7, 2014 at 7:39 am #12107Allan
Support StaffYou don't have permission to view this content. Please log in or register and then verify your purchases to gain access.
August 7, 2014 at 7:49 am #12108Allan
Support StaffYou don't have permission to view this content. Please log in or register and then verify your purchases to gain access.
- AuthorPosts
- You must be logged in to reply to this topic.