Page Comparison

...

/* NEW HOME PAGE BANNER STYLING */

.marketing-ads {
    margin-bottom:
1.5em;
}

@media screen and (max-width: 620px) {
.marketing-ads {
  margin-bottom: 0;
}
}

.single-banner,
.double-banners,
.triple-banners,
.quad-banners {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: space-between;
  margin: 0 .7% 1.1em .7%;
}

@media screen and (max-width: 645px) {
.single-banner,
.double-banners,
.triple-banners,
.quad-banners {
  margin: .3em .1% .3em .1%;
}
}

.single-banner a {
  flex-grow: 1;
  flex-basis: 0px;
  max-width: 100%;
  margin: 0 5px 5px 5px;
}

.single-banner img {
  height: 100%;
  width: 100%;
}   

.double-banners a {
  flex-grow: 1;
  flex-basis: 375px;
  max-width: 100%;
  margin: 0 5px 5px 5px;
}

.double-banners img {
  height: 100%;
  width: 100%;
}

@media screen and (max-width: 620px) {
.double-banners a:last-child {
  margin-top: 10px;
}
}

.triple-banners a {
  flex-grow: 1;
  flex-basis: 229px;
  max-width: 100%;
  margin: 0 5px 5px 5px;
}

.triple-banners img {
  height: 100%;
  width: 100%;
}

@media screen and (max-width: 727px) {
.triple-banners a:nth-of-type(2) {
  margin-top: 0;
}
.triple-banners a:last-child {
  margin-top: 10px;
}    
}

@media screen and (max-width: 484px) {
    .triple-banners a:nth-of-type(2),
    .triple-banners a:last-child {
      margin-top: 10px;
}
}

.quad-banners a {
  flex-grow: 1;
  flex-basis: 180px;
  max-width: 100%;
  margin: 0 5px 5px 5px;
}

.quad-banners img {
  height: 100%;
  width: 100%;
}

@media screen and (max-width: 770px) {
    .quad-banners a:last-child {
      margin-top: 10px;
}
}

@media screen and (max-width: 578px) {
    .quad-banners a:nth-of-type(3),
    .quad-banners a:last-child {
      margin-top: 10px;
}
}

@media screen and (max-width: 385px) {
    .quad-banners a:nth-of-type(2),
    .quad-banners a:nth-of-type(3),
    .quad-banners a:last-child {
      margin-top: 10px;
}
}

.banner-container {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: -.1em 1% 1.1em 1%;
  width: 98%;
}

@media screen and (max-width: 620px) {
.banner-container {
    margin: .4em 1% 0 1%;
}
}

.two-thirds-first {
  order:1;
  flex-grow:2;
  flex-basis: 66%;
  margin-right: 10px;
}

.one-third-second {
  order:2;
  flex-grow:1;
  flex-basis: 33%;
}

.one-third-first {
  order:1;
  flex-grow:1;
  flex-basis: 33%;
  margin-right: 10px;
}

.two-thirds-second {
  order:2;
  flex-grow:2;
  flex-basis: 66%;
}

.even-spread {
  flex: 1 1 auto;
  margin-right: 10px;
}

.even-spread:last-child {
  margin-right: 0;
}

/* IF POSITIONING IMAGE BLOCK DIRECTLY BELOW SLIDESHOW, COMMENT IN CSS BELOW */

/*
.marketing-ads {
    margin-bottom: 1.5em;
}

@media screen and (max-width: 620px) {
.marketing-ads {
  margin-bottom: 0;
}
}
*/

...

Step-by-step Example

Brief:

...

1. Once you’re in your site files, expand your outerweb folder. You should have an o_site_blank.asp file to make a copy from, but really you can make a copy of whatever outerweb file you want, because you will be deleting the content and replacing it with new stuff. So, make a copy of a file and rename it something relevant to the content.

   

2. Go up a directory from outerweb so you’re seeing the root files of your site files, there you should find your home page - default.asp.

   

   You need to add an include statement to call for that outerweb file you just created. It will look like this (if you happened to name your new outerweb file o_home_promos.asp):
   <!-- #INCLUDE FILE="outerweb/o_home_promos.asp" -->
   You’ll see that the include statements on default.asp are laid out in the order you see them when looking at the page in browser, it starts with the header at the top and ends with the footer at the bottom. Insert your include statement where you would like it to appear. Ex: if you want it to come directly after your announcements block, you’d put the new include statement after
   <!-- #INCLUDE VIRTUAL="/innerweb/v4.0/i_home_announcements.asp" -->

   

   If you want to replace the slideshow (slideshow.asp) and the two images to the right of it (o_home_right_col.asp), you’ll need to disable the include statements for those two pieces by putting a space between the # symbol and the word INCLUDE, that will break the include and hide the content. Then, put in your include statement after the slideshow.asp and o_home_right_col.asp includes. NOTE: You’ll see those two includes you’re commenting out are wrapped by a div assigned the class “marketing-ads”, you want to place the include for your new piece OUTSIDE that div:

   

3. Go ahead and upload the new images for the new content into your “images” directory. Make sure you’ve adjusted the quality of your image so it has as small of a file size as possible while still looking good (optimized images = faster page load times).

4. Add the content to your new outerweb file. Feel free to copy/paste from the code snippet examples above, swapping out the dummy image file name(s) with your actual image file name(s). Update the link to point to where you want it to go instead of “buy_textbooks.asp” like you get in the examples. If you’re linking away from your site you need to include the full URL, but if you’re linking somewhere on your site, you just need to put in the container page (what you see in the address bar after your project name; if you’re looking your staging site. ex: https://staging.prismservices.net/demo/site_about_us.asp - “site_about_us.asp” is what you’d link to if you wanted to point to the About Us page). Also, don’t forget to add useful alt tags!

   Image RemovedImage Added

5. Copy the all the CSS from further up this page. Then open the “css” folder in your site files and open main.css. Go to the very last line of the file Make room at the bottom and paste in the CSS from this page, and then save the main.css file. NOTE: If you are adding a new image block that will live directly below your existing slideshow, you need to comment in the two rules for .marketing-ads that are at the very bottom of the CSS provided on this page. See below:

   Image Added

6. Refresh your staging site and make sure everything looks good. NOTE: the old style of your homepage may be cached by your browser, so it might be a good idea to do a hard refresh (ctrl+shift+R for Chrome) when you’re first checking things out on staging. Once you’ve determined staging looks the way you want, you’re good to do the content deployment from https://manager.prismservices.net/ to move the changes to your live site.

...