• Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

Easy Web Design Tutorials

WordPress Tutorials and more

  • Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

13 November - 2015 By Paal Joachim 42 Comments
Last updated on: May 6, 2018

How to customize the one page Genesis child theme Altitude Pro.

 

Btw You can download my custom theme at: github.com/paaljoachim/2-Custom-Altitude-Pro-Genesis
(It also includes featured image behind the title. From this tutorial: Genesis adding a full width image behind the title )

 

— Updated January 2018 based on Altitude Pro 1.1.3—

 

Support the site by using my affiliate link to purchase Genesis Child Themes.

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

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

Original Altitude Pro customizer screen

Original Altitude Pro customizer screen

 

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: <div class=”image-section”>
and notice that front-page-2 has: <div class=”solid-section”>

We want to change all the solid sections to become image sections.
This means copy: <div class=”image-section”> and replace: <div class=”solid-section”>
inside front-page-2, 4, 6

This is what front-page-2, 4 and 6 look like after the adjustment:

genesis_widget_area( 'front-page-2', array( 
    'before' => '<div id="front-page-2" class="front-page-2" tabindex="-1"><div class="image-section">
    <div class="flexible-widgets widget-area' . altitude_widget_area_class( 'front-page-2' ) . '">
    <div class="wrap">', 'after'  => '</div></div></div></div>', 
) );

genesis_widget_area( 'front-page-4', array( 
 'before' => '<div id="front-page-4" class="front-page-4" tabindex="-1"><div class="image-section">
 <div class="flexible-widgets widget-area' . altitude_widget_area_class( 'front-page-4' ) . '">
 <div class="wrap">', 'after'  => '</div></div></div></div>', 
) );

genesis_widget_area( 'front-page-6', array( 
  'before' => '<div id="front-page-6" class="front-page-6" tabindex="-1"><div class="image-section">
  <div class="flexible-widgets widget-area' . altitude_widget_area_class( 'front-page-6' ) . '">
  <div class="wrap">', 'after'  => '</div></div></div></div>', 
) );


Go back to the customizer. All 7 sections should now be in place.

Modified - Altitude Pro Customizer screen

Modified – Altitude Pro Customizer screen

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.

1. Create a color jpg image and add it like any other images to the customizer featured image section.

2. 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:

.front-page-1,
.front-page-3,
.front-page-5,
.front-page-7 { 
  background-attachment: fixed; 
  background-color: #fff; 
  background-position: 50% 0; 
  background-repeat: no-repeat; 
  -webkit-background-size: cover; 
  -moz-background-size:    cover; 
  background-size:         cover;
}

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.)

.front-page-1,
/* .front-page-3, */
.front-page-5,
.front-page-7 {

 

Just below I added the following CSS:

.front-page-3 {
 background-color: orange; 
}

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.

Genesis-Altitude-Pro-Adjusting-CSS-Front-page-3

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:

.front-page-1,
.front-page-2, /* Added */
.front-page-3,
.front-page-4, /* Added */ 
.front-page-5,
.front-page-6, /* Added */
.front-page-7 {
     background-attachment: fixed;
     background-color: #fff; 
     background-position: 50% 0; 
     background-repeat: no-repeat; 
     -webkit-background-size: cover; 
     -moz-background-size:    cover; 
     background-size:         cover;
}

 

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.

.image-section { 
background: -moz-linear-gradient(top,  rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 30%, 
rgba(0,0,0,0.8) 80%, rgba(0,0,0,0.9) 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), 
color-stop(30%,rgba(0,0,0,0.5)), color-stop(80%,rgba(0,0,0,0.8)), color-stop(100%,rgba(0,0,0,0.9))); 
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,
rgba(0,0,0,0.9) 100%); 
background: -o-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,
rgba(0,0,0,0.9) 100%); 
background: -ms-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,
rgba(0,0,0,0.9) 100%); 
background: linear-gradient(to bottom,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,
rgba(0,0,0,0.9) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', 
endColorstr='#e6000000',GradientType=0 ); 
display: table; 
overflow: hidden; 
table-layout: fixed; 
width: 100%;
}

I commented out the dark gradient background and filter code but left display, overflow, table-layout and width in place. Like so:

.image-section {
 /* 
   background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.8) 80%, 
rgba(0,0,0,0.9) 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), 
color-stop(30%,rgba(0,0,0,0.5)), 
color-stop(80%,rgba(0,0,0,0.8)), color-stop(100%,rgba(0,0,0,0.9)));
   background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,
rgba(0,0,0,0.9) 100%);
   background: -o-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,
rgba(0,0,0,0.9) 100%);
   background: -ms-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,
rgba(0,0,0,0.9) 100%);
   background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,
rgba(0,0,0,0.9) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', 
endColorstr='#e6000000',GradientType=0 ); 
 */
   display: table;
   overflow: hidden;
   table-layout: fixed;
   width: 100%; 
}

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.

