Welcome To DocGrids.

Firstly, a huge thanks for purchasing this Template, your support is truly appreciated!

This document covers the installation and use of this theme and often reveals answers to common problems and issues - read this document thoroughly if you are experiencing any difficulties. If you have any questions that are beyond the scope of this document, feel free to Open a Support Ticket

#

Written by Musharof

Sep 15, 2023

Basic theme setup

To start using this DocGrids design system you will first need to import some files in your project or download ready to use starter templates.

This template requires Node and Gulp CLI. Please follow these steps to install the required technologies:

  1. Make sure you have Node locally installed.

  2. Download Gulp Command Line Interface to be able to use gulp in your Terminal.

    3.  yarn add gulp-cli -g

  3. After installing Gulp, run yarn install in the main plainadmin/ folder to download all the project dependencies. You’ll find them in the node_modules/ folder.

    4.  yarn add

  4. Run gulp in the plainadmin/ folder to serve the project files using BrowserSync. Running gulp will compile the theme and open /index.html in your main browser.

    5.  gulp

    While the gulp command is running, files in the assets/scss/ and all html files will be monitored for changes. Files from the assets/scss/ folder will generate injected CSS.

    Hit CTRL+C to terminate the gulp command. This will stop the local server from running.

CSS

Copy and paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS. 


<!-- ========== All CSS files linkup ========= -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/css/LineIcons.css" />
<link rel="stylesheet" href="assets/css/fullcalendar.css" />
<link rel="stylesheet" href="assets/css/morris.css" />
<link rel="stylesheet" href="assets/css/main.css" />
JS

Most of bootstrap components require the use of JavaScript to function. Specifically, they require Bootstrap.bundle.js. We added some popular plugins in the /js folder. Our main.js file contains some additional scripts which may come handy for your project. 


<!-- ========= All Javascript files linkup ======== -->
<script src="assets/js/bootstrap.bundle.min.js">
<script src="assets/js/Chart.min.js">
<script src="assets/js/apexcharts.min.js">
<script src="assets/js/dynamic-pie-chart.js">
<script src="assets/js/moment.min.js">
<script src="assets/js/fullcalendar.js">
<script src="assets/js/jsvectormap.min.js">
<script src="assets/js/world-merc.js">
<script src="assets/js/polyfill.js">
<script src="assets/js/main.js">

