Support community for TTG plugins and products.
NOTICE
The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.
This forum is now closed, and exists here as a read-only archive.
You are not logged in.
Is there a way to design the contact form so that the boxes are centered on the page? Also, can the size be changed?
Offline
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/3 test site
Offline
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
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
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/3 test site
Offline
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
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/3 test site
Offline
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
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/3 test site
Offline
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/3 test site
Offline
of course you're right: on the phone. the boxes look very small...
Offline
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
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/3 test site
Offline
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
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/3 test site
Offline
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
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/3 test site
Offline
Thanks Rod - works great.
Offline
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
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/3 test site
Offline
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
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/3 test site
Offline
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/3 test site
Offline
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
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