How do i change the entire header to a specific style (white bold) in one single page?

Site URL: https://www.patrickpilato.ca/

I have 1-3 pages that need a separate header style from the rest of the site. Does anyone know the code to change the entire header on one specific page to a style? I need this specific page to have a white bold header style, but not change the rest of the website.

Thanks!

Password: 123

Hi,

For the Our Process page it would be either:

#collection-602c129a72b8683243973570 {
header#header {
background-color: white!important}

.header-actions .icon--fill svg {
fill: black!important}

#header a {
color: black;
font-weight: 400}

.header-actions .btn {
background-color: black!important;
color: white!important}

.burger-inner>div {
background-color: black!important;
height: 2px !important;}
}

Or if that doesn't work then:

#collection-602c129a72b8683243973570 header#header {
background-color: white!important}

#collection-602c129a72b8683243973570 .header-actions .icon--fill svg {
fill: black!important}

#collection-602c129a72b8683243973570 #header a {
color: black;
font-weight: 400}

#collection-602c129a72b8683243973570 .header-actions .btn {
background-color: black!important;
color: white!important}

#collection-602c129a72b8683243973570 .burger-inner>div {
background-color: black!important;
height: 2px !important;}
}

Or indeed there may be a way to change the theme but if so nor sure what it is I'm afraid, still new to CSS!

P-Lato has already installed jQuery. If you have not add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Add the following to Page Settings > Advanced > Page Header Code Injection for the page.

<script>

  $( ( ) => {
  
    /*
    
      change page header theme class
      
      SS Version : 7.1
      
      Notes      : this effect is not active in SS Preview to test it use
                   private browsing < https://bit.ly/3f6lhq2 >
                   
      */
      
    const colorTheme = 'White Bold';
    
    // do not change anything below, there be the borg here
    
    if ( window.frameElement !== null ) return;
    
    const classToColorThemes = {
    
      'black-bold'      : [ 'Darkest 2', 'Black Bold' ],
      'black'           : [ 'Darkest 1', 'Black Minimal' ],
      'bright-inverse'  : [ 'Bright 1', 'Accent Bold' ],
      'bright'          : [ 'Bright 2', 'Accent Minimal' ],
      'dark-bold'       : [ 'Dark 2', 'Dark Bold' ],
      'dark'            : [ 'Dark 1', 'Dark Minimal' ],
      'light-bold'      : [ 'Light 2', 'Light Bold' ],
      'light'           : [ 'Light 1', 'Light Minimal' ],
      'white-bold'      : [ 'Lightest 2', 'White Bold' ],
      'white'           : [ 'Lightest 1', 'White Minimal' ]
      
      }
      
    const colorThemeToClass = { };
    
    const headerSelector = '#header';
    
    // populate colorThemeToClass
    
    $.each ( classToColorThemes, function ( key, obj ) {
    
      $.each ( obj, function ( i, v ) {
      
        colorThemeToClass [ v ] = key;
        
        } );
        
      } );
      
    const classes = Object.keys ( classToColorThemes );
    
    const clss = colorThemeToClass [ colorTheme ];
    
    const i = classes
    
      .indexOf ( clss );
      
    classes.splice ( i, 1 );
    
    $( headerSelector )
    
      .attr ( 'data-header-theme', clss )
      
      .addClass ( clss )
      
      .removeClass ( classes.join ( ' ' ) );
      
    $( headerSelector + ', .header-menu' ).each ( function ( ) {
    
      const attribute = 'data-current-styles';
      
      const $this = $( this );
      
      let j = $this.attr ( attribute );
      
      j = JSON.parse ( j );
      
      j.sectionTheme = clss;
      
      j = JSON.stringify ( j, null, 1 );
      
      $this.attr ( attribute, j );
      
      } );
      
    } );
    
  </script>

This is for v7.1

Let us know how it goes.

On 4/4/2021 at 4:07 PM, ErikaT said:

Hi,

For the Our Process page it would be either:

#collection-602c129a72b8683243973570 {
header#header {
background-color: white!important}

.header-actions .icon--fill svg {
fill: black!important}

#header a {
color: black;
font-weight: 400}

.header-actions .btn {
background-color: black!important;
color: white!important}

.burger-inner>div {
background-color: black!important;
height: 2px !important;}
}

Or if that doesn't work then:

#collection-602c129a72b8683243973570 header#header {
background-color: white!important}

#collection-602c129a72b8683243973570 .header-actions .icon--fill svg {
fill: black!important}