Genesis-Altitude-Pro-adjusting-gradient-front-page

 

I wanted to experiment with other CSS gradients so I went online to: https://www.colorzilla.com/gradient-editor/

Colorzilla Gradient Generator

Colorzilla Gradient Generator

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:

/* Permalink - use to edit and share this gradient: 
https://colorzilla.com/gradient-editor/#f76631+0,d65822+36,e09d62+73,e5dcce+100&0.35+0,0.02+27,0+100 */
background: -moz-linear-gradient(top, rgba(247,102,49,0.35) 0%, rgba(222,92,38,0.02) 27%, 
rgba(214,88,34,0.02) 36%, rgba(224,157,98,0.01) 73%, rgba(229,220,206,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(247,102,49,0.35) 0%,rgba(222,92,38,0.02) 27%,
rgba(214,88,34,0.02) 36%,rgba(224,157,98,0.01) 73%,rgba(229,220,206,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(247,102,49,0.35) 0%,rgba(222,92,38,0.02) 27%,
rgba(214,88,34,0.02) 36%,rgba(224,157,98,0.01) 73%,rgba(229,220,206,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, 
Opera12+, Safari7+ */
filter: 
progid:DXImageTransform.Microsoft.gradient( startColorstr='#59f76631', endColorstr='#00e5dcce',GradientType=0 ); 
/* IE6-9 */

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.

Altitude Pro top orange gradient

Altitude Pro top orange gradient

 

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.

.featured-section .site-header {
  /* background-color: transparent; */ 
}

The existing .site-header CSS code looks like this:

.site-header {
 background-color: #000;
 left: 0;
 position: fixed;
 top: 0;
 width: 100%;
 z-index: 999;
}

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:
1. Add opacity: 0.7 or another .number under 1.0.
2. 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.

/* Front Page
--------------------------------------------- */

.front-page-2,
.front-page-3,
.front-page-4,
.front-page-5,
.front-page-6,
.front-page-7 {

/* border-top: 54px solid transparent; */
 margin-top: -54px; 
-webkit-background-clip: padding-box;
 -moz-background-clip: padding;
 background-clip: padding-box;
 position: relative;
 z-index: 9;
}

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.

.site-header.dark {
background-color: #00B2EE; 
opacity: 0.7;
}

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.

.site-header.dark {
background-color: rgba(0,178,238, .7);
}

 

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):

.featured-section .site-header > .wrap {
 /* border-bottom: 1px solid #fff; */
 }

The header height changes on scroll. I adjusted the following title-area CSS so the padding became the same as the scrolling header.
Original:

.title-area { 
   float: left; 
   padding: 25px 0; 
   width: 360px;
}

Adjusted to:

.title-area {
  float: left;
  padding: 15px 0; 
  width: 250px;    
}

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.

/* No change here. */
.site-header.dark .title-area {
 padding: 15px 0; 
}

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.

/* 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;
}

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.

Add custom menu links to Altitude Pro

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;
}

Adjusted:

.genesis-nav-menu > .menu-item > a {
 text-transform: uppercase;
 padding: 15px;    
}

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:

.front-page .site-header {
 background-color: #000;
 }

I want to change the background color. I also added some height.

.front-page .site-header {
 background-color: #00B2EE;
 }

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:

.menu-toggle,
.sub-menu-toggle { 
   border-width: 0; 
   background: #000; 
   color: #fff; 
   display: block; 
   margin: 0 auto; 
   overflow: hidden; 
   text-align: center; 
   visibility: visible; }

.menu-toggle:focus, 
.menu-toggle:hover, 
.sub-menu-toggle:focus, 
.sub-menu-toggle:hover { 
   background-color: transparent; 
   color: #22a1c4; 
   border-width: 0; }

Adjusted to:

.menu-toggle,
.menu-toggle,
.sub-menu-toggle { 
   border-width: 0; 
   background: #00B2EE;    /* Adjusted from #000 */ 
   color: #fff; 
   display: block; 
   margin: 0 auto; 
   overflow: hidden; 
   text-align: center; 
   visibility: visible; 
}

.menu-toggle:focus, 
.menu-toggle:hover, 
.sub-menu-toggle:focus, 
.sub-menu-toggle:hover { 
   background-color: #00B2EE;    /* Adjusted from transparent */ 
   color: #ccc;                  /* Adjusted from #22a1c4 */ 
   border-width: 0; 
}

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.

// Resources:
// https://github.com/daneden/animate.css
// https://spin.atomicobject.com/2015/05/31/scroll-anmiation-css-waypoints/

jQuery(function($) {
 $('#front-page-1').waypoint(function(direction) {
 if (direction == 'down') {
 $('#front-page-1 h1').toggleClass( 'animated fadeInUp' );
 $('#front-page-1 img').addClass('animated fadeInLeft');
 $('#front-page-1 p').toggleClass('animated fadeInUp');
 } 
 if (direction == 'up') {
 $('#front-page-1 h1').toggleClass( 'animated fadeOut' );
 } 
 },
 { 
 offset: '80%',
 });

$('#front-page-2 img').css('opacity', 0);
$('#front-page-2 h1').css('opacity', 0);

$('#front-page-2').waypoint(function() {
 $('#front-page-2 h1').toggleClass( 'animated fadeInUp' );
 $('#front-page-2 img').toggleClass('animated fadeIn');
 },
 {
 offset: '40%',
 }); 

 // hide our element on page load --- WORKS!!
 $('#front-page-3 h1').css('opacity', 0);
 
 $('#front-page-3').waypoint(function() {
 $('#front-page-3 h1').toggleClass( 'animated fadeInLeftBig' );
 $('#front-page-3 img').toggleClass('animated fadeIn');
 },
 {
 offset: '40%',
 }); 
 
$('#front-page-4').waypoint(function() {
 $('#front-page-4 p').toggleClass( 'animated fadeInLeftBig' );
 $('#front-page-4 img').toggleClass( 'animated fadeIn' );
 },
 {
 offset: '80%',
 });
 

$('#front-page-7').waypoint(function() {
 $('#front-page-7 p').addClass( 'animated fadeInUpBig' );
 },
 {
 offset: '60%',
 });

});

 

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.

//* Register inner widget areas
genesis_register_sidebar( array(
 'id' => 'inner-page-1',
 'name' => __( 'Inner Page 1', 'altitude' ),
 'description' => __( 'This is the inner page 1 section.', 'altitude' ),
) );
genesis_register_sidebar( array(
 'id' => 'inner-page-2',
 'name' => __( 'Inner Page 2', 'altitude' ),
 'description' => __( 'This is the inner page 2 section.', 'altitude' ),
) );
genesis_register_sidebar( array(
 'id' => 'inner-page-3',
 'name' => __( 'Inner Page 3', 'altitude' ),
 'description' => __( 'This is the inner page 3 section.', 'altitude' ),
) );
genesis_register_sidebar( array(
 'id' => 'inner-page-4',
 'name' => __( 'Inner Page 4', 'altitude' ),
 'description' => __( 'This is the inner page 4 section.', 'altitude' ),
) );
genesis_register_sidebar( array(
 'id' => 'inner-page-5',
 'name' => __( 'Inner Page 5', 'altitude' ),
 'description' => __( 'This is the inner page 5 section.', 'altitude' ),
) );
genesis_register_sidebar( array(
 'id' => 'inner-page-6',
 'name' => __( 'Inner Page 6', 'altitude' ),
 'description' => __( 'This is the inner page 6 section.', 'altitude' ),
) );
genesis_register_sidebar( array(
 'id' => 'inner-page-7',
 'name' => __( 'Inner Page 7', 'altitude' ),
 'description' => __( 'This is the inner page 7 section.', 'altitude' ),
) );

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.

 

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:

// Front Page Background Images filter
 $images = apply_filters( 'altitude_images', array( '1', '2', '3', '4', '5', '6', '7' ) );

Paste just below and adjust to become:

// Inner Page Background Images filter
 $inner_images = apply_filters( 'altitude_inner_images', array( '1', '2', '3', '4', '5', '6', '7' ) );

Duplicate:

 // 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,
) );

 

