How to Apply Custom CSS to Your WordPress Theme

If you want to customize the look and feel of the seller net sheet plugin on your WordPress site, follow these steps to apply custom CSS:

Step 1: Access the WordPress Admin Dashboard

1. Log in to your WordPress site.
2. Navigate to the Admin Dashboard.

Step 2: Open the Customizer

1. In the dashboard menu, go to Appearance.
2. Click on Customize. This will open the WordPress Customizer, where you can preview changes in real-time.

Step 3: Add Custom CSS

1. In the Customizer, find and click on the Additional CSS option. This option might be under Appearance or Customize depending on your theme.
2. In the Additional CSS section, you can add your custom CSS code.

Step 4: Copy and Paste the Custom CSS Code

1. Copy the following CSS code:

   /* Container and general spacing */
   #seller_netsheet.seller-net-sheet.container {
       padding: 20px;
       background-color: #f8f9fa; /* Light background for container */
       border: 1px solid #dee2e6; /* Border around the container */
       border-radius: 8px; /* Rounded corners */
   }
   
   #seller_netsheet .mt-4 {
       margin-top: 1.5rem !important;
   }
   
   #seller_netsheet .mb-3 {
       margin-bottom: 1rem !important;
   }
   
   #seller_netsheet .mb-4 {
       margin-bottom: 1.5rem !important;
   }
   
   /* Header styles */
   #seller_netsheet .section-header h3 {
       font-size: 1.5rem;
       color: #343a40; /* Darker text color */
       border-bottom: 2px solid #007bff; /* Underline with primary color */
       padding-bottom: 5px;
   }
   
   /* Form labels and inputs */
   #seller_netsheet .form-label {
       font-weight: 500;
       color: #495057; /* Slightly dark text color */
   }
   
   #seller_netsheet .form-control {
       border-radius: 5px;
       border: 1px solid #ced4da;
       padding: 10px;
   }
   
   /* Select inputs */
   #seller_netsheet .form-select {
       border-radius: 5px;
       border: 1px solid #ced4da;
       padding: 10px;
   }
   
   /* Input groups */
   #seller_netsheet .input-group {
       display: flex;
       align-items: center;
   }
   
   #seller_netsheet .input-group input {
       flex: 1;
   }
   
   /* Buttons */
   #seller_netsheet .btn {
       border-radius: 5px;
       padding: 10px 20px;
       font-size: 1rem;
   }
   
   #seller_netsheet .btn-primary {
       background-color: #007bff;
       border-color: #007bff;
       color: #fff;
   }
   
   #seller_netsheet .btn-primary:hover {
       background-color: #0056b3;
       border-color: #004085;
   }
   
   #seller_netsheet .btn-secondary {
       background-color: #6c757d;
       border-color: #6c757d;
       color: #fff;
   }
   
   #seller_netsheet .btn-secondary:hover {
       background-color: #5a6268;
       border-color: #545b62;
   }
   
   /* Grid and layout */
   #seller_netsheet .row {
       display: flex;
       flex-wrap: wrap;
       margin-right: -15px;
       margin-left: -15px;
   }
   
   #seller_netsheet .col-md-12,
   #seller_netsheet .col-md-6,
   #seller_netsheet .col-md-8,
   #seller_netsheet .col-sm-6 {
       position: relative;
       width: 100%;
       padding-right: 15px;
       padding-left: 15px;
   }
   
   #seller_netsheet .col-md-12 {
       flex: 0 0 100%;
       max-width: 100%;
   }
   
   #seller_netsheet .col-md-6 {
       flex: 0 0 50%;
       max-width: 50%;
   }
   
   #seller_netsheet .col-md-8 {
       flex: 0 0 66.66667%;
       max-width: 66.66667%;
   }
   
   #seller_netsheet .col-sm-6 {
       flex: 0 0 50%;
       max-width: 50%;
   }
   
   #seller_netsheet .d-grid {
       display: grid;
   }
   
   #seller_netsheet .gap-2 {
       grid-gap: 0.5rem;
   }
   
   #seller_netsheet .d-md-flex {
       display: flex;
   }
   
   #seller_netsheet .justify-content-md-end {
       justify-content: flex-end;
   }

2. Paste the copied CSS code into the Additional CSS section in the Customizer.

Step 5: Save and Publish

1. After pasting the custom CSS code, you will see a live preview of the changes on your site.
2. If everything looks good, click the Publish button to apply the changes.

Step 6: Verify the Changes

1. Visit the page where the seller net sheet plugin is used.
2. Ensure that the custom styles are applied correctly.

Additional Tips

• Backup Your CSS: Before making significant changes, consider backing up your existing CSS in case you need to revert back.
• Use Developer Tools: Use browser developer tools (F12 in most browsers) to inspect elements and make real-time changes before finalizing them in the customizer.
• Keep It Clean: Organize and comment your CSS for better readability and maintenance.

By following these steps, you can easily apply custom CSS to your WordPress theme and enhance the look and feel of the seller net sheet plugin without affecting other parts of your site.