Community @ The Turning Gate

Support community for TTG plugins and products.

You are not logged in.

#1 Re: Backlight 2 Support » Thumbnails, size & captions... » 2019-10-10 03:39:54

Changed

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

to

@media only screen and (max-width: 360px).album_thumbnail {
	position: absolute;
	width: 50px;
	height: 50px;
}

The thumbnail container does not change size or shape, but the image itself is larger than the container. Not truly satisfactory (I would prefer a 1:1 thumbnail) but it's an improvment of sorts.

#2 Re: Backlight 2 Support » Thumbnails, size & captions... » 2019-10-10 00:55:49

Did that and no change. Smallest breakpoint (640px) used.

#3 Re: Backlight 2 Support » Thumbnails, size & captions... » 2019-10-10 00:40:06

This is one of the recurring issues I have with the albums I have already published: I can't control the thumbnail size and appearance when in the mobile format.

pideja.ca, pideja.ca/tnm, pideja.ca/duc and others...

This is a typical CSS used:

@media only screen and (min-width: 360px){.album thumbnail {
	position: relative;
	width: 166px;
	height: 125px;
}
}    

And setting Backlight>Designer>Templates>Album-pideja>Design>Thumbnail Grid>Aspect Ratio to 1:1 doesn't do anything.

I had already set these thumbnails a while ago, to a 4:3 format but it's ok on the large screen but on the phone it would be better, I think, at 1:1.

#4 Re: Backlight Support » Contact Form Design / Backlight » 2019-10-06 05:36:13

So, I guess that I'll stay at Okapi for the time being...unless there are overwhelming reasons to upgrade. I can't afford to go through that again at least for this project. The site is used almost daily by the dance company. So, until next summer (off-season) it's going to stay like this.

Thanks Rod.

#5 Backlight Support » Album formatting missing » 2019-10-06 02:23:46

pideja
Replies: 1

This is driving me nuts. I have my main site pretty much done in Backlight-Okapi, Publisher is working and the album-sets are displayed as I want. The galleries page, however, will not show the correct formatting. I checked Backlight > Publisher > Top-level Galleries > Albums to determine what template is being used. It's the correct template.
Further, the large image display is correct! But, if I wait a while, the album then displays correctly.
So, what's going on here?

https://pideja.ca/gbc/galleries/12-casse-noisette/

#6 Re: Backlight Support » Contact Form Design / Backlight » 2019-10-06 02:07:07

I found some great tools to correct mistakes in the writing of the CSS code:

https://html-cleaner.com/css/
https://codebeautify.org/cssvalidate



My CSS now reads:

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

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

.breadcrumbs a {
font-weight:700;
font-size:1.15rem;
color:#D3D3D3;
}

.breadcrumbs li a:hover {
color:#FFF;
}

.gallery figcaption {
text-align:center;
color:#D3D3D3;
}

.contact-form input {
max-width:50%;
color:red;
}

.copyright p {
font-style:italic;
text-align:center;
}

.the__copy>.content,.contact-form p {
text-align:center;
}

Works great! All that's left is to figure out why the album page doesn't conform to the styling I designed. But that's another post...

#7 Re: Backlight Support » Contact Form Design / Backlight » 2019-10-06 01:29:41

Thank you again, Rod.

The confusion (on my part) arose when I saw that I had an Okapi and a Pangolin page in the Templates>Page Template section. The Pangolin was the default but setting the Okapi as default fixed the problem.

Now, if I want to "upgrade" to Pangolin thru-out, can I do this in a straightforward way?

#9 Re: Backlight Support » Contact Form Design / Backlight » 2019-10-05 01:02:46

Using CSS lint, I get these error messages:

line                 column                              title                                    description                                
error    40            1                         Parsing Errors     Expected LBRACE at line 40, col 1.
                                                                                        .contact-form {

warning    27    5    Require use of known properties    Unknown property 'text-colour'.
                                                                                text-color: #DCDCDC;

warning    36    3    Require use of known properties    Unknown property 'text-colour'.
                                                                                 text-color: white;

What's that Left Brace on line 40? And why are the colours not "known"?

#10 Re: Backlight Support » Contact Form Design / Backlight » 2019-10-05 00:54:46

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.

#11 Re: Backlight Support » Contact Form Design / Backlight » 2019-10-05 00:48:19

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.

#12 Re: Backlight Support » Contact Form Design / Backlight » 2019-10-05 00:33:54

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.

#13 Re: Backlight Support » Contact Form Design / Backlight » 2019-10-04 23:55:02

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

#14 Re: Backlight 2 Support » pallet-footer relationship » 2019-10-04 23:03:24

I'm trying out this idea: I'd like for the pallet (beige) to run all the way down and over the footer. It's not like that now, but when I did try it, the pallet would stop at the footer, just like the blue area in the example picture I posted.

This might not be a good idea, but I am wondering if it could be done.

#15 Backlight 2 Support » pallet-footer relationship » 2019-10-03 01:19:26

pideja
Replies: 4

Must the footer be over the pallet?
In this first picture we see the pallet:
pallet.png
As we know, that gap at the bottom is the footer:
footer

Clearly, the footer is over the pallet. Is there a way to have the pallet go over the footer?

And, I have tried CSS to control the minimum width of that pallet but it's stuck at 200px.

#16 Re: Backlight 2 Support » Title in top pallet » 2019-09-26 03:25:43

I removed the tag line in Masthead>Identity.
But this solved nothing: I do want the tag line appearing in the Mobile Top Palette.
But no title appears in the Mobile Top Pallet.
And, unless I modify the graphic that is on the Desktop Masthead, there is no way I can have a text site title + a graphic. Both must be included in the graphic Masthead.
As it is now, with the settings as indicated previously, I have no Title+ Tag line under the graphic on Desktop and no Title + Tag Line in the Top Pallet on the Mobile.
I do have a Title in the Header but no Tag line on the Mobile.

#17 Re: Backlight 2 Support » Title in top pallet » 2019-09-25 22:40:14

I do have these settings as you suggest:
In the Top Pallet: Top_Pallet and in the Masthead section: Masthead_Top
and
Masthead_Primary

Just as a test, I set Top Pallet has height on desktop...no title appears, even on the Desktop!

So, then, I fiddle with Masthead>Top Pallet Title, turning Desktop and Mobile alternatively off and/or on...no title on Mobile but now, the tag line of the title "photographe" shows up on the Desktop, under the logo image. And it seems stuck there, can't remove it!

#18 Re: Backlight 2 Support » Title in top pallet » 2019-09-25 08:47:25

I do have the Masthead>Top Pallet Title set at « Visible on Mobile » The primary masthead is set to Desktop and the secondary Masthead set to ...heading because there is no Top Palette  I can see.

#19 Re: Backlight 2 Support » Breadcrumb styling » 2019-09-25 02:17:12

I guess I forgot about that. Thinking that all settings where CSS driven. Issue solved, thank you.

#20 Re: Backlight 2 Support » Breadcrumb styling » 2019-09-25 00:03:54

I'm still here: pideja.ca and looking thru out the breadcrumbs in the Galeries section.

But wait!

The hover seems to be correct, except for the underline, but let's not quibble.

#21 Backlight 2 Support » Title in top pallet » 2019-09-24 23:50:13

pideja
Replies: 9

I have the title (my name) in the header rather than in the top pallet.
In Backlight>Designer>Templates>Pages-pideja>Design>Masthead>Secondary Masthead, I set the placement in "the Header", but really, I want it in the top pallet but this choice is not available.
I also set the Top Pallet Title to Visible on Mobile.

If I look into Backlight>Designer>Templates>Pages-pideja>Design>Top Pallet, I set "has height on Mobile" but I fail to see where I can set it to show the title.

pideja.ca

#22 Re: Backlight 2 Support » Breadcrumb styling » 2019-09-24 22:53:05

Oops! forgot a digit! Fixed but still, the hover should be #FFF5D0 and it's still red-underlined.
Looking all over Backlight and checked the CSS and nothing seems to indicate red-underlined breadcrumbs hover.

#23 Re: Backlight 2 Support » Breadcrumb styling » 2019-09-24 00:33:10

I still have an issue with these breadcrumbs. I played around with different colours and even tried the underline font decoration. However, I returned to a simple font colour (red) and hover colour (beige)
I wrote the CSS accordingly:

/* Display list items side by side */

ul.breadcrumbs li {
	display: inline-block;
    font-size: 1.20rem;
    padding: 60px 16px;
}
/* Add a color to all links inside the list */

.breadcrumbs li a {
	font-weight: light;
	font-size: 1.20rem;
	color: #FF0001;
	font-weight: light;
}

/* Add a color on mouse-over */

.breadcrumbs li a:hover {
     color:#FF5D0 	;
     font-weight: light;    
 }

and yet, I still have that red/red underline combination. I cleared the Backlight cache and the browser cache, but no change. What else could I change?

#24 Re: Backlight 2 Support » Breadcrumb styling » 2019-09-22 23:57:13

Think you for the # hint. It works fine now.

#25 Re: Backlight 2 Support » Breadcrumb styling » 2019-09-22 05:44:26

Put back the "s" in breadcrumbs. Then, slightly changed the hover colour to FFF5D0 I tried changing the hover colour to black and...it worked! Is the colour I'm trying to use wrong somehow? Tried RGB(255,246,208) and it worked! Should I write the colour in RGB code rather than HEX?

Now to control the lead breadcrumb colour, still white.

Board footer

Powered by FluxBB