Duplicate:

foreach( $images as $image ) {
$wp_customize->add_setting( 
   $image .'-altitude-image', 
   array(
       'default' => sprintf( '%s/images/bg-%s.jpg', get_stylesheet_directory_uri(), $image ),
       'sanitize_callback' => 'esc_url_raw',
       'type' => 'option',
   ) 
);
$wp_customize->add_control( 
    new WP_Customize_Image_Control( 
         $wp_customize, 
         $image .'-altitude-image', 
         array(
              'label' => sprintf( __( 'Featured Section %s Image:', 'altitude-pro' ), $image ),
              'section' => 'altitude-settings',
              'settings' => $image .'-altitude-image',
              'priority' => $image+1,
         ) 
    ) 
);

}

Paste just below and adjust to become:

// Inner Page Background Images setting and then a control to select image.
foreach( $inner_images as $inner_image ) {

$wp_customize->add_setting( 
     $inner_image .'-altitude-inner-image', 
     array(
          'default' => sprintf( '%s/images/bg-%s.jpg', get_stylesheet_directory_uri(), $inner_image ),
          'sanitize_callback' => 'esc_url_raw',
          'type' => 'option',
     ) 
);

$wp_customize->add_control( 
      new WP_Customize_Image_Control( 
          $wp_customize, 
          $inner_image .'-altitude-inner-image', 
          array(
               'label' => sprintf( __( 'Inner Featured Section %s Image:', 'altitude-pro' ), $inner_image ),
               'section' => 'altitude-settings-inner',
               'settings' => $inner_image .'-altitude-inner-image',
               'priority' => $inner_image+1,
          ) 
      ) 
);

}

 

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:

 // Add Inner Page Background Images filter
 $inner_opts = apply_filters( 'altitude_inner_images', array( '1', '2', '3', '4', '5', '6', '7' ) );

 

