Community @ The Turning Gate

Support community for TTG plugins and products.

You are not logged in.

#1 2017-01-28 04:06:56

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,143

Contact Form Design / Backlight

Is there a way to design the contact form so that the boxes are centered on the page? Also, can the size be changed?

http://pideja.ca/duceppe_2008-2017/contact/

Offline

#2 2017-01-28 06:21:26

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,083
Website

Re: Contact Form Design / Backlight

it will require custom css.

this will center it on the page. basically just adding left/right auto margin and making the width 50% (set width to your own preferences)

.contact-form {
    margin: 1.5rem auto !important;
    width: 50%;
}

I'd suggest putting that in a media query so it affects only displays that are, say, landscape tablet width and wider.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#3 2017-01-28 22:00:53

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,143

Re: Contact Form Design / Backlight

I am used to editing the Custom CSS in CE4, found in phplugins/css/custom.css. But, where do I put it in Backlight?

I edited the backlight/custom/phplugins/phplugins.php:

function _HOOK_( $style, $path ) {
    echo '
<link rel="stylesheet" href="pideja.ca/duceppe_2008-2014/backlight/custom/css/custom-sample.css" />
    ';
    return false;
} // END

Then, as suggested, I create a contact.css file:

@media only screen and (max-device-width:480px) {
  .contact-form {
  margin: 1.5rem auto !important;
  width: 50%;
}
}

No apparent change.

I don't know if this means anything, but looking at the files in my ftp, I noticed this: .htaccess_disabled
Can this be a problem?

What did I do wrong?

Last edited by pideja (2017-01-28 22:44:33)

Offline

#4 2017-01-28 22:55:32

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,143

Re: Contact Form Design / Backlight

I finally found the Advanced Customization in the Design/Templates/Page de base thanks to the Backlight documentation (Custom Style Sheets).
So, I enabled both CSS and PHPLUGINS indicating the appropriate files (contact.css and phplugins.php).

Still no cigar!

Offline

#5 2017-01-28 23:23:48

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,083
Website

Re: Contact Form Design / Backlight

You don't need to activate phplugins in order to use custom CSS. (The URL to the custom CSS isn't formed right anyway)
Can you post a link to your contact page?

Your media query will only affect small devices, is this what you want?


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#6 2017-01-29 00:59:04

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,143

Re: Contact Form Design / Backlight

Her is the link to the contact page : http://pideja.ca/duceppe_2008-2017/contact/

Actually, I'm not thinking of smaller devices, at least for now. I only want to center the reply boxes in the contact page.

Offline

#7 2017-01-29 01:08:18

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,083
Website

Re: Contact Form Design / Backlight

Your media query (above) is set to apply your custom css to small devices only


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#8 2017-01-29 01:24:57

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,143

Re: Contact Form Design / Backlight

I changed the custom css file to read:

  .contact-form {
  margin: 2rem auto !important;
  width: 20%;
}
}

I don't fully understand the syntax, but the changing of the width from 50% to 20% placed the boxes in the center of the page.

What could I add to the custom css in order to have the "envoie" button centered?

Offline

#9 2017-01-29 02:01:37

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,083
Website

Re: Contact Form Design / Backlight

I'm not on my PC now so can't probe the selectors. But you can take a look using your browser's inspector.
http://ttg-tips-and-tricks.barbeephoto. … selectors/


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#10 2017-01-29 02:07:47

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,083
Website

Re: Contact Form Design / Backlight

The problem with setting it at 20% is that on small devices, the input fields are going to be very small. That's why I suggested using a media query to apply the custom CSS to larger screen widths only.
Something like min-width: 1025px
Or set it to apply to tablets in landscape (min- width +1 of tablet in portrait)


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#11 2017-01-29 04:00:47

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,143

Re: Contact Form Design / Backlight

of course you're right: on the phone. the boxes look very small...

Offline

#12 2017-01-30 02:20:46

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,143

Re: Contact Form Design / Backlight

I just stumbling around here. I found some media query examples and applied them to contact.css which now reads as follows:

/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1920px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
}
/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}
/* ----------- iPhone 4 and 4S ----------- */
/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}
.contact-form {
    margin: 5.5rem auto !important;
    width: 50%;
}

This might be overkill. Doesn't change anything on my computer but nevertheless, the contact form looks great on my SE iPhone!

Offline

#13 2017-01-30 03:03:54

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,083
Website

Re: Contact Form Design / Backlight

the reason it doesn't change anything is that you've just got media queries without including the css that those media queries effect. And one of those queries is malformed (doesn't have a closing } ), which negates what follows anyway, including the actual styling at the bottom of the style sheet.

this will center your contact form on any device with a browser width of 768px and wider. That should include tablets in landscape mode

@media only screen and (min-width: 768px) {
    .contact-form {
    margin: 0 auto !important;
    width: 50%;
    }

.contact-form input {
  max-width: 100% !important;
}
}

adjust the contact-form width as needed, this will also control the size if the input fields
adjust the media query min-width as needed for the devices you want to affect.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#14 2017-01-30 06:18:19

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,143

Re: Contact Form Design / Backlight

Works great on both mobil and full screen. I don't have a pad but I assume it works well on those also.

I guess that last part:

.contact-form input {
  max-width: 100% !important;
}
}