#collection-602c129a72b8683243973570 #header a {
color: black;
font-weight: 400}

#collection-602c129a72b8683243973570 .header-actions .btn {
background-color: black!important;
color: white!important}

#collection-602c129a72b8683243973570 .burger-inner>div {
background-color: black!important;
height: 2px !important;}
}

Or indeed there may be a way to change the theme but if so nor sure what it is I'm afraid, still new to CSS!

This worked great thank you so much!

On 4/4/2021 at 6:00 PM, creedon said:

P-Lato has already installed jQuery. If you have not add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Add the following to Page Settings > Advanced > Page Header Code Injection for the page.

<script>

  $( ( ) => {
  
    /*
    
      change page header theme class
      
      SS Version : 7.1
      
      Notes      : this effect is not active in SS Preview to test it use
                   private browsing < https://bit.ly/3f6lhq2 >
                   
      */
      
    const colorTheme = 'White Bold';
    
    // do not change anything below, there be the borg here
    
    if ( window.frameElement !== null ) return;
    
    const classToColorThemes = {
    
      'black-bold'      : [ 'Darkest 2', 'Black Bold' ],
      'black'           : [ 'Darkest 1', 'Black Minimal' ],
      'bright-inverse'  : [ 'Bright 1', 'Accent Bold' ],
      'bright'          : [ 'Bright 2', 'Accent Minimal' ],
      'dark-bold'       : [ 'Dark 2', 'Dark Bold' ],
      'dark'            : [ 'Dark 1', 'Dark Minimal' ],
      'light-bold'      : [ 'Light 2', 'Light Bold' ],
      'light'           : [ 'Light 1', 'Light Minimal' ],
      'white-bold'      : [ 'Lightest 2', 'White Bold' ],
      'white'           : [ 'Lightest 1', 'White Minimal' ]
      
      }
      
    const colorThemeToClass = { };
    
    const headerSelector = '#header';
    
    // populate colorThemeToClass
    
    $.each ( classToColorThemes, function ( key, obj ) {
    
      $.each ( obj, function ( i, v ) {
      
        colorThemeToClass [ v ] = key;
        
        } );
        
      } );
      
    const classes = Object.keys ( classToColorThemes );
    
    const clss = colorThemeToClass [ colorTheme ];
    
    const i = classes
    
      .indexOf ( clss );
      
    classes.splice ( i, 1 );
    
    $( headerSelector )
    
      .attr ( 'data-header-theme', clss )
      
      .addClass ( clss )
      
      .removeClass ( classes.join ( ' ' ) );
      
    $( headerSelector + ', .header-menu' ).each ( function ( ) {
    
      const attribute = 'data-current-styles';
      
      const $this = $( this );
      
      let j = $this.attr ( attribute );
      
      j = JSON.parse ( j );
      
      j.sectionTheme = clss;
      
      j = JSON.stringify ( j, null, 1 );
      
      $this.attr ( attribute, j );
      
      } );
      
    } );
    
  </script>

This is for v7.1

Let us know how it goes.

Thanks for your help Creedon I appreciate it!

@P-Lato some feedback on your site, just comment here if you need to fix any problems.

Site URL – https://www.patrickpilato.ca/

1. (Mobile-Homepage-01) Want to move down text a bit? Or add darken overlay?

2. (Mobile-Homepage-02) Change to 2 icons/row?

3. (Tablet-Homepage-01) White bar on right of screen

4. (Tablet-Homepage-02) Increase text width?

5. (All devices) Browser tab name still shows “Team 1”

6. (Tablet-Team) Increase section width?

7. (Mobile-Team) Move image on top of text?

8. (Tablet-Process) Huge spacing here + browser still shows “Services 3”

9. (Tablet-Solutions) Huge white spacing + browser still shows “Services 3”

10. (Tablet-Tools-01) 5 icons is not align center vertical in section + want to center below section content?

11. (Tablet-Tools-02) Huge top/bottom padding

12. (Mobile-Tools) Want to center icon + title?

19 minutes ago, tuanphan said:

@P-Lato some feedback on your site, just comment here if you need to fix any problems.

Site URL – https://www.patrickpilato.ca/

1. (Mobile-Homepage-01) Want to move down text a bit? Or add darken overlay?

2. (Mobile-Homepage-02) Change to 2 icons/row?

3. (Tablet-Homepage-01) White bar on right of screen