Duplicate:

$settings = array();

Paste just below and adjust to become:

 // Add Inner Page Background Images settings
 $inner_settings = array();

 

Duplicate:

foreach( $opts as $opt ) {
    $settings[$opt]['image'] = preg_replace( '/^https?:/', '', get_option( $opt .'-altitude-image', sprintf
    ( '%s/images/bg-%s.jpg', get_stylesheet_directory_uri(), $opt ) ) );
}

Paste just below and adjust to become:

// Inner Page Background Images options
foreach( $inner_opts as $inner_opt ) {
     $inner_settings[$inner_opt]['image'] = preg_replace( '/^https?:/', '', get_option( 
     $inner_opt .'-altitude-inner-image', sprintf( '%s/images/bg-%s.jpg', 
     get_stylesheet_directory_uri(), $inner_opt ) ) );
 }
 $css = '';

 

Duplicate:

foreach ( $settings as $section => $value ) {
     $background = $value['image'] ? sprintf( 'background-image: url(%s);', $value['image'] ) : '';

     if ( is_front_page() ) {
          $css .= ( ! empty( $section ) && ! empty( $background ) ) ? 
          sprintf( '.front-page-%s { %s }', $section, $background ) : '';
     }
}

Paste just below and adjust to become:

// Inner page Background 
foreach ( $inner_settings as $inner_section => $inner_value ) {
      $inner_background = $inner_value['image'] ? sprintf( 'background-image: url(%s);', 
      $inner_value['image'] ) : '';
   
      if ( is_page_template( 'template_inner-page.php' ) ) {
          $css .= ( ! empty( $inner_section ) && ! empty( $inner_background ) ) ? 
          sprintf( '.inner-page-%s { %s }', $inner_section, $inner_background ) : '';
      }
 }

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:

.front-page-1 .widget:first-of-type h4,
.front-page-2 .widget:first-of-type h4,
.inner-page-1 .widget:first-of-type h4,    /* Added */
.inner-page-2 .widget:first-of-type h4 {   /* Added */ 
   font-size: 80px; 
   font-size: 8rem; 
   font-weight: 200; 
   letter-spacing: normal; 
   line-height: 1; 
   text-transform: none;
}

.front-page input:focus,
.front-page textarea:focus,
.inner-page input:focus,       /* Added */
.inner-page textarea:focus {   /* Added */
    border: 1px solid #22a1c4; 
    outline: none;
}

.front-page .site-container .site-inner,
.inner-page .site-container .site-inner {   /* Added */ 
   margin-top: 0; 
   max-width: 100%;
}

.front-page .genesis-nav-menu li.current-menu-item > a,
.inner-page .genesis-nav-menu li.current-menu-item > a,    /* Added */
.genesis-nav-menu > li > a { 
     border-bottom: 2px solid transparent;
}

.front-page .genesis-nav-menu li.current-menu-item > a:focus,
.front-page .genesis-nav-menu li.current-menu-item > a:hover,
.inner-page .genesis-nav-menu li.current-menu-item > a:focus,  /* Added */
.inner-page .genesis-nav-menu li.current-menu-item > a:hover,  /* Added */
.genesis-nav-menu li.current-menu-item > a,
.genesis-nav-menu > li > a:focus,
.genesis-nav-menu > li > a:hover { 
    /* border-color: #1167b8; /* Adjusted #fff */ 
    color: #d6d4d4; /* Added */
}

.front-page-3,
.inner-page-3 { /* Added */ 
    background-color: orange;
}

.front-page-2,
.front-page-3,
.front-page-4,
.front-page-5,
.front-page-6,
.front-page-7,
.inner-page-2,    /* Added */
.inner-page-3,    /* Added */
.inner-page-4,    /* Added */
.inner-page-5,    /* Added */
.inner-page-6,    /* Added */
.inner-page-7 {   /* Added */ 
  /* border-top: 54px solid transparent; */ 
  /* Commented out to push images to the top of a section. */ 
     margin-top: -154px; 
   -webkit-background-clip: padding-box; 
   -moz-background-clip: padding; 
   background-clip: padding-box; 
   position: relative; 
   z-index: 9;
}

.front-page-1,
.front-page-2,   /* Added */
.front-page-3,
.front-page-4,    /* Added */
.front-page-5,
.front-page-6,    /* Added */
.front-page-7,
.inner-page-1,    /* Added */
.inner-page-2,    /* Added */
.inner-page-3,    /* Added */
.inner-page-4,    /* Added */
.inner-page-5,    /* Added */
.inner-page-6,    /* Added */
.inner-page-7  {  /* Added */ 
   background-attachment: fixed; 
   background-color: #fff; 
   background-position: 50% 0; 
   background-repeat: no-repeat; 
   -webkit-background-size: cover; 
   -moz-background-size: cover; 
   background-size: cover;
}

