opusorange 56 Posted December 3, 2013 (edited) The title and navigation color defaults to white/black, and I need to customize it. I know that custom CSS is required, and I don't know what code to enter. Any help would be appreciated! Edited October 13, 2014 by opusorange Tidy 5 rmi315, sai, chz and 2 others reacted to this Share this post Link to post
2 Llamablue1570047703 0 Posted January 2, 2014 (edited) I checked how Forte manages the changing colours on the main screen and it uses the concept of colour adjustment based on Color Weight Light and Color Weight Dark. Here’s the CSS that you can copy and paste into your site Custom CSS Editor and change the colour scheme to suit. It includes all the elements including the title (e.g. body.collection-type-index .color-weight-light #logo .logo a) and nav (e.g. body.collection-type-index .color-weight-light #topNav .main-nav li a) and all other elements that change colour depending on the background colour weight. Note: Most of these use transition: … color to change from light to dark to light etc. So you can pick and choose what items you want to change. Let me know if its too tricky for you to modify. /* color adjustment based on fullscreen image */ body.collection-type-index .color-weight-light .nav-projects .arrow-wrapper a, body.collection-type-index .color-weight-light .nav-projects .arrow-wrapper:hover a { color: #fff; } body.collection-type-index .color-weight-light .nav-projects .arrow-wrapper { background-color: #111; } body.collection-type-index .color-weight-light #logo .logo a, body.collection-type-index .color-weight-light .logo-subtitle, body.collection-type-index .color-weight-light .ctrl-button.menu a, body.collection-type-index .color-weight-light #sqs-social a { color: #111; } body.collection-type-index .color-weight-light #topNav .main-nav li a { color: #111; } body.collection-type-index .color-weight-light #topNav .main-nav li.active-link span, body.collection-type-index .color-weight-light #topNav .main-nav li a:hover span { border-bottom-color: #111; } body.collection-type-index .color-weight-light #topNav .main-nav li.index-collection.active-link span { border-bottom-color: transparent; } body.collection-type-index .color-weight-light #topNav .folder .folder-child-wrapper ul.folder-child { background-color: #111; } body.collection-type-index .color-weight-light #topNav .folder .folder-child-wrapper ul.folder-child:before { color: #111; } body.collection-type-index .color-weight-light #topNav .folder .folder-child-wrapper ul.folder-child li:hover span, body.collection-type-index .color-weight-light #topNav .folder .folder-child-wrapper ul.folder-child li.active-link span { border-bottom-color: #fff; } body.collection-type-index .color-weight-light #topNav .folder .folder-child-wrapper ul.folder-child li a { color: #fff; } body.collection-type-index .color-weight-dark .nav-projects .arrow-wrapper a, body.collection-type-index .color-weight-dark .nav-projects .arrow-wrapper:hover a { color: #111; } body.collection-type-index .color-weight-dark .nav-projects .arrow-wrapper { background-color: #fff; } body.collection-type-index .color-weight-dark #logo .logo a, body.collection-type-index .color-weight-dark .logo-subtitle, body.collection-type-index .color-weight-dark .ctrl-button.menu a, body.collection-type-index .color-weight-dark #sqs-social a { color: #fff; } body.collection-type-index .color-weight-dark #topNav .main-nav li a { color: #fff; } body.collection-type-index .color-weight-dark #topNav .main-nav li.active-link span, body.collection-type-index .color-weight-dark #topNav .main-nav li a:hover span { border-bottom-color: #fff; } body.collection-type-index .color-weight-dark #topNav .main-nav li.index-collection.active-link span { border-bottom-color: transparent; } body.collection-type-index .color-weight-dark #topNav .folder .folder-child-wrapper ul.folder-child { background-color: #fff; } body.collection-type-index .color-weight-dark #topNav .folder .folder-child-wrapper ul.folder-child:before { color: #fff; } body.collection-type-index .color-weight-dark #topNav .folder .folder-child-wrapper ul.folder-child li:hover span, body.collection-type-index .color-weight-dark #topNav .folder .folder-child-wrapper ul.folder-child li.active-link span { border-color: #111; } body.collection-type-index .color-weight-dark #topNav .folder .folder-child-wrapper ul.folder-child li a { color: #111; } Edited January 2, 2014 by Llamablue Llamablue provides web design, web hosting, online stores and marketing strategies for businesses and specialises in Squarespace, Online stores and SME. Llamablue hosts customer websites in Australia - Adelaide, Melbourne, Sydney, Canberra, Brisbane, Sunshine Coast, Gold Coast and now in the USA and Europe. We are expanding rapidly and can help you wherever you are based. So let's talk. Share this post Link to post
4 Llamablue1570047703 0 Posted January 6, 2014 (edited) To create an invert effect on a dark coloured logo add this to the CSS: body.collection-type-index .color-weight-dark #logo img { -webkit-filter: invert(100%); filter: invert(100%); } Filters are recent CSS features so this will work now in the later versions of Safari, Google Chrome and IE9+. Firefox will eventually support filters it seems. Edited January 6, 2014 by Llamablue Llamablue provides web design, web hosting, online stores and marketing strategies for businesses and specialises in Squarespace, Online stores and SME. Llamablue hosts customer websites in Australia - Adelaide, Melbourne, Sydney, Canberra, Brisbane, Sunshine Coast, Gold Coast and now in the USA and Europe. We are expanding rapidly and can help you wherever you are based. So let's talk. Share this post Link to post
1 sundayfundayfilmss 0 Posted January 5, 2014 Hi Is there a way to change a logo that I uploaded so that it also transitions from black to white like the navigation title? Right now I uploaded my logo but it's black and disappears on someone of the black backgrounds and I'd like it to switch like the rest of the text on the home page. Any help would be wonderful. thanks! Share this post Link to post
1 mrlawler 0 Posted June 18, 2014 <style> .logo-image img { display:none; } .logo-image a { width: 256px; height: 100px; background-image: url(http://static.squarespace.com/static/xxx/logo-black.png) } body.collection-type-index .color-weight-dark .logo-image a { background-image: url(http://static.squarespace.com/static/xxx/logo-white.png) } </style> The code will hide your default logo image It sets the background of the logo image a tag to be the dark logo by default It will change the background image to the white logo only when the page is displaying a body.collection-type-index and .color-weight-dark. PS. I just added an unlinked page with my 2 logo versions so SquareSpace is hosting the logos. Then I viewed the page source to find where the images are located to use in the above css. Try it out! Enjoy. Share this post Link to post
1 samo1570047825 2 Posted August 21, 2014 @llamablue Thank you so much for this!! It worked like a charm!! Share this post Link to post
0 azium 0 Posted January 1, 2014 (edited) In the code injection page on the header, <style> span{color:#d6004b;}</style> However I would like to see a better solution. When I used the classes of the wrapping divs nothing changed. Edited January 1, 2014 by azium Share this post Link to post
0 jsn_bcs 63 Posted August 27, 2014 This is wonderful. Any idea on home to change elements that aren't on an "index" page (i.e. Gallery, Blog, etc). Website here:https://electric-park-2z05.squarespace.com/ The home page looks good, but when you click "Film" in the navigation, you go here: https://electric-park-2z05.squarespace.com/film/ Notice the navigation disappears. I need to trick the font to go to #FFFFFF (white). Many thanks. Peace on earth! Ha. J Share this post Link to post
0 kikkoman1 0 Posted September 9, 2014 Im having the same problem as jsn_bcs because I don't have an index page. Llamablue's answer works only on the index - but not on other page types. Is there a way to change the title / tagline / nav on pages other than index? Here's my page:https://george-nicholas.squarespace.com Share this post Link to post
0 goldntriangles 0 Posted October 13, 2014 (edited) I would like to my navigation bar so the links (including the underlining when that link is hovered) is black on all my pages except my homepage. Right now everything is white, and I figured out how to turn the links to black on these other pages by using: <style> span{color: black;} </style> But then the black text navigation is not showing up on mobile. Do you have any idea what I should be using to get this to work? Thanks! Edited October 13, 2014 by goldntriangles Share this post Link to post
0 Edvard 0 Posted September 15, 2015 @Llamablue thanks so much for this. I'm having some trouble adapting the code to achieve the following: Setting the colour of logo, navigation and socials on every page to #d4cdd0 and to #d8657a when hovered over... Any help would be greatly appreciated! Thanks Share this post Link to post
0 the_pwner 0 Posted May 30, 2016 (edited) Change Site Title Color: #logo .logo-text a { color: #fff; } Change Navigation Links Color: #topNav .main-nav li a { color: #fff; } Edited May 30, 2016 by the_pwner Initial Revision Share this post Link to post
0 day1dan 0 Posted June 14, 2016 I was having trouble getting the three bar "hamburger" icon to switch with the logo and other header text. After using the inspect feature in Google Chrome I realized that ".ctrl-button.menu" should actually be "ctrl-button menu" with no "." in the color-weight-light function. In other words: DIDN'T WORK WITH MOBILE STYLE HAMBURGER body.collection-type-index .color-weight-dark #logo .logo a, body.collection-type-index .color-weight-dark .logo-subtitle, body.collection-type-index .color-weight-dark .ctrl-button.menu a, body.collection-type-index .color-weight-dark #sqs-social a { -webkit-filter: invert(0%); } body.collection-type-index .color-weight-light #logo .logo a, body.collection-type-index .color-weight-light .logo-subtitle, body.collection-type-index .color-weight-light .ctrl-button.menu a, body.collection-type-index .color-weight-light #sqs-social a { -webkit-filter: invert(100%);} DID WORK WITH MOBILE STYLE HAMBURGER body.collection-type-index .color-weight-dark #logo .logo a, body.collection-type-index .color-weight-dark .logo-subtitle, body.collection-type-index .color-weight-dark .ctrl-button menu a, body.collection-type-index .color-weight-dark #sqs-social a { -webkit-filter: invert(0%); } body.collection-type-index .color-weight-light #logo .logo a, body.collection-type-index .color-weight-light .logo-subtitle, body.collection-type-index .color-weight-light .ctrl-button menu a, body.collection-type-index .color-weight-light #sqs-social a { -webkit-filter: invert(100%);} Hope it works for you too! Share this post Link to post
0 travis_harris 27 Posted March 6, 2017 (edited) @mrlawler Thanks so much, this is great and works almost perfectly, but I'm having trouble re-sizing the images to fit the container and can't seem to find a solution. Any thoughts? https://entelech-ventures.com Edited March 6, 2017 by travis_harris Initial Revision Share this post Link to post
0 bryanwestart 0 Posted May 12, 2018 I've been loosing my mind trying to change the type colors, dropdown, social icons, and underline on the navigation menu. This is great and very helpful, but it only seems to work on the home(index) page. When I leave that main home index page they all turn black again. Is there a way to make sure all these changes apply to the header throughout the site? Share this post Link to post
The title and navigation color defaults to white/black, and I need to customize it. I know that custom CSS is required, and I don't know what code to enter. Any help would be appreciated!
Edited by opusorangeTidy
Share this post
Link to post