1. 

   paulw406
   

   offline

   Member

   Like on this page: https://www.projectseven.com/products/templates/pagepacks/zeitgeist/01.htm

   It is kind of a Wix, WordPress thing!

   Thanks,

   -paulw406

   Posted 7 months ago
2. 

   Sinclair
   

   offline

   Member

   Paul,

   If you have zeitgeist then you have all you need, the zeitgeist CSS is well commented and should keep you right.

   HTH

   Posted 7 months ago
3. 

   paulw406
   

   offline

   Member

   Okay Sinclair. I was curious how to do it from scratch. I have Background Scroll Effects but I struggled with it and could not reproduce the effects of the samples that are on the pages.

   I seem to remember you pointing me to the Harmony tutorials.

   Thanks again,

   -paul

   Posted 7 months ago
4. 

   Sinclair
   

   offline

   Member

   Paul,

   The page you posted is pure CSS and html, you can do similar just using, say, HMY, as your html framework, no need to use one of the pagepacks such as zeit or scripting such as BSE, it does require a certain amount of crafting your own CSS, nothing too much though.

   HTH

   Posted 7 months ago
5. 

   paulw406
   

   offline

   Member

   >>it does require a certain amount of crafting your own CSS, nothing too much though.<<

   That might be over my head Sinclair!!

   I will look at the Harmony tutorials again.

   All the site builders seem to do the background scrolling almost like a default option.

   Thank you so much,

   -paulw406

   Posted 7 months ago
6. 

   Sinclair
   

   offline

   Member

   You can figure things out via the CSS pretty easily (honest), you can then cherry pick the rules you need and copy, the section/s, you have zeitgeist I think, right?

   You can 'Inspect' grid (p7HMY_2), (make as if going to modify it and check out the Content User Classes applied to the second column.

   Then look at the zeitgeist CSS for these....

   .hmy-content-wrapper.intro {
   min-height: 100vh;
   border-bottom: 1px solid;
   }

   .banner-01 {
   background-image: url(img/peeking-out.jpg);
   background-repeat: no-repeat;
   background-position: center;
   background-attachment: fixed;
   background-size: cover;
   }

   and....

   .banner-01 {
   background-image: url(img/peeking-out.jpg);
   background-repeat: no-repeat;
   background-position: center;
   background-attachment: fixed;
   background-size: cover;
   }

   ....they'll be worth a look.

   HTH

   Posted 7 months ago
7. 

   Sinclair
   

   offline

   Member

   and....

   .banner-01 {
   background-image: url(img/peeking-out.jpg);
   background-repeat: no-repeat;
   background-position: center;
   background-attachment: fixed;
   background-size: cover;
   }

   Should read.....

   and....

   .hmy-content-wrapper.intro .hmy-content {
   max-width: 1000px;
   margin: auto;
   }

   Sorry 'bout that....

   Posted 7 months ago
8. 

   paulw406
   

   offline

   Member

   I don't know what you mean about that Sinclair!! I guess my brain is not working again today!

   Which Zeitgeist layout should I be looking at?

   There isn't a .banner in the couple I have looked at, but there is a .hmy-content-wrapper.intro in the p7Zeitgeist-01.css

   What would I change to have scrolling background images?

   Thank you!!

   -paulw406

   *------
   Should read.....

   and....

   .hmy-content-wrapper.intro .hmy-content {
   max-width: 1000px;
   margin: auto;
   }

   Posted 7 months ago
9. 

   Sinclair
   

   offline

   Member

   Sorry, my fault, so this is the page you posted, the 01 or Portal page, you would look at all the rules I posted plus the .top-panel rule and look at the HMY via it's UI and all should be revealed.

   From the p7Zeitgeist-01 stylesheet.......

   /*
   ---------------------------------------------------------------
   Special fixed background images. The first class "top-panel"
   sets the smoky wisp background in the first content box in
   layout-01. The second class "banner-01" is for the large,
   full-width image of the woman in the hat in layouts 01-03.
   ---------------------------------------------------------------
   */
   .top-panel {
   background-image: url(img/smoke.jpg);
   background-repeat: no-repeat;
   background-position: left top;
   background-attachment: fixed;
   }

   .banner-01 {
   background-image: url(img/peeking-out.jpg);
   background-repeat: no-repeat;
   background-position: center;
   background-attachment: fixed;
   background-size: cover;
   }

   HTH

   Posted 7 months ago
10. 

    paulw406
    

    offline

    Member

    Thanks Sinclair.

    I created a new Typecrafters page from a template and added the code to my CSS file. Images are there for both Harmony columns. I just need to figure out how to make the image fill up the columns since there isn't enough text to do so (like in the Portal Zeitgeist page). I think I saw that code somewhere in Zeitgeist.

    -paulw406

    Posted 7 months ago
11. 

    paulw406
    

    offline

    Member

    I followed your advice Sinclair and it works great! I forgot to add the hmy-content-wrapper.intro code and also forgot to add the intro into the Content User Class for the two colums (intro top-panel)!

    I did this in a page created by my TypeCrafters template and it works great!!

    Cool - now, just like you said, I can do this anywhere now.

    Thank you so much!!

    -paul

    Sorry, my fault, so this is the page you posted, the 01 or Portal page, you would look at all the rules I posted plus the .top-panel rule and look at the HMY via it's UI and all should be revealed.
    From the p7Zeitgeist-01 stylesheet.......
    /*<br />
    ---------------------------------------------------------------<br />
    Special fixed background images. The first class "top-panel"<br />
    sets the smoky wisp background in the first content box in<br />
    layout-01. The second class "banner-01" is for the large,<br />
    full-width image of the woman in the hat in layouts 01-03.<br />
    ---------------------------------------------------------------<br />
    */<br />
    .top-panel {<br />
    background-image: url(img/smoke.jpg);<br />
    background-repeat: no-repeat;<br />
    background-position: left top;<br />
    background-attachment: fixed;<br />
    }
    .banner-01 {<br />
    background-image: url(img/peeking-out.jpg);<br />
    background-repeat: no-repeat;<br />
    background-position: center;<br />
    background-attachment: fixed;<br />
    background-size: cover;<br />
    }
    HTH

    Posted 7 months ago

RSS feed for this topic

Reply

You must log in to post.