Community @ The Turning Gate

Support community for TTG plugins and products.

You are not logged in.

#1 2017-12-07 23:01:39

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 441

Vertical navigation - width

Is there a way to reduce the size (with) of the pallet 1 where I placed my vertical navigation? I've got it down to 200px, the smallest size available in Backlight, but I find it's still too wide. CSS, maybe?

Offline

#2 2017-12-07 23:10:06

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,606
Website

Re: Vertical navigation - width

yep, custom css


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Offline

#3 2017-12-07 23:28:38

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 441

Re: Vertical navigation - width

Tried this:

 .vertical-menu {
    width: 100px;
}

But does not work.

Also, that logo is an image. So, I guess it should be managed separately, yes?

Last edited by pideja (2017-12-07 23:30:40)

Offline

#4 2017-12-08 00:17:43

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,606
Website

Re: Vertical navigation - width

Using the browser inspector I can see this (assuming this is the same site as in your other question--links in posts always help us to help you)

.page__pallet {
    background-color: transparent;
    color: #fef7db;
    flex-basis: auto;
    flex-grow: 1;
    margin: 0px 0;
    width: 200px;
    min-width: 200px;
    max-width: 200px;
}

so try this:

.page__pallet {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
}

Edit: Updated to include closing braces


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Offline

#5 2017-12-08 01:18:53

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,606
Website

Re: Vertical navigation - width

pideja wrote:

Also, that logo is an image. So, I guess it should be managed separately, yes?

give it a try. It will still be only 100px wide though if you keep it in the pallet and use that custom css to reduce the pallet width.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Offline

#6 2017-12-08 05:35:24

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 441

Re: Vertical navigation - width

Using the Firefox Inspector, I could easily reduce the size of the logo-image to half its size. Should I place the script you suggest in CSS?

UPDATE: As soon as I inserted the script into "backlight.css", the logo-image returned to it's initial size while the css script did nothing to reduce the pallet size.

Last edited by pideja (2017-12-08 05:42:19)

Offline

#7 2017-12-08 06:01:24

Daniel Leu
Moderator
Registered: 2012-10-11
Posts: 772
Website

Re: Vertical navigation - width

pideja wrote:

Using the Firefox Inspector, I could easily reduce the size of the logo-image to half its size. Should I place the script you suggest in CSS?

UPDATE: As soon as I inserted the script into "backlight.css", the logo-image returned to it's initial size while the css script did nothing to reduce the pallet size.

You are missing a closing bracket.

.page__pallet {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
} /* <----- */

Daniel Leu | Photography   
DanielLeu.com

Offline

#8 2017-12-08 06:50:57

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,606
Website

Re: Vertical navigation - width

Daniel Leu wrote:
pideja wrote:

Using the Firefox Inspector, I could easily reduce the size of the logo-image to half its size. Should I place the script you suggest in CSS?

UPDATE: As soon as I inserted the script into "backlight.css", the logo-image returned to it's initial size while the css script did nothing to reduce the pallet size.

You are missing a closing bracket.

.page__pallet {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
} /* <----- */

Oops, my fault. Just copied from inspector and missed it.
Still, basic css.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Offline

#9 2017-12-08 06:51:43

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,606
Website

Re: Vertical navigation - width

pideja wrote:

Using the Firefox Inspector, I could easily reduce the size of the logo-image to half its size. Should I place the script you suggest in CSS?

UPDATE: As soon as I inserted the script into "backlight.css", the logo-image returned to it's initial size while the css script did nothing to reduce the pallet size.

Place it in your custom css file, as with any css you change.
(And don’t forget the closing curly brace)


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Offline

#10 2017-12-08 07:15:52

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,606
Website

Re: Vertical navigation - width

Assuming that this is the site we're discussing: http://pideja.ca/

Your custom css has several errors:

