Job Application Example CSS

[MPx]

Hi,

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.

[Allan]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[MPx]

After 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,
Mark

[MPx]

Also, 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.

[Allan]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[MPx]

Hi 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.

[MPx]

Hey 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.

[MPx]

Hey 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+ Workstations

My 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+ Servers

There 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.

[Allan]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[Allan]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[MPx]

Hi 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.

[MPx]

Hey 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.

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[Allan]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[Allan]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[Author]

Posts