Initial upload.

ProjectMuse.css

@@ -0,0 +1,217 @@
+body {
+    font-size: 16px;
+}
+.lotusWarningMsgs {
+    background-color: #ffc76c;
+    border: 1pt solid #ffaa22;
+}
+.lotusHeader .shareSome-desc {
+    font-size: 1.2em;
+}
+.lotusui30 a, 
+.lotusui30 a:visited, 
+div#dropdownNavMenuContainer div#dropdownNavMenuTitle li a, 
+div#dropdownSubMenuContainer div#dropdownSubMenuTitle li a, 
+a {
+    color: red;
+}
+
+.lotusui30 div.lotusHeader {
+    margin-bottom: 0;
+}
+
+.lotusui30 .lotusPlaceBar .lotusInlinelist.lotusRight {
+    position: absolute;
+    top: -45px;
+    right: 20px;
+}
+/* https://cdn.rawgit.com/JSG1901/Muse/master/ProjectMuse.css */
+
+.lotusui30 a, 
+.lotusui30 a:visited, 
+div#dropdownNavMenuContainer div#dropdownNavMenuTitle li a, 
+div#dropdownSubMenuContainer div#dropdownSubMenuTitle li a, 
+a {
+    color: #4178be;
+}
+.redBorder {
+    border: 1pt solid red;
+}
+.blueBorder {
+    border: 1pt solid blue;
+}
+.greenBorder {
+    border: 1pt solid green;
+}
+
+.lotusui30_body .lotusMain,
+.lotusui30_body .lotusFrame {
+    min-width: 0; 
+}
+.lotusui30_body .lotusFrame.container-fluid {
+    padding-right: 15px;
+    padding-left: 15px;
+    margin-right: auto;
+    margin-left: auto;
+}
+.lotusui30 .lotusMenu li a, .lotusui30 .lotusMenu li a:visited {
+    font-family: "Helvetica Neue", Sans-Serif,Helvetica, Arial, Roboto;
+    font-weight: 300;
+    width: 90%;
+    overflow: hidden;
+}
+.lotusui30 .lotusColRight .lotusSection2 .lotusHeading, 
+.lotusui30 .lotusColRight .lotusSection2 .lotusHeading2,
+.lotusui30 .lotusMenu li.lotusSelected:first-child a {
+    font-family: "Helvetica Neue", Sans-Serif,Helvetica, Arial, Roboto;
+    font-weight: 500;
+    width: 90%;
+    overflow: hidden;
+}
+.lotusui30 .lotusColRight .lotusSection2 .lotusHeading, 
+.lotusui30 .lotusColRight .lotusSection2 .lotusHeading2 {
+    font-size: 1.05em;
+}
+.lotusui30_layout .lotusColRight .lotusSection {
+    width: 100%;
+    max-width: none;
+}
+.lotusui30_layout .lotusColLeft .personinlinemenu {
+    width: 100%;
+    max-width: none;
+    background: white;
+}
+.lotusui30_layout .lotusColLeft:after {
+    border-left: 1000vw solid white;
+    background: none;
+    border-right: none;
+    margin-left: -980vw;
+}
+.lotusui30 .lotusSection2 .lotusSectionHeader {
+    border-top: none;
+    border-bottom: 1pt solid #ddd;
+    padding-bottom: 5px;
+    margin-bottom: 5px;
+    padding-top: 10px;
+}
+.black {
+    font-weight: 400;
+}
+#meetingSection .dijitTextBox input, 
+#meetingSection .dijitComboBox input, 
+#meetingSection .dijitArrowButton, 
+#meetingSection .dijitButtonNode {
+    font-family: "Helvetica Neue", Sans-Serif,Helvetica, Arial, Roboto;
+    font-weight: 300;
+}
+.lotusui30 button, .lotusui30 input, .lotusui30 select {
+    font-family: "Helvetica Neue", Sans-Serif,Helvetica, Arial, Roboto;
+    font-weight: 400;
+}
+div#dropdownNavMenuContainer, div#dropdownSubMenuContainer {
+    width: 90%;
+}
+div#dropdownNavMenuContainer div#dropdownNavMenuSelection, 
+div#dropdownSubMenuContainer div#dropdownSubMenuSelection {
+    max-width: 8vw;
+    white-space: normal;
+}
+.lotusui30 div.lotusPlaceBar h2 {
+    margin-left: 25vw;
+}
+.lotusui30 .lotusLike {
+    top: -30px;
+    position: relative;
+}
+.lotusui30_layout .lotusColLeft {
+    background: none;
+}
+.lotusui30_layout .lotusColLeft,
+.lotusui30_layout .lotusColRight {
+    margin-right: 0; 
+    margin-left: 0; 
+}
+.lotusui30 div.lotusPlaceBar h2 {
+    top: -20px;
+}
+.lotusliveui, 
+.lotusliveui30, 
+.scloud3 {
+    font: normal 0.8em/1.3 "Helvetica Neue", Helvetica, Arial, Roboto, sans-serif;
+}
+.lotusui30 .lotusPostContent .lotusPostAction .vcard {
+    font-size: 1em;
+}
+.lotusui30_layout .lotusMain .lotusContent {
+    padding: 0 15px 0 15px;
+}
+.lotusui30 .lotusMain span.lotusBtn a {
+    margin-top: 10px;
+}
+div#dropdownNavMenuContainer div#dropdownNavMenuSelection, 
+div#dropdownSubMenuContainer div#dropdownSubMenuSelection {
+    max-width: 11vw;
+    white-space: normal;
+}
+
+@media(max-width:768px) {
+    .lotusui30 .lotusActionBar {
+        height: 4.5em;
+    }
+    .lotusui30 .lotusMain span.lotusBtn a {
+        margin-top: 10px;
+    }
+    div#dropdownNavMenuContainer div#dropdownNavMenuSelection, 
+    div#dropdownSubMenuContainer div#dropdownSubMenuSelection {
+        max-width: 30vw;
+        white-space: normal;
+    }
+    .lotusui30 .lotusTitleBar .lotusRightCorner {
+        display:none;
+    }
+}
+@media(min-width: 660px) {
+    /* break to bootstrap xs (xxs was added to be smaller) */
+    div#dropdownNavMenuContainer div#dropdownNavMenuSelection, 
+    div#dropdownSubMenuContainer div#dropdownSubMenuSelection {
+        max-width: 10vw;
+        white-space: normal;
+    }  
+}
+@media(min-width: 725px) {
+    /* custom break */
+    div#dropdownNavMenuContainer div#dropdownNavMenuSelection, 
+    div#dropdownSubMenuContainer div#dropdownSubMenuSelection {
+        max-width: 20vw;
+        white-space: normal;
+    } 
+}
+@media(min-width: 768px) {
+    /* break to bootstrap sm */ 
+    .lotusui30 .lotusActionBar {
+        height: 4em;
+    }
+    .lotusui30 .lotusMain span.lotusBtn a {
+        margin-top: 0;
+    }
+    .
+}
+@media(min-width: 992px) {
+    /* break to bootstrap md */
+
+}
+@media(min-width: 1200px) {
+    /* break to bootstrap lg */
+    div#dropdownNavMenuContainer div#dropdownNavMenuSelection, 
+    div#dropdownSubMenuContainer div#dropdownSubMenuSelection {
+        max-width: 11vw;
+        white-space: normal;
+    } 
+
+}
+
+@media(max-width: 450px) {
+
+}
+
+