.about .the__copy .content {
text-align: left;
text-widht: 800px

/* position and size  vertical navigation */  
 
.page__pallet {
    width: 100px;
    min-width: 100px;
    max-width: 100px;

 

It should be:

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

/* position and size  vertical navigation */  
 
.page__pallet {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
}

The missing closing curly brace from the first rule in your version negates any css that follows. That's why the pallet width was not shrinking.

Once that's fixed, the missing closing  culry brace from the second rule would then negate whatever css that follows. In this case, your slideshow css and your footer css


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Offline

#11 2017-12-09 01:16:02

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 441

Re: Vertical navigation - width

Thank you for this. Works fine but I decided to stick with the 200px basic size available in Backlight. I kept the adjusted code in the CSS file, just in case I decide to revert to another size later.

In this version, pideja.ca/creme, the base color is changed to a cream color and the page seems cleaner without borders around the menu items. The animated images are larger but they look a bit low on the page.

Also, I'd like the footer to be right or left aligned because having it centered on the page looks off, relative to the image. The CSS lines for the footer are:

/* footer */

.copyright p{
	font-style: italic;
	text-align: left;
	position: relative;
    left: 05%;
}

But, no response. The copyright notice isn't even in italic!

Offline

#12 2017-12-09 01:29:44

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,606
Website

Re: Vertical navigation - width

First thing, the rule you have preceding that doesn't have a closing brace. That will negate any css that follows.

.main__column > .content {
      left: 120px;

So fix that first.

Second, your using the wrong selector. It should be: li.copyright; there are no paragraph tags in the footer (page__pallet__bottom)

/* footer */

li.copyright {
	font-style: italic;
	text-align: left;
	position: relative;
    left: 05%;
}

Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Offline

#13 2017-12-09 01:29:57

charlie.choc
Member
From: Marietta, GA
Registered: 2014-01-09
Posts: 350
Website

Re: Vertical navigation - width

Maybe try "float: left;"

Offline

#14 2017-12-09 01:33:51

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,606
Website

Re: Vertical navigation - width

Also, I'd like the footer to be right or left aligned because having it centered on the page looks off, relative to the image. The CSS lines for the footer are:

you can use the text align controls in the page template > Footer > Bottom Pallet/Copyright


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Offline

#15 2017-12-09 04:18:16

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 441

Re: Vertical navigation - width

Corrected the missing closing brace. Works great, thank you.

But, strangely, now it's the image that has gone way out in right field!

Last edited by pideja (2017-12-09 04:20:48)

Offline

#16 2017-12-09 04:32:07

Daniel Leu
Moderator
Registered: 2012-10-11
Posts: 772
Website

Re: Vertical navigation - width

pideja wrote:

But, strangely, now it's the image that has gone way out in right field!

Not that strange since you told it in your custom css file to be there!

.main__column > .content {
    left: 120px;
}

Daniel Leu | Photography   
DanielLeu.com

Offline

#17 2017-12-09 04:46:50

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,606
Website

Re: Vertical navigation - width

I see you corrected the the css that moved the content to the left. You should also take a look at mobile sizes.
Any change you make to positioning is likely to mess up the site on mobile devices. If you still choose to use positioning, I'd suggest putting it in a media query that affects only desktop sizes.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Offline

#18 2017-12-09 05:01:09

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 441

Re: Vertical navigation - width

I think I don't clearly understand the relationship between page, content area and margins & padding. This site only looks "good" at a viewport of 1366px x 927 and it doesn't react well when changing viewports. Also, I can't get a handle on that css...

This is pretty fundamental stuff. Another weekend of reading and trying stuff, I guess.

Cheers!

Offline

#19 2017-12-09 06:36:31

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,606
Website

Re: Vertical navigation - width

Any reason why you're not inserting an inline Vegas slide show album on that page? Just curious.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Offline

#20 2017-12-09 07:38:47

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 441

Re: Vertical navigation - width

I just didn't think of it...

Offline

#21 2017-12-09 07:48:39

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,606
Website

Re: Vertical navigation - width

It's a good option. Particularly because it should behave better with the existing Backlight styling.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Offline

#22 2017-12-09 08:40:08

Daniel Leu
Moderator
Registered: 2012-10-11
Posts: 772
Website

Re: Vertical navigation - width

rod barbee wrote:

It's a good option. Particularly because it should behave better with the existing Backlight styling.

And much easier to use and update!


Daniel Leu | Photography   
DanielLeu.com

Offline

#23 2017-12-09 08:55:23

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,606
Website

Re: Vertical navigation - width

There's that too!


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Offline

Board footer

Powered by FluxBB