Announcement

Collapse
No announcement yet.

Creating a home page, hiding breadcrumbs on it

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Creating a home page, hiding breadcrumbs on it

    OK, so I created a new page, a "home" page. I would like this to not have breadcrumbs, as they make no sense here in the context of what I will be doing. Is there any way, css or whatever, to hide the breadcrumbs only on this new page?

  • #2
    Originally posted by StephenKay View Post
    OK, so I created a new page, a "home" page. I would like this to not have breadcrumbs, as they make no sense here in the context of what I will be doing. Is there any way, css or whatever, to hide the breadcrumbs only on this new page?
    Ok I did some playing around and I think I've found something that works. Bit fiddly but it works, as far as I can tell.

    Firstly on your custom page you need to find the unique pageid.
    I did this by right clicking in the top left corner of the custom page, to the left of the site logo but below the site builder bar, then select Inspect Element.
    You may have to move up or down the code a bit but you're looking for a line like this:
    Code:
    <body id="vb-page-body" class="l-desktop page197 vb-page view-mode" itemscope itemtype="http://schema.org/WebPage" data-usergroupid="6" data-styleid="1">
    See that 'page197' in the code? I've highlighted it in red.
    That's my custom page id for my custom events page here: https://www.talknewsuk.com/events (you'll notice the breadcrumb doesn't show there, but does everywhere else).
    You want the same id for your custom page. Let's call it pageXXX for simplicity, just replace the XXXin the code below with your id.
    Then in Site Builder > Styles > Custom CSS, paste the code below, replacing the XXX with the id as above:
    Code:
    /* Remove Breadcrumb on specific page */
    .pageXXX #breadcrumbs {
      display: none;
    }
    .pageXXX .page-title-widget .module-title, .pageXXX .page-title-widget .module-title h1 {
      margin-top: 32px;
    }
    /* End Remove Breadcrumb on specific page */
    I haven't extensively tested this but it seems to work and seems not to break anything else.
    I would welcome the views of our resident vBulletin css expert Glenn Vergara as to whether there is an easier / better way to do this.
    Last edited by Mark.B; Sat 18th Nov '17, 11:10am.
    MARK.B | vBULLETIN SUPPORT

    TalkNewsUK - My vBulletin 5.4.1 Demo - FEATURING "ROUTE BY NODE"!
    AdminAmmo - My Cloud Demo

    Comment


    • Glenn Vergara
      Glenn Vergara commented
      Editing a comment
      That's the only way to do it at this time.

      Btw, you've left .page197 in your second css rule. The OP might forget to replace it.

    • Mark.B
      Mark.B commented
      Editing a comment
      Oops...corrected...

  • #3
    Excellent, thank! Got it working. The second part is to move your specific modules down; I'm not using the page title module, I have a static html and an events module. It seems that I can do this:

    Code:
    /* Remove Breadcrumb on home page */
    .pageXXX #breadcrumbs {
      display: none;
    }
    .pageXXX #widget_158, .pageXXX #widget_161 {
      margin-top: 32px;
    }
    /* end remove breadcrumbs */
    I'm assuming that each widget on a page has a unique ID?

    Comment


    • #4
      Originally posted by StephenKay View Post
      Excellent, thank! Got it working. The second part is to move your specific modules down; I'm not using the page title module, I have a static html and an events module. It seems that I can do this:

      Code:
      /* Remove Breadcrumb on home page */
      .pageXXX #breadcrumbs {
      display: none;
      }
      .pageXXX #widget_158, .pageXXX #widget_161 {
      margin-top: 32px;
      }
      /* end remove breadcrumbs */
      I'm assuming that each widget on a page has a unique ID?
      Yes each widget does have its own ID and yes the second part of my code was to equalise the gap between the header and the page title, if you don't use the page titles then you can alter or even remove that bit.
      MARK.B | vBULLETIN SUPPORT

      TalkNewsUK - My vBulletin 5.4.1 Demo - FEATURING "ROUTE BY NODE"!
      AdminAmmo - My Cloud Demo

      Comment


      • #5
        For the widgets, you don't have to add .pageXXX since the widget IDs are unique and the same widget id will never appear in other pages.

        AutoLinker-vB5+vBCloud | Topic Starter Ribbon | Blur Replies for Guests | NavMenu Dropdown-vB5+vBCloud | TimedSticky | Events Module | Moderator List | Drag/Drop Upload

        Comment


        • StephenKay
          StephenKay commented
          Editing a comment
          Good to know, thanks!
      Working...
      X