Vertical navigation - width

pideja · 2017-12-07 23:01:39

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?

rod barbee · 2017-12-07 23:10:06

yep, custom css

pideja · 2017-12-07 23:28:38

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)

rod barbee · 2017-12-08 00:17:43

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 barbee · 2017-12-08 01:18:53

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.

pideja · 2017-12-08 05:35:24

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)

Daniel Leu · 2017-12-08 06:01:24

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;
} /* <----- */

rod barbee · 2017-12-08 06:50:57

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 barbee · 2017-12-08 06:51:43

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 barbee · 2017-12-08 07:15:52

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

pideja · 2017-12-09 01:16:02

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!

rod barbee · 2017-12-09 01:29:44

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%;
}

charlie.choc · 2017-12-09 01:29:57

Maybe try "float: left;"

rod barbee · 2017-12-09 01:33:51

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

pideja · 2017-12-09 04:18:16

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)

Daniel Leu · 2017-12-09 04:32:07

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;
}

rod barbee · 2017-12-09 04:46:50

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.

pideja · 2017-12-09 05:01:09

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!

rod barbee · 2017-12-09 06:36:31

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

pideja · 2017-12-09 07:38:47

I just didn't think of it...

rod barbee · 2017-12-09 07:48:39

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

Daniel Leu · 2017-12-09 08:40:08

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!

rod barbee · 2017-12-09 08:55:23

There's that too!

Community @ The Turning Gate

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

Vertical navigation - width

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

Re: Vertical navigation - width

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

Re: Vertical navigation - width

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

Re: Vertical navigation - width

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

Re: Vertical navigation - width

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

Re: Vertical navigation - width

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

Re: Vertical navigation - width

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

Re: Vertical navigation - width

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

Re: Vertical navigation - width

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

Re: Vertical navigation - width

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

Re: Vertical navigation - width

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

Re: Vertical navigation - width

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

Re: Vertical navigation - width

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

Re: Vertical navigation - width

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

Re: Vertical navigation - width

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

Re: Vertical navigation - width

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

Re: Vertical navigation - width

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

Re: Vertical navigation - width

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

Re: Vertical navigation - width

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

Re: Vertical navigation - width

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

Re: Vertical navigation - width

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

Re: Vertical navigation - width

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

Re: Vertical navigation - width

Board footer