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.
Pages: 1
To follow up on a previous thread, Rod wrote:
that beige area is coming from the custom CSS for that page template starting on line 29:
.the__copy>.content {
background-color: rgba(213, 204, 185, 0.7);
border-radius: 0;
width: 100%;
max-width: 1440px;
padding: 50px;
font-size: 1.25rem;
color: black;
}
You are right, of course. The confusion, for me, came from the fact that I have two sections that cover this background issue. There is this section
.the__copy>.content {
/*background-color: rgba(213, 204, 185, 0.7);*/
border-radius: 0;
width: 100%;
max-width: 1440px;
padding: 50px;
font-size: 1.25rem;
color: black;
}
In which I corrected the background by commenting it (for now) and this other section added when I merged the CSS that rules these album pages :
/*large image title & caption*/
.pages-template-id-21 .the__copy > .content,
.pages-template-identifier-Prints .the__copy > .content {
background-color: transparent;
border-radius: 0;
width: 100%;
max-width: 1440px;
padding: 50px;
font-size: 1.25rem;
color: black;
}
Where I am trying to specificaly control the large image size on both sides of this bilingual site. But the result is a correct rendering on the French side while on the English side, there is a wide bounding box (see the X and the navigation arrows over the image) forcing the image to be smaller in height.
The CSS file is here: pideja.ca/luc/backlight/custom/css/lucnade.css
Last edited by pideja (2018-04-27 20:34:00)
Offline
I also found this, with the Inspector, on the English side large image:
/*.maximum-image-size-toobig {
width: auto;
height: auto;
max-width: 80% !important;
max-height: 80% !important;
outline: 1px solid black;
}*/This code does not show up for the same large image, on the French side, in the Inspector. I tried the code, then commented it. The image is identical in dimensions on both sides. So, why does the Inspector note a difference?
Offline
I'd look at the image sizes being set in each template.
where were you applying the class .maximum-image-size-toobig?
this is what I see in your custom css. If un-commented it wouldn't apply to anything anyway because of this:
.pages-template-identifier-Prints
That is not a page identifier in either of your albums
/*.pages-template-identifier-Prints.maximum-image-size-toobig {
width: auto;
height: auto;
max-width: 80% !important;
max-height: 80% !important;
outline: 1px solid black;
}
*/Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
This is what I see in the English side inspector:
element {
width: 772px;
}
.single_image img {
border: 1px solid #000000;
box-shadow: none;
display: block;
margin: 0 auto;
}
.maximum-image-size-toobig {
width: auto;
height: auto;
max-width: 96% !important;
max-height: 90vh !important;
outline: 1px solid red;
}
img {
display: block;
height: auto;
max-width: 100%;
overflow: hidden;
position: relative;
text-align: center;
transform: translate3d(0,0,0);
vertical-align: middle;
white-space: nowrap;In the French version, it's
element {
width: 452px;
}
.single_image img {
border: 1px solid #000000;
box-shadow: none;
display: block;
margin: 0 auto;
}
img {
display: block;
height: auto;
max-width: 100%;
overflow: hidden;
position: relative;
text-align: center;
transform: translate3d(0,0,0);
vertical-align: middle;
white-space: nowrap;
}
img {
border-style: none;
}As far as I can tell, the
element {
width: 452px;on the French side and the corresponding code on the English side
element {
width: 772px;refers to the image. If I adjust the setting to 452px on both sides, I get same sized images but a large "bounding box" on the English side. Why is there the "image-size-too-big" section on the English side?
Offline
Those are all settings from the template (except .maximum-image-size-too-big as far as I can tell)
Are the image size settings in each album template the same?
If they are , you probably need to republish. When republishing, make sure that the Publisher Settings in Lightroom are such that the “Push metadata...” and “publish thumbnails...” checkboxes are not checked.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Why is there the "image-size-too-big" section on the English side?
Where are you seeing this? (Screen shot?)
I can only find it in your custom css
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
As suggested, rather than pulling my hair out trying to find the mistake in the code, I re-formatted the images and re-published everything. All seems fine...now.
Of course, that WAS probably the mistake. That would mean I have a lot of unnecessary code in the CSS file.
Should I spend time trying to weed out the useless code lines?
Eventually, I should.
But for now, I'm trying to publish this site online next week, if possible.
So I'll live with a bloated CSS file as long as I can.
Thanks again, Rod.
Offline
It sure couldn't hurt weeding out the unnecessary stuff. And would probably help, if nothing for no other reason than it makes things less confusing.
here are some things that are unnecessary.
This, which is using a CE4 selector (.mantle):
navigation .mantle {
width: 160px;
float: left;
background-color: #FFF;
padding: /*24px*/
4px;
}this, that uses outdated navigation selectors:
p.p-nav a {
border-left-width: 0;
width: 80%;
}
p.p-nav a:first-child {
padding-left: 10px;
}
p.p-nav {
text-align: left;
}this doesn't seem to be doing anything. in fact, it's being overridden by more specific Backlight css.
.nav_v .menu-item,
.nav .menu-item a {
line-height: 12px;
}And I still can't see where this plays a role:
/*.pages-template-template-id-13 .maximum-image-size-toobig {
width: auto;
height: auto;
max-width: 80% !important;
max-height: 80% !important;
outline: 1px solid black;
}
*/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 first three sections, I guess where "inherited" from previous CSS files I had written. I thought they would control mobile display. Evidently, I was wrong.
As for the last one, I thought it would control the large image displays. But, I had already commented it, so now, I will dispose of it.
I still have to figure out how to control the mobile display. It is now OK but not great.
But, that's another (possible) thread.
Thanks Rod.
Offline
Pages: 1