Pallet 1 text alignement

pideja · 2019-11-01 03:04:21

I'm trying to set some text in the left side pallet. I think this text would look best if center-aligned so that the logo, the navigation and this text would look all centred
For the moment it looks like this:

actual

But I would rather the pallet look like in this photoshop mock-up:
.
wish

https://pideja.ca/galleries/03-tnm/sais … 5-laurier/

Last edited by pideja (2019-11-01 03:05:59)

rod barbee · 2019-11-01 03:54:24

Write the text in html and center if using inline css
<div style=“text-align:center;”>
<p> your text</p>
<p> your text</p>
</div>

pideja · 2019-11-01 04:28:54

Something I don't understand: I wrote my text like so:

<div style=“text-align: center;”>

<p>Texte de  **MARCEL DUBÉ**</p> 
<p>
Mise en scène: BENOÎT VERMEULEN
Décor: RAYMOND MARIUS BOUCHER     
Éclairages: ANDRÉ RIOUX 
Costumes: LINDA BRUNELLE
</p>
<p>du 13 novembre au 8 décembre 2019</p>
</div>

What I get is:
align-center

So, the <div style="text-align:center;"> is visible and the last lines are continuous rather than stacked as the first two lines are. (See "Costumes: LINDA BRUNELLE)

What did I do wrong? And what is "inline CSS"?

Last edited by pideja (2019-11-01 04:30:16)

rod barbee · 2019-11-01 05:07:14

Looks like you might have slanted quote marks rather than straight ones in the inline css. (Which is css written inline with the html: style=“....)
Be sure to write your code in Backlight or a plain text editor and then copy to Backlight.
To get separate lines, either add a line break <br> at the end of each line or surround each line with its own <p> tags.

Also, you can’t use Markdown inside of html.
If you want words to be bold, surround them with a <strong> tag

pideja · 2019-11-01 05:14:19

Using the inspector, I found the corresponding style as .widget. So, I put this section, with the text-align part I added:

.widget {
    color: #f7f5d2;
    text-align: center;
    font-size: 0.875em;
    line-height: 1.5em;
    padding: 0 0px;
}

in the CSS file I am using. Alas, while it did exactly what I want in the inspector window, it does not work on the published page.

text-align

rod barbee · 2019-11-01 05:30:14

the text is centered in the pallet. Did you want something else?

also, by applying the css in your custom css file, you'll be affecting all pallets. Is that what you want?

Looking at your css file, there seems to be a media query inside of a media query. And neither of them are closed properly. And one (the second one) isn't opened properly.
(don't put a media query inside of a media query)

pideja · 2019-11-01 20:20:17

the text is centered in the pallet. Did you want something else?

The image I sent with my previous reply was of the page, with modifications made in the inspector. But changes made in the inspector are not persistent so I tried to copy/paste the .widget selector section into my CSS file. Since it's not doing anything, this is not a correct way of doing things, I suppose.

also, by applying the CSS in your custom CSS file, you'll be affecting all pallets. Is that what you want?

I would like these credits to appear in the left side pallet on the album pages only. So I wrote the text in Backlight>Publisher>Galleries>BILAN>Edit>Page Content (BILAN being an album). Anyway, putting this information in the left side pallet looks good on the large screen but on the mobile display, it's tucked away in the hamburger menu.

Sort of defeats the purpose. By the way, the CSS affects the mobile version: those credits are in fact center aligned.
In the end, I might stay with the left-aligned text, but I still have that problem with the mobile display.

Thanks for pointing out the two media queries. I have since removed one.

Last edited by pideja (2019-11-01 20:50:24)

rod barbee · 2019-11-01 20:31:08

I was looking at the actual site. The text was centered.
And it’s showing up on my iPad in both landscape and portrait

pideja · 2019-11-01 21:23:19

You are right.
After looking at the BILAN page in Safari, Opera and Firefox, I realized that I had to clear CHROME's cache in order for the page to display correctly.

I'll have to decide if I keep the text centred or back to left-aligned. But at least I learned something CSS.

I am now looking to control the mobile display.
In the other albums, like the(DUCEPPE one, the text is laid out above the thumbnails. This displays well on the mobile. But, putting the credits on the side pallet just hides them under the hamburger menu.
Is there a way to have a separate display setting for the mobile?

rod barbee · 2019-11-01 22:05:38

You can set the mobile breakpoint in the Page template. It can be set as low as 640px.
But for phones, the pallet will always be hidden under the hamburger menu.
I suppose you could probe the css controlling that and write a media query to show it all the time.
That would likely clutter things up on the phone though.

If you want to have the credits always displayed, then include them in the album copy.

pideja · 2019-11-01 22:33:55

I understand the problem. Unless I find a way to display two different sets of credits, one for the larger screens in the side pallet and one for the mobile set above the grid, I'll have to resort to credits above the thumbnails for all viewports.

But, getting back to the original question: I failed to mention that I also want the thumbnail gid to be higher on the page. See the two screen captures in the first question.

grid

I wish that the thumbnail grid be just below the breadcrumbs, like in the mock-up in the first question I posted. I can't find where or who to write the CSS to do this.

I hope I am not overstepping here...

rod barbee · 2019-11-01 22:56:58

You can easily set things up so that the credits appear above the grid on mobile and in the pallet for desktop.
Just place the text where needed. In the pallet and the album page copy.
Write your text using html, putting the text for the pallet in a div with the ID of “pallet-credits” (or whatever makes sense)
And put the album copy text inside a div with an ID of “copy-credits”

In your custom css, create two custom classes: .pallet-credits and .copy-credits

Then write css using media queries that will display the text when and where needed, using the css display property to either display: none; or display: block;

rod barbee · 2019-11-01 22:58:11

And since this is getting way off the original topic, if you have new issues, can you post them in their own topic?

rod barbee · 2019-11-01 23:06:15

pideja wrote:

I wish that the thumbnail grid be just below the breadcrumbs, like in the mock-up in the first question I posted. I can't find where or who to write the CSS to do this.
I hope I am not overstepping here...

In the page template, have you tried changing the padding-bottom setting for the breadcrumbs?

pideja · 2019-11-02 00:13:01

Thank you, Rod.

You've given me a few more hours of good clean fun trying to implement these suggestions.

As for further questions, I will publish new posts as needed.

Community @ The Turning Gate

#1 2019-11-01 03:04:21

Pallet 1 text alignement

#2 2019-11-01 03:54:24

Re: Pallet 1 text alignement

#3 2019-11-01 04:28:54

Re: Pallet 1 text alignement

#4 2019-11-01 05:07:14

Re: Pallet 1 text alignement

#5 2019-11-01 05:14:19

Re: Pallet 1 text alignement

#6 2019-11-01 05:30:14

Re: Pallet 1 text alignement

#7 2019-11-01 20:20:17

Re: Pallet 1 text alignement

#8 2019-11-01 20:31:08

Re: Pallet 1 text alignement

#9 2019-11-01 21:23:19

Re: Pallet 1 text alignement

#10 2019-11-01 22:05:38

Re: Pallet 1 text alignement

#11 2019-11-01 22:33:55

Re: Pallet 1 text alignement

#12 2019-11-01 22:56:58

Re: Pallet 1 text alignement

#13 2019-11-01 22:58:11

Re: Pallet 1 text alignement

#14 2019-11-01 23:06:15

Re: Pallet 1 text alignement

#15 2019-11-02 00:13:01

Re: Pallet 1 text alignement

Board footer