Backlight custom css

MoritzCH · 2016-08-31 00:54:49

Hi there,

I installed backlight today for some testing and struggle with the custom CSS part. I already found a similar thread but the solution is not working properly for me.

The domain is: http://backlight.around-the-globe.info/

The custom CSS looks like:

html, 
body, 
main {
	background-image: url("http://backlight.around-the-globe.info/backlight/designer/?c=page&a=image&p1=1");
	background-position: top;
        background-repeat: no-repeat;
}

nav ul,
nav li,
.page__tray ul.menu li {
	background-color: transparent;
}

@media screen and ( min-width: 1025px ) {

	.masthead,
	nav,
	.main, .page__main,
	.page__tray[data-position="T1"],
	.page__tray[data-position="T2"],
	.copyright {
		background-color: rgba( 255, 255, 255, 0.5 );
	}

}

The background seems to be appear multiple times but I don't get it (I am not familiar with CSS). Despite this "Backlight" is a great update from the old CE4 Pages stuff!

Maybe someone can help me with this matter.

Thank you

rod barbee · 2016-08-31 01:16:32

Your background on the site looks pretty much like the image here:
http://backlight.around-the-globe.info/ … image&p1=1

I don't see any repeating.

MoritzCH · 2016-08-31 01:27:05

Made a printscreen: http://www.bilder-upload.eu/show.php?fi … 574541.jpg

"Have a go" starts in the middle and "od trip" is above this. It seems that there is more than one background pictures.
The opacity is different between the masthead and the body (and this shouldn't be like that)

Daniel Leu · 2016-08-31 01:28:41

I think you should not apply the background image to main. Maybe this works for you:

html, 
body {
	background-image: url("http://backlight.around-the-globe.info/backlight/designer/?c=page&a=image&p1=1");
	background-position: top;
        background-repeat: no-repeat;
}

main {
	background-color: rgba(1,1,1,0);
}

MoritzCH · 2016-08-31 01:37:52

you were right Daniel, thank you!

the final CSS code

html, 
body {
	background-image: url("http://backlight.around-the-globe.info/backlight/designer/?c=page&a=image&p1=1");
	background-position: top;
        background-repeat: no-repeat;
}

main {
	background-color: rgba(1,1,1,0);
}

nav ul,
nav li,
.page__tray ul.menu li {
	background-color: transparent;
}

@media screen and ( min-width: 1025px ) {

	.masthead,
	nav,
	.main, .page__main,
	.page__tray[data-position="T1"],
	.page__tray[data-position="T2"],
	.copyright {
		background-color: rgba( 255, 255, 255, 0.5 );
	}

}

Daniel Leu · 2016-08-31 01:46:35

:-)

MoritzCH · 2016-09-01 19:05:21

additional question:

If you click --> http://backlight.around-the-globe.info/about/
and take a closer look on the navigation bar the menu items are a bit less transparent than the rest, how can I fix that?

rod barbee · 2016-09-01 19:15:34

Are you using a different page template for your About page?

MoritzCH · 2016-09-01 19:18:58

It is a 1-column template and the one for the main page (2-column) is not up2date yet.

UPDATE
Decided to choose another way. I would like to use my background only "inside" my page container( masthead, nav, body, footer) but the nav part is still not transparent. This is my CSS file

main {
	background-color: rgba(1,1,1,0);
}

nav ul,
nav li,
.page__tray ul.menu li {
	background-color: rgba( 255, 255, 255, 0.5 );
}

@media screen and ( min-width: 1025px ) {
html, main, .masthead {
	background-image: url("http://backlight.around-the-globe.info/backlight/designer/?c=page&a=image&p1=1");
	background-position: top center;
	background-attachment: fixed;
        background-repeat: no-repeat;
}
	.masthead,
	nav,
	.main, .page__main,
	.page__tray[data-position="T1"],
	.page__tray[data-position="T2"],
	.copyright {
		background-color: rgba( 255, 255, 255, 0.5 );
	}

}

Using the CSS code above makes the nav bar transparent but the background is allover the site. What is the reason?

Last edited by MoritzCH (2016-09-01 21:13:25)

Daniel Leu · 2016-09-02 02:12:11

Maybe this is what you are looking for:

nav ul, nav li, .page__tray ul.menu li {
    background-color: rgba( 255, 255, 255, 0 );
}

And to have the background only in the page container, then you might want to apply the background to .page__body:

.page__body {
    background-image: url("http://backlight.around-the-globe.info/backlight/designer/?c=page&a=image&p1=1");
    background-position: top;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

MoritzCH · 2016-09-02 03:31:10

Site with fixes --> http://backlight.around-the-globe.info/about/

it is close but shouldn't the background image be invisible below the footer?

Daniel Leu · 2016-09-02 04:46:06

I think currently your foot is set as 'internal'. Did you try to use 'external'? Does this make a difference?

MoritzCH · 2016-09-02 05:03:45

It does makes a difference, now it looks way better. Thank you again!

I owe you a beer (if you ever come to Switzerland or I will visit SFO again)

Daniel Leu · 2016-09-02 05:07:58

Yeah, it looks better like that.

MoritzCH · 2016-09-07 18:50:17

and another question (think it is pointless to open a new thread for this). I would like to hide the magnifier button (Zoom in/out) while using Photoswipe fullscreen slideshow. The button is called "pswp__button pswp__button--zoom" so I tried

pswp__button pswp__button--zoom {
display: None;
}

in my custom css file but without success. What is the correct code for this? Wouldn't it be a useful thing to implement into the template configuration panel?

Matthew · 2016-09-07 21:08:24

Those are classes, so you need "." before each.

.pswp__button .pswp__button--zoom {
display: None;
}

But why hide the button? It's functionality that harms nothing, so is only useful.

MoritzCH · 2016-09-07 21:23:03

argh this damn "." ... thank you

Well my pictures are a little bit larger than FullHD so the magnifier function is not really necessary. You may be right and it's not harmful so there is no need to remove it.

Matthew · 2016-09-08 13:34:48

Whether or not it's useful all depends on the size or your visitor's display. I'm on a 13" Macbook Air, so the zoom is probably a lot more useful for me than it would be for someone on a larger screen.

MoritzCH · 2016-09-08 17:43:15

Agree!

You're absolutely right and I will stick with the button. Thanks

Community @ The Turning Gate

#1 2016-08-31 00:54:49

Backlight custom css

#2 2016-08-31 01:16:32

Re: Backlight custom css

#3 2016-08-31 01:27:05

Re: Backlight custom css

#4 2016-08-31 01:28:41

Re: Backlight custom css

#5 2016-08-31 01:37:52

Re: Backlight custom css

#6 2016-08-31 01:46:35

Re: Backlight custom css

#7 2016-09-01 19:05:21

Re: Backlight custom css

#8 2016-09-01 19:15:34

Re: Backlight custom css

#9 2016-09-01 19:18:58

Re: Backlight custom css

#10 2016-09-02 02:12:11

Re: Backlight custom css

#11 2016-09-02 03:31:10

Re: Backlight custom css

#12 2016-09-02 04:46:06

Re: Backlight custom css

#13 2016-09-02 05:03:45

Re: Backlight custom css

#14 2016-09-02 05:07:58

Re: Backlight custom css

#15 2016-09-07 18:50:17

Re: Backlight custom css

#16 2016-09-07 21:08:24

Re: Backlight custom css

#17 2016-09-07 21:23:03

Re: Backlight custom css

#18 2016-09-08 13:34:48

Re: Backlight custom css

#19 2016-09-08 17:43:15

Re: Backlight custom css

Board footer