P-Lato Posted April 4, 2021 Posted April 4, 2021 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
ErikaT Posted April 4, 2021 Posted April 4, 2021 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!
creedon Posted April 4, 2021 Posted April 4, 2021 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.
P-Lato Posted April 7, 2021 Author Posted April 7, 2021 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!
P-Lato Posted April 7, 2021 Author Posted April 7, 2021 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!
tuanphan Posted April 12, 2021 Posted April 12, 2021 @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? 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!)
P-Lato Posted April 12, 2021 Author Posted April 12, 2021 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!!!
tuanphan Posted April 14, 2021 Posted April 14, 2021 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. 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!)
Recommended Posts
Archived
This topic is now archived and is closed to further replies.