uberphotography Posted February 25, 2013 Posted February 25, 2013 I created a splash page (www.uberphotography.com.au) and since this page links to several different websites I don't want to have the site navigation visible on this page.I have been able to use the CSS editor to remove the navigation using: #main-navigation { display: none; } #mobile-navigation { display: none; } However this removes the navigation from the whole site which I obviously don't want. So when I go to http://uberphotography.com.au/home I still want to be able to see my navigation so I can move around the site. So question is how do I apply this CSS change to only one page?? Thanks!Chris
krystynheide Posted February 26, 2013 Posted February 26, 2013 Every page has a unique ID ... <body id="collection-5084754b0f4598aa96c7f" ... so you simply need to put that ID in front of your CSS. #collection-5084754b0f4598aa96c7f #main-navigation { display: none; } #collection-5084754b0f4598aa96c7f #mobile-navigation { display: none; } Hope this helps! I'm Krystyn Heide, a designer and developer living in New York City.
Hugh Roberts Posted February 26, 2013 Posted February 26, 2013 Here is what I did for KingdomJourneys.org Good luck. .homepage #content { width: 1000px } .homepage #logo, .homepage #footer, .homepage #wrapper, .homepage #bannerImage { display: none } .homepage { background: url('URL') no-repeat fixed center top #000; width: 100%; height: 100%; position: fixed; top: 0px; left: 0; z-index: -1; } .stretch { height: 100%; width: 100%; } .homepage #topNav { background-color: #000 ! important; } .homepage #topNav a { color: #fff ! important; } .homepage #header { background-color: #000 ! important; } .homepage #mobileNav { background-color: #000 ! important; } .homepage #mobileMenuLink { background-color: #000 !important; }
uberphotography Posted February 26, 2013 Author Posted February 26, 2013 Thanks you squaregirl! that worked perfectly and I learned something new :-)
uberphotography Posted February 26, 2013 Author Posted February 26, 2013 Hi Hugh,Thanks so much for taking the time to answer. To be honest I don't understand the code and how it solves the issue.I need to spend sometime learning more about CSS first! Thanks,Chris
seangabriel Posted June 30, 2014 Posted June 30, 2014 A few follow up questions: Any thoughts on suppressing page titles on a select number of page? Are we inserting this code into the Page Header Code Injection box at the page level, or in the Custom CSS Editor? I’ve tried dropping this code into both places, but no luck so far, using Adirondack template, trying to suppress page titles on all pages except gallery pages. #collection-523d4268e4b05da141071341 #page-title { display: none } Thank you!
Guest Posted February 12, 2015 Posted February 12, 2015 Hi @krystynheide , I'm trying to apply this code with custom css to only my shop page with no luck. .content-inner.has-content { padding: 100px 0%; } .content-inner { padding: 0; } .content-inner { background-color: #fff; max-width: 100%; margin: 20px; padding: 20px; } My page id is:collection-54a7b93ce4b04f1bf4c9fbeb I tried to add it to header code injection but then it did also apply to the individual product pages, which i don't want haha. I've tried for hours now to get this to work..Hope you could help me out :) Thanks,Pontus
benjamin1570047927 Posted February 12, 2015 Posted February 12, 2015 You're better off just asking a new question instead of waking the dead people.
Guest Posted February 12, 2015 Posted February 12, 2015 haha you're right @benjamin.. i'll open a new one next time. strange i can see the code you wrote in my email notification but not here? anyhow it still does not work with the code you gave me: collection-54a7b93ce4b04f1bf4c9fbeb .content-inner.has-content { padding: 100px 0%; } .content-inner { padding: 0; } .content-inner { background-color: #fff; max-width: 100%; margin: 20px; padding: 20px; } It still applies to all pages.. thanks
benjamin1570047927 Posted February 12, 2015 Posted February 12, 2015 Can't put code into comments without some of it getting lost
munocreative Posted May 11, 2015 Posted May 11, 2015 If you're having a hard time finding the ID, you can instead change the CSS on a single page using code injection or a Markdown block. We wrote a detailed tutorial showing you how, should be pretty easy! Using CSS on Individual Pages | Squarespace 7 Free Squarespace tips, tricks and customization tutorials at www.muno.space
curtis594 Posted September 2, 2016 Posted September 2, 2016 Noo the link to the page you posted "Using CSS on Individual Pages" does not work. Can you re-link?
Recommended Posts
Archived
This topic is now archived and is closed to further replies.