Update documentation_page.html to add the language selection HTML & C…

…SS in desktop screen width. CSS changes and supporting JS for the menu function to follow.

css/forge_doc_pages.css

@@ -25,6 +25,170 @@ h2 {
 }
 
 
+/* LANGUAGE SELECTOR */
+.language-select-container {
+    position: absolute;
+    left:0;
+    width:100%;
+    z-index: 2000;
+}
+
+.language-selector {
+    margin:-5px 3% 0 0;
+    min-height:30px;
+    float:right;
+    color:grey;
+    background:white;
+    padding:0;
+    text-transform: uppercase;
+    font-family: "Montserrat",sans-serif;
+    font-size:13px;
+    letter-spacing:1px;
+
+
+}
+
+.language-selector div.alternate-languages {
+    color:grey;
+    padding:10px 0 0 0;
+    margin:-5px 0 0 0;
+    box-shadow: 0px 2px 3px #cccccc;
+    -moz-box-shadow: 0px 2px 3px #cccccc;
+
+    border-bottom-left-radius:      10px;
+    border-bottom-right-radius:     10px;
+
+    -moz-border-radius-bottomleft:  10px;
+    -moz-border-radius-bottomright: 10px;
+
+    -webkit-border-bottom-left-radius:  10px;
+    -webkit-border-bottom-right-radius: 10px;
+}
+
+.language-selector div.selected-language {
+    background:#ee3327;
+    color:white;
+    box-shadow:none;
+    -moz-box-shadow:none;
+    padding:.7em 0;
+
+    border-bottom-left-radius:      10px;
+    border-bottom-right-radius:     10px;
+
+    -moz-border-radius-bottomleft:  10px;
+    -moz-border-radius-bottomright: 10px;
+
+    -webkit-border-bottom-left-radius:  10px;
+    -webkit-border-bottom-right-radius: 10px;
+}
+
+.language-selector div.selected-language div {
+    width:90%;
+    margin:0 auto;
+}
+
+.language-select-container a,
+.language-select-container a:hover,
+.language-select-container a:visited,
+.language-select-container a:link {
+    outline:none;
+}
+
+
+.language-selector div.alternate-languages a {
+    display:block;
+    padding:.5em 0;
+    width:90%;
+    margin:0 auto;
+}
+
+
+.language-selector div.alternate-languages a:last-child {
+    border-bottom:none;
+    display:block;
+}
+
+.language-img {
+    display:block;
+    float:right;
+    border:1px solid #cdcbd3;
+    width:20px;
+    height:20px;
+    border-radius:          50%;
+    -moz-border-radius:     50%;
+    -webkit-border-radius:  50%;
+}
+
+.language-img {
+    background-color:#cdcbd3;
+    background-repeat:no-repeat;
+    background-position: 50% 50%;
+    background-size: cover;
+}
+
+a.select-new-language {
+    display:inline-block;
+    border:1px solid #cdcbd3;
+    width:20px;
+    height:20px;
+    margin-left:8px;
+    float:none;
+    background-image:url(../images/dark-blue-chevron-down-w-padding.png);
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: 50% 50%;
+}
+
+a.select-new-language:hover {
+    background-color: #f1eff8;
+}
+
+
+
+.language-label {
+    float:left;
+    padding-top:2px;
+}
+
+.language-img.language-usa {
+    background-image:url(../images/flag-usa.png);
+}
+
+.language-img.language-espanol {
+    background-image:url(../images/flag-spanish.png);
+}
+
+.language-img.language-francais {
+    background-image:url(../images/flag-french.png);
+}
+
+.language-img.language-japanese {
+    background-image:url(../images/flag-japanese.png);
+}
+
+.language-img.language-german {
+    background-image:url(../images/flag-german.png);
+}
+
+.language-img.language-new {
+    background-color: #d8d6de;
+}
+
+
+
+
+
+div.language-divider {
+    height:1px;
+    background:#a4a4b2;
+    display:block;
+    width:90%;
+    margin:0 auto;
+}
+
+
+
+
 /* MAIN DOCUMENT CONTENT*/
 .doc-content {
     padding:0;

css/forge_documentation.css

@@ -52,6 +52,7 @@
 
 }
 
+
 .search-bar-row {
     text-align:center;
 }

documentation_page.html

@@ -94,10 +94,47 @@ <h1>Installation & Getting Started</h1>
    </div><!-- /.container -->
 </div><!-- / .page-section -->
 
+<!-- Smaller Device Window Language Selector Menu -->
+<div class="language-select-container">
+			<div class="col-sm-3 col-sm-offset-9 language-selector ">
+				<div class="selected-language">
+					<div>
+						<span class="language-label">English</span><a href="#" class="language-img select-new-language"></a>
+						<span class="language-img language-usa"></span>
+					</div>
+				</div>
+
+				<div class="alternate-languages">
+					<a href="#">
+						Espa&ntildeol<span class="language-img language-espanol"></span>
+					</a>
+					<div class="language-divider"></div>
+					<a href="#">
+						Fran&ccedil;ais<span class="language-img language-francais"></span>
+					</a>
+					<div class="language-divider"></div>
+					<a href="#">
+						Deutsch<span class="language-img language-german"></span>
+					</a>
+					<div class="language-divider"></div>
+					<a href="#">
+						日本の<span class="language-img language-japanese"></span>
+					</a>
+					<div class="language-divider"></div>
+					<a href="#">Add Language<span class="language-img language-new"></span>
+					</a>
+
+				</div>
+			</div>
+</div>
+<!-- / End Smaller Device Window Language Selector Menu -->
+
+
+
 <!-- Smaller Device Window Language Selector Menu -->
 <div class="row language-select-bar visible-xs">
 	<div class="row">
-		Language Selector Here
+		Small screen width language selector Here
 	</div>
 </div>
 <!-- / End Smaller Device Window Language Selector Menu -->
@@ -167,6 +204,7 @@ <h2>Related Forge Documents</h2>
 
 			<!-- RIGHT MAIN COLUMN -->
 			<div class="col-sm-8 doc-right-main-col">
+
 			<h1 class="hidden-xs">Installation & Getting Started</h1>
 
 				<p>Installing Forge is a relatively short process, and this guide will take you through the fundamentals (providing links to external materials if required) however, if you encounter any issues with this process, please ask in the Forge Users mailing list, or if you think something is wrong with this guide, report a defect to the team.