Changed website to FINOS Branding & changes to Custom CSS & New Logos

website/README.md

@@ -188,6 +188,32 @@ For more information about the navigation bar, click [here](https://docusaurus.i
 
 For more information about custom pages, click [here](https://docusaurus.io/docs/en/custom-pages).
 
+## Custom CSS & Design Changes
+
+1. Changing logos for the Header and Footer and Favicon are done in website/siteConfig.js file in the /* path to images for header/footer */ section
+
+Note: make sure that you add your new logos to the website/static/img folder first.
+
+2. Change the main logo in the "SplashContainer" area of website/index.js file.
+
+Note: make sure that you add your new logos to the website/static/img folder first.
+
+3. Change the background color and the background transparent image in the website/static/css/custom.css file.
+
+Go to the section labeled: .homeContainer 
+
+Change "background-image" - and insert your new background image file. Note - make sure you add your new background transparent image file to the website/static/img folder first.
+
+Change "background-color" to your Project's main color (FDC3 is #0033A0)
+
+4. Change the .svg icons in the "gridBlock" (examples on FDC3 - the 4 .svg icons for API / Intents / Context Data / App Director) - you have to open the actual .svg files in the website/static/img folder with a program like Adobe Illustrator. Change the color of the entire file to your Project's main color (FDC3 is #0033A0) - and then save the file. The icon will change color. (NOote - If there is a way to change the .svg's using CSS, have not been able to do so yet. It should be possible.)
+
+5. Change the section header titles (example for FDC3: Use Cases & Who is Usind FDC3) by changing the website/static/css/custom.css file. Change the h2 tags for .featureShowcaseSection h2 and .productShowcaseSection h2 to your Project's color (FDC3 is #0033A0).
+
+6. Interior Introduction Page - Change logo by on this page (example for FDC3: docs/fdc3-intro.md) by changing the "(assets/fdc3-logo.png)" to the new logo name.
+
+Note: make sure that you add your new logo to the docs/assets folder first - this is a separate image repository from the "website" part.
+
 # Full Documentation
 
 Full documentation can be found on the [website](https://docusaurus.io/).

website/core/Footer.js

@@ -5,6 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+
+
+
+
 const React = require('react');
 
 class Footer extends React.Component {
@@ -26,7 +30,7 @@ class Footer extends React.Component {
   render() {
     return (
       <footer className="nav-footer" id="footer">
-        <section className="sitemap">
+        <section className="sitemap">     
           <a href={this.props.config.baseUrl} className="nav-home">
             {this.props.config.footerIcon && (
               <img
@@ -114,11 +118,21 @@ class Footer extends React.Component {
             )}
           </div>
         </section>
+        <section className="finos finosBanner">
+          <a href="https://www.finos.org">
+            <img id="finosicon" src={`https://grizzwolf.github.io/FDC3/img/finos_wordmark.svg`} height='75px' alt="FINOS" title="FINOS"/>
+            <h2 id="proud">Proud member of the Fintech Open Source Foundation</h2>
+          </a>
+
+        </section>
 
         <section className="copyright">{this.props.config.copyright}</section>
+
       </footer>
     );
   }
 }
 
+
+
 module.exports = Footer;

website/data/users.json

@@ -5,6 +5,13 @@
         "pinned": true,
         "isMember": false
     },
+    {
+        "caption": "Chart IQ",
+        "image": "/img/users/ChartIQ.webp",
+        "infoLink": "https://www.chartiq.com/",
+        "pinned": true,
+        "isMember": true
+    },
     {
         "caption": "FactSet",
         "image": "/img/users/FactSet.webp",

website/pages/en/index.js

@@ -40,9 +40,10 @@ class HomeSplash extends React.Component {
 
     const ProjectTitle = () => (
       <h2 className="projectTitle">
-        {siteConfig.title}
+        {/*siteConfig.title*/}
         <small>{siteConfig.tagline}</small>
       </h2>
+
     );
 
     const PromoSection = props => (
@@ -63,14 +64,16 @@ class HomeSplash extends React.Component {
 
     return (
       <SplashContainer>
-        {/* <Logo img_src={`${baseUrl}img/docusaurus.svg`} /> */}
-        <div className="inner">
-          <ProjectTitle siteConfig={siteConfig} />
-          <PromoSection>
-            <Button href={docUrl('fdc3-intro')}>Get Started</Button>
-            <Button href={repoUrl}>GitHub</Button>
-          </PromoSection>
-        </div>
+                {/*<Logo img_src={`${baseUrl}img/docusaurus.svg`} />*/}
+            <div className="inner">
+              <img src="img/fdc3-logo-2019.png"></img>
+
+              <ProjectTitle siteConfig={siteConfig} />
+              <PromoSection>
+                <Button href={docUrl('fdc3-intro')}>Get Started</Button>
+                <Button href={repoUrl}>GitHub</Button>
+              </PromoSection>
+            </div>
       </SplashContainer>
     );
   }
@@ -100,7 +103,7 @@ class Index extends React.Component {
     );
 
     const Features = () => (
-      <Block background="light" layout="fourColumn">
+      <Block background="white" layout="fourColumn">
         {[
           {
             content: `Create a consistent developer experience by adhering to the [API](${docUrl('api/api-intro')}) standard`,
@@ -133,20 +136,20 @@ class Index extends React.Component {
     );
 
     const FeatureCallout = () => (
-      <div className="productShowcaseSection paddingBottom" style={{textAlign: 'center'}}>
+      <div  className="featureShowcaseSection  paddingBottom" style={{textAlign: 'center'}}>
         <h2>Use Cases</h2>
         <MarkdownBlock>{`Document business [use cases](${docUrl('use-cases/overview')}) that drive FDC3 interoperability standards.`}</MarkdownBlock>
       </div>
     );
 
-    const FinosBanner = () => (
-      <div className="finos lightBackground">
-        <h2>Proud member of the Fintech Open Source Foundation</h2>
-        <a href="https://www.finos.org">
-          <img src={`${baseUrl}img/finos_wordmark.svg`} height='150px' alt="FINOS" title="FINOS"/>
-        </a>
-      </div>
-    );
+    //const FinosBanner = () => (
+      //<div className="finos finosBanner">
+        //<a href="https://www.finos.org">
+          //<img id="finosicon" src={`${baseUrl}img/finos_wordmark.svg`} height='150px' alt="FINOS" title="FINOS"/>
+        //</a>
+        //<h2 id="proud">Proud member of the Fintech Open Source Foundation</h2>
+      //</div>
+    //);
 
     const UserShowcase = () => {
       if ((siteConfig.users || []).length === 0) {
@@ -158,7 +161,7 @@ class Index extends React.Component {
       const pageUrl = page => baseUrl + (language ? `${language}/` : '') + page;
 
       return (
-        <div className="userShowcase productShowcaseSection paddingBottom">
+        <div className="userShowcase productShowcaseSection paddingTop paddingBottom">
           <h2>Who is Using FDC3?</h2>
           <p>The Financial Desktop Connectivity and Collaboration Consortium (FDC3) was founded in 2017 by <a href="https://openfin.co">OpenFin</a> and contributed to <a href="https://finos.org">FINOS</a>.  The FDC3 standards are created and used by leading organizations across the financial industry.</p>
           <Showcase users={pinnedUsers} />
@@ -178,12 +181,15 @@ class Index extends React.Component {
         <div className="mainContainer">
           <Features />
           <FeatureCallout />
-          <FinosBanner />
+
           <UserShowcase />
+
         </div>
       </div>
     );
   }
 }
 
 module.exports = Index;
+
+ //<FinosBanner />

website/siteConfig.js

@@ -13,8 +13,8 @@
 const users = require('./data/users.json');
 
 const siteConfig = {
-  title: 'FDC3', // Title for your website.
-  tagline: 'Open standards for the financial desktop',
+  title: 'FDC3', // Title for your website. THIS CHANGES THE TITLE TAGS FOR THE WEBSITE (LOOK IN BROWSER TAB AT TOP)
+  tagline: 'Open standards for the financial desktop', //THIS CHANGES THE TITLE TAGS FOR THE WEBSITE (LOOK IN BROWSER TAB AT TOP)
   url: 'https://fdc3.finos.org',
   cname: 'fdc3.finos.org',
   baseUrl: '/',
@@ -32,20 +32,21 @@ const siteConfig = {
 
   defaultVersionShown: '1.0',
 
-  twitterUsername: 'fdc3_',
+  twitterUsername: 'FDC3_',
 
   // If you have users set above, you add it here:
   users,
 
   /* path to images for header/footer */
-  headerIcon: 'img/finos-white.png',
-  footerIcon: 'img/finos.png',
-  favicon: 'img/favicon/favicon.ico',
+  headerIcon: 'img/fdc3-icon-2019.svg',   /* change to program/project icon logo */
+  footerIcon: 'img/fdc3-icon-2019.svg',  /* change to program/project icon + wordmark logo */
+  favicon: 'img/favicon/favicon.ico',  /* change to program/project favicon logo .ico */
 
   /* Colors for website */
   colors: {
-    primaryColor: '#00b5e2',
-    secondaryColor: '#0086bf'
+    primaryColor: '#0086bf', /* This changes the top FINOS banner & all links - DO NOT CHANGE */
+    secondaryColor: '#0033A0' /* This does net change anything - but keep as the project / program main color */
+
   },
 
   /* Custom fonts for website */
@@ -63,7 +64,7 @@ const siteConfig = {
   */
 
   // This copyright info is used in /core/Footer.js and blog RSS/Atom feeds.
-  copyright: `Copyright © ${new Date().getFullYear()} FDC3`,
+  copyright: `Copyright © ${new Date().getFullYear()} FDC3`,  /* CHANGE THIS TO PROJECT / PROGRAM NAME */
 
   highlight: {
     // Highlight.js theme to use for syntax highlighting in code blocks.
@@ -82,8 +83,8 @@ const siteConfig = {
   docsSideNavCollapsible: true,
 
   // Open Graph and Twitter card images.
-  ogImage: 'img/docusaurus.png',
-  twitterImage: 'img/docusaurus.png',
+  ogImage: 'assets/fdc3-logo.png', /* change to program/project icon + wordmark logo */
+  twitterImage: 'assets/fdc3-logo.png', /* change to program/project icon + wordmark logo */
 
   // Show documentation's last contributor's name.
   // enableUpdateBy: true,
@@ -93,7 +94,7 @@ const siteConfig = {
 
   // You may provide arbitrary config keys to be used as needed by your
   // template. For example, if you need your repo's URL...
-  repoUrl: 'https://github.com/FDC3/FDC3'
+  repoUrl: 'https://grizzwolf.github.io/FDC3/'
 };
 
 module.exports = siteConfig;