Complete Dashboard CSS

Copy this entire CSS block and add it to WordPress Admin → Settings → Insert Headers and Footers in the “Scripts in Header” section (wrap it in <style> tags):

<style><br /> /* Scripify Dashboard Styles – Combined */</p> <p>/* New Dashboard Header & Layout */<br /> .scripify-dashboard {<br /> max-width: 1200px;<br /> margin: 0 auto;<br /> padding: 20px;<br /> font-family: Arial, sans-serif;<br /> }</p> <p>.dashboard-header {<br /> background: linear-gradient(135deg, #2c5530, #4a7c59);<br /> color: white;<br /> padding: 30px;<br /> border-radius: 10px;<br /> margin-bottom: 30px;<br /> }</p> <p>.welcome-title {<br /> font-size: 2.5em;<br /> margin: 0;<br /> font-weight: 300;<br /> }</p> <p>.welcome-subtitle {<br /> font-size: 1.2em;<br /> margin: 10px 0 0;<br /> opacity: 0.9;<br /> }</p> <p>.section-title {<br /> color: #2c5530;<br /> font-size: 1.8em;<br /> margin-bottom: 20px;<br /> border-bottom: 3px solid #4a7c59;<br /> padding-bottom: 10px;<br /> }</p> <p>.action-cards {<br /> display: grid;<br /> grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));<br /> gap: 20px;<br /> }</p> <p>.action-card {<br /> background: white;<br /> border: 1px solid #e0e0e0;<br /> border-radius: 10px;<br /> padding: 25px;<br /> text-align: center;<br /> transition: all 0.3s ease;<br /> box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);<br /> }</p> <p>.action-card:hover {<br /> transform: translateY(-5px);<br /> box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);<br /> }</p> <p>.card-icon {<br /> font-size: 3em;<br /> margin-bottom: 15px;<br /> }</p> <p>.btn {<br /> display: inline-block;<br /> padding: 12px 25px;<br /> border-radius: 5px;<br /> text-decoration: none;<br /> font-weight: bold;<br /> transition: all 0.3s ease;<br /> }</p> <p>.btn-primary {<br /> background: #4a7c59;<br /> color: white;<br /> }</p> <p>.btn-secondary {<br /> background: #6c757d;<br /> color: white;<br /> }</p> <p>.btn:hover {<br /> transform: translateY(-2px);<br /> box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);<br /> }</p> <p>/* WooCommerce Dashboard Styling */<br /> .woocommerce-account .woocommerce,<br /> .woocommerce-MyAccount-content {<br /> background: #ffffff;<br /> padding: 30px;<br /> border-radius: 12px;<br /> box-shadow: 0 2px 10px rgba(0,0,0,0.05);<br /> }</p> <p>.woocommerce-MyAccount-navigation {<br /> background: #f8f9fa;<br /> border-radius: 12px;<br /> padding: 20px;<br /> margin-bottom: 30px;<br /> }</p> <p>.woocommerce-MyAccount-navigation ul {<br /> list-style: none;<br /> margin: 0;<br /> padding: 0;<br /> }</p> <p>.woocommerce-MyAccount-navigation ul li {<br /> margin-bottom: 10px;<br /> }</p> <p>.woocommerce-MyAccount-navigation ul li a {<br /> display: block;<br /> padding: 12px 20px;<br /> background: #ffffff;<br /> color: #333333;<br /> text-decoration: none;<br /> border-radius: 8px;<br /> transition: all 0.3s ease;<br /> font-weight: 500;<br /> border: 2px solid transparent;<br /> }</p> <p>.woocommerce-MyAccount-navigation ul li a:hover {<br /> background: #00a651;<br /> color: #ffffff;<br /> transform: translateX(5px);<br /> }</p> <p>.woocommerce-MyAccount-navigation ul li.is-active a {<br /> background: #00a651;<br /> color: #ffffff;<br /> border-color: #00a651;<br /> }</p> <p>.woocommerce-MyAccount-content > h2:first-child {<br /> color: #00a651;<br /> font-size: 28px;<br /> margin-bottom: 20px;<br /> padding-bottom: 15px;<br /> border-bottom: 3px solid #00a651;<br /> }</p> <p>.woocommerce-MyAccount-content table.shop_table {<br /> border-radius: 8px;<br /> overflow: hidden;<br /> border: none;<br /> box-shadow: 0 2px 8px rgba(0,0,0,0.08);<br /> }</p> <p>.woocommerce-MyAccount-content table.shop_table th {<br /> background: #00a651;<br /> color: #ffffff;<br /> padding: 15px;<br /> font-weight: 600;<br /> text-transform: uppercase;<br /> font-size: 12px;<br /> letter-spacing: 1px;<br /> }</p> <p>.woocommerce-MyAccount-content table.shop_table td {<br /> padding: 15px;<br /> background: #ffffff;<br /> border-bottom: 1px solid #e9ecef;<br /> }</p> <p>.woocommerce-MyAccount-content .button,<br /> .woocommerce-MyAccount-content .woocommerce-button {<br /> background: #00a651;<br /> color: #ffffff;<br /> padding: 12px 30px;<br /> border: none;<br /> border-radius: 8px;<br /> font-weight: 600;<br /> transition: all 0.3s ease;<br /> }</p> <p>.woocommerce-MyAccount-content .button:hover {<br /> background: #008a44;<br /> transform: translateY(-2px);<br /> box-shadow: 0 5px 15px rgba(0,166,81,0.3);<br /> }<br /> </style>

Instructions:

1. Select all the text in the textarea above
2. Copy it (Ctrl+C or Cmd+C)
3. Go to WordPress Admin → Settings → Insert Headers and Footers
4. Paste it in the “Scripts in Header” section
5. Click Save

This will style your dashboard at https://scripify.com.au/my-account/