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
On this site, pideja.ca, the menu button is on the left side as well as the "scroll" menu and the nameplate is on the right.
I tried to reverse this using Backlight to no avail. As for the CSS, the nameplate is named image 22:
/* Top pallet (logo as background image) */
.top-pallet-logo {
background-image: url("https://pideja.ca/backlight/designer/page/image/22");
background-repeat: no-repeat;
float: right;
height: 48px;
width: 316px;
}
li.top-pallet-logo a {
display: block;
height: 100%;
width: 100%;
}Changing the float from right to left doesn't do anything.
Offline
You want to have the menu button on the right? There is an option in the backlight menu for that, isn't it?
Daniel Leu | Photography
DanielLeu.com
My digital playground (eg, Backlight tips&tricks): lab.DanielLeu.com
Offline
Well, if there is one, I can't find it.
In CSS, I have:
/* Top pallet sizing */
.page__pallet__top>.content>ul>li {
height: 48px;
margin: 0;
}
/* Top pallet (bannière en image de fond) */
.top-pallet-logo {
background-image: url("https://pideja.ca/backlight/designer/page/image/22");
background-repeat: no-repeat;
float: right;
height: 48px;
width: 316px;
}
li.top-pallet-logo a {
display: block;
height: 100%;
width: 100%;
}
/* button position */
.page__toggle__buttons > label:nth-child(1) > p:nth-child(1) {
margin-left: 0;
}
.page__toggle__buttons > label:nth-child(1) {
margin-left: 60px;
}
/* hamburger remplacé par "menu" */
.page__toggle__buttons label p {
cursor: pointer;
display: block;font-size: 1rem;
font-weight: 500;
height: 48px;
line-height: 2.7em;
min-width: 48px;
position: absolute;
top: 0;
left: 0;
text-align: center;
}I tried setting the Top-palette logo to float right or left, but nothing seems to affect any change.
Offline
To change the mobile menu button position, in your page template under Layout, change the Pallet Position to Right
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Under Layout you can select the pallet position as either left or right. On my site that moves the menu button to either side.
Offline
Thanks for the Menu button position. I've placed on the right, as a trial. Now, about that nameplate: how to place it on the left?
Offline
in your css in the .top-pallet-logo class, set float to left
that worked for me when I changed it in the inspector
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 for the Menu button position. I've placed on the right, as a trial. Now, about that nameplate: how to place it on the left?
Use 'float left' instead of 'float right' in your pideja.css (line 26).
Daniel Leu | Photography
DanielLeu.com
My digital playground (eg, Backlight tips&tricks): lab.DanielLeu.com
Offline
Alright, I get the CSS in the .top-pallet-logo class, set float to left. But I can't set either margin so that the menu button is not so close to the right edge. 200px should look good (it does in the inspector) but I can't get the change to stick.
As far as the logo banner goes (Pierre Desjardins photographe), it's the same but in reverse: I'd like it to be more to the left on the desktop display. As for the mobile display, could I have a different banner as the present one is too big? A case for CSS?
Last edited by pideja (2020-01-17 05:51:23)
Offline
line 165 of your custom css is controlling that button's right margin. Right now it's set to 10px.
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 far as the logo banner goes (Pierre Desjardins photographe), it's the same but in reverse: I'd like it to be more to the left on the desktop display. As for the mobile display, could I have a different banner as the present one is too big? A case for CSS?
I think that has more to do with the width of the top-pallet. Try changing max-width in the top pallet
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 for the mobile display, could I have a different banner as the present one is too big? A case for CSS?
Yes. And you already have it set up to display a different image on mobile. Look at your custom css in the media query starting on line 204.
On line 220 you have a background image being placed in the element with the .top-pallet-logo class. it's placing image 22 at mobile sizes (while desktop sizes display image 23).
You just need to create a smaller image. Upload and link to that new image.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
For the menu button: I set the right margin at 200px; no change.
for the nameplate: change the max-width of the page from 1440 to 1920 only makes the nameplate move further to the right; I also checked to see if line 26 was set to float:left...and it is. But alas, no change.
Offline
for the nameplate: change the max-width of the page from 1440 to 1920 only makes the nameplate move further to the right; I also checked to see if line 26 was set to float:left...and it is. But alas, no change.
Change the width of the top pallet
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
For the menu button: I set the right margin at 200px; no change.
it's working fine. Look again. clear browser cache maybe
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 Desktop display looks ok but on the mobile (phone) the "menu" box is in the middle of the top palette, over the nameplate!
Trying to fix this with CSS...
.page__toggle__buttons label {
margin-right: 15px;
overflow: hidden;
background-color: #9F191E;
/*position: relative;*/
}Placed this code in the MOBILE section, on line 237 and it seems to work.
Last edited by pideja (2020-01-17 21:41:59)
Offline
The nameplate has been changed...designed a plate with my name only (decidedly minimalist) and since I couldn't find how to position the size and height on the mobile, I designed another one, smaller and with a larger top margin built-in the image and changed the CSS accordingly.
Now happy...for the moment.
Last edited by pideja (2020-01-17 22:47:25)
Offline
The Desktop display looks ok but on the mobile (phone) the "menu" box is in the middle of the top palette, over the nameplate!
Trying to fix this with CSS....page__toggle__buttons label { margin-right: 15px; overflow: hidden; background-color: #9F191E; /*position: relative;*/ }Placed this code in the MOBILE section, on line 237 and it seems to work.
Take a look at it on an iPad. In both landscape and portrait the menu button has a lot of margin-right.
Instead of putting a fix in the mobile are of your css, you could create another media query for displays wider than 1024px and put the margin-right rule in that. Or change your existing max-width setting in the mobile media query to include ipads. That is, if you don't want the menu button that far from the edge on ipads.
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,
Si ce I do not have an iPad, I use display simulations and I phone friends with a pad to check the display. I’ll look into this issue as soon as I get a hold of a pad.
Offline
simulating it in the inspector will show it. Or simply resizing the desktop browser.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Pages: 1