.front-page-3,
.inner-page-3 {     /* Added */
   background-color: orange;
}

.front-page-1,
.inner-page-1 {    /* Added */ 
   position: relative;
}

.front-page-1 .image-section,
.inner-page-1 .image-section {  /* Added */ 
   padding-top: 75px;
}

.secondary-nav .front-page-1 .image-section,
.secondary-nav .inner-page-1 .image-section {  /* Added */ 
   padding-top: 150px;
}

.front-page-4 .solid-section,
.inner-page-4 .solid-section {   /* Added */
   background-color: #f3f3f3;
}

.front-page .field-wrap:last-child,
.inner-page .field-wrap:last-child {   /* Added */ 
   margin-bottom: 0;
}

.front-page .dashicons,
.inner-page .dashicons {  /* Added */
   font-size: 40px; 
   font-size: 4rem; 
   height: 40px; 
   margin-bottom: 20px; 
   width: 40px;
}

.full-width-content.front-page .content,
.full-width-content.inner-page .content {   /* Added */ 
    padding: 0;
}

.front-page-1,
.front-page-2,  /* Added */ 
.front-page-3, 
.front-page-4,  /* Added */ 
.front-page-5, 
.front-page-6,  /* Added */ 
.front-page-7, 
.inner-page-1,  /* Added */ 
.inner-page-2,  /* Added */ 
.inner-page-3,  /* Added */ 
.inner-page-4,  /* Added */ 
.inner-page-5,  /* Added */
.inner-page-6,  /* Added */  
.inner-page-7 {   /* Added */    
   background-attachment: scroll; 
}

The next area is inside the media queries:

.front-page .site-inner, 
.inner-page .site-inner {     /* Added */ 
   max-width: none; 
}

.front-page .site-header, 
.inner-page .site-header {      /* Added */
    background-color: #00B2EE; /* Adjusted #000 */ 
}

.front-page .site-header > .wrap, 
.inner-page .site-header > .wrap {    /* Added */ 
   border: none; 
}

.front-page .site-inner, 
.inner-page .site-inner  {   /* Added */ 
   margin-top: 0; 
}

.front-page-1 .widget:first-of-type h4, 
.front-page-2 .widget:first-of-type h4, 
.inner-page-1 .widget:first-of-type h4,     /* Added */ 
.inner-page-2 .widget:first-of-type h4 {    /* Added */ 
    font-size: 60px; 
    font-size: 6rem; 
}

.front-page-1 .image-section, 
.secondary-nav .front-page-1 .image-section, 
.inner-page-1 .image-section,                  /* Added */ 
.secondary-nav .inner-page-1 .image-section {  /* Added */ 
   padding-top: 0; 
}

.front-page .site-inner, 
.inner-page .site-inner { /* Added */ 
   padding: 0; 
}

.front-page .genesis-responsive-menu .genesis-nav-menu li.current-menu-item > a, 
.inner-page .genesis-responsive-menu .genesis-nav-menu li.current-menu-item > a,  /* Added */ 
.genesis-responsive-menu .genesis-nav-menu > li > a, 
.genesis-responsive-menu .genesis-nav-menu .menu-item a { 
   border: 0; 
}

.front-page-2, 
.front-page-3, 
.front-page-4, 
.front-page-5, 
.front-page-6, 
.front-page-7, 
.inner-page-2,  /* Added */ 
.inner-page-3,  /* Added */ 
.inner-page-4,  /* Added */ 
.inner-page-5,  /* Added */ 
.inner-page-6,  /* Added */ 
.inner-page-7  { /* Added */ 
   border-top: 0; margin-top: 0; 
}

.front-page-1 .widget:first-of-type h4, 
.front-page-2 .widget:first-of-type h4, 
.inner-page-1 .widget:first-of-type h4,   /* Added */ 
.inner-page-2 .widget:first-of-type h4 {  /* Added */ 
   font-size: 40px; 
   font-size: 4rem; 
}

 

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://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' );

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.

 

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.

Hello-Bar-Genesis-preheader-left-right

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.

 

 

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.

Share this:

  • Email

Categories: Featured, Genesis, WordPress

Paal Joachim Romdahl

I enjoy teaching and creating tutorials. As well creating web sites.
I help people gain WordPress knowledge through my easy to follow tutorials and specialized training. Contact me for more information on how I can improve your WordPress skills and to help get your web site quickly up and running.