README.md

@@ -1,2 +1,27 @@
-# responsive-blogs
-Uses Bootstrap to bring a responsive UI experience IBM Connections blogs
+# customization-repo
+
+## Overall goal
+
+Connections has a non-responsive design. That is, the UI will not adjust to fit on smaller screens such as tablets and smartphones. My goal was to demonstrate that it's possible (using Connections Customizer) to break through that rather glaring limitation and convert Connections into a responsive UI using Bootstrap. However, even though that's pretty cool, technically, it is completely boring to look at, so I've also also totally redesigned the blog listing and blog pages to make them look VERY not-Connections-like.
+
+Here is a [quick demonstration video](https://apps.na.collabserv.com/files/app/file/22b255fd-2e2d-4617-929a-e33c807ec909)
+
+## How to demonstrate
+
+As demonstrated in the video linked above, the customization here only applies to Lucille Suarez, and only when she is on either the blog listing page, or an individual blog entry. Therefore, my suggestion is you first show the blog listing page using Frank Adams (or someone else that's not Lucille Suarez) and point out (a) the standard look and feel and (b) the fact the page is not responsive. Then log out and log back in as Lucille Suarez.
+
+As Lucille Suarez, navigate through the pages already demonstrated (which will look the same) until you arrive at the blogs listing, which will be very different. Point out that it's the same page with a different look and feel, then narrow the browser window to demonstrate that the page has become responsive. Again, see the video above for a demo of the demo.
+
+## Why do this?
+
+As much as anything, this demonstration was built to show a change of substance with Connections Customizer. Many of the early demos of Customizer have been quite simplistic and while, technically, they prove the concept, customers often want to see something with a little more "wow" factor. Hopefully this provides that.
+
+The Customizer app imports three javascript files, injects Bootstrap tags into the page's HTML, then imports half a dozen CSS files to completely change the look and feel of the page. As a responsive web page, as the browser window narrows, the content alters itself appropriately, like this:
+
+
+## Developer’s notes
+
+Most of the UI you see here—images, colors, etc.—are controlled by the blogsListing.css file. There are only two images (LittleBoy.jpg, which is the background; and BrownPaperBG.png, which is behind the community name at the top of the page. These two images are included in the Git repository but are not served up from there. Instead, they are hosted externally. 
+
+If you wish to change these images (or if, for some reason, the external site is not responding), you will need to change the URLs pointing to them in the blogsListing.css file. The LittleBoy.jpg background is referenced on line 10 of blogsListing.css, and the BrownPaperBG.png file can be found on line 235 (subject to change). Screen shots below show what you’re looking for:
+

blogs.css

@@ -0,0 +1,91 @@
+/* blogs.css */
+body.lotusliveui, 
+body.lotusliveui30, 
+body.scloud3 {
+    font: normal 1.25em/1.5 "Helvetica Neue", Helvetica, Arial, Roboto, sans-serif;
+}
+.blogsFixedTable .entryContentContainerTD.blogsWrapText h4.bidiAware,
+.blogsFixedTable .entryContentContainerTD.blogsWrapText h4.bidiAware a {
+    font-family:Trebuchet MS,Helvetica,sans-serif;
+    font-size: 18.0pt;
+    line-height: 24.0pt;
+    color: #4b0082;
+    margin: 0;
+    max-width: 90%;
+    padding-bottom: 8px;
+    border-bottom: 1pt solid #ddd; 
+}
+.blogsFixedTable .entryContentContainerTD.blogsWrapText h4.bidiAware a {
+    border-bottom:none;   
+}
+.blogsFixedTable .entryContentContainerTD.blogsWrapText .lotusMeta.lotusLeft,
+.lotusLayout.lotusHeader.blogsWrapText h1 {
+    display:none;
+}
+.blog .entryContentContainer.blogsWrapText {
+    margin-top: 0;
+}
+
+ul#blogsActionBar {
+    position: absolute;
+    top: 300px;
+    margin: 0;
+    padding: 0;
+    text-align: left;
+}
+ul#blogsActionBar li {
+    display:block;
+    margin: 0;
+    padding: 0;
+    border: none;
+}
+body .lotusui30_layout .lotusColLeft {
+    background-color: white;
+}
+body .lotusui30_layout .lotusColLeft:after {
+    border-left:none;
+    border-right:none;
+    background-color:white;
+}
+body.lotusui30 div.lotusTitleBar .lotusInner .lotusHeading {
+    display:none;
+}
+body.lotusui30_body .lotusMain {
+    min-width: 0;
+}
+@media(max-width:768px) {
+
+}
+@media(min-width: 660px) {
+    /* break to bootstrap xs (xxs was added to be smaller) */
+
+}
+@media(min-width: 725px) {
+    /* custom break */
+
+}
+@media(min-width: 768px) {
+    /* break to bootstrap sm */ 
+
+}
+@media(min-width: 992px) {
+    /* break to bootstrap md */
+
+}
+@media(min-width: 1200px) {
+    /* break to bootstrap lg */
+
+}
+
+
+
+@media(max-width: 660px) {
+    #lotusColRight {
+        display:none;
+    }
+}
+@media(max-width:1200px) {
+    ul#blogsActionBar {
+        top:0;
+    }
+}