Background image for content area of Backlight Pangolin

pideja · 2018-01-25 02:19:57

I am trying to place an image in the content area of a Pangolin Page by using CSS. This is the code I am trying:

grid {
	background-attachment: fixed;
	background-image: url(http://pideja.ca/luc/fr/backlight/designer/?c=page&a=image&p1=1);
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
h2, .h2,
	font-family: HelveticaNeue, serif;;
	font-weight: bold;
	}

It doesn't show, of course. Part of the problem might be naming that "content area". I tried "grid" and "block" but that's not it.

rod barbee · 2018-01-25 02:30:09

grid is not a valid html element

Using the browser inspector (a really handy thing to learn how to use if you need to do these kinds of customizations), it looks like the needed selector might be .main__column

.main__column {
    background-attachment: fixed;
    background-image: url(http://pideja.ca/luc/fr/backlight/designer/?c=page&a=image&p1=1);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

pideja · 2018-01-25 03:23:12

Works great. Thanks.

I'm fiddling with the image size, the backlight settings, and CSS but I think that what I want may be too ambitious: the "torn paper" effect that is my content area background should be on a transparent base, showing thru the background image. As it is, there is that white base that kills the effect.

UPDATE

I think I have a pretty good fac-simile of what I want:

/*background from lucnadeau.ca */
 .main__column {
	background-attachment: fixed;
	background-image: url(http://pideja.ca/luc/fr/backlight/designer/?c=page&a=image&p1=1);
	background-size: 1250px 805px;
	background-position: center top;
	background-repeat: no-repeat;
	background-color : transparent;
h2, .h2,
	font-family: HelveticaNeue,italic;
	font-weight: bold;
	}

There still is that dark grey base, but if I must, I'll live with it.

All that's left is getting the pallet to be transparent...

Last edited by pideja (2018-01-25 03:37:51)

rod barbee · 2018-01-25 04:28:22

which page are you looking at? I don't see a dark grey base. I see a background picture showing through below the content area.

I don't know that you can apply transparency to a background image. You could use this workaround: https://css-tricks.com/snippets/css/tra … nd-images/

or you could simply create the image the way you want it to be in Photoshop.

pideja · 2018-01-25 05:28:32

For the moment, I'm ok with the way it looks.

The side pallet needs to be transparent, so, I'm working on that for now.

Thanks

pideja · 2018-01-25 05:58:42

After fumbling around with the CSS code, trying to get transparency in the pallet, I assembled this code:

font-family: 'Montserrat', sans-serif;

/* Vertical Navigation: A more pleasant look
=================================================== */

@media only screen and (min-width: 991px) {
   #navigation  .mantle {
   	  width: 160px;
      float: left;
      background-color: white;
      border: black;
      padding: 24px 24px 4px;
   }
   p.p-nav a {
      border-left-width: 0;
   }
   p.p-nav a:first-child {
      padding-left: 10px;
   }
   p.p-nav a {
      padding-left: 10px;
      width: 80%;
   }
   p.p-nav {
      text-align: left;
   }
}

/*background from lucnadeau.ca */

 .main__column {
	background-attachment: fixed;
	background-image: url(http://pideja.ca/luc/fr/backlight/designer/?c=page&a=image&p1=1);
	background-size: 1250px 805px;
	background-position: center top;
	background-repeat: no-repeat;
	background-opacity : 0.5;	
h2, .h2,
	font-family: font-family: 'Montserrat', sans-serif;;
	font-weight: italic;
	}
	
	div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

/*footer*/
.copyright p{
	font-style: italic;
	text-align: center;
}

Frankly, the page looks great! But, the whole menu pallet is a bit low. So I'm missing menu items that should show.

There must be something I did/did not do in that CSS code. Any suggestions?

Last edited by pideja (2018-01-25 06:06:53)

Daniel Leu · 2018-01-25 07:38:22

But, the whole menu pallet is a bit low.

This is because of this generic css in luc-fr.css:

div {
    height: 200px;
...

You should be more specific with your css code.

There is an error in your css. The h2 tags are not correct.

rod barbee · 2018-01-25 08:17:18

And this is not valid either

font-family: 'Montserrat', sans-serif;

you're not saying what that font-family applies to.

pideja · 2018-01-25 22:42:07

I've removed the h2 references to the Montserrat typeface. Doesn't seem to do anything anyway.

As for the navigation pallet, not sure what you mean by "be more specific". Anyway, I also removed it and no change so, I have to find a way to write it so that the navigation is raised so that the three other buttons show up.

rod barbee · 2018-01-25 23:17:52

I assume we're still talking about this page: http://pideja.ca/luc/fr/ from your other thread?

This code:

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

potentially affects ALL divs

Specificity in CSS means how specific you write the selector. Just using div is very broad. div.your-class means your css will affect only divs with the classs "your-class"
More on specificity: he selector
and: https://css-tricks.com/specifics-on-css-specificity/

rod barbee · 2018-01-25 23:23:51

pideja wrote:

I've removed the h2 references to the Montserrat typeface. Doesn't seem to do anything anyway.
As for the navigation pallet, not sure what you mean by "be more specific". Anyway, I also removed it and no change so, I have to find a way to write it so that the navigation is raised so that the three other buttons show up.

Did you also provide the Montserrat font? If it's a Google font, have you added the Google Fonts statement to the Typography section of your page template?
http://community.theturninggate.net/vie … hp?id=6382

I see five links in your navigation. Are there supposed to be more?

pideja · 2018-01-25 23:41:14

Yes, we are still on

pideja.ca/luc/fr

. In fact, there should be five links (there will be six probably) in navigation. However, if I look at it in a 1920x935 viewport (the largest available on my monitor) I see four with a part of the fifth (contact) showing. As I reduce the viewport size, the pallet is not responsive so progressively, I lose navigation links. At 1366 x 768 I only see two with a slight part of the third!

As for the Montserrat font, I have indeed added the Google Fonts statement to the Typography section. And it shows in the navigation pallet.

Last edited by pideja (2018-01-25 23:41:37)

rod barbee · 2018-01-26 00:22:36

you could try reducing the line-height of the nav items

nav.nav_v .menu-item, nav.nav .menu-item a {
line-height: 12px; 
}

pideja · 2018-01-26 00:43:15

Just before changing the CSS file, I checked to see the look of the page in Firefox. Comming back to Chrome, I found the page had changed: the image used for the background is still there but the contents area has reverted to that paper image!

Noticed that the CSS was set at image 1 (the paper texture) and image 8 is the printing press used as a background. Maybe if there was a way to have a transparent content-area, the background would show and the pallet would seem to float on the page.

Before doing more, I'll have to investigate.

Last edited by pideja (2018-01-26 00:51:34)

rod barbee · 2018-01-26 00:50:43

the page now looks the same to me in firefox or chrome. I'm seeing the background image of the studio. Makes it hard to read text though.

pideja · 2018-01-26 01:26:20

Solved the content area transparency using some CSS I adapted from the web. Works OK for me.

/*background from lucnadeau.ca */

 .main__column {
	background-attachment: fixed;
	background: rgb(25, 25, 25); /* Fall-back for browsers that don't
                                    support rgba */
    background: rgba(25, 25, 25, 0);

/*background-image: url(http://pideja.ca/luc/fr/backlight/designer/?c=page&a=image&p1=0);*/

	background-size: 1250px 805px;
	background-position: center top;
	background-repeat: no-repeat;
		
	}

Text control (position, typeface weight & style, paragraph) I figure should be thru CSS.

Also, if I want a different image for each other page, should I create a different page for each new design?

Last edited by pideja (2018-01-26 01:28:07)

rod barbee · 2018-01-26 01:42:19

each page has its own specific body selector, just look at the page source code at the body tag. You can use that in your custom css file to feed a different picture to the content area of each page.

For example, your index (about) page has this in the source code:

<body class="pangolin type-page template-id-11 template-identifier-bwarao_luc pages-template-id-5 pages-template-identifier-about slug-about cart-unready crg-unready"

and you can use the .slug-about class to target only that page.

or you could use different page templates for each page with its own separate custom css file.

But if you're talking about the background image that you choose in the page template Background, then you would need a different page template for each page.

Text control (position, typeface weight & style, paragraph) I figure should be thru CSS.

this might get tricky because of different sized browsers. You'll probably want to research the CSS position property.

pideja · 2018-01-26 02:06:32

Thank you for this.

I've got the basic design of the "about" page close to being set. Your indications for further pages will be useful.

But, as it will, I am not out of the proverbial woods yet: the design is still not responsive. The design is being built within a viewport of 1440 x 826 (for a MacBook Air) but at other viewport sizes, all hell breaks loose. From 1024 and smaller, I get a red Masthead! It's probably a legacy of the original BWRAO template that shows up because I haven't worked on the mobile sizes yet.

rod barbee · 2018-01-26 03:58:08

Definitely from the BWRAO template

Matthew · 2018-01-26 17:06:36

The BWRAO template was designed specifically to showcase the two-masthead implementation. You might want to check out our masthead tutorials for more on how that works:
http://theturninggate.net/2017/11/16/ma … -masthead/

pideja · 2018-01-28 22:58:41

Trying to manage the text in pideja.ca/luc/fr from black to white. I have the correct CSS file (the font-style: italic; works fine) but the color not. I can't spot the mistake.
Also, is it possible to have it scroll to the mobile size? The text is rather long and I'm not sure people will think of scrolling the text to read it.

Here is the section in the CSS code:

/* content-area background */

 .main__column {
	background-attachment: fixed;
	background: rgb(25, 25, 25); /* Fall-back for browsers that don't support rgba */
    background: rgba(25, 25, 25, .1);
/*  background-image: url(http://pideja.ca/luc/fr/backlight/designer/?c=page&a=image&p1=0); */
	background-size: 1250px 805px;
	background-position: center top;
	background-repeat: no-repeat;
		
}

/* content-area text */	
 
	body {
    font-family : 'Montserrat', sans-serif;
    font-style: italic;
    font-size: 1rem;
    color: white;
}

Last edited by pideja (2018-01-28 22:59:38)

rod barbee · 2018-01-29 00:11:03

You don’t need custom css to change text color globally.

But the probable reason for the color in your css not working is specificity. There’s probably more specific css controlling the main-column text color.

rod barbee · 2018-01-29 00:33:15

Also, what do you mean by “have it scroll to the mobile size”?

pideja · 2018-01-29 01:35:45

On this page, there is text over the image, text in the top of the page (in white) and the navigation button labels. I only want to control the text that is within the image.
In the CSS file, I use "body" and ".body" to no effect.
In backlight/Pangolin Page/Content Area, there is no color specified in the Main Copy area. Anyway, you can only change the color of the background area. I know I could add a tint to the page in order to make the text more readable. But then, there is the problem of "centering" that tinted rectangle on the page.
In the inspector it looks like this:
I even tried :

.the_copy {
    font-family : 'Montserrat', sans-serif;
    font-style: normal;
    font-size: 1rem;
    color: white !important;
}

As for the scrolling text, it might be early for me to tackle this issue. But on the mobile, the text is long and I taught it would be nice for the text to scroll by itself so the reader could follow along...

rod barbee · 2018-01-29 01:55:11

you can control the main text in the Color tab of the template. It's the Contrast color.
Navigation menu item colors can be controlled separately in Navigation.

for the css you're trying, the selector is wrong and not specific enough. first, the main selector is .the__copy, with two underscores.

And it looks like you need to be more specific with the css:
.the__copy h6

Community @ The Turning Gate

#1 2018-01-25 02:19:57

Background image for content area of Backlight Pangolin

#2 2018-01-25 02:30:09

Re: Background image for content area of Backlight Pangolin

#3 2018-01-25 03:23:12

Re: Background image for content area of Backlight Pangolin

#4 2018-01-25 04:28:22

Re: Background image for content area of Backlight Pangolin

#5 2018-01-25 05:28:32

Re: Background image for content area of Backlight Pangolin

#6 2018-01-25 05:58:42

Re: Background image for content area of Backlight Pangolin

#7 2018-01-25 07:38:22

Re: Background image for content area of Backlight Pangolin

#8 2018-01-25 08:17:18

Re: Background image for content area of Backlight Pangolin

#9 2018-01-25 22:42:07

Re: Background image for content area of Backlight Pangolin

#10 2018-01-25 23:17:52

Re: Background image for content area of Backlight Pangolin

#11 2018-01-25 23:23:51

Re: Background image for content area of Backlight Pangolin

#12 2018-01-25 23:41:14

Re: Background image for content area of Backlight Pangolin

#13 2018-01-26 00:22:36

Re: Background image for content area of Backlight Pangolin

#14 2018-01-26 00:43:15

Re: Background image for content area of Backlight Pangolin

#15 2018-01-26 00:50:43

Re: Background image for content area of Backlight Pangolin

#16 2018-01-26 01:26:20

Re: Background image for content area of Backlight Pangolin

#17 2018-01-26 01:42:19

Re: Background image for content area of Backlight Pangolin

#18 2018-01-26 02:06:32

Re: Background image for content area of Backlight Pangolin

#19 2018-01-26 03:58:08

Re: Background image for content area of Backlight Pangolin

#20 2018-01-26 17:06:36

Re: Background image for content area of Backlight Pangolin

#21 2018-01-28 22:58:41

Re: Background image for content area of Backlight Pangolin

#22 2018-01-29 00:11:03

Re: Background image for content area of Backlight Pangolin

#23 2018-01-29 00:33:15

Re: Background image for content area of Backlight Pangolin

#24 2018-01-29 01:35:45

Re: Background image for content area of Backlight Pangolin

#25 2018-01-29 01:55:11

Re: Background image for content area of Backlight Pangolin

Board footer