Jump to content

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

Recommended Posts

Posted

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!

 

1970135777_ScreenShot2021-04-04at11_34_38AM.thumb.png.b6277b8330ce2fc3511e116de1fc6ddd.png

Password: 123

  • Replies 7
  • Views 2.2k
  • Created
  • Last Reply
Posted

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!

Posted

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Posted
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!

Posted
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!

Posted

@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?

mobile-homepage-01-min.png

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

mobile-homepage-02-min.png

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

tablet-homepage-01-min-3.png

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

tablet-homepage-02-min-3.png

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

all-devices-min-1.png

6. (Tablet-Team) Increase section width?

tablet-team-min.png

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

mobile-team-min.png

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

tablet-process-min.png

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

tablet-solutions-min.png

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

tablet-tools-01-min.png

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

tablet-tools-02-min.png

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

mobile-tools-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted
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?

mobile-homepage-01-min.png

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

mobile-homepage-02-min.png

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

tablet-homepage-01-min-3.png

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

tablet-homepage-02-min-3.png

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

all-devices-min-1.png

6. (Tablet-Team) Increase section width?

tablet-team-min.png

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

mobile-team-min.png

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

tablet-process-min.png

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

tablet-solutions-min.png

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

tablet-tools-01-min.png

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

tablet-tools-02-min.png

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

mobile-tools-min.png

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!!!

IMG_E3F4BDE0B206-1.jpeg

IMG_9517 2.PNG

IMG_9516 2.PNG

Posted
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!!!

IMG_E3F4BDE0B206-1.jpeg

IMG_9517 2.PNG

IMG_9516 2.PNG

Answerd your message.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.