Comments

  1. Kimberly Small says

    27 April - 2020

    Hi: Will you help me understand why mobile photos on Altitude Pro do not 1) load in focus 2) scroll with a fixed background?

    I have all 7 pages as images and theys load perfectly on a desktop, but I cannot, however, get them to load properly on a mobile device no matter what I correct in the CSS.

    Reply
  2. Chris says

    3 September - 2019

    Hello, thank you for your fantastic tutorial. I have tried a lot of ways to decrease front page image sections height but I cannot do it. I want sections that are not full page.

    Do you have any idea?

    Reply
  3. Douglas Palme says

    25 June - 2019

    Nice Job, wish there was a way to use the para on more than just 1 inner page….that’s a lot of customizing just for the one page. But all in all nice job.

    Reply
  4. pardisani says

    14 March - 2019

    Hi, am using altitude pro theme. I have been trying to change header image through appearance -> customise-> header image, but even though am able to add header image, the page is not displaying it. Please help me with this. Regards.

    Reply
  5. لیپوماتیک says

    21 September - 2018

    hello
    This post is AMAZING, thank you.
    goodluck

    Reply
  6. Chandan says

    14 May - 2018

    Hi, am using altitude pro theme. I have been trying to change header image through appearance -> customise-> header image, but even though am able to add header image, the page is not displaying it. Please help me with this. Regards.

    Reply
    • Paal Joachim says

      26 May - 2018

      Hey Chandan.

      I am thinking this has to do with the cache no refreshing. That happens a lot. Right click in your browser and choose Inspect. Then hold down the cursor above the refresh button and choose the bottom option. Something like hard refresh. Hopefully that will refresh the page.

      Reply
  7. Robert O'Kruk says

    24 November - 2017

    The header height does not dynamically decrease upon scroll for my site. How can I make it so.

    Really appreciate this guide!

    Reply
    • Paal Joachim says

      9 December - 2017

      Hi Robert.

      Find the Site header during scroll section.
      .site-header.dark {
      background-color: #00B2EE;
      opacity: 0.7;
      }

      Add a height to the above and see if that works. If not then add an !important at the end of it and see if that does it.

      Reply
  8. Jennifer says

    11 October - 2017

    Thank you so much! This was exactly what I was looking for! Easy to follow and implement. I will be bookmarking this tutorial for future reference.

    Reply
  9. Gunnar I Gíslason says

    7 October - 2017

    Thanks for all this great information 🙂

    Reply
  10. Mark says

    30 September - 2017

    First – excellent page! Helped me a ton and saved a lot of trial and error time. Thanks!

    I have the same question as John “Does anyone know of an easy way to remove the horizontal white line under the menu in the Altitude Pro Theme?”

    He’s not talking about the hover effect in the navigation. There is a solid white line under the menu area that spans the page. I goes just above where the header image would go (if I was using one).

    Reply
    • Paal Joachim says

      30 September - 2017

      Hey Mark (and John)

      The horizontal white line below the header.
      I went to Appearance -> Customize. Right clicked the header area and moved the cursor in the area the white line is in. I found this CSS:
      .featured-section .site-header > .wrap {
      border-bottom: 1px solid #fff;
      }

      I turned it off and noticed it went away. So here I can /* comment out */ the code. Or add a border-bottom: none !important;. Or add another color.

      Reply
      • Mark says

        1 October - 2017

        Paal,

        Thanks.

        The white line your CSS removed was for the primary menu.

        The one I couldn’t remove turned out to be the secondary menu. Here’s what I used that worked (to help others);

        .nav-secondary {
        border-bottom: none !important;
        }

        Thanks again for all your help!

        Reply
  11. David Craig White says

    2 September - 2017

    This post is AMAZING, thank you.

    Is there a way to centrally align the main header title on the Altitude theme?

    I have tried to change the align from left to centre but nothing happens.

    Reply
    • Paal Joachim says

      2 September - 2017

      Hey David

      Thank you! I am glad you like the tutorial!

      I just did a search and came across this code:
      margin-left: auto!important;
      margin-right: auto!important;

      Add it like so:
      .title-area {
      /* float: left; */
      padding: 15px 0;
      width: 310px;
      margin-left: auto!important;
      margin-right: auto!important;
      }

      That should center it.

      btw I did a search on logo in middle of menu Genesis and came across this tutorial: https://www.alphablossom.com/split-genesis-navigation-menu-center-logo-css-only/ (I will have to test it out sometime..:)

      Reply
  12. John says

    14 June - 2017

    Awesome post – thank you. Does anyone know of an easy way to remove the horizontal white line under the menu in the Altitude Pro Theme?

    Thanks again

    Reply
    • Paal Joachim says

      2 September - 2017

      Hey John

      I forgot about your comment. Sorry about that.
      I believe you are talking about this (copied from the area where I talk about 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;

      Reply
  13. Ken says

    15 March - 2017

    Hi, I really appreciate this guide! Saved my life. There’s one little bug I noticed when I look at the demo altitude pro site and I couldn’t figure out how to fix it: https://demo.studiopress.com/altitude/ . When I click learn more button, the page jumps to #front-page-2 rather than scrolling like when I press the menu bar. This happens regardless whether I have the page scroll to id plugin activated or not. Also, after clicking learn more and if I scroll up right away, you will see a long white line going across the bottom of #front-page-1

    It’s been bothering me and couldn’t figure out how to fix it. Any suggestions?

    Reply
    • Paal Joachim says

      18 March - 2017

      Hey Ken

      I have not looked at this in a while. Just experiment with the tutorial and see what you figure out.
      Good luck and have fun!..:)

      Reply
      • Ken says

        6 April - 2017

        I figured out that the issue was caused by a the BJ Lazy Load plugin. The scroll to works upon deactivating the lazy load and the annoying white line is gone too. Just want to reply in case someone else runs into same issue.

        Reply
  14. Monsieur Du Thym says

    18 January - 2017

    thanks a lot for this tutorial.
    When I command out exatly like this: “.featured-section .site-header > .wrap {
    /* border-bottom: 1px solid #fff; */
    }” the white bottom line in the header is still there.
    How can I fix that?
    Thanks!

    Reply
    • Paal Joachim says

      18 January - 2017

      Hi

      The first thing might be that the browser (I know Chrome is very slow with updating) is still using the old cache file.
      It might take a little while before the adjustment is seen. I am myself struggling with getting the cache refreshed to see updates.
      Let me know how it goes and what you figure out.

      Reply
      • Monsieur Du Thym says

        25 January - 2017

        Sorry for the late reply. It actually was a cache thing. This refreshing rate is a real headhache while trying to get things done…but your tutorials are awesome, and work.
        Thanks again!

        Reply
  15. Chris says

    14 December - 2016

    Hi there,
    How can I change inner page default template page width?

    Reply
    • Paal Joachim says

      20 December - 2016

      Hi Chris

      Go to one of the inner pages and right click the top area in your browser and select Inspect and then find the section you are looking for and work on adjusting the CSS (left section shows HTML and right CSS).

      Reply
  16. james owen says

    4 December - 2016

    Hi wondering if you could help I have managed to change the background colour of the header menu but on mobile devices its black, but only on the home page if I navigate to other pages its the color I picked for the header..Thank you in advance..

    https://www.formbyfacialrejuvenation.co.uk/

    Reply
    • Paal Joachim says

      10 December - 2016

      Hi James

      Browse through the media queries at the bottom of the style.css and look for any mention of the .site-header or .header and the color #000 or black.
      Then remove it or comment it out like this /* background-color: #000; */ Or if you find no mention of the site-header / header then add a new entry that includes the color you need to use. Check out my tutorial on using CSS and the media queries in the bottom of the tutorial: https://www.easywebdesigntutorials.com/easywebdesigntutorials.com/customize-css-to-style-your-site/

      Reply
  17. Raphael Evans says

    26 November - 2016

    Hi Paal,

    I truly appreciate your tutorials and the time you take to teach everyone. Great job!

    Yesterday, I was following your instructions on how to remove the dark gradient on the front pages, which I did successfully by comment out the background and filter code and leaving the rest in place.

    My question is: How can I remove the dark gradient on only ONE PAGE? For example, if I want to remove the gradient from the Front Page 5 (TESTIMONIALS), how can I do that?

    I will greatly appreciate your knowledge on this issue.

    Thanks,

    Rapha

    Reply
    • Paal Joachim says

      27 November - 2016

      Hey Raphael

      Here check my CSS tutorial: https://www.easywebdesigntutorials.com/easywebdesigntutorials.com/customize-css-to-style-your-site/
      It mentions styling specific sections of a site.

      If you wanted to style a specific CSS id # or a class .
      In your browser right click what you are wondering about. Select Inspect and look at the html and look for the names such as div id=”front-page-1″ class=”front-page-1″.
      Then one adds it like this:

      #front-page-1 .image-section,
      #front-page-3 .image-section,
      /* #front-page-5 .image-section */ <---- Commented out so it will not be read. #front-page-7 .image-section { background: -webkit-gradient(linear, left top, left bottom, from(rgba(247, 59, 59, 0.2)), color-stop(0.3, rgba(0,0,0,0.5)), color-stop(0.8, rgba(0,0,0,0.8)), to(rgba(3, 62, 245, 0.9))); background: -webkit-linear-gradient(top, rgba(247, 59, 59, 0.2) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.8) 80%, rgba(3, 62, 245, 0.9) 100%); background: -moz-linear-gradient(top, rgba(247, 59, 59, 0.2) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.8) 80%, rgba(3, 62, 245, 0.9) 100%); background: -ms-linear-gradient(top, rgba(247, 59, 59, 0.2) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.8) 80%, rgba(3, 62, 245, 0.9) 100%); background: -o-linear-gradient(top, rgba(247, 59, 59, 0.2) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.8) 80%, rgba(3, 62, 245, 0.9) 100%); background: linear-gradient(to bottom, rgba(247, 59, 59, 0.2) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.8) 80%, rgba(3, 62, 245, 0.9) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', endColorstr='#e6000000',GradientType=0 ); display: table; overflow: hidden; table-layout: fixed; width: 100%; } Btw I changed the gradient color through Espresso Mac software I am using to a cool blue color.

      Reply
      • Lyn Kenny says

        20 May - 2018

        Your tutorial is fantastic. I have used the above to remove the background gradient from #front-page-1 .image section, but now all of the text in the textwidget is showing on the left, not in the center.

        How do I fix that? Thanks, Lyn

        Reply
        • Paal Joachim says

          26 May - 2018

          Hi Lyn

          In your browser right click and choose Inspect the text in the textwidget and look at the CSS. See if there is a float left or some other CSS tag that pushes the text to the left. If you happen to have an online development site then you can share the url with me and I will take a look.

          Reply
  18. kris says

    15 September - 2016

    Hi Paal,
    Thank you so much for your amazing tutorial. It has pushed me to make the best website and taught me so much. I am forever grateful. I have one question that has stumped me. I have made new pages using “creating an inner page similar to the main parallax page” I am unable to get the responsive menu to work for these pages. It works fine on the original front page and the contact page (which is just a normal page) but on the new pages i can go back to home using the logo but the menu names are not working on tablet or the three lines on mobile device. Thanks again
    Kris

    Reply
    • Paal Joachim says

      17 September - 2016

      Hi Kris

      Thank you Kris! Your very welcome!
      I opened up my development site and went to one of the inner pages. I resized the web browser to a smaller size and noticed the mobile hamburger icon show up.
      I just updated my github repository: https://github.com/paaljoachim/custom-altitude-pro
      You can compare the files I have with your own and see if something shows up that might cause the problem you have.

      Have a great day!

      Reply
      • kris says

        20 September - 2016

        Thank you Paal, I will check through. I’m sure it will take me a while to go through but I will let you know what I find.
        Thanks again
        Kris

        Reply
        • Paal Joachim says

          20 September - 2016

          Hey Kris

          Since I e-mailed you about this I will also share some of the words from the last e-mail you sent:
          In regards to a responsive menu.

          “….. on iPad the names do not work either. All the pages have been made as template_about-page etc. using your instructions creating an inner page….
          The front page works perfectly but if I am in any other page i.e. About/Sunday/give the hamburger icon doesn’t work (or menu names for iPad)”

          It sounds weird to me.
          Here are some places you can post about this:
          The StudioPress forums: https://www.studiopress.com/forums/The Genesis Facebook group: https://www.facebook.com/groups/genesiswp/
          The Genesis slack channel: https://genesiswp.slack.com/messages/css/

          I would probably post multiple places and see what feedback shows up.

          Have a great evening.

          Paal Joachim

          ps
          Let us know what kinds of feedback you received.

          Reply
  19. Veronica says

    31 May - 2016

    Hello Paal,
    I followed the steps to “Adjusting the Customize section so we can add an image to each front page section.”, but now none of the pics is showing. I’m not a nerd and do not really know how to go on. I double checked every step and everything is alright 🙁
    It’s a new website.
    Could you help us?
    Veronica

    Reply
    • Paal Joachim says

      2 June - 2016

      Things might have changed since I made the tutorial.
      I will look into it.

      Reply
  20. jeanne says

    3 May - 2016

    Hey Paal. To bad you did’nt continue the tutorial.
    Anyway, With ajusting the images to each frontpage section the textbox widget moved up and is now in the same line as the header and menu. All the other text has also moved up a bit. Do you know what happend and what I can do to change this?

    Thank you very much

    happy greetings
    Jeanne

    Reply
    • Paal Joachim says

      3 May - 2016

      Hei Jeanne

      Check the CSS of the various sections. Right clicking the area you are looking into and select Inspect Element. Try out some adjustments and see how it goes.

      Paal Joachim

      Reply
  21. Alice Williams says

    27 March - 2016

    Hi Paal,
    I am using wordpress 4.4.2. On my top menu bar I have an menu item called overview and under overview I have the sub menu of about me and appointments that I want to link to other pages on the front page. So I used code you above #front-page-2,#front-page-3 etc. The links work as long as I am on the front page. When I am on another page in the website the links don’t work can you help me fix this?

    (right now I am working in a staging area so you can actually see the website live .)

    Reply
    • Paal Joachim says

      30 March - 2016

      Hi Alice

      #front-page-2 etc on the home page assumes the structure looks like:
      http://www.domainname.com/#front-page-2 – as #front-page-2 are the same as html anchors.
      When you go to another page it can look something like: https://domainname.com/products.
      Clicking a link that says #front-page-2 nothing will happen because you will also need to tell it to go to the home page and then go to the front page 2 section. Here you will need to add an absolute link meaning the full url link structure.
      In your menu adjust the link to have the full link structure. When you have a link that says https://domainname.com/#front-page-2. You can be on your home page or any other page and it should then go to the home page and then the front page section.

      Reply

Leave a Reply to kris Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2021 · By Easy Web Design Tutorials · Built on the Genesis Framework · WordPress · Log in · ⇪

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.