Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

Changing CSS for a single page?


uberphotography
Go to solution Solved by krystynheide,

Question

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

Edited by danieljs
retag
Link to post
  • Answers 11
  • Created
  • Last Reply

Top Posters For This Question

11 answers to this question

Recommended Posts

  • 4

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.

Link to post
  • 1

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;
}

Edited by Hugh Roberts
Link to post
  • 0

A few follow up questions:

  1. Any thoughts on suppressing page titles on a select number of page?
  2. 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!

Edited by seangabriel
Link to post
  • 0

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

Link to post
  • 0

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

Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...