Reordering Front Page sections on Business Identy

• 

  marcelopsouza · Member · May 1, 2017 at 11:53 pm

  • Copy link
  • Add topic to favorites

  Hi, I was wondering if it is possible to reorder the sections (featured, team, latest updates) on Business Identity.

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · May 4, 2017 at 5:21 am

  • Copy link

  Hi there, although this can be done with some advanced CSS, due to the way the HTML is structured in Business Identity, this would be a pretty big task, and it comes with some drawbacks. Although most browsers have supported this advanced CSS for a few years, in the case of Internet Explorer, only version 10 and later support it, so anyone on 9 or earlier would not see the change in order.

  Basically we would have to set order for all the different elements in the home page, not just the sections you wish to reorder, and due to the newness of the CSS, each CSS rule would require a number of browser/browser version declarations to cover as many versions as possible.

• 

  marcelopsouza · Member · May 5, 2017 at 9:47 pm

  • Copy link

  I would not mind if some older versions of Explorer would see the site as it is now, and everyone else could see a different ordering. I wonder if this advanced CSS for reordering has already been done for someone else, so we could just use/adapt it.

• 

  dcoleonline · Staff · May 8, 2017 at 10:49 pm

  • Copy link

  Hi there,

  I didn’t see a previous request for this elsewhere, but we can look into it for you.

  What order did you want to use for the sections?

• 

  marcelopsouza · Member · May 9, 2017 at 9:06 pm

  • Copy link

  Thank you.

  This is the request I got from the Church for which I made the website:

  – Please move the “Our Team” bar down to the bottom, underneath capital campaign (if it looks bad, then above the capital campaign is fine too)

  – Please move the blog section (the “Latest Updates”) all the way to the top so people see the most relevant information first. The Paschal message (great touch, especially including my signature!) can go underneath

  So I guess this translates to the following order under the menu:

  1. Latest updates
  2. Front page, currently titled “May Pastoral Message” (Business Identity’s “features and services”)
  3. Spiritual Sayings (Business Identity’s “Testimonials”)
  4. Capital Campaign (Business Identity’s “Special Announcements and Offers”)
  5. Our Team

  Thank you again!

• 

  dcoleonline · Staff · May 10, 2017 at 11:50 pm

  • Copy link

  Add this to the My Site > Customize > CSS area of your site, and it should do the trick:

  #page {
      display: flex;
      -webkit-flex-direction: column;
      -moz-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
  }
  #masthead {
      order: 1;
      -ms-flex-order: 1;
      -webkit-order: 1;
  }
  #hero {
      order: 2;
      -ms-flex-order: 2;
      -webkit-order: 2;
  }
  #front-page-blog {
      order: 3;
      -ms-flex-order: 3;
      -webkit-order: 3;
  }
  .features {
      order: 4;
      -ms-flex-order: 4;
      -webkit-order: 4;
  }
  #testimonials {
      order: 5;
      -ms-flex-order: 5;
      -webkit-order: 5;
  }
  .special-offer {
      order: 6;
      -ms-flex-order: 6;
      -webkit-order: 6;
  }
  #team {
      order: 7;
      -ms-flex-order: 7;
      -webkit-order: 7;
  }
  .flourish {
      order: 8;
      -ms-flex-order: 8;
      -webkit-order: 8;
  }
  #tertiary {
      order: 9;
      -ms-flex-order: 9;
      -webkit-order: 9;
  }
  #colophon {
      order: 10;
      -ms-flex-order: 10;
      -webkit-order: 10;
  }

  Let us know if you run into any issues.

• 

  marcelopsouza · Member · May 11, 2017 at 12:57 am

  • Copy link

  That worked perfectly, thank you so much!!

• 

  dcoleonline · Staff · May 11, 2017 at 1:36 pm

  • Copy link

  Glad we could help!

• 

  marcelopsouza · Member · May 19, 2017 at 8:47 pm

  • Copy link

  Sorry, I just noticed a problem.

  In all pages that not the front page, now, the menu has moved to the bottom. Can we fix this?

• 

  thesacredpath · Member · May 19, 2017 at 11:10 pm

  • Copy link

  Hi, let’s add the “home” CSS class before each of the CSS selectors used to reorder things on your main page.

  .home #page
  .home #masthead
  .home #hero
  
  etc.

• 

  marcelopsouza · Member · May 19, 2017 at 11:23 pm

  • Copy link

  That worker perfectly! Thank you!

• 

  thesacredpath · Member · May 20, 2017 at 12:16 am

  • Copy link

  You are welcome.