1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How to remove navigation header and footer on pages, start with a blank slate?

Discussion in 'Styling and Customization Questions' started by Deepmartini, Jan 2, 2012.

  1. Deepmartini

    Deepmartini Well-Known Member

    I would like to create some opt-in landing pages using Xenforo's page system but do not want the header navigation and footer to show. How can I create a page which is essentially a blank slate? I want to code in my own HTML, email opt-in form etc. Also can these pages I create be EXCLUDED from the Xenforo search box?
  2. DBA

    DBA Well-Known Member

    Look in the PAGE_CONTAINER template for <header> and <footer>. This will remove them from every page though, I'd use conditionals to only have them removed in whatever sections you want.
  3. Deepmartini

    Deepmartini Well-Known Member

    It would be great to have a mod that could do this automatically, so when you create a page you can tick off a box that says "remove header", "remove navigation", "remove footer", "remove sidebar" etc. I'm not a coder so wouldn't know where to start or even how to manually write conditionals, but what you say makes sense and it is good to know it's possible.

    Would anyone else be interested in a mod like this? Maybe someone on here will know how to do this?
  4. DBA

    DBA Well-Known Member

    **Thinking out loud here**
    If you're removing the only thing that a default page really is (header, navbar, footer), what's the purpose of using a page?

    Just go create your own (blank) HTML page.
  5. Deepmartini

    Deepmartini Well-Known Member

    Well I thought of using Wordpress or just a blank raw HTML page, but the benefit here is to keep everything in one system. Less parts to break and maintain. Plus a manual HTML page you have to manually upload, etc. I'm curious how Xenforo created their own homepage and what "system" they are using for it?
  6. DBA

    DBA Well-Known Member

    Fair enough, however I'd personally opt for continuity, keeping the look the same throughout the site.

    I haven't had the need to only show (or not show) something on a page so I'm not sure on what the conditional is for that.
  7. Deepmartini

    Deepmartini Well-Known Member

    Well, on landing pages you want to minimize the number of "exit points" on the page. The object is to capture the person's email address so you can add them to your newsletter and do follow-up marketing. The navigation and footer leaves too many exits and defeats the purpose of a landing page. The main reason to use Xenforo for this purpose is to keep it all in one system and possibly also some SEO benefits.
    Suzanne Crumbacher likes this.
  8. Deepmartini

    Deepmartini Well-Known Member

    If anyone figures out how to do this, please post it here.
  9. Brogan

    Brogan XenForo Moderator Staff Member

  10. Diana

    Diana Active Member

    Brogan, I can't understand Kier's post you linked to, it's flying way over my head (Gosh, he really is a genius isn't he).

    I have a pretty simple problem, simple for someone who knows what they're doing, impossible to figure out for someone like me who doesn't have a clue. This thread gives me hope that it's possible. The question is how.

    I'm using the page node for my landing page. I'm using it so that can I have the navbar and signin/login within the forum framework. However, I would like to either remove the forum footer and use my own html and css for it, or move/remove the following:
    1. remove "share this page"
    2. move the twitter, facebook, google buttons into the forum footer
    3. remove the style selector

    My preference is still the first, removing the forum footer and using my own.


    Can someone give me the "conditional" to accomplish either one of the two options, if that's what would do the trick? I'm guessing the code would have to include the node id so that it only applies to the landing page but I really don't know how to write that out.
  11. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

  12. Diana

    Diana Active Member

    I don't know Jake. All this just to tweak the footer?

    I feel like I'm so close to finishing the page and it almost seems like I have to do a major overhaul now.

    Can I show you what I have so far so that you can tell me if I really need to go to all that effort?
  13. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    The footer itself is a template. You could create a new style with a different footer and assign that style to the page node.
  14. Diana

    Diana Active Member

    oy vey.

    Too bad it's not as simple as removing the breadcrumbs.
  15. Diana

    Diana Active Member

    Okay, I'm rolling up my sleeves trying to get this done. (I'm so confused).

    Let me get a few things straight before I start.

    It seems to me customizing a whole new style just to move or remove the soc. media buttons from the landing page is a huge undertaking, especially since I already have a customized style that I'm using on the forum, and the page node was designed to match that style with html and css. The problem is that it inherits the footer from the forum and includes the social media buttons in the page content, which I believe pushes the navbar out of alignment at the top.

    I suppose one way would be to duplicate the existing style with another name and just change the footer in that style. The only problem I see with that is that when someone signs into the forum the reverse problem will exist. Now the forum will have the same footer as the landing page. This will have duplicate sets of soc. media buttons (one set in the right column the other in the footer). The whole point of this exercise is to move the soc. media buttons into the footer on the landing page. Or if possible eliminate them from the page altogether.

    I'm really having a problem wrapping my brain around this. It just seems terribly complicated and I'm really not sure it will work.
  16. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    The new style can be created as a child of your currently customized style. Then it will be identical except for further customizations that you make, such as to the footer template.

    Or yet another approach would be to use CSS to set display: none; for a specific element within that page node. There are examples given in this thread showing how you can use the body class in the beginning of the CSS selector to target elements within certain node_ids:

  17. Diana

    Diana Active Member

    After I typed the above I think I finally got a clue as to what you meant when you said "assign that style to the page node."

    That means it will only apply to the page node, leaving the forum style as is. Correct?

    Okay, I can try that. Unless you think setting the display: none; would be a simpler solution?

    I'll take a look at the now.
  18. Diana

    Diana Active Member

    How do I assign the style to the page node?
  19. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Admin CP -> Applications -> Display Node Tree -> [click the node] -> Style
  20. Diana

    Diana Active Member

    Works perfectly.

    So far so good.

    Now I just have to make the changes to the style.

    I think this will work. :)

    Jake, you are amazing!

Share This Page