📄Page Structure
<%- include '../layouts/main' %>
<!-- [Head] start -->
<head>
<%- include '../layouts/head-page-meta' %>
<!-- map-vector css -->
<link rel="stylesheet" href= "assets/css/plugins/jsvectormap.min.css" %}>
<%- include('../layouts/head-css') %>
</head>
<!-- [Head] end -->
<!-- [Body] Start -->
<body <%= bodysetup %> >
<%- include('../layouts/layout-vertical') %>
<!-- [ Main Content ] start -->
<div class="pc-container">
<div class="pc-content">
<%- include('../layouts/breadcrumb') %>
<!-- [ Main Content ] start -->
<div class="row">
<div class="col-md-6 col-xl-8">
<div class="card table-card">
<div class="card-header d-flex align-items-center justify-content-between">
<h5>Recent Users</h5>
<div class="dropdown">
<a
class="avtar avtar-xs btn-link-secondary dropdown-toggle arrow-none"
href="#"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
><i class="material-icons-two-tone f-18">more_vert</i></a
>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Edit</a>
</div>
</div>
</div>
<div class="card-body py-2 px-0">
<div class="table-responsive">
<table class="table table-hover table-borderless table-sm mb-0">
<tbody>
<tr>
<td>
<div class="d-inline-block align-middle">
<img src="assets/images/user/avatar-1.jpg" %} alt="user image" class="img-radius align-top m-r-15" style="width:40px;">
<div class="d-inline-block">
<h6 class="m-b-0">Quinn Flynn</h6>
<p class="m-b-0">Android developer</p>
</div>
</div>
</td>
<td><p class="mb-0"><i class="ph-duotone ph-circle text-warning f-12"></i> 11 may 12:30</p></td>
<td class="text-end">
<button class="btn btn-sm btn-link-danger">Reject</button>
<button class="btn btn-sm btn-primary">Approve</button>
</td>
</tr>
<tr>
<td>
<div class="d-inline-block align-middle">
<img src="assets/images/user/avatar-2.jpg" %} alt="user image" class="img-radius align-top m-r-15" style="width:40px;">
<div class="d-inline-block">
<h6 class="m-b-0">Garrett Winters</h6>
<p class="m-b-0">Android developer</p>
</div>
</div>
</td>
<td><p class="mb-0"><i class="ph-duotone ph-circle text-success f-12"></i> 11 may 12:30</p></td>
<td class="text-end">
<button class="btn btn-sm btn-link-danger">Reject</button>
<button class="btn btn-sm btn-primary">Approve</button>
</td>
</tr>
<tr>
<td>
<div class="d-inline-block align-middle">
<img src="assets/images/user/avatar-3.jpg" %} alt="user image" class="img-radius align-top m-r-15" style="width:40px;">
<div class="d-inline-block">
<h6 class="m-b-0">Ashton Cox</h6>
<p class="m-b-0">Android developer</p>
</div>
</div>
</td>
<td><p class="mb-0"><i class="ph-duotone ph-circle text-primary f-12"></i> 11 may 12:30</p></td>
<td class="text-end">
<button class="btn btn-sm btn-link-danger">Reject</button>
<button class="btn btn-sm btn-primary">Approve</button>
</td>
</tr>
<tr>
<td>
<div class="d-inline-block align-middle">
<img src= "assets/images/user/avatar-4.jpg" %} alt="user image" class="img-radius align-top m-r-15" style="width:40px;">
<div class="d-inline-block">
<h6 class="m-b-0">Cedric Kelly</h6>
<p class="m-b-0">Android developer</p>
</div>
</div>
</td>
<td><p class="mb-0"><i class="ph-duotone ph-circle text-danger f-12"></i> 11 may 12:30</p></td>
<td class="text-end">
<button class="btn btn-sm btn-link-danger">Reject</button>
<button class="btn btn-sm btn-primary">Approve</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- [ Main Content ] end -->
</div>
</div>
<!-- [ Main Content ] end -->
<%- include('../layouts/footer-block') %>
<%- include('../layouts/customizer') %>
<!-- [Page Specific JS] start -->
<script src= "assets/js/plugins/apexcharts.min.js"></script>
<script src= "assets/js/plugins/jsvectormap.min.js"></script>
<script src= "assets/js/plugins/world.js" ></script>
<script src= "assets/js/plugins/world-merc.js"></script>
<script src= "assets/js/pages/dashboard-default.js"></script>
<!-- [Page Specific JS] end -->
<%- include('../layouts/footer-js') %}
</body>
<!-- [Body] end -->
</html>
```Layout settings
You can change the default layout in the routers/routes.js file in the body tag
```javascript
// =======================================================
// ----------- Light Able Theme Configuration -----------
// =======================================================
const caption_show = 'true'; // [ false , true ]
const dark_navbar = 'false'; // [ false , true ]
const preset_theme = 'preset-1'; // [ preset-1 to preset-10 ]
const dark_layout = 'false'; // [ false , true , default ]
const rtl_layout = 'false'; // [ false , true ]
const box_container = 'false'; // [ false , true ]
const version = 'v1.1.0';
if (rtl_layout == "true") {
var rtltemp = "rtl"
} else {
var rtltemp = "ltr"
}
if (dark_layout == 'true') {
var darklayouttemp = "dark"
} else {
var darklayouttemp = "light"
}
if (dark_navbar == 'true') {
var darknavbartemp = "dark"
} else {
var darknavbartemp = "light"
}
const layout = {
pc_caption_show: caption_show,
pc_preset_theme: preset_theme,
pc_dark_navbar: dark_navbar,
pc_dark_layout: dark_layout,
pc_rtl_layout: rtl_layout,
pc_box_container: box_container,
pc_theme_version: version,
bodySetup: 'data-pc-preset="' + preset_theme + '" data-pc-sidebar-theme="' + darknavbartemp + '" data-pc-sidebar-caption="' + caption_show + '" data-pc-direction="' + rtltemp + '" data-pc-theme="' + darklayouttemp + '"',
};
```| Attribute | Description |
|---|---|
data-pc-preset= "preset-1" | To set the your primary theme color you can change ['preset-1' to 'preset-10'] for different color. |
data-pc-sidebar-theme = "light" | To set the Light color left Sidebar. |
data-pc-sidebar-theme = "dark" | To set the Light color dark Sidebar. |
data-pc-sidebar-caption = "true" | To set the caption on. |
data-pc-sidebar-caption = "false" | To set the caption off. |
data-pc-direction = "ltr" | To set the layout direction left to right. |
data-pc-direction = "rtl" | To set the layout direction right to left. |
data-pc-theme = "light" | To set the layout theme light. |
data-pc-theme = "dark" | To set the layout theme dark. |
Last updated