Styling

Application Style Configuration

This interface is a style management tool that allows you to fully customize the style of METASO-related interfaces and elements based on your unique aesthetic and design preferences. Whether you prefer a clean and modern look, a luxurious retro design, or a distinctive, personalized interface, this tool offers complete flexibility.

Access the Style Management Page

1. Log in to the MetaSo admin panel.

2. In the sidebar, click the "Style" option to open the style management page.

Create a New Style

1. On the style management page, click the "Create New Style" button to start creating a new style configuration.

Configure the New Style

1. On the Create New Style page, configure the required style parameters, such as colors, layout, and branding elements.

Color Settings

• Theme Mode: On the style configuration page, locate the "Theme Mode" option. Here, you can choose the website's theme color mode:

  • Light: Select this option to apply a light theme, typically featuring bright backgrounds and dark text.

  • Dark: Select this option to apply a dark theme, ideal for low-light environments or for users who prefer darker interfaces.

  
• Color Configuration: In the "Color Configuration" section, you can customize various color elements of the website. Use hexadecimal codes for the color settings below:

  • Brand Color: Set the primary color for the website's branding.

  • Layout Color: Set the background color for the page layout.

  • Header Color: Set the background color for the page header.

  • Gradient Color: Define the colors used in gradient effects.

  • Border Color: Set the color for the borders of page elements.

  • Button Text Color: Set the text color for buttons.

  

Layout Settings

1. Enable or Disable the Slider Menu:

   • In the "Slider Menu" option, you can enable or disable the sliding menu functionality of the website's sidebar.

   • Click the toggle button to choose:

     • Enabled: The toggle switch turns blue.

     • Disabled: The toggle switch turns gray.

     
2. Enable or Disable the Recommendation Feature:

   • In the "Recommend" option, you can enable or disable the display of recommended content.

   • Similarly, use the toggle button to choose:

     • Enabled: The toggle switch turns blue.

     • Disabled: The toggle switch turns gray.

     
3. Set Content Size:

   • In the "Content Size" option, you can set the width of the page content area.

   • Enter your desired width value, such as "1200 pixels".

   

Branding Settings

1. Upload Logo:

   • In the "Logo" section, click the upload area, select, and upload your website's logo image.

   
2. Set Homepage Background Image:

   • In the "Home Background Image" section, click the upload area to choose and upload the image you want to use as the homepage background.

   
3. Configure Social Media Links:

   • In the "Twitter" section, enter the URL of your Twitter account.

   
4. Set Website Titles:

   • In the "Main Title" and "Sub Title" sections, input the main title and subtitle for your website.

   

Preview Changes

• On the right side of the page, you will find an "OverView" area, which provides a live preview of the website's homepage and login page.

• You can view real-time previews of the color and style changes you make.

Save Changes

• After completing the branding configuration, click the "Save" button in the top-right corner of the page to save your settings.