Large Image Caption Display position

pideja · 2017-03-20 01:16:52

In a Theater Album, I'm trying to center the caption center and below the video (large image).

In Publisher, I fill-in the "Page Content/Page Copy" box that print as a caption under the image but to the left.

So, I tried somme CSS to get it to align center:

@font-face {
       font-family: 'Roboto';
       
       }

.copyright p{
	text-align: center;
}
ul.metadata li {

font-size: 1.25em;
}

.single_image figcaption { 
	text-align: center;
    font-size: 1.00em;
    color: #000000;
}

But, alas, no change in the image caption position.

Any ideas ?

Last edited by pideja (2017-03-20 01:17:25)

rod barbee · 2017-03-20 02:06:56

that CSS pertains to the footer, image thumbnails in a regular album, and image caption (metadata) on large images in a Single HTML album.
And @font-face is malformed.

Just to be clear, are you trying to center the image caption (metadata) or the page copy?

If it's the image metadata caption, try this: http://ttg-tips-and-tricks.barbeephoto. … mment-2548

If it's the page copy, then do you want the copy centered for just this album? Do you want it centered for all albums using this template? Do you want copy centered for the entire site?
This will determine how best to implement the css.

pideja · 2017-03-20 22:49:48

I want the title (here in the breadcrumb) and the caption to be centered respectively over and under the video in the theater module. Also, the footer should be centered on all pages thru out. Of course, formatting the type (size, bold or italic...) would be nice.

The latest CSS I tried is:

figcaption {

    text-align: center;

}

.copyright p{
	text-align: center; 
}

Here is a typical Theater page I use:

http://pideja.ca/nat/en/galleries/02-sequelles/

Last edited by pideja (2017-03-20 22:51:01)

rod barbee · 2017-03-20 23:24:01

Centering breadcrumbs:

ul.breadcrumbs {
    margin: 8px auto 0;
    width: 300px;
    text-align: center;
    padding-bottom: 12px;
}

adjust width and bottom padding if needed. And test for mobile responsiveness.

You're not using caption information below the video, you're using page copy. So you don't need the figcaption rule you're using. Try this instead.

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

@font-face is still malformed. You have a relative url to the font file. Either add http:// to the front or remove pideja.ca

If you use the above css then all pages using that page template will have breadcrumbs and page copy centered. If this is not what you want, then make sure that the template for the video pages are using a template with this css file and your other pages are using a template that uses a different css file.

pideja · 2017-03-20 23:41:59

I owe you another cigar!

pideja · 2017-03-21 02:43:08

I just have another question:

Trying to format the copy in the About page. Presently it seems "centered" and it's also too wide.

It should be either "justified" or "left" and the same width as the masthead. The masthead is 1592px. wide although it seems less when I look at the site.

Anyway, here I am fiddling around with the CSS file. I added a few lines:

.about .content {
	text-align: left;
	width: 600px; }

It doesn't seem to work. How do I write correctly this command?

http://pideja.ca/nat/en/Bio/

rod barbee · 2017-03-21 04:47:10

the reason it's centered is that it's affected by the same custom css you're using for the video pages.

you could do a number of things to override.
One is to use the exact same selector as you used for the video pages and prepend it with the page class:

.about .the__copy .content {
text-align: left;
}

but this is just a band-aid and if you need to left-align other pages you'll have to override your custom css there too.

One thing you could do is use a separate css file for your video pages.

To do this, open the nat.css file and save it as something like nat-video.css. Then upload it to /backlight/custom/css where your nat.css file already is.

next, clone the page template you're using for the video page (not the album template, the page template). Name it "video page" or something.
In Advanced Customization, choose the nat-video.css file.
Go to your Theater template and assign the new page template to it. That's all for that.

In your original nat.css file, get rid of all the stuff pertaining to the video pages.

If you don't want to do all that, another option is to modify this from your nat.css file:

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

to this:

p.video-text {
       text-align:center;
}

And in the page copy of all your video page, write your text in html:

<p class="video-text">Dramatic television series by Louis Bélanger - Attraction Images Production</p>

There's also the inline styling option, which might be easier for singular usage.

This is why I asked above how you planned on using this:
http://community.theturninggate.net/vie … 469#p45469

pideja · 2017-03-21 23:55:59

Great response, Rod,

I'll be trying the second suggestion. It seems more versatile. Looking thru my site setup, I notice I have three "nat.css" files.
One is in nat/backlight/custom/css , the so-called portal, and the two others are in the corresponding custom/css folders for "en" and "fr" versions.

Do you not think this a bit of overkill? So I just keep the one in the portal or should I delete that one and keep the two others?

Last edited by pideja (2017-03-21 23:56:14)

rod barbee · 2017-03-22 00:03:09

You could use just one custom css file, but you'd need to implement it via phplugins (just like in CE4 and previous versions) rather than the Advanced Customization option in the page template.
This is because if the file is in the /nat/backlight/custom/css/ folder, it won't show up in the Advanced Customization > Custom Stylesheet options for the /nat/en/ or nat/fr/ sites.

pideja · 2017-03-22 00:15:32

got it, thanks!

Almost done for this first version of the Nat site upgraded from CE4. I'll be doing some more creative tweaks soon, but the Mobile version has heaps of problems. I think I should start a new thread, focussing on the mobile version.

