Codux Help Center
Browse our articles to find the answers you need
About the Website Starter Template
The website starter project template is a single-page application that includes a home page, an about page, a header, a footer, and a mobile-friendly home page.
This is primarily a quick start template designed for immediate use and learning. It comes equipped with a React router, sample pages, and a structured layout of an app, all of which can be easily customized to jumpstart your own app development. If you're seeking a more intricate project with a broader range of technologies to dissect, check out our Portfolio template.
You'll find this project in Codux in the New Projects page with all the other templates.
Working with Styles
There are several ways to customize the styling of your application:
- Using the Global Variables panel
- Direct Element Styling
- Theme Customization
Using the Global Variables Panel
The Global Variables panel provides a centralized way to manage your project's style variables.
Through this panel, you can:
- View all available style variables and their current values
- Edit variable values in real-time
- Create new variables within existing selectors
- See how variables are organized across different files and CSS selectors
To add new variables, use the + button next to any selector that already contains at least one variable. When working with boards, you can quickly navigate to a variable's definition in the code by using the panel's navigation features.
Direct Element Styling
- Select any element you want to restyle from the board or in your app.
- In the Styles panel by the selector, choose View code to jump directly to the stylesheet where these styles are defined.
- When styling components, you can easily apply variables through the Styles panel using the color pickers.
Theme Customization
To view and modify the project's theme variables:
- Navigate to the Files panel.
- Open theme.module.scss.
- Adjust the variables as needed.
Note:
If the Global Variables panel appears empty, this means either no common CSS files are configured for your project or no variables are currently defined in the project.
Was this article helpful?