4. (Tablet-Homepage-02) Increase text width?

5. (All devices) Browser tab name still shows “Team 1”

6. (Tablet-Team) Increase section width?

7. (Mobile-Team) Move image on top of text?

8. (Tablet-Process) Huge spacing here + browser still shows “Services 3”

9. (Tablet-Solutions) Huge white spacing + browser still shows “Services 3”

10. (Tablet-Tools-01) 5 icons is not align center vertical in section + want to center below section content?

11. (Tablet-Tools-02) Huge top/bottom padding

12. (Mobile-Tools) Want to center icon + title?

Wow I appreciate you like crazy Tuanphan, you're a life saver!!! You better be getting paid well haha.

1. (Mobile-Homepage-01)

- Could we actually move the text and button up just a little bit for mobile view?

2. (Mobile-Homepage)

- I am ok with the single column, but could you please help me remove the caption/image hover effects on mobile? It would be great if the images did not rise when you hover on them, and that the captions showed at all times.

3. (Tablet-Homepage-01) White bar on right of screen

- Yes, can we please get rid of that white bar on the side? I do not have a tablet so I did not notice that.... it is fine on a cellphone.

4. (Tablet-Homepage-02) Increase text width?

- Yes that would be great to increase text width to the entire page.

5. (All devices) Browser tab name still shows “Team 1”

- I just fixed this thank you!

6. (Tablet-Team) Increase section width?

- Yes please, increase section width!

7. (Mobile-Team) Move image on top of text?

- Yes move image to the top, good idea!

8. (Tablet-Process) Huge spacing here + browser still shows “Services 3”

- I just fixed this.

9. (Tablet-Solutions) Huge white spacing + browser still shows “Services 3”

- I just fixed this

10. (Tablet-Tools-01) 5 icons is not align center vertical in section + want to center below section content?

- Yes can we please align center the entire page. 

- The sections below the top icons, like "savings calculators" can we widen them as well to full width?

- It also seems as if the icons on the right side in the "savings calculators" sections etc are not showing up?

11. (Tablet-Tools-02) Huge top/bottom padding

- I just fixed this

12. (Mobile-Tools) Want to center icon + title?

- Yes please, center icons and title.

13. In process - "trust the process learn more" + "key cornerstones learn more" + "Priority Pyramid Learn more" pages, can you please help me shrink the images and text blocks so that those pages stay in the same format on mobile as they do on desktop mode?

- I included images of these sections on mobile 

Thanks again Tuanphan!!!

On 4/12/2021 at 10:21 PM, P-Lato said:

Wow I appreciate you like crazy Tuanphan, you're a life saver!!! You better be getting paid well haha.

1. (Mobile-Homepage-01)

- Could we actually move the text and button up just a little bit for mobile view?

2. (Mobile-Homepage)

- I am ok with the single column, but could you please help me remove the caption/image hover effects on mobile? It would be great if the images did not rise when you hover on them, and that the captions showed at all times.

3. (Tablet-Homepage-01) White bar on right of screen

- Yes, can we please get rid of that white bar on the side? I do not have a tablet so I did not notice that.... it is fine on a cellphone.

4. (Tablet-Homepage-02) Increase text width?

- Yes that would be great to increase text width to the entire page.

5. (All devices) Browser tab name still shows “Team 1”

- I just fixed this thank you!

6. (Tablet-Team) Increase section width?

- Yes please, increase section width!

7. (Mobile-Team) Move image on top of text?

- Yes move image to the top, good idea!

8. (Tablet-Process) Huge spacing here + browser still shows “Services 3”

- I just fixed this.

9. (Tablet-Solutions) Huge white spacing + browser still shows “Services 3”

- I just fixed this

10. (Tablet-Tools-01) 5 icons is not align center vertical in section + want to center below section content?

- Yes can we please align center the entire page. 

- The sections below the top icons, like "savings calculators" can we widen them as well to full width?

- It also seems as if the icons on the right side in the "savings calculators" sections etc are not showing up?

11. (Tablet-Tools-02) Huge top/bottom padding

- I just fixed this

12. (Mobile-Tools) Want to center icon + title?

- Yes please, center icons and title.

13. In process - "trust the process learn more" + "key cornerstones learn more" + "Priority Pyramid Learn more" pages, can you please help me shrink the images and text blocks so that those pages stay in the same format on mobile as they do on desktop mode?

- I included images of these sections on mobile 

 

Thanks again Tuanphan!!!

Answerd your message.