pideja · 2017-03-22 00:41:21

Of course, I missed something...

I can't find the "Advanced Customization" option in the video page template.
Only the Backlight Standard Page has this option, and you can only include one css file.
As for the Theater module page, it's an Album within the Albums Templates. It is a "Backlight Theater" type but uses the Basic Backlight Page as a template as do all other pages in this setup.

I went and create a VIDEOS page template within the "PAGES TEMPLATES" but the only possible type available is "Backlight Standard Page"...So, yet again in the wilderness!

Last edited by pideja (2017-03-22 01:08:57)

rod barbee · 2017-03-22 01:04:46

I can't find the "Advanced Customization" option in the video page template.

It's in the page template, not the album template.

The page template being used is right at the top of the Design page for your Theater video template.
All Backlight page templates have the Advanced Customization option.

pideja · 2017-03-22 01:56:15

I'm really missing something here. The way I designed the structure of the site is as follows:

-in PAGE TEMPLATES I created nat/en based on the Backlight Standard Page template and it is the default page template;
(I tried to create a VIDEOS page, but I cannot get it to be a Backlight Theater type)

-then, I created an Album Set template called Album set Nat that uses nat/en based on the Backlight Standard Page template;

- in Albums, I have Featured work, based on nat/en that serves as the main (and only) gallery; finally, there is theater a Backlight Theater type page still using nat/en as Page template.

Your last reply suggests creating a Page Template for the videos. But how can I use the Backlight Theater module here?

UPDATE

You were right. While re-reading the first part of this post, I realized the obvious: a separate page template for the Theater Album and voilà!

Last edited by pideja (2017-03-22 02:09:28)

pideja · 2017-03-22 02:56:55

I succeeded in replacing the text in the Contact+CV page by using html. Works well, but I still can't get it to center. Not too much of a problem save that now, the navigation in blue, vertical and over the masthead!
The html:

<p><strong>Contact information:</strong> </p>
<p>Tel.: 514.527.8764</p>
<p>Cel.: 514.242.8025</p>
<p>email: segami1@videotron.ca</p>
<p><strong>Downloadable resume:</strong></p>


<p><a href="http://pideja.ca/nat/en/pdf-files/CV_2017en.pdf"><img src="http://pideja.ca/nat/en/images/CV.png" alt="image alt text" title="image or pdf title" class="aligncenter"></a></p>

That last line is for the pdf icon.

The nat-contact css:

@font-face {
	font-family: 'HelveticaNeue';
	src: url(/nat/en/backlight/custom/css/HelveticaNeue.ttf);}
	
.cd-form p{
		text-align: center;
}
 	
.copyright p{
	font-style: italic;
	text-align: center;
}

So, I went ahead and cloned the Backlight Standard Page I am using (NAT/en) and called it NAT/en/contact+CV. I changed the css to the appropriate file as shown above.

Now I get http://pideja.ca/nat/en/contact/

What happened?

(Just noticed that the same phenomena can be see in the Theater page: http://pideja.ca/nat/en/galleries/05-premier_amour/)
Both the galleries (Theater) and the Contact pages are cloned from the Backlight Standard Page that looks ok to me, at least. Strange that they are the offending pages.

Last edited by pideja (2017-03-22 04:35:50)

pideja · 2017-03-22 04:53:19

All is well in Mudville, again.

There is this thing called "Other Advanced Options" where one can check the "Disable Navigation Styling and Scripting" box.

Of course, I did, not taking into account the possible consequences.

Now unchecked, now happy camper!

rod barbee · 2017-03-22 06:57:15

For centering the text, the only way your CSS is going to work is if you wrap those paragraphs in a div with the class "cd-form":

<div class="cd-form>
<p>your text and stuff></p>
<p>More text.</p>
</div>

Also, this thread has gone way off the original topic. If you have other issues, go ahead and start new topics. That will make it much easier for others looking for similar answers.

pideja · 2017-03-22 19:48:17

Will do, thanks.

Community @ The Turning Gate

#1 2017-03-20 01:16:52

Large Image Caption Display position

#2 2017-03-20 02:06:56

Re: Large Image Caption Display position

#3 2017-03-20 22:49:48

Re: Large Image Caption Display position

#4 2017-03-20 23:24:01

Re: Large Image Caption Display position

#5 2017-03-20 23:41:59

Re: Large Image Caption Display position

#6 2017-03-21 02:43:08

Re: Large Image Caption Display position

#7 2017-03-21 04:47:10

Re: Large Image Caption Display position

#8 2017-03-21 23:55:59

Re: Large Image Caption Display position

#9 2017-03-22 00:03:09

Re: Large Image Caption Display position

#10 2017-03-22 00:15:32

Re: Large Image Caption Display position

#11 2017-03-22 00:41:21

Re: Large Image Caption Display position

#12 2017-03-22 01:04:46

Re: Large Image Caption Display position

#13 2017-03-22 01:56:15

Re: Large Image Caption Display position

#14 2017-03-22 02:56:55

Re: Large Image Caption Display position

#15 2017-03-22 04:53:19

Re: Large Image Caption Display position

#16 2017-03-22 06:57:15

Re: Large Image Caption Display position

#17 2017-03-22 19:48:17

Re: Large Image Caption Display position

Board footer