<script const menuButtonOpen = document.querySelector(".menu-open");
  // ===== copy code 
  const copyButton = document.querySelectorAll('.copy-btn');
  copyButton.forEach(element => {
    element.addEventListener('click', (e) => {
      const elem = e.target.parentElement.children[1].innerText;
      const el = document.createElement('textarea');

      console.log(elem)
      el.value = elem;

      document.body.appendChild(el);

      el.select();
      document.execCommand("copy");
      alert(`Code Copied!`)
      document.body.removeChild(el)
    })
</script>

Layout and Theme

We designed this template with two layouts. Right Sidebar and Left Sidebar. Default layout come with Left Sidebar. If you want Right Sidebar you have to add .rightSidebar this class at <body> tag. 


  <body class="rightSidebar">
    .....
    Content Here
    .....
  </body>

We designed this template with two Theme. Light Theme and Dark Theme. Default theme come with Light Version. If you want Dark Version you have to add .darkTheme this class at <body> tag. 


  <body class="darkTheme">
    .....
    Content Here
    .....
  </body>

Elements

James Bond knackered cup of char show off show off pick your nose and blow off faff about it’s all gone to pot tosser that so I said.

Tabs Widget

Tab Style 1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text.

Tab Style 2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text.

Tab Style 3

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text.

Icons

We Use LineIcons in our template. You can use any Icon from LineIcons. You have to include
assets/fonts this folder in your project folder and assets/css/lineIcons.css these files also.

Line Icons
  • 500px
  • add-files
  • adobe
  • agenda
  • airbnb
  • alarm
  • alarm-clock
  • amazon
  • amazon-original

Buttons

Buttons show what action will happen when the user clicks or touches it. Bootstrap buttons are used to initialize operations, both in the background or foreground of an experience.

Default Buttons

Default Buttons are comes with 4px corner radius and predefine styles. 


<ul class="buttons-group">
<li>
<a href="#0" class="main-btn primary-btn btn-hover"> Primary </a>
</li>
<li>
<a href="#0" class="main-btn secondary-btn btn-hover"> Secondary </a>
</li>
<li>
<a href="#0" class="main-btn success-btn btn-hover"> Success </a>
</li>
<li>
<a href="#0" class="main-btn danger-btn btn-hover"> Danger </a>
</li>
<li>
<a href="#0" class="main-btn warning-btn btn-hover"> Warning </a>
</li>
<li>
<a href="#0" class="main-btn info-btn btn-hover"> Info </a>
</li>
<li>
<a href="#0" class="main-btn dark-btn btn-hover"> Dark </a>
</li>
<li>
<a href="#0" class="main-btn light-btn btn-hover"> Light </a>
</li>
<li>
<a href="#0" class="main-btn active-btn btn-hover"> Active </a>
</li>
<li>
<a href="#0" class="main-btn deactive-btn btn-hover"> Deactive </a>
</li>
</ul>

Alerts

Notice Widget
Notice Message! Your message here

Do one don’t get shirty with me naff only a quid the full monty at public school burke Jeffrey smashing, blatant ruddy fanny around Charles.

Key Warnings

Do one don’t get shirty with me naff only a quid the full monty at public school burke Jeffrey smashing, blatant ruddy fanny around Charles.

Success Message

Do one don’t get shirty with me naff only a quid the full monty at public school burke Jeffrey smashing, blatant ruddy fanny around Charles.

Information Message

Do one don’t get shirty with me naff only a quid the full monty at public school burke Jeffrey smashing, blatant ruddy fanny around Charles.

Explanations

Explanations

To do this, simple navigate to wp-dashboard->User Frontend->Settings. From Settings, open the E-Mails page. The first 2 fields are all that you need to configure the email notification for guest users.

Explanations

To do this, simple navigate to wp-dashboard->User Frontend->Settings. From Settings, open the E-Mails page. The first 2 fields are all that you need to configure the email notification for guest users.

Explanations

To do this, simple navigate to wp-dashboard->User Frontend->Settings. From Settings, open the E-Mails page. The first 2 fields are all that you need to configure the email notification for guest users.

Explanations

To do this, simple navigate to wp-dashboard->User Frontend->Settings. From Settings, open the E-Mails page. The first 2 fields are all that you need to configure the email notification for guest users.

Accordions

Accordions Widget

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida.

Image Hotspots Widget

A Dashboard is a convenient way to get an overview of the the current status of your tasks and monitorthe progress of your team.

#

Content

Video, Table, Tooltips, List Items, Keyboard Shortcuts and others content related shortcodes contains in this section.

Video Widget

YouTube Video

Video is an electronic medium for the recording, copying, playback, broadcasting, and display of moving visual media. Video was first developed for mechanical

Tables

A table is a collection of related data held in a table format within a database. It consists of columns and rows. as we use Bootstrap you can access any of Bootstrap table in you project.

Basic Table
Sample ID
Reading #1
Reading #2
Reading #3
Reading #4

Manually

555

523

452

7858

Shortcuts

354

845

452

2447

Content

741

844

321

9952

Keyboard

813

534

458

4525

Timeline

775

365

512

8748

Manually

354

224

1234

8456

Pomodoro

2354

6354

587

4545

Keyboard Shortcuts

Switch the OS dropdown on the right sidebar to see the specific keyboard shortcuts according to your OS. Keyboard shortcuts help you navigate Slack with minimal effort. You can see a quick list of shortcuts by pressing ⌘/ (Mac) and Ctrl/ (Windows/Linux) or take a look at the detailed lists below.

Keyboard shortcuts in List Style
  • Align right – click Align right or use the shortcut CtrlShiftR or ⌘ShiftR
  • Align left – click Align left or use AltAor ⌘A
  • Align center – click Align center or use AltDor ⌘D
  • Align middle – click Align middle or use AltMor ⌘M
Action
Shortcut Key

Previous unread channel or DM

AltA⌘A

Jump to a conversation

CtrlK⌘K

Move focus to the previous section

CtrlZ⌘Z

Compose a new message

CtrlN⌘N

Previous channel or DM visited

Ctrl]⌘]

List Items Style

Unordered list items
  • Consectetur adipiscing elit dummy
  • Integer molestie lorem at massa
  • When an unknown printer took a scrambled
  • Facilisis in pretium nisl aliquet
  • Many desktop publishing and web page editors
Ordered list items
  1. Make sure you have Node locally installed.
  2. Download Gulp Command Line Interface to be able to use gulp in your Terminal.
  3. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece
  4. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration

Changelog

Update
DocGrids Help Center v1.0 is released!
Updated over a week ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie eu leo at consequat. Maecenas finibus pellentesque nibh, nec pretium nisl ultrices at. Ut est enim, egestas at purus non, viverra mollis arcu. Quisque leo felis, fringilla.

  1. Search form overlaps by the overlay color on focus
  2. Added Services, Cases pages
  3. Added WooCommerce functionality
Bug Fix
Login Auth Issue Fixed on DocGrids
Updated over a week ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie eu leo at consequat. Maecenas finibus pellentesque nibh, nec pretium nisl ultrices at. Ut est enim, egestas at purus non, viverra mollis arcu. Quisque leo felis.

viverra mollis arcu. Quisque leo felis, fringilla eu elementum vestibulum, consequat et mi. Fringilla eu elementum vestibulum, consequat et mi.

Feature
DocGrids new feature is released!
Updated 10 days ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie eu leo at consequat. Maecenas finibus pellentesque nibh, nec pretium nisl ultrices at. Ut est enim.