was the part that indicated the size for the large screen, or am I wrong?

Thanks again,

Pierre

Last edited by pideja (2017-01-30 06:18:39)

Offline

#15 2017-01-30 07:31:42

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,083
Website

Re: Contact Form Design / Backlight

no, that last part makes it so the the input fields are the same width as the form, otherwise it won't look centered.

the part that determined the size of screen that the css applies to is the media query:

@media only screen and (min-width: 768px) {


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#16 2017-04-01 05:18:17

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,143

Re: Contact Form Design / Backlight

Finally got the contact form as I want it except for the "send" button.

How do I change the position (centered) and the color of the button?

Offline

#17 2017-04-01 05:32:21

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,083
Website

Re: Contact Form Design / Backlight

button color can be controlled in the page template: Typography > Forms: Buttons.

Center the button with custom css.

This will center the button in the form.

.actions input {
  position: relative;
	left: 50%;
}

Keep in mind, the width of the form is wider than what you see as the width of the fields. Take a look with a browser inspector and you'll see what I mean.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#18 2017-04-01 06:00:24

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,143

Re: Contact Form Design / Backlight

Thanks Rod - works great.

Offline

#19 2019-10-04 23:55:02

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,143

Re: Contact Form Design / Backlight

More contact form woes...on this site pideja.ca/gbc the contact response fields are way too large and I can't see their headings.

This is the CSS I use:

.thumbnail {
    position: relative;
    width: 100px;
    height: 200px;
    overflow: hidden;
}

.the__copy > .content{
    text-align: center;
}

/* breadcrumbs */

ul.breadcrumbs li {
    font-size: 1.20rem;
}

.breadcrumbs a {
	font-weight: bold;
	font-size: 1.15rem;
	color: FF2115;
}
.breadcrumbs li a:hover {
              color: white;
}
 
.gallery figcaption {
    text-align: center;
    texte-color: white;
}

/* contact */

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

.contact-form input {
  max-width: 100% !important;
} 

 @media only screen and (min-width: 768px) 
.contact-form {
    margin: auto !important;
    width: 50%;    
    }
	
.copyright p{
	font-style: italic;
	text-align: center;
}

Also, I don't see the breadcrumbs...

Last edited by pideja (2019-10-05 00:07:29)

Offline

#20 2019-10-05 00:17:33

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,083
Website

Re: Contact Form Design / Backlight

your contact form text is the same color as the background, that's why you can't see it.


Your css is what's causing the fields to span all the way across the page:

.contact-form input {
  max-width: 100% !important;
}


Breadcrumbs don't appear on pages, only albums and album sets (unless you're using Daniel's phplugins solution for putting breadcrumbs on regular pages)


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#21 2019-10-05 00:33:54

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,143

Re: Contact Form Design / Backlight

In Backlight>Designer>Templates>GBC-page>Design>Color, in Contrast, I have text color set to a very light grey (rgb(224,224,224)). I set all mention of text-color in CSS to this value.
In an attempt to have the fields narrower, I set the CSS to:

.contact-form input {
  max-width: 50% !important;
}

Still no change.

As for the breadcrumbs, I expect them only on the album-set and album pages.

Last edited by pideja (2019-10-05 00:34:19)

Offline

#22 2019-10-05 00:37:34

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,083
Website

Re: Contact Form Design / Backlight

can you start another topic for the breadcrumb issue?


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#23 2019-10-05 00:40:09

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,083
Website

Re: Contact Form Design / Backlight

the fields are at 50% when I look. Try clearing cache.

The contact form text color is controlled in the Forms section of Typography


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#24 2019-10-05 00:48:19

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,143

Re: Contact Form Design / Backlight

Sorry about breadcrumbs.

As for the Contact page, I tried clearing the cache to no avail.
I set the text colour in the Forms section as per your advice. I also have a text-colour in the CSS. Either way, no text shows up, so it must be black or the fields are so wide, I can't see the text.

Offline

#25 2019-10-05 00:54:46

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,143

Re: Contact Form Design / Backlight

I edited my CSS to read like this:

/* contact */
.contact-form {
		text-align: center;
}

.contact-form input {
  max-width: 25% ;
  text-color: white;
} 

 @media only screen and (min-width: 768px) 
.contact-form {
    margin: auto ;
    width: 50%;    
    }

I can now see the narrower fields but still no field titles. I had to clear the browser's cache also.

Last edited by pideja (2019-10-05 00:56:35)

Offline

Board footer

Powered by FluxBB