Contact Form to the center and shadow / border around image view

christopherhauser · 2019-02-03 00:11:02

Hi there,

just installed BL2 and having trouble getting the contact form centered. I hate that it is aligned to the left.

I should be able to do this through CSS or do I need PHPplugin?

Second question is it possible to add a Border and Shadow around images in the "viewer" of a gallery?

Thanks a lot

Last edited by christopherhauser (2019-02-03 00:21:31)

rod barbee · 2019-02-03 01:04:44

try this in your custom css for the form:

form {
	width: 50%;
	margin:0 auto;
}

This will apply to all forms on your site so if you want it to be specific to a page you can precede the form selector with a body class specific to the page. For example, if this is in your contact page (and the slug for that page is contact/) then:

.slug-contact form {
	width: 50%;
	margin:0 auto;
}

not sure what you mean by your second question. What do you mean by "the viewer"?

christopherhauser · 2019-02-03 02:21:35

Just tried it and it kinda centered it. Still a little strange.

http://chauser.eu/en/contact/

I figured out the second part by myself. ( I was talking about Fancy Box )

Daniel Leu · 2019-02-03 02:39:17

Line 17 of your local css file chauser.css defines a max-width for form fields:

form input[type="color"], form input[type="date"], form input[type="datetime"], form input[type="datetime-local"], form input[type="email"], form input[type="month"], form input[type="number"], form input[type="password"], form input[type="search"], form input[type="tel"], form input[type="text"], form input[type="time"], form input[type="url"], form input[type="week"], form input:not([type]), form select, form textarea, .form input[type="color"], .form input[type="date"], .form input[type="datetime"], .form input[type="datetime-local"], .form input[type="email"], .form input[type="month"], .form input[type="number"], .form input[type="password"], .form input[type="search"], .form input[type="tel"], .form input[type="text"], .form input[type="time"], .form input[type="url"], .form input[type="week"], .form input:not([type]), .form select, .form textarea {
    max-width: 450px;
}

Once you increase it, it looks better. But this affects many other fields and might have unintended side effect. You might want to add the .slug-contact class to the selector.

christopherhauser · 2019-02-03 22:16:26

Thanks a lot! One last thing, is there a way to center the "text/labels" and send button as well? I am slowly getting back to CSS with inspecting and changing, but some things just won't work :Q

Daniel Leu · 2019-02-04 03:34:44

christopherhauser wrote:

Thanks a lot! One last thing, is there a way to center the "text/labels" and send button as well? I am slowly getting back to CSS with inspecting and changing, but some things just won't work :Q

This seems to work for me:

.contact-form p {
    text-align: center;
}

.contact-form .actions {
    text-align: center;
}

christopherhauser · 2019-02-04 15:37:58

Thanks a lot!

Daniel Leu · 2019-02-04 16:28:20

Community @ The Turning Gate

#1 2019-02-03 00:11:02

Contact Form to the center and shadow / border around image view

#2 2019-02-03 01:04:44

Re: Contact Form to the center and shadow / border around image view

#3 2019-02-03 02:21:35

Re: Contact Form to the center and shadow / border around image view

#4 2019-02-03 02:39:17

Re: Contact Form to the center and shadow / border around image view

#5 2019-02-03 22:16:26

Re: Contact Form to the center and shadow / border around image view

#6 2019-02-04 03:34:44

Re: Contact Form to the center and shadow / border around image view

#7 2019-02-04 15:37:58

Re: Contact Form to the center and shadow / border around image view

#8 2019-02-04 16:28:20

Re: Contact Form to the center and shadow / border around image view

Board footer