Ümit Tunç
276 lines
12 KiB
HTML
276 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<title>Doc - Blogzine Theme</title>
|
||
<!-- Meta Tags -->
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
<meta name="author" content="Webestica.com">
|
||
|
||
<!-- Favicon -->
|
||
<link rel="shortcut icon" href="assets/images/favicon.ico">
|
||
|
||
<!-- Google Font -->
|
||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;700&family=Rubik:wght@400;500;700&display=swap" rel="stylesheet">
|
||
|
||
<!-- Plugins CSS -->
|
||
<link rel="stylesheet" type="text/css" href="assets/vendor/font-awesome/css/all.min.css">
|
||
|
||
<!-- Theme CSS -->
|
||
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
|
||
<link rel="stylesheet" type="text/css" href="assets/css/doc.css">
|
||
<link rel="stylesheet" type="text/css" href="assets/css/prism.css">
|
||
<link rel="stylesheet" type="text/css" href="assets/vendor/glightbox/css/glightbox.css">
|
||
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<!-- **************** MAIN CONTENT START **************** -->
|
||
<main>
|
||
<!-- Navbar top START -->
|
||
<div class="navbar-top bg-dark px-3 px-sm-4 px-md-5">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<!-- Logo START -->
|
||
<a class="navbar-brand py-3" href="index.html">
|
||
<img class="navbar-brand-item" src="assets/images/logo.svg" alt="logo">
|
||
</a>
|
||
<!-- Logo END -->
|
||
|
||
<!-- Navbar right -->
|
||
<div>
|
||
<ul class="text-end list-inline m-0">
|
||
<li class="list-inline-item me-2 me-md-4"> <a class="text-white" href="https://blogzine.webestica.com">Live Preview</a> </li>
|
||
<li class="list-inline-item me-2 me-md-4"> <a class="text-white" href="https://support.webestica.com" target="_blank">Support</a> </li>
|
||
<li class="list-inline-item text-white"> <span class="badge bg-danger text-white">v1.2.0</span></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Navbar top END -->
|
||
|
||
<div class="container-fluid px-0">
|
||
<div class="page-wrapper">
|
||
<!-- Left sidebar START -->
|
||
<nav class="navbar navbar-expand-sm navbar-light bg-light px-3">
|
||
<a class="navbar-brand py-2 d-sm-none" href="#">Doc nav</a>
|
||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#docNav" aria-controls="docNav" aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
<div class="collapse navbar-collapse" id="docNav">
|
||
<div class="left-sidebar bg-light">
|
||
<div class="content h-100vh">
|
||
<div class="list-group list-group-borderless p-3 p-md-4">
|
||
<b class="text-dark text-uppercase mb-2">Getting Started</b>
|
||
<a class="list-group-item" href="index.html">Introduction</a>
|
||
<a class="list-group-item" href="gulp.html">Gulp</a>
|
||
<a class="list-group-item" href="customization.html">Customization</a>
|
||
<a class="list-group-item" href="color-scheme.html">Color Scheme</a>
|
||
<a class="list-group-item" href="logo-settings.html">Logo Settings</a>
|
||
<a class="list-group-item" href="page-loading.html">Page Loading</a>
|
||
<a class="list-group-item" href="fonts.html">Fonts</a>
|
||
<a class="list-group-item" href="dark-mode.html">Dark mode</a>
|
||
<a class="list-group-item" href="rtl.html">RTL Version</a>
|
||
<a class="list-group-item" href="lazy-load.html">Lazy Load</a>
|
||
<a class="list-group-item" href="sources-and-credits.html">Sources and Credits</a>
|
||
<a class="list-group-item" href="changelog.html">Changelog</a>
|
||
<a class="list-group-item" href="updates.html">Updates</a>
|
||
<a class="list-group-item" href="support.html">Support</a>
|
||
<b class="text-dark text-uppercase mt-3 mb-2">Component</b>
|
||
<a class="list-group-item" href="alerts.html">Alerts</a>
|
||
<a class="list-group-item" href="avatar.html">Avatar</a>
|
||
<a class="list-group-item" href="badges.html">Badges</a>
|
||
<a class="list-group-item" href="breadcrumb.html">Breadcrumb</a>
|
||
<a class="list-group-item" href="buttons.html">Buttons</a>
|
||
<a class="list-group-item" href="card.html">Card</a>
|
||
<a class="list-group-item" href="font-icons.html">Font icons</a>
|
||
<a class="list-group-item" href="google-map.html">Google Map</a>
|
||
<a class="list-group-item" href="nav-and-tabs.html">Nav and Tabs</a>
|
||
<a class="list-group-item" href="pagination.html">Pagination</a>
|
||
<a class="list-group-item" href="progress.html">Progress</a>
|
||
<a class="list-group-item" href="sticky-element.html">Sticky element</a>
|
||
<a class="list-group-item" href="sticky-footer.html">Sticky footer</a>
|
||
<a class="list-group-item" href="utility-classes.html">Utility classes</a>
|
||
<b class="text-dark text-uppercase mt-3 mb-2">Plugins</b>
|
||
<a class="list-group-item" href="tiny-slider.html">Tiny Slider</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<!-- Left sidebar END -->
|
||
|
||
<!-- Main content START -->
|
||
<div class="main-content">
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<!-- Page title -->
|
||
<div class="my-5">
|
||
<h1>Theme Color Scheme</h1>
|
||
<p class="lead">Making site color scheme according to your company identity is essential to all businesses. So here you will see how we have made this very important need of yours almost effortless.</p>
|
||
<hr class="my-5">
|
||
</div>
|
||
<!-- Page content START -->
|
||
|
||
|
||
<!-- #1 Using SCSS content -->
|
||
<p>We understand your need of changing theme color scheme at ease so We've got you covered. Whether you want to work with SCSS or CSS, both methods are described below. Please note we highly recommend to go with SCSS method.</p>
|
||
<h3 class="mt-5">#1 Using SCSS</h3>
|
||
<p>After completing gulp and sass setup, please open <code>_user-variables.scss</code> file located at <code>template/assets/scss</code>. You will find commented code in the same so please just uncomment it and save the file while gulp is running. If you are new to gulp, please go through Gulp section <a href="gulp.html">here</a>. Follow the steps and you will be able to build your site at very ease.</p>
|
||
|
||
<div class="position-relative">
|
||
<pre id="copy-1" class="my-3 h-500">
|
||
<code class=" language-javascript">
|
||
|
||
$primary: red;
|
||
|
||
// theme colors map
|
||
$theme-colors: ();
|
||
$theme-colors: map-merge(
|
||
(
|
||
"primary": $primary,
|
||
"secondary": $secondary,
|
||
"success": $success,
|
||
"info": $info,
|
||
"warning": $warning,
|
||
"danger": $danger,
|
||
"light": $light,
|
||
"dark": $dark
|
||
),
|
||
$theme-colors
|
||
);
|
||
|
||
// theme soft colors map
|
||
$theme-soft-colors: (
|
||
"white-soft": rgba($white, $soft-alpha + 0.2),
|
||
"primary-soft": rgba($primary, $soft-alpha),
|
||
"secondary-soft": rgba($secondary, $soft-alpha),
|
||
"success-soft": rgba($success, $soft-alpha),
|
||
"info-soft": rgba($info, $soft-alpha),
|
||
"warning-soft": rgba($warning, $soft-alpha + 0.05),
|
||
"danger-soft": rgba($danger, $soft-alpha),
|
||
"light-soft": rgba($light, $soft-alpha),
|
||
"dark-soft": rgba($dark, $soft-alpha)
|
||
);
|
||
|
||
|
||
$link-color: $primary;
|
||
$link-hover-color: shift-color($link-color, $link-shade-percentage);
|
||
|
||
$navbar-light-hover-color: $primary;
|
||
$navbar-light-active-color: $primary;
|
||
$navbar-dark-hover-color: $primary !important;
|
||
$navbar-dark-active-color: $primary !important;
|
||
|
||
$dropdown-link-hover-color: $primary !important;
|
||
$dropdown-link-active-color: $primary;
|
||
$dropdown-dark-link-hover-bg: $dropdown-link-hover-bg;
|
||
$dropdown-dark-link-active-color: $dropdown-link-active-color;
|
||
$dropdown-dark-link-active-bg: $dropdown-link-active-bg;
|
||
|
||
$progress-bar-bg: $primary;
|
||
|
||
$component-active-bg: $primary;
|
||
|
||
$pagination-hover-color: $white;
|
||
$pagination-hover-bg: $primary;
|
||
$pagination-hover-border-color: $primary;
|
||
$pagination-active-color: $component-active-color;
|
||
$pagination-active-bg: $component-active-bg;
|
||
$pagination-active-border-color: $pagination-active-bg;
|
||
|
||
$list-group-active-color: $component-active-color;
|
||
$list-group-active-bg: $component-active-bg;
|
||
$list-group-active-border-color: $list-group-active-bg;
|
||
|
||
$nav-pills-link-active-color: $component-active-color;
|
||
$nav-pills-link-active-bg: $component-active-bg;
|
||
|
||
$input-focus-border-color: $primary;
|
||
$form-check-input-focus-border: $input-focus-border-color;
|
||
$form-switch-focus-color: $input-focus-border-color;
|
||
$form-select-focus-border-color: $input-focus-border-color;
|
||
|
||
$form-check-input-checked-bg-color: $component-active-bg;
|
||
$form-check-input-checked-border-color: $form-check-input-checked-bg-color;
|
||
$form-check-input-indeterminate-color: $component-active-color;
|
||
$form-check-input-indeterminate-bg-color: $component-active-bg;
|
||
$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color;
|
||
|
||
$form-switch-focus-color: $input-focus-border-color;
|
||
$form-switch-focus-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>");
|
||
|
||
$btn-link-color: $link-color;
|
||
$btn-link-hover-color: $link-hover-color;
|
||
|
||
$form-range-thumb-bg: $component-active-bg;
|
||
$form-range-thumb-active-bg: tint-color($component-active-bg, 70%);
|
||
|
||
// Accordion
|
||
$accordion-button-active-bg: tint-color($component-active-bg, 90%);
|
||
$accordion-button-active-color: shade-color($primary, 10%);
|
||
$accordion-icon-color: $accordion-color;
|
||
$accordion-icon-active-color: $accordion-button-active-color;
|
||
$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
|
||
</code>
|
||
</pre>
|
||
<button id="copy_id-1" data-clipboard-action="copy" data-clipboard-target="#copy-1" class="copy-link btn btn-primary btn-sm me-3">Copy</button>
|
||
</div>
|
||
|
||
<p class="mt-3">By using this method, You have to change color codes only at one place and all your website color shades will be set properly.</p>
|
||
<p>Gulp must be running in your system to compile this, so after saving <code>_user-variables.scss</code> file, Gulp will compile the same and you will see the new color scheme.</p>
|
||
|
||
<!-- #2 Using CSS -->
|
||
<h3 class="mt-5">#2 Using CSS</h3>
|
||
<p>If you want to change theme default color scheme just using CSS, You can choose one of the 2 methods (We recommend Method 2 – Using color.css)</p>
|
||
<h6>Method 1: Using style.css</h6>
|
||
<p>If you don't want to take advantage of future updates of theme, You can change theme color by replacing your new HEX color code in <code>style.css</code> located in <code>template/assets/css</code> directory. Please note this is not recommended option.</p>
|
||
|
||
<h6>Method 2: Using color.css</h6>
|
||
<p>Please look out for <code>color.css</code> file in <code>template/assets/css</code> directory for new sample color as an example. You should link that CSS at the end in head section after theme CSS like below code:</p>
|
||
|
||
<div class="position-relative">
|
||
<pre id="copy-2" class="my-3">
|
||
<code class=" language-javascript">
|
||
<!-- Theme CSS -->
|
||
<link rel="stylesheet" type="text/css" href="assets/css/style.css" />
|
||
|
||
<!-- Theme Color CSS -->
|
||
<link rel="stylesheet" type="text/css" href="assets/css/color.css" />
|
||
</code>
|
||
</pre>
|
||
<button id="copy_id-2" data-clipboard-action="copy" data-clipboard-target="#copy-2" class="copy-link btn btn-primary btn-sm">Copy</button>
|
||
</div>
|
||
|
||
<p class="mb-0">Provided <code>color.css</code> within theme is for new color scheme as an example. Just make very few changes in variables of this file and you are good to go. A detailed explanation of how to change color can be found in <code>color.css</code> file.</p>
|
||
|
||
<!-- Tab END -->
|
||
|
||
|
||
|
||
<!-- Page content END -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Main content END -->
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- =======================
|
||
JavaScripts -->
|
||
|
||
<!-- Bootstrap JS -->
|
||
<script src="assets/js/bootstrap.bundle.min.js"></script>
|
||
|
||
<script src="assets/js/simple-scrollbar.min.js"></script>
|
||
<script src="assets/js/prism.js"></script>
|
||
<script src="assets/js/clipboard.min.js"></script>
|
||
<script src="assets/vendor/glightbox/js/glightbox.js"></script>
|
||
|
||
<!-- Template Functions -->
|
||
<script src="assets/js/functions.js"></script>
|
||
|
||
</body>
|
||
</html> |