HomePage Production Version

Developer

Size

5,053 Kb

Views

12,144

HomePage Production Version Previews
HomePage Production Version HTML Codes

How do I make an homepage production version?

What is a homepage production version? How do you make a homepage production version? This script and codes were developed by John Malc on 26 October 2022, Wednesday.

HomePage Production Version Previews

HomePage Production Version - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>HomePage Production Version</title>
</head>
<body> <!--
Up to date to
@version v6 of https://v4-alpha.getbootstrap.com/
@author Dmitrij Petrov (@dmpe on GitHub)
@timeframe Spring 2017
@url https://codepen.io/f789gh/pen/RpQoNM
@url https://codepen.io/f789gh/pen/YZNaqR
This code is based on the original version (https://codepen.io/f789gh/pen/YZNaqR) that has been developed for testing purposes using a proper browser with proper (i.e. non Sharepoint) logic.
The fact of the matter is that Sharepoint is very complex app and it does (!) delete CSS/JS in certain conditions when inserted together with HTML. See
http://stackoverflow.com/questions/21905139/sharepoint-2013-deleting-contents-of-style-in-embed-code-when-saving
As a result, one has to "create" code below this comment in order to include the whole of it (!) directly into Sharepoint page. And not just somehow, BUT by inserting a "web app" (Media & Content -> Script editor). DO NOT use "insert embed code" - this will not work, similarly to the idea of "formating text -> Edit Source" in the ribbon. Also it is not good idea to use "@import url(some CSS)".
The originally developed layout of the wiki can be found under http://***/cis/project/Lists/testList/EditForm.aspx
The idea of limiting scope of CSS code is not new - in my case I try to apply it only to the HTML that is marked with id tag "#bootstrapSite". The reason being is that Sharepoint CSS and Bootstrap CSS significantly overlap, and therefore many properties are in need of "!important" (i.e. forced) rule.
http://stackoverflow.com/questions/17667874/limit-scope-of-external-css-to-only-a-specific-element
http://stackoverflow.com/questions/3298746/apply-different-css-stylesheet-for-different-parts-of-the-same-web-page
Larger structure of this layout (see Grid https://v4-alpha.getbootstrap.com/layout/grid/ with Bootstrap) :
- 5 rows starting at 1 (not 0) with "PPM"
- 2nd and 3rd has 3 columns - can be seen by deleting "border-0" style
- 4th has 2 columns
- 5th has again 2 columns
-->
<!-- Load bootstrap v6 -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" />
<!-- Start CSS here -->
<style type = "text/css">
/* apply it to the body and search input field (&border; incl. when focused/hover). Otherwise search icon (and the whole input border) together with the "black" Domus border is too
narrow and moved to the right, causing not to render icons ("settings", "question mark" in the right corner) properly */
body, .ms-srch-sb.ms-srch-sb-border, .ms-srch-sb.ms-srch-sb-borderFocused { font-family: "Open Sans", "Segoe UI", "Segoe", Tahoma, Helvetica, Arial, sans-serif !important; /* force typography of the sharepoint */ font-size: 13px !important; line-height: normal !important; -webkit-box-sizing: initial !important; box-sizing: initial !important; /* for all, except for IEx */ box-sizing: content-box !important; /* largely for IEx which does not seem to recognize it */
}
div#bootstrapSite .row > .col,
div#bootstrapSite .row > [class^="col-"] { display: flex; flex-wrap: wrap; padding-top: .75rem; padding-bottom: .75rem; border: 2px solid rgba(86, 61, 124, 0.2);/* to make border fett */
/* background-color: rgba(86,61,124,.15); */
}
/* this property is used only (!) in codepen.io - no need & use for it in the SharePoint */
div#bootstrapSite { -webkit-box-sizing: border-box !important; box-sizing: border-box !important; /* for all, except for IEx */
}
/* white color of the font, instead of black */
div#bootstrapSite .whiteColorFont { color: white !important;
}
/* no underline with links that have white color - unvisited link */
div#bootstrapSite a:link { text-decoration: none !important; /* no underline */ color: white;
}
/* visited link */
div#bootstrapSite a:visited { color: white;
}
/* mouse over link */
div#bootstrapSite a:hover { color: white; text-decoration: none !important; /* no underline */
}
/* selected link */
div#bootstrapSite a:active { color: blue;
}
/* Applies only to headings such as "EPM" or "Management Support" and its sub-headings (on the left - row 2) below: https://developer.mozilla.org/en/docs/Web/CSS/font-size */
div#bootstrapSite .epm { font-size: x-large;
}
div#bootstrapSite .epm_sml { font-size: small;
}
/* padding from the top that applies only to "Reference Guides", not to "FAQ" circle */
div#bootstrapSite .GuidesTopPadding { padding: 20px 0 0 0px; text-align: center; font-size: sm-large;
}
/* first "PPM" blackish row */
div#bootstrapSite .clr { background-color: #404a52; height: 65px;
}
div#bootstrapSite .lineHeightFixIE11 { line-height: normal !important;
}
/* must fix: otherwise inherits from MS SharePoint which by default is auto */
div#bootstrapSite .zeroMargin { margin: 0px 0px 0px 0px;
}
/* Here is all for second row */
div#bootstrapSite .secondRow { box-shadow: inset -100px -100px 150px #205867; /* for debugging use chrome dev tools */ background-color: #abd3e0; height: 155px; border-width: 3px 0px; border-style: solid; border-color: #ffffff; /* white border = empty */
}
div#bootstrapSite .SecondRowCircleBorder { width: 100px; height: 100px; border-radius: 50%; /* make circle here */ border-top: 15px; border: 2px solid white; box-shadow: 0px 0px 5px #abd3e0; display: block; margin: auto;
}
/* in order to make (border) white background when hovered */
div#bootstrapSite .SecondRowCircleBorder:hover { background-color: #BDCDD0; background-color: rgba(205, 230, 247, 0.5);
}
/* related to all content inside of circles, to make them more central inside of border */
div#bootstrapSite .centeredElement { display: flex; justify-content: center; align-items: center;
}
/* "FAQ" inside of "SecondRowCircleBorder" */
div#bootstrapSite .FAQText { padding: 15px 0 0 0px; text-align: center; font-size: xx-large;
}
/* Due to not wrapping the text inside of border, use http://stackoverflow.com/questions/35111090/why-ie11-doesnt-wrap-the-text-in-flexbox */
div#bootstrapSite .ie11fix { /*Might not be necessary after all: align-self: stretch; */ font-size: medium;
}
div#bootstrapSite .PM2RefGuideText { font-size: large; padding-top: 25px;
}
/* Here is all for third row */
div#bootstrapSite .thirdRow { box-shadow: inset -100px -50px 150px #901854; background-color: #f06292; height: 155px; border-width: 0px 0px 3px; /* must otherwise borders too large*/ border-style: solid; border-color: #ffffff;
}
div#bootstrapSite .ThridRowCircleBorder { width: 100px; height: 100px; border-radius: 50%; border: 2px solid white; display: block; margin: auto; box-shadow: 0px 0px 5px #ea86b8;
}
div#bootstrapSite .ThridRowCircleBorder:hover { background-color: #CDE6F7; background-color: rgba(205, 230, 247, 0.5);
}
/* Here is all for fourth row */
div#bootstrapSite .fourthRow { border-width: 3px 0px; height: 155px; font-size: xx-large; box-shadow: inset 100px -50px 150px #000000; background-color: #7d7d7d;
}
/* White-Space:normal because otherwise buttons are not responsive
!important because sharepoint overwrites default styles
Attempt to mimic a default behaviour of previous layout
http://stackoverflow.com/questions/19284153/how-to-get-a-responsive-button-in-bootstrap-3
*/
div#bootstrapSite .buttonSimilar { white-space: normal !important; padding: 5px 10px !important; border-radius: 6px !important; border: 2px solid #ffffff !important; box-shadow: #7d7d7d 0px 0px 5px !important;
}
div#bootstrapSite .buttonSimilar:hover { background-color: #CDE6F7; background-color: rgba(205, 230, 247, 0.5);
}
/* Here is all for five row */
div#bootstrapSite .fiveRow { height: 155px; font-size: x-large; border-width: 3px 0px; border-style: solid; border-color: #ffffff;
}
/* to make border around links a bit larger, for UX*/
div#bootstrapSite .LinkBorder { border: solid transparent; border-width: 5px 5px;
}
/* left side: CooP */
div#bootstrapSite .row > .leftCol { box-shadow: inset -50px -50px 100px #7f7f7f; background-color: #bfbfbf; border-width: 0px 3px 0px 0px; border-style: solid; border-color: #ffffff; display: flex; justify-content: center; align-items: center;
}
/* right side : EvaC */
div#bootstrapSite .row > .rightCol { box-shadow: inset -50px -50px 100px #c87800; background-color: #ffb546; display: flex; justify-content: center; align-items: center; white-space: pre-wrap;
}
</style>
<!-- End of CSS and begin of HTML layout/grid code -->
<div class="container whiteColorFont" id = "bootstrapSite"> <div class="row clr"> <div class="col"> <h3 class="whiteColorFont zeroMargin lineHeightFixIE11">Project and Portfolio Management</h3> </div> </div> <div class="row secondRow"> <div class="col-sm-4 border-0"> <p> <span class= "epm whiteColorFont font-weight-bold">EPM</span> <br> <span class= "epm_sml"> <a href="http://***/cis/project/SitePages/[email protected]"> Enterprise Project Management </a> <span> <br> <span class= "epm_sml"> <a href="http://epm/PWA/default.aspx"> Project Web Access (PWA) </a> <span> <br> <span class= "epm_sml"> <a href="http://***/PWA/PPM/"> PWA/PPM </a> <span> <br> </p> </div> <div class="col-sm-4 border-0"> <div class = "col-sm-6"> <a href="http://***/cis/project/SitePages/[email protected]"> <div class = "SecondRowCircleBorder centeredElement"> <p class = "GuidesTopPadding font-weight-bold ie11fix">EPM <br/> Reference <br />Guide</p> </div> </a> </div> <div class = "col-sm-6"> <a href="http://***/cis/project/SitePages/FAQ.aspx"> <div class = "SecondRowCircleBorder centeredElement"> <p class = "FAQText font-weight-bold">FAQ</p> </div> </a> </div> </div> <div class="col-sm-4 border-0"> </div> </div> <div class="row thirdRow"> <div class="col-sm-4 border-0"> <p> <span class= "epm whiteColorFont font-weight-bold"> PM<sup>2</sup>@DGA-CIS </span> <br> <span class = "epm_sml"> <a href="http://***/cis/project/SitePages/PM%C2%[email protected]">Manage your projects</a> <br> <a href="http://***/cis/project/SitePages/PM%C2%[email protected]">Getting Started</a> </span> </p> </div> <div class="col-sm-4 border-0"> <div class="col-sm-12"> <a href="http://***/cis/project/SitePages/PM%C2%[email protected]"> <div class = "ThridRowCircleBorder centeredElement"> <p class = "GuidesTopPadding font-weight-bold PM2RefGuideText">Reference Guide</p> </div> </a> </div> </div> <div class="col-sm-4 border-0"> </div> </div> <div class="row fourthRow"> <div class="col-sm-4 border-0"> <p> <span class="epm whiteColorFont font-weight-bold"> Management Support </span> </p> </div> <div class="col-sm-8 border-0"> <div class="col-sm-4"> <a role="button" class="btn btn-lg buttonSimilar" href = "http://***/cis/project/SitePages/Portfolio%20Status.aspx">Portfolio Status</a> </div> <div class="col-sm-4"> <a role="button" class="btn btn-lg buttonSimilar" href = "http://***/cis/project/SitePages/Project%20End%20Reports.aspx">Project End Reports</a> </div> <div class="col-sm-4"> <a role="button" class="btn btn-lg buttonSimilar" href= "mailto:***@***">Contact Us</a> </div> </div> </div> <div class="row fiveRow font-weight-bold"> <div class="col-sm-6 leftCol"> <a class = "LinkBorder" href="http://***/cis/project/SitePages/CooP.aspx"> <p>Community of Practice - CooP</p> </a> </div> <div class="col-sm-6 rightCol "> <a class = "LinkBorder" href="http://***/cis/project/SitePages/EvaC.aspx"> <p>Project Charter Evaluation Committee - EvaC</p> </a> </div> </div>
</div>
</body>
</html>

Home Page	Home
Developer	John Malc
Username	f789gh
Uploaded	October 26, 2022
Rating	3
Size	5,053 Kb
Views	12,144

Do you need developer help for HomePage Production Version?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

John Malc (f789gh) Script Codes

Name	Size
Make Hyperlinks in the SharePoint list	2,343 Kb
A Pen by John Malc	1,420 Kb
Wiki design - see another pen	3,881 Kb
Some Wireframing of new Reports section	1,837 Kb

Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!

Similar Scripts & Codes

Name	Username	Size
Welcome	Nakome	6,076 Kb
Modal Dialog	Gigaleet	2,251 Kb
Scroll Arrow	Robooneus	4,437 Kb
A Pen by Xand0r	Xand0r	1,928 Kb
Chuck Norris Background	Manz	1,967 Kb
Mobile Nav Menu	AliKlein	4,745 Kb
Siema - add pagination to prototype	Pawelgrzybek	2,575 Kb
A Pen by Bryan Rojas	Bryanrojas	1,873 Kb
Search field	Jamesbarnett	2,100 Kb
Responsive Section hover effect to show content	Berdejitendra	2,540 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!