— Updated January 2018 based on Altitude Pro 1.1.3—
— PART 1 —
NB!
Make a duplicate/copy of Altitude Pro theme before modifying it.
I renamed the theme folder to altitude-pro-backup and then opened the style.css and renamed: Theme Name: Altitude Pro backup. Check the themes section and notice you now have a backup of Altitude Pro theme.
NB2! Sometimes Chrome can be really slow and refreshing a site. So even after changing the CSS it might show the old CSS. To help improve on seeing the new adjustments open Inspect (right click and select Inspect). Hold down the mouse button over the refresh and select “Empty Cache and Hard Reload”. This will hopefully make the new changes visible.
Update: I have a fix so that one can quicker see the CSS updates. It will force the cache to refresh. Add the following into the child theme functions file:
// Version CSS file in a theme
wp_enqueue_style( 'theme-styles', get_stylesheet_directory_uri() .
'/style.css', array(), filemtime( get_stylesheet_directory() . '/style.css' ) );
– Part 1 –
Add static pages. Add a home and blog page.
WordPress backend:
Why? Because we want do not want the blog on the front page (well I do not want to that is).
Change to static pages through Settings -> Reading.
Select the Front and Posts pages.
Add widgets to the Front Page widget sections so all the sections become visible.
WordPress backend:
Go to Appearance -> Widgets add a widget to each Front Page widget area. To see all 7 widget sections on the front page there needs to be a widget in each. I added a text widget where I wrote Front page 2 then a Front page 3 etc all the way up to 7. Check the site. You should now be able to see all the 7 sections. There should be an image in Front Page 1, 3, 5 and 7. Front page 2, 4 and 6 should contain a solid color.
Altitude Pro Widget sections – I used the Black Studio Visual Editor widget plugin and added a widget to each section.
Adding background images to all the Featured Sections
One can add an image for featured section 1,3,5 and 7. I will change this so one can add images for all 7 sections. 1,2,3,4,5,6 and 7. So we have the option to insert an image in any of the sections.
Inside the theme folder -> lib ->
customize.php
Look for where it says:
$images = apply_filters( ‘altitude_images’, array( ‘1’, ‘3’, ‘5’, ‘7’ ) );
(Just below the commented area in the top. It might be line 23.)
Then change it to:
$images = apply_filters( ‘altitude_images’, array( ‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’, ‘7’ ) );
output.php
Look for where it says:
$opts = apply_filters( ‘altitude_images’, array( ‘1’, ‘3’, ‘5’, ‘7’ ) );
(Just below the commented area in the top. It might be line 27.)
Then change it to:
$opts = apply_filters( ‘altitude_images’, array( ‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’, ‘7’ ) );
Inside the theme root folder ->front-page.php
Look for where it says: // Add markup for front page widgets. (Scroll down the page.)
Inside this area it says front-page-1, front-page-2 etc.
Notice that front-page-1 has:
and notice that front-page-2 has:
We want to change all the solid sections to become image sections.
This means copy:
and replace:
inside front-page-2, 4, 6
This is what front-page-2, 4 and 6 look like after the adjustment:
Go back to the customizer. All 7 sections should now be in place.
There will be broken images on the newly added sections.
(Remove the broken images by clicking Remove or Change Image).
To add a new image click Change Image and replace the broken icon with an image you choose.
A tip!
There are some options if you want to add a color to a front page section.
Create a color jpg image and add it like any other images to the customizer featured image section.
Adding CSS. Remove the images from the Featured Sections you want to add a color to and then add CSS code to a front-page section. Inside the altitude-pro folder is style.css. Open it.
An example. In the customizer I removed the Featured Section 3 image.
In style.css.
I searched for front-page-3. I found 4-5 mentions of front-page-3:
I commented out .front-page-3, like so: / .front-page-3, / This means that front-page-3 will not pick up the CSS that is added here.
(One can instead remove .front-page-3. I chose to comment it so that I know where it is originally used.)
If you do not see the color try adding an background-color: orange !important;
The color looks dirty because there is a default dark gradient between the sections.
I opened Inspect element in Chrome (right click any area and select Inspect). The two sections seen on the bottom are: (left) the HTML and (right) the CSS. I use Inspect a lot to look at the html and CSS. The CSS can be adjusted by clicking into the tags and adjusting/adding new ones. It is temporary, and a good way to directly see modifications.
NB! We need to add in the new CSS front-page sections
To any place it mentions the front-page-1, 3, 5 and 7 we also need to add in 2, 4 and 6.
Replace the existing gradient information with the one you make. Be sure to leave display, overflow, table-layout and width in place.
Btw! If you use the same gradient tool that I did be sure and click the top arrows and change the opacity so you can see the image through the gradient. (Play with it and have fun..:) I decided not go to with any gradient. Here is an example of having a bit of orange in the sky in the first image.
Changing the transparent site-header to another color.
Inside style.css.
Before one begins to scroll the front page the site header is transparent.
By commenting out the transparent site header the default black shows through.
I adjusted the background color and added a box shadow.
.site-header {
background-color:#00B2EE; /* light blue */
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
box-shadow: 0px 1px 3px #ccc; /* I added a light grey box shadow along the bottom of the header. */
height: 7%; /* I made the site header smaller. I used % because it will also affect the responsive
design om smaller devices. */
min-height: 48px;
}
I turned the background black color into a light blue hex code color.
Adding opacity to the site header (see through header)
I have two options to create a see through light blue site header:
Add opacity: 0.7 or another .number under 1.0.
Use rgba(0,178,238, .8). The code would then be: background-color: rgba(0,178,238, .8);
Here is a hex/color to RGBA converter: https://hex2rgba.devoth.com/ (So you can easily create an transparent color background.)
NB! If your having a problem that the images do not go all the way to the top. To move the images a little higher up one needs to comment out some code. In the Front Page section of the style.css file.
Comment out (or remove) the border-top to get the background images to start at the top of each section.
The background images will now look nicer behind the site-header.
Site header during scroll
I need to make changes to the site header during scroll. Inside the Site Header section.
Some options on how you can write the code.
I changed the background color to the same light blue I used above and added an opacity of 0.7.
Another option is to add the opacity through the rgba color.
A tip!
The global.js file inside the js folder holds the jQuery function to where the site header dark info resides. If you want to change the word dark to something else you would need to do this here and for all mentions of the word dark in the style.css file. (There is really no need to do this. I am just adding the information so you know about it.)
Additional adjustments made to the site header.
Inside style.css.
To remove the white border bottom line in the site header. Comment out the code like so (or just remove the code):
I changed the width of the title area from 360px to 250px because it takes too much space away from the menu on the right we will soon create.
Adjust it to a size that fits your title. On various screen resolutions the menu might be to the right of the title or below it. I want to keep the menu to the right as long as possible before it is moved below the title on smaller resolutions.
If you have a page or post with very little content the footer might not stay at the bottom but move further up. To tell it to stick to the bottom one option is to use the following CSS that you can add to your style.css.
/* Sticky Footer */
.site-container {
display: -ms-flexbox;
display:-webkit-flex;
display:-webkit-box;
display:flex;
-ms-flex-direction:column;
-webkit-flex-direction:column;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
flex-direction:column;
min-height:100vh; /* vertical height - Adjust this as you need to. */
}
.site-inner {
-ms-flex:1;
-webkit-flex:1;
-webkit-box-flex:1;
flex:1;
width: 100%;
/* padding: 20px 0; */
word-wrap: break-word;
}
Creating the top primary menu.
WordPress backend -> Appearance Menus
OR go to the customizer and create the menu there.
Create a new menu. Below in Menu settings. In Display location select Header Menu.
Then click Custom Links to add a custom link.
The URL need to be: #front-page-1, #front-page-2, #front-page-3, #front-page-4, #front-page-5, #front-page-6 and #front-page-7 one for each widget section.
Give each link a name by doing so inside the Link Text box. For this example I am calling them Front page and then a number. Add the various custom links to the menu.
Add custom menu links to Altitude Pro
NB!# = anchor. An anchor is often used to link to a section on the same page.
If your linking from another page (not the main page) you will need to add the absolute link: https://www.domainname.com/#front-page-2 so that it goes to the section on the main page.
Frontend: The menu should now show up here beside the title.
Adjusting the menu.
Inside style.css.
The menu jumps on scroll. This is a tricky one to discover. It has to do with the display: block code inside the nav menu.
The 4th code section under
/*
Site Navigation
------------------------------------------ */
.genesis-nav-menu a {
color: #fff;
display: box; /* Originally block. I changed it to box. */
font-size: 14px;
font-weight: 200;
letter-spacing: 1px;
padding: 30px 15px;
text-transform: uppercase;
font-weight: bold; /* Added. I also added a bold to font weight so the menu links can stand out more. */
}
The menu moved further up getting too close to the top. I adjusted by adding a margin top.
/* Primary Navigation
--------------------------------------------- */
.nav-primary {
text-align: center;
margin-top: 15px; /* Added - Space above the menu. */
}
On hover/mouseover – Adjusting the bottom white border line and the link color.
We are still in the Site Navigation area a little further up from the .nav-primary code.
.front-page .genesis-nav-menu li.current-menu-item > a:hover,
.genesis-nav-menu li.current-menu-item > a,
.genesis-nav-menu > li > a:hover {
border-color: #1167b8; /* Originally #fff . Changed to a light blue.*/
color: #d6d4d4; /* Added - the link color changes on hover. */
}
A tip! To remove the bottom border color replace the hex color with none. Like so: border-color: none;
Adjusting the menu links placement in relation to each other and the bottom border line placement.
Original:
.genesis-nav-menu > .menu-item > a {
text-transform: uppercase;
}
I added a padding 15px to adjust the distance between the menu links and the bottom border line.
A tip! Another option to only effect the border line placement is to add a padding-bottom: 8px;
instead of the padding code that I added.
Adjusting the menu padding on scroll.
A few code blocks up is the following code.
.site-header.dark .genesis-nav-menu a {
padding: 20px 15px;
}
We need to use the same padding as we did further above:
.site-header.dark .genesis-nav-menu a {
padding: 15px; /* with adjusted padding. */
}
Adjusting the Media queries – responsive design
Since we have made adjustments to the theme we also need to go through the media queries and adjust.
Go to where it says: @media only screen and (max-width: 1023px) {
Original:
@media only screen and (max-width: 1023px) {
Adjust to:
@media only screen and (max-width: 880px) {
Next look for the following code a little further down:
Copy/move the lib/jquery.waypoints.min.js file to the child theme js folder.
Copy/move the animate.css file to the child theme root folder. (Or to a CSS folder etc.)
Create waypoints-init.js file inside the js folder of your child theme.
Inside waypoints-init.js file I added the following code. It gives an idea of how it works. Experiment with it.
Inside the functions.php file in the Enqueue scripts and styles section:
// I added the following code before the last } of the // Enqueue scripts and styles area
//* Enqueue Parallax on non handhelds i.e., desktops, laptops etc. and not on tablets and mobiles
// Source: https://daneden.github.io/animate.css/
wp_enqueue_style( 'animate', get_stylesheet_directory_uri() . '/animate.css' );
wp_enqueue_script( 'waypoints', get_stylesheet_directory_uri() . '/js/jquery.waypoints.min.js',
array( 'jquery' ), '1.0.0' );
wp_enqueue_script( 'waypoints-init', get_stylesheet_directory_uri() .'/js/waypoints-init.js' ,
array( 'jquery', 'waypoints' ), '1.0.0' );
}
I added the animate.css to my child theme root folder. So it points directly to animate.css.
I added the file query.waypoints.min.js to the js folder.
I made the file waypoints-init.js and added it to the js folder.
NB!
To get the animation to work you will need to add text and images to the sections I mentioned. To do so I will suggest installing Black Studio TinyMCE widget and add headings and images to it to see the animation. Experiment with it and also check out my article on parallax scrolling animations for some additional tips.
Creating an inner page similar to the main parallax page.
Inside functions.php
Duplicate the section that says //* Register widget areas and all the code belonging to that section. Paste it just below the front-page widget areas. Then rename all mentions of the word front page. Or just copy the following code and paste it below the pre existing front page widget areas.
Duplicate front-page.php. Then rename it. I renamed mine to template_inner-page.php.
Inside template_inner-page.php I renamed all mentions of the word front to become inner.
I then adjusted the top area and added the Template Name of Inner Page.
<?php
/**
* This file adds the Inner Page to the Altitude Pro Theme.
*
* Template Name: Inner Page
*/
NB! Be sure to rename all mentions of the word front to inner.
// Front Page Background Images section
$wp_customize->add_section( 'altitude-settings', array(
'description' => __( 'Use the included default images or personalize your site by uploading
your own images.<br />
<br />The default images are <strong>1600 pixels wide and 1050 pixels tall</strong>.', 'altitude-pro' ),
'title' => __( 'Front Page Background Images', 'altitude-pro' ),
'priority' => 35,
) );
Paste just below and adjust to become:
// Inner Page Background Images section
$wp_customize->add_section(
'altitude-settings-inner', array(
'description' => __( 'Use the included default images or personalize your site by uploading
your own images. <br />
<br />The default images are <strong>1600 pixels wide and 1050 pixels tall</strong>.', 'altitude-pro' ),
'title' => __( 'Inner Page Background Images', 'altitude-pro' ),
'priority' => 35,
) );
Made a conditional menu to only show on posts (or anywhere you choose). Showing menu depending on certain conditions. The following: One menu is the primary. Another is not connected with any menu location.
Or use the Conditional Menus plugin by Themify: https://wordpress.org/plugins/conditional-menus/
Options
! = is not. I have used it below.
&& is_page();
&& is_page (‘id of page’)
&& is_page (‘about-me’)
&& is_page ( array(‘member’, ‘member-page-2’, ‘member-page-3’, ‘member-page-4’) )
&& ( is_archive() || is_singular(‘page’) ) ) —> II brings two options together.
&& is_page_template( ‘name of page template’ )
Is not page then use the menu I named “Sub menu”. (Does not use any of the menu locations.)
This means that clicking a post preview on the main page goes directly to the post and shows the sub menu instead of the primary menu “top menu”. Add the code to your child theme functions.php file.
/* https://genesisdeveloper.me/different-primary-menu-on-pages-using-altitude-pro-theme/ and
https://victorfont.com/conditional-secondary-menus-genesis-themes/ */
function gd_nav_menu_args( $args ){
if( ( 'primary' == $args['theme_location'] ) && !is_page() ) {
$args['menu'] = 'Sub menu'; // Add your menu name here. My case it is "Menu for Page"
}
return $args;
}
add_filter( 'wp_nav_menu_args', 'gd_nav_menu_args' );
A quick run through.
Create a hello-bar.js file with the following code:
jQuery(function( $ ){jQuery(function( $ ){
// Show Hello Bar after 200px $( document ).on( 'scroll', function() {
if( $( document ).scrollTop() > 10 ) {//change value when you want it to appear
$( '.hello-bar' ).fadeIn();
} else {
$( '.hello-bar' ).fadeOut();
}
});
});
Then create a left/right Tool Bar.
Add the following code to the functions.php file.
// Hello bar begin -
// Enqueue scripts and styles -
// https://wpbeaches.com/adding-in-a-hello-tool-bar-to-the-top-of-a-genesis-theme/
add_action( 'wp_enqueue_scripts', 'hello_bar_scripts_styles' );
function hello_bar_scripts_styles() {
wp_enqueue_script( 'hello-bar', esc_url( get_stylesheet_directory_uri() )
. '/js/hello-bar.js', array( 'jquery' ), '1.0.0' );
}
//Add in new Widget areas
add_action( 'widgets_init', 'hello_bar_extra_widgets' );
function hello_bar_extra_widgets() {
genesis_register_sidebar( array( 'id' => 'preheaderleft',
'name' => __( 'Pre Header Left', 'altitude-pro' ),
'description' => __( 'This is the preheader Left area', 'altitude-pro' ),
'before_widget' => '<div class="first one-half preheaderleft">',
'after_widget' => '</div>',
) );
genesis_register_sidebar( array(
'id' => 'preheaderright',
'name' => __( 'Pre Header Right', 'altitude-pro' ),
'description' => __( 'This is the preheader Left area', 'altitude-pro' ),
'before_widget' => '<div class="one-half preheaderright">',
'after_widget' => '</div>',
) );
}
//Position the preHeader Area
add_action('genesis_before_header','hello_bar_preheader_widget');
function hello_bar_preheader_widget() {
echo '<div class="preheadercontainer hello-bar "><div class="wrap">';
genesis_widget_area ('preheaderleft', array(
'before' => '<div class="preheaderleftcontainer">',
'after' => '</div>',));
genesis_widget_area ('preheaderright', array(
'before' => '<div class="preheaderrightcontainer">',
'after' => '</div>',));
echo '</div></div>';
}
// Hello bar -END-
Add the following CSS to the style.css:
.hello-bar {
/* background-color: #333; */
/* box-shadow: 0 0 5px #ddd; */
display: none;
font-size: 15px;
font-weight: 700;
padding: 5px 5px;
position: fixed;
text-align: left;
width: 100%;
z-index: 9999;
color: #fff;
}
.preheaderright {
text-align: right;
}
.preheader {
text-align: center;
}
@media only screen and (max-width: 800px) {
.hello-bar{
margin-top: 0;
/* may need to adjust this value for mobile menu fixed position
and when it kicks in and the max-width above */
}
.preheaderright {
text-align: left;
}
}
In addition I also adjusted the following CSS code:
.site-header.dark {
background: rgba(0,178,238, .6);
/* Adding opacity directly to the background does not change the opacity of the font color. */
/* Added because of hello bar. Remove if not used. */
padding-top: 55px;
}
To use the hello bar:
Add widgets into the Preheader left and right areas.
Remember the padding-top inside the siteheader dark CSS.
To turn it off:
Remove the widgets inside the Preheader left and right areas.
Comment or remove the padding top from the siteheader dark CSS.
This tutorial will be updated on occasion.
I will also be looking into Aspire Pro Genesis Child Theme. Aspire Pro is a similar parallax child theme as Altitude Pro but offers more features built right in.
Transferring the tutorial: https://www.easywebdesigntutorials.com/customizing-altitude-pro-genesis-child-theme/ to this issue, as the tutorial will soon totally change.
Btw You can download my custom theme at: github.com/paaljoachim/3-Custom-Altitude-Pro-Genesis (It also includes featured image behind the title. From this tutorial: Genesis adding a full width image behind the title ) ---> https://github.com/paaljoachim/3-Custom-Altitude-Pro-Genesis/issues/1
— Updated January 2018 based on Altitude Pro 1.1.3—
— PART 1 —
NB! Make a duplicate/copy of Altitude Pro theme before modifying it. I renamed the theme folder to altitude-pro-backup and then opened the style.css and renamed: Theme Name: Altitude Pro backup. Check the themes section and notice you now have a backup of Altitude Pro theme.
NB2! Sometimes Chrome can be really slow and refreshing a site. So even after changing the CSS it might show the old CSS. To help improve on seeing the new adjustments open Inspect (right click and select Inspect). Hold down the mouse button over the refresh and select “Empty Cache and Hard Reload”. This will hopefully make the new changes visible.
Update: I have a fix so that one can quicker see the CSS updates. It will force the cache to refresh. Add the following into the child theme functions file:
– Part 1 –
Add static pages. Add a home and blog page.
WordPress backend: Why? Because we want do not want the blog on the front page (well I do not want to that is). Change to static pages through Settings -> Reading. Select the Front and Posts pages.
Add widgets to the Front Page widget sections so all the sections become visible.
WordPress backend: Go to Appearance -> Widgets add a widget to each Front Page widget area. To see all 7 widget sections on the front page there needs to be a widget in each. I added a text widget where I wrote Front page 2 then a Front page 3 etc all the way up to 7. Check the site. You should now be able to see all the 7 sections. There should be an image in Front Page 1, 3, 5 and 7. Front page 2, 4 and 6 should contain a solid color.
Altitude Pro Widget sections – I used the Black Studio Visual Editor widget plugin and added a widget to each section.
Adding background images to all the Featured Sections
One can add an image for featured section 1,3,5 and 7. I will change this so one can add images for all 7 sections. 1,2,3,4,5,6 and 7. So we have the option to insert an image in any of the sections.
Inside the theme folder -> lib -> customize.php
Look for where it says: $images = apply_filters( ‘altitude_images’, array( ‘1’, ‘3’, ‘5’, ‘7’ ) ); (Just below the commented area in the top. It might be line 23.)
Then change it to: $images = apply_filters( ‘altitude_images’, array( ‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’, ‘7’ ) );
output.php Look for where it says: $opts = apply_filters( ‘altitude_images’, array( ‘1’, ‘3’, ‘5’, ‘7’ ) ); (Just below the commented area in the top. It might be line 27.)
Then change it to: $opts = apply_filters( ‘altitude_images’, array( ‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’, ‘7’ ) );
Inside the theme root folder ->front-page.php
Look for where it says: // Add markup for front page widgets. (Scroll down the page.) Inside this area it says front-page-1, front-page-2 etc.
Notice that front-page-1 has:
We want to change all the solid sections to become image sections. This means copy:
This is what front-page-2, 4 and 6 look like after the adjustment:
Go back to the customizer. All 7 sections should now be in place.
There will be broken images on the newly added sections. (Remove the broken images by clicking Remove or Change Image). To add a new image click Change Image and replace the broken icon with an image you choose.
A tip! There are some options if you want to add a color to a front page section.
Create a color jpg image and add it like any other images to the customizer featured image section.
Adding CSS. Remove the images from the Featured Sections you want to add a color to and then add CSS code to a front-page section. Inside the altitude-pro folder is style.css. Open it.
An example. In the customizer I removed the Featured Section 3 image.
In style.css. I searched for front-page-3. I found 4-5 mentions of front-page-3:
I commented out .front-page-3, like so: / .front-page-3, / This means that front-page-3 will not pick up the CSS that is added here. (One can instead remove .front-page-3. I chose to comment it so that I know where it is originally used.)
Just below I added the following CSS:
If you do not see the color try adding an background-color: orange !important;
The color looks dirty because there is a default dark gradient between the sections.
I opened Inspect element in Chrome (right click any area and select Inspect). The two sections seen on the bottom are: (left) the HTML and (right) the CSS. I use Inspect a lot to look at the html and CSS. The CSS can be adjusted by clicking into the tags and adjusting/adding new ones. It is temporary, and a good way to directly see modifications.
NB! We need to add in the new CSS front-page sections
To any place it mentions the front-page-1, 3, 5 and 7 we also need to add in 2, 4 and 6.
Adjust the following CSS:
Adjusting the grey/black gradient used as a transition between front page sections. Inside style.css.
To change the white-grey-black gradient open your style.css and search or scroll to Front Page.
/ Front Page ——————————————— /
The following section contains the gradients I want to change.
I commented out the dark gradient background and filter code but left display, overflow, table-layout and width in place. Like so:
The background color and filter are now commented out with / code /. Any CSS code you place within a / code / is hidden and not used.
As I commented out the default gradient it now looks nice and clean.
I wanted to experiment with other CSS gradients so I went online to: https://www.colorzilla.com/gradient-editor/
I made a new gradient and replaced the existing black gradient with the new.
I made a an orange -> light orange -> zero opacity. Here is the code:
Replace the existing gradient information with the one you make. Be sure to leave display, overflow, table-layout and width in place. Btw! If you use the same gradient tool that I did be sure and click the top arrows and change the opacity so you can see the image through the gradient. (Play with it and have fun..:) I decided not go to with any gradient. Here is an example of having a bit of orange in the sky in the first image.
Continuing--->
Changing the transparent site-header to another color.
Inside style.css. Before one begins to scroll the front page the site header is transparent. By commenting out the transparent site header the default black shows through.
The existing .site-header CSS code looks like this:
I adjusted the background color and added a box shadow.
I turned the background black color into a light blue hex code color.
Adding opacity to the site header (see through header)
I have two options to create a see through light blue site header:
NB! If your having a problem that the images do not go all the way to the top. To move the images a little higher up one needs to comment out some code. In the Front Page section of the style.css file.
Comment out (or remove) the border-top to get the background images to start at the top of each section. The background images will now look nicer behind the site-header.
Site header during scroll
I need to make changes to the site header during scroll. Inside the Site Header section. Some options on how you can write the code.
I changed the background color to the same light blue I used above and added an opacity of 0.7. Another option is to add the opacity through the rgba color.
A tip! The global.js file inside the js folder holds the jQuery function to where the site header dark info resides. If you want to change the word dark to something else you would need to do this here and for all mentions of the word dark in the style.css file. (There is really no need to do this. I am just adding the information so you know about it.)
Additional adjustments made to the site header.
Inside style.css. To remove the white border bottom line in the site header. Comment out the code like so (or just remove the code):
The header height changes on scroll. I adjusted the following title-area CSS so the padding became the same as the scrolling header. Original:
Adjusted to:
I changed the width of the title area from 360px to 250px because it takes too much space away from the menu on the right we will soon create. Adjust it to a size that fits your title. On various screen resolutions the menu might be to the right of the title or below it. I want to keep the menu to the right as long as possible before it is moved below the title on smaller resolutions.
Adding a fixed footer
If you have a page or post with very little content the footer might not stay at the bottom but move further up. To tell it to stick to the bottom one option is to use the following CSS that you can add to your style.css.
I found the code here: wpbeaches.com/adding-sticky-footer-genesis-theme-flexbox/
— PART 2 —
Creating the top primary menu. WordPress backend -> Appearance Menus OR go to the customizer and create the menu there.
Create a new menu. Below in Menu settings. In Display location select Header Menu.
Then click Custom Links to add a custom link. The URL need to be: #front-page-1, #front-page-2, #front-page-3, #front-page-4, #front-page-5, #front-page-6 and #front-page-7 one for each widget section.
Give each link a name by doing so inside the Link Text box. For this example I am calling them Front page and then a number. Add the various custom links to the menu.
NB!# = anchor. An anchor is often used to link to a section on the same page. If your linking from another page (not the main page) you will need to add the absolute link: https://www.domainname.com/#front-page-2 so that it goes to the section on the main page.
Frontend: The menu should now show up here beside the title.
Adjusting the menu.
Inside style.css. The menu jumps on scroll. This is a tricky one to discover. It has to do with the display: block code inside the nav menu. The 4th code section under
The menu moved further up getting too close to the top. I adjusted by adding a margin top.
On hover/mouseover – Adjusting the bottom white border line and the link color.
We are still in the Site Navigation area a little further up from the .nav-primary code.
A tip! To remove the bottom border color replace the hex color with none. Like so: border-color: none;
Adjusting the menu links placement in relation to each other and the bottom border line placement. Original:
Adjusted:
I added a padding 15px to adjust the distance between the menu links and the bottom border line.
A tip! Another option to only effect the border line placement is to add a padding-bottom: 8px; instead of the padding code that I added.
Adjusting the menu padding on scroll.
A few code blocks up is the following code.
We need to use the same padding as we did further above:
Adjusting the Media queries – responsive design Since we have made adjustments to the theme we also need to go through the media queries and adjust. Go to where it says: @media only screen and (max-width: 1023px) {
Original: @media only screen and (max-width: 1023px) {
Adjust to: @media only screen and (max-width: 880px) {
Next look for the following code a little further down:
I want to change the background color. I also added some height.
Background color is changed to the same light blue I have earlier added to the site header.
Go to: @media only screen and (max-width: 800px) { Original:
Adjusted to:
NB! Media queries is something you will need to experiment with to get right for your unique site.
Creating parallax effects when scrolling the front page.
I am using two files. One to create the main animation effects and a CSS file to styling the animations.
“Waypoints is the easiest way to trigger a function when you scroll to an element.” “Animate.css a cross-browser library of CSS animations.”
Download waypoints: https://imakewebthings.com/waypoints/ and download animate.css: https://github.com/daneden/animate.css
Copy/move the lib/jquery.waypoints.min.js file to the child theme js folder. Copy/move the animate.css file to the child theme root folder. (Or to a CSS folder etc.)
Create waypoints-init.js file inside the js folder of your child theme.
Inside waypoints-init.js file I added the following code. It gives an idea of how it works. Experiment with it.
Inside the functions.php file in the Enqueue scripts and styles section:
I added the animate.css to my child theme root folder. So it points directly to animate.css. I added the file query.waypoints.min.js to the js folder. I made the file waypoints-init.js and added it to the js folder.
NB! To get the animation to work you will need to add text and images to the sections I mentioned. To do so I will suggest installing Black Studio TinyMCE widget and add headings and images to it to see the animation. Experiment with it and also check out my article on parallax scrolling animations for some additional tips.
Creating an inner page similar to the main parallax page.
Inside functions.php
Duplicate the section that says //* Register widget areas and all the code belonging to that section. Paste it just below the front-page widget areas. Then rename all mentions of the word front page. Or just copy the following code and paste it below the pre existing front page widget areas.
Duplicate front-page.php. Then rename it. I renamed mine to template_inner-page.php.
Inside template_inner-page.php I renamed all mentions of the word front to become inner. I then adjusted the top area and added the Template Name of Inner Page.
NB! Be sure to rename all mentions of the word front to inner.
lib/Customize.php I got it working with the help from a tutorial at Sridhar Katakam site. Sridhar runs a Genesis Membership site. I will duplicate the code in the customizer that creates the Front Page Background Images. Here is the adjusted code: global $wp_customize;
Control inside -> Setting. Setting inside -> Section.
Duplicate:
Paste just below and adjust to become:
Duplicate:
Paste just below and adjust to become:
Duplicate:
Paste just below and adjust to become:
lib/output.php
Here is the adjusted code:
Duplicate:
$opts = apply_filters( 'altitude_images', array( '1', '2', '3', '4', '5', '6', '7' ) );Paste just below and adjust to become:
Duplicate:
$settings = array();Paste just below and adjust to become:
Duplicate:
Paste just below and adjust to become:
Duplicate:
Paste just below and adjust to become:
NB! Rename template_inner-page.php to whatever name you called your template.
style.css
I begin from the top searching all mentions of the word front-page. I then duplicate and adjust.
Here is all of the CSS that mentions front-page as well as the inner-pages that I added:
The next area is inside the media queries:
Other things I have adjusted are:
Made a conditional menu to only show on posts (or anywhere you choose). Showing menu depending on certain conditions. The following: One menu is the primary. Another is not connected with any menu location. Or use the Conditional Menus plugin by Themify: https://wordpress.org/plugins/conditional-menus/
Options
! = is not. I have used it below. && is_page(); && is_page (‘id of page’) && is_page (‘about-me’) && is_page ( array(‘member’, ‘member-page-2’, ‘member-page-3’, ‘member-page-4’) ) && ( is_archive() || is_singular(‘page’) ) ) —> II brings two options together. && is_page_template( ‘name of page template’ )
Is not page then use the menu I named “Sub menu”. (Does not use any of the menu locations.) This means that clicking a post preview on the main page goes directly to the post and shows the sub menu instead of the primary menu “top menu”. Add the code to your child theme functions.php file.
https://codex.wordpress.org/Function_Reference/is_page
Also see my tutorial on adding an image behind the title of the post, page or blog preview page: Genesis adding a full width image behind the title. https://github.com/paaljoachim/3-Custom-Altitude-Pro-Genesis/issues/1
Adding a hello bar to the top area of the header
I followed the tutorial: wpbeaches.com/adding-in-a-hello-tool-bar-to-the-top-of-a-genesis-theme to add a Hello Tool Bar to the top of the Altitude Pro. This is what i looks like when scrolling.
A quick run through. Create a hello-bar.js file with the following code:
Then create a left/right Tool Bar. Add the following code to the functions.php file.
Add the following CSS to the style.css:
In addition I also adjusted the following CSS code:
To use the hello bar: Add widgets into the Preheader left and right areas. Remember the padding-top inside the siteheader dark CSS.
To turn it off: Remove the widgets inside the Preheader left and right areas. Comment or remove the padding top from the siteheader dark CSS.
Additional resources I used the Black Studio TinyMCE Widget to make it easier to add various text to widgets. sridharkatakam.com/smooth-scrolling-page-sections-using-page-scroll-id/
Adding a hello toolbar to the top of a Genesis theme: wpbeaches.com/adding-in-a-hello-tool-bar-to-the-top-of-a-genesis-theme/
Note to myself. Test out: https://callmenick.com/post/single-page-site-with-smooth-scrolling-highlighted-link-and-fixed-navigation
This tutorial will be updated on occasion. I will also be looking into Aspire Pro Genesis Child Theme. Aspire Pro is a similar parallax child theme as Altitude Pro but offers more features built right in.