Pushkin
  • Welcome!
  • Getting Started
    • Installing Pushkin and dependencies
      • macOS
      • Windows 10
        • Windows Subsystem for Linux
        • AWS EC2 Instance
      • Ubuntu Linux
    • Quickstart
      • Quickstart: Example Outputs
    • Deploying to AWS
      • Install required software.
      • Configure the AWS and ECS CLIs.
      • Register a domain.
      • Set up DockerHub.
      • Initialize AWS Deploy.
    • Tutorial: Simple Experiment
  • FAQ
    • FAQ
  • Advanced
    • Pushkin CLI
    • Using Experiment Templates
      • Lexical decision template
      • Grammaticality judgment template
      • Self-paced reading template
    • Experiment Component Structure
      • Experiment Config.yaml Files
      • Experiment Web Page Component
      • Worker Component, Migration, and Seed
    • Modifying Site Template
      • React Bootstrap
      • Header and Footer
      • Home Page
      • Findings Page
      • About Page
      • Feedback Page
    • Troubleshooting Pushkin
    • Pushkin Client
    • pushkin-api
      • API Controller Builder
      • Core API
    • Users & Authentication
    • Deployment
      • Deleting AWS
  • Developers
    • Developing with Pushkin
    • Getting Started on Development
    • Overview of Technologies
    • Testing Pushkin with Jest
    • Working with Templates
Powered by GitBook
On this page
  • Navbar logo
  • Navbar Color Schemes
  • Footer

Was this helpful?

  1. Advanced
  2. Modifying Site Template

Header and Footer

The Header.js and Footer.js components are located in pushkin/front-end/src/components/Layout

Navbar logo

To Change the logo in the navbar, copy your logo image into the pushkin/front-end/src/assets/logo folder, modify the path in src={require("../../assets/images/logo/NavbarLogo.png")} in the <Navbar.Brand>. You can also modify the logo’s size using the width and height attributes in the <img /> tag.

Navbar Color Schemes

Choose from variant="light" for use with light background colors, variant="dark" for dark background colors. Then, customize with the bg prop or any custom css! You can also use the className prop in the <Navbar> component, like className="navbar-dark bg-dark"

Footer

The footer is wrapped in <Row> component. You can change the background color in the style prop: style={{backgroundColor:'#eeeeee'}}.

PreviousReact BootstrapNextHome Page

Last updated 1 year ago

Was this helpful?