wp 2017: the parallax-theme - some basic customization

Einfach Dinge, die nichts mit XAMPP, Apache Friends, Apache, MySQL, PHP und alle dem zu tun haben. Allerlei halt. ;)

wp 2017: the parallax-theme - some basic customization

Postby unleash_it » 01. January 2020 21:59

dear apachefriends, ​8)

 
twentyseventeen: the parallax-theme with many cool features - some basic customizing: at the moment i am in the mid of the planning stage of a new page. there i need the theme twentyseventeen. I need to do some extra-tinkering and customizing the theme towards my needs. 

above all: i have gathered some knowledge - and i wan to share it with you!!

In addition to the many standard features such as menu and widget setup, parallax-scrolling effects and customizing from the Customizer, we can set up a header image or video,  switch to a different color scheme, and assign content to our front page sections. the many options can be seen - eg like the scrolling feature on the Front Page Sections, just like in this demo:

cf https://2017.wordpress.net/

Twenty Seventeen comes with a parallax feature: that is....:

-  One Page Parallax Scrolling with Page scroll capabilities;
-  the WordPress Twenty Seventeen theme comes also with a full page header image; 
-  and with many other features that are terrific;
-  in fact the theme has got a bunch of cool features; 


as mentioned above  - i am in the mid of a customization of the twentyseventeen-theme: 

what is aimed:

a. I would like to reduce the size of the header image to a more typical header size that fills in only part 
of the screen and remove the parallax effect.
b. i further would like to create a Twenty-seventeen child theme, where i can put the navigation bar on the very
top and fixed position. 
c. thirdly: I want to move the menu bar of the theme up to the top of the page by default for all my pages on the site. 
note: i want to put the parallax images on the home page to act as they still do - as a parallax theme. 
i think that i need to make a copy or a child of the twenty seventeen theme so that the home page will not break 
The question is: How does changing the name of a theme break an entire page? How do I do this correctly?


to aproach the several goals i have to do some preliminary thinking...

some notes in general - generally spoken:
the theme was shipped (originally) with other settings: it is a bit tricky to stay absolute and then becoming fixed with this position.
there was adidionally a little site-navigation-fixed after passing the location to the wanted position. 

....here some musings about solutions to the both mentioned issues and goals: 

for a. in Twenty Seventeen theme's function file we can modify header

i think i can change and modify width/height by working with different mehtods:

a. working with the below mentioned function.

Code: Select all
add_image_size( 'twentyseventeen-featured-image', 2000, 1200, true );


for above function we have to adjust the height in the css also, we can also adjust height like below example.

Code: Select all
.has-header-image.twentyseventeen-front-page .custom-header, .has-header-video.twentyseventeen-front-page .custom-header, .has-header-image.home.blog .custom-header, .has-header-video.home.blog .custom-header{height: 75vh !important;} 


additionally we can here the famous add !important in the height or here - we can also change height of the header with this:

b. besides this: ... we can remove the header image by going to Themes > Customize > Media.

we can therefore add a header background image by inserting the following code in Theme > Customize > Additional CSS:

Code: Select all
  #masthead {
    background-image: url(“<insert url of your image>”);
    background-size: 100%;
  }



mobile-device: ....and to ensure that this parallax effect is also working on mobile i do a quick hack: Now I am ensuring to get that parallax-scrolling effects and features to work even on mobile-phone and tablet too - first of all we have to look at the CSS:
Code: Select all

.background-fixed .panel-image {
    
   background-attachment: fixed;
}




first of all we  can do the following - the so called background-attachment does not work very well on tablets and things like that. i have to had to find a work around, 
i have done some resarch and found some options: and i found out the following things 
-  add the following css in the style.css file. we have to set background image fixed not a scroll.

.panel-image {
   background-attachment: fixed;
}

shareimprove this answer


besides this - we also can try to select only for one class ".panel-image" using media-query like this:

@media screen and (max-width: 768px) {
  .panel-image {
    background-attachment: fixed;
  }
}


for b:  the whish to change Twenty Seventeen theme's navigation bar location?

i am going to change .navigation-top class to use top: 0; so there is no gap for anonymous users.


.navigation-top {
    background-color: transparent;
    border: none;
    width: 100%;
    height: 120px;
    top: 0;
    font-size: 130%;
    bottom: auto;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 7;
}




Then i coud try to include an additional style for authenticated users which accounts for the admin bar.


.admin-bar .navigation-top{
  top: 32px;
}


WordPress core adds the admin-bar class the body tag when the admin bar is visible so you don't have to add this class yourself.
conclusio: well i try out these effects and workarounds: and i will come back here to report all findings  

furthermore i found some good basic-tutorials:

a. How to Customize the Free Twenty Seventeen WordPress Theme
https://premium.wpmudev.org/blog/twenty ... ess-theme/

b. Twenty Seventeen one page parallax scrolling website style, is it possible to achieve this?
https://www.wpvidz.com/twenty-seventeen ... scrolling/

see a. How to Customize the Free Twenty Seventeen WordPress Theme
https://premium.wpmudev.org/blog/twenty ... ess-theme/
The first thing you need to do is to create a few pages:

Step 1: Create a Page for Each Homepage Section
Create a page to serve as your static homepage.
Create a page to serve as your blog or posts page.
Create up to four additional pages to contain the content that will be displayed in your homepage sections — make it three additional pages if you plan to use your blog or posts page as one of the homepage sections.

Step 2: Add a Featured Image to Each Page
In order to achieve the parallax image effect, you need to add a large featured image to each page that will be part of your front page sections. You will probably not want to add a featured image to the home page you created in the previous step, but you will want to add a featured image to every other page.
The Twenty Seventeen demo uses images that are 2000 pixels wide by 1200 pixels tall. Images that are close to that size work very well. Don’t use small images or the results will be very poor. In my case, I sourced free images from StockSnap and resized them all to 2000 pixels wide and approximately 1200 pixels tall, give or take 10 percent.

Step 3: Assign a Static Front Page and a Posts Page
Now it’s time to start customizing. Launch the Customizer — go to Appearance > Customize in the admin area or click Customize on the admin bar while viewing the site front end. Select the Static Front Page menu item and make the following setting adjustments:
Beneath Front page displays, select the radio button for A static page.
From the Front page dropdown menu, select your site home page.
From the Posts page dropdown menu, select your posts or blog page.

Step 4: Assign Pages to Each Front Page Section
To assign the various pages you created previously to the front page sections select the Theme Options menu item from the Customizer. Next, use the drop-down menus to assign each page to the relevant front page section where you want it to appear.

Step 5: Create Your Primary Navigation Menu
You can create your navigation menu either by selecting the Menus option from the Customizer menu or by going to Appearance > Menus in the admin area. In either case, creating WordPress menus hasn’t changed in WordPress 4.7, so create a menu just as you have done in the past and assign it to the Top Menu location.

Step 6: Add a Video Header
Next, let’s replace that ho-hum header image with a video. Go to the relevant section of the Customizer by clicking on the appropriate visible edit shortcut or locate the Header  Media menu item in the Customizer.


...add besides this - we have got another tutorial 

 
see tutorial b. Twenty Seventeen one page parallax scrolling website style, is it possible to achieve this?
https://www.wpvidz.com/twenty-seventeen ... scrolling/

Twenty Seventeen one page parallax scrolling website style, is it possible to achieve this?  cf https://www.wpvidz.com/twenty-seventeen-one-page-parallax-scrolling/

Twenty Seventeen One Page Parallax Scrolling with Page scroll #. I chose this method, because it is quick, easy and it works. Don’t forget to click “Save” buttons and clean your cache plugin if you use any cache plugins in each steps below to see the changes.

1. Set your website to have “static front page”. To do this, you can go to your Customizer – Static Front Page – check A static page. Here, I use my “Welcome” page as my Front Page, and my “Blog” as my Posts Page. You can also change this in your website reading settings, as I posted a tutorial years ago but still works in this page. For the static page setting, I also posted a tutorial on changing your home page post.

2. Set your sections, in the Customizer – Theme Options – assign your pages to section 1, 2, 3, 4. I set my pages as shows in the screenshot below.

3.  Optional, if you want to put featured images, then you can add “featured images” to all of your pages that you assigned theme to Twenty Seventeen’s Theme options except the front page, which is in my case “Welcome” page that I assigned in step 1 above.

4. Install, and activate the Twenty Seventeen one page parallax plugin which is called Page scroll to id plugin.

5. Now, we will create a new menu that we will assign to our top navigation bar. I prefer to create a new menu, to separate this menu from other menus, because this menu will have ids that other menu links don’t have.

Twenty Seventeen Auto Scrolling Menu Creation I named my menu to be, “Dynamic menu”. Then add items, which are “Custom Links” to this menu. These are my menus as example. I use the panel ids to target the scrolling. Also, I add “nofollow” attribute to these menu links. My reason is because this URL has also another URL that has the same content.


https://www.wpvidz.com/twenty-seventeen ... scrolling/
Twenty Seventeen one page parallax scrolling website style, is it possible to achieve this? Yes, it is possible.

 
well this little summary tries to gather together what i currently am working on the theme twentyseventeen 

above all: i have gathered some knowledge - and i wan to share it with you!!
i hope that someone will find this useful

if you have any further ideas & thoughts - for sharing i would love to hear from you 

regards 
8)

Interessen: Bikes & steel frames: Linux & SBC https://www.allaboutcircuits.com :: die neuen Knowledge-Base: AFFiNE: There can be more than Notion and Miro. auf affine.pro :: WordPress Entwicklung - sic: make.wordpress.org/core/
User avatar
unleash_it
 
Posts: 753
Joined: 10. December 2011 18:32
Operating System: linux opensuse 12.1

Return to Allerlei

Who is online

Users browsing this forum: No registered users and 11 guests