HOSTED SPACES
...
Custom Landing Page
Landing page templates
Template 2
3min
This is a white-label template. To make it match your brand and style you need to do further customisations on the provided template
Use the below link to see what the white-label template looks like. Keep in mind that every color/logo/placeholder can be customized to match your style & branding.
Tip: Use the Copy button on the top-right of the code editor to copy all code
We added the custom code for you to use in the code editor below. See how to use it here
Index.html
Script.js
Style.css
1:root {
2 --accent-text: #2166ae;
3 --secondary-text: #0a4563;
4 --primary-text: #24292e;
5 --background-color: #fff;
6 --primary-link: #999;
7 --accent-link: var(--accent-text);
8 --header-title-color: #fff;
9 --header-subtitle-color: #fff;
10}
11/*
12Theme Name: jsv2doctheme
13Theme URI:
14Author:
15Author URI:
16Description:
17Version: 3.3.2
18License: GNU General Public License v2 or later
19License URI: LICENSE
20Text Domain: wp-bootstrap-starter
21Tags: blog, custom-menu, featured-images, threaded-comments, translation-ready, right-sidebar, custom-background, e-commerce, theme-options, sticky-post, full-width-template
22*/
23/*--------------------------------------------------------------
24>>> TABLE OF CONTENTS:
25----------------------------------------------------------------
26# Normalize
27# Typography
28# Elements
29# Forms
30# Navigation
31 ## Links
32 ## Menus
33# Accessibility
34# Alignments
35# Clearings
36# Widgets
37# Content
38 ## Posts and pages
39 ## Comments
40# Infinite scroll
41# Media
42 ## Captions
43 ## Galleries
44# Woocommerce
45# Footer
46--------------------------------------------------------------*/
47/*--------------------------------------------------------------
48# Normalize
49--------------------------------------------------------------*/
50body {
51 margin: 0;
52 -webkit-font-smoothing: auto;
53 font-size: 14px;
54 font-weight: normal;
55 line-height: 1.6;
56}
57
58article,
59aside,
60details,
61figcaption,
62figure,
63footer,
64header,
65main,
66menu,
67nav,
68section,
69summary {
70 display: block;
71}
72
73audio,
74canvas,
75progress,
76video {
77 display: inline-block;
78 vertical-align: baseline;
79}
80
81audio:not([controls]) {
82 display: none;
83 height: 0;
84}
85
86[hidden],
87template {
88 display: none;
89}
90
91a {
92 background-color: transparent;
93}
94
95a:active,
96a:hover {
97 outline: 0;
98}
99
100dfn {
101 font-style: italic;
102}
103
104mark {
105 background: #ff0;
106 color: #000;
107}
108
109small {
110 font-size: 80%;
111}
112
113sub,
114sup {
115 font-size: 75%;
116 line-height: 0;
117 position: relative;
118 vertical-align: baseline;
119}
120
121sup {
122 top: -0.5em;
123}
124
125sub {
126 bottom: -0.25em;
127}
128
129img {
130 border: 0;
131}
132
133svg:not(:root) {
134 overflow: hidden;
135}
136
137figure {
138 margin: 1em 2.5rem;
139}
140
141hr {
142 box-sizing: content-box;
143 height: 0;
144}
145
146button {
147 overflow: visible;
148}
149
150button,
151select {
152 text-transform: none;
153}
154
155button,
156html input[type="button"],
157input[type="reset"],
158input[type="submit"] {
159 -webkit-appearance: button;
160 cursor: pointer;
161}
162
163button[disabled],
164html input[disabled] {
165 cursor: default;
166}
167
168button::-moz-focus-inner,
169input::-moz-focus-inner {
170 border: 0;
171 padding: 0;
172}
173
174input {
175 line-height: normal;
176}
177
178input[type="checkbox"],
179input[type="radio"] {
180 box-sizing: border-box;
181 padding: 0;
182}
183
184input[type="number"]::-webkit-inner-spin-button,
185input[type="number"]::-webkit-outer-spin-button {
186 height: auto;
187}
188
189input[type="search"]::-webkit-search-cancel-button,
190input[type="search"]::-webkit-search-decoration {
191 -webkit-appearance: none;
192}
193
194fieldset {
195 border: 1px solid #c0c0c0;
196 margin: 0 2px;
197 padding: 0.35em 0.625em 0.75em;
198}
199
200legend {
201 border: 0;
202 padding: 0;
203}
204
205textarea {
206 overflow: auto;
207}
208
209optgroup {
210 font-weight: bold;
211}
212
213table {
214 border-collapse: collapse;
215 border-spacing: 0;
216}
217
218td,
219th {
220 padding: 0;
221}
222
223/*--------------------------------------------------------------
224# Typography
225--------------------------------------------------------------*/
226h1,
227h2,
228h3,
229h4,
230h5,
231h6 {
232 clear: both;
233 color: var(--primary-text);
234 font-weight: 600;
235 margin-top: 20px;
236 margin-bottom: 15px;
237}
238h1,
239h2,
240h3 {
241 font-weight: 500;
242}
243h1,
244.h1 {
245 font-size: 2rem;
246 padding-bottom: 20px;
247 color: var(--secondary-text);
248}
249h2,
250.h2 {
251 font-size: 1.55rem;
252 padding-bottom: 0.3em;
253 line-height: 130%;
254}
255h3,
256.h3 {
257 font-size: 1.45rem;
258 line-height: 130%;
259}
260h4,
261.h4 {
262 font-size: 1.45rem;
263 line-height: 130%;
264}
265h5,
266.h5 {
267 font-size: 1.1rem;
268 line-height: 130%;
269}
270
271p {
272 margin-bottom: 1.5em;
273}
274h1.entry-title {
275 font-size: 1.85rem;
276 /* border-bottom: 4px solid #f2f2f2; */
277 /* padding-bottom: 10px !important; */
278 color: var(--secondary-text);
279}
280h2.entry-title {
281 border-bottom: 1px solid #eaecef;
282 color: var(--secondary-text);
283}
284h3.widget-title {
285 font-size: 1rem;
286 margin-bottom: 5px;
287 color: var(--secondary-text);
288 border-bottom: 1px solid #ddd;
289 padding-bottom: 5px;
290}
291
292/*--------------------------------------------------------------
293# Elements
294--------------------------------------------------------------*/
295body {
296 background: var(--background-color);
297 /* Fallback for when there is no custom background color defined. */
298}
299
300img {
301 height: auto;
302 /* Make sure images are scaled correctly. */
303 max-width: 100%;
304 /* Adhere to container width. */
305}
306
307figure {
308 margin: 1em 0;
309 /* Extra wide images within figure tags don't overflow the content area. */
310}
311
312table {
313 margin: 0 0 1.5em;
314 width: 100%;
315}
316
317/*--------------------------------------------------------------
318# Forms
319--------------------------------------------------------------*/
320/*--------------------------------------------------------------
321# Navigation
322--------------------------------------------------------------*/
323header#masthead {
324 margin-bottom: 0;
325 padding: 0.85rem 0px;
326 border-bottom: 1px solid #f3f3f3;
327 background: var(--background-color) none repeat scroll 0 0;
328 border-bottom: 1px solid #eee;
329 box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.1);
330}
331
332.navbar-brand > a {
333 color: rgba(0, 0, 0, 0.9);
334 font-size: 1.1rem;
335 outline: medium none;
336 text-decoration: none;
337 color: #fff;
338 font-weight: 700;
339 display: block;
340 width: 270px;
341}
342
343.navbar-brand > a:visited,
344.navbar-brand > a:hover {
345 text-decoration: none;
346}
347
348#page-sub-header {
349 position: relative;
350 padding-top: 6.5rem;
351 padding-bottom: 6.5rem;
352 text-align: center;
353 background-size: cover !important;
354 background-position: center !important;
355}
356
357.site-header .container-fluid,
358.site-footer .container-fluid {
359 max-width: 100%;
360 padding-left: 5%;
361 padding-right: 5%;
362}
363div#page-sub-header h1 {
364 margin-bottom: 20px;
365 text-transform: none;
366 padding-top: 0;
367 color: var(--header-title-color);
368}
369#page-sub-header p {
370 margin-bottom: 0;
371 font-weight: 300;
372 color: var(--header-subtitle-color);
373 font-size: 1.15rem;
374}
375
376a.page-scroller {
377 color: #333;
378 font-size: 2.6rem;
379 display: inline-block;
380 margin-top: 2rem;
381}
382/*aside#secondary {
383 height: Calc(100vh - 140px);
384 overflow: hidden;
385}
386aside#secondary:hover {
387 overflow:auto;
388}*/
389
390/*--------------------------------------------------------------
391## Links
392--------------------------------------------------------------*/
393/*--------------------------------------------------------------
394## Menus
395--------------------------------------------------------------*/
396#masthead nav {
397 padding-left: 0;
398 padding-right: 0;
399}
400
401body:not(.theme-preset-active) #masthead .navbar-nav > li > a {
402 /* color: var(--secondary-text);
403 padding: 0.5rem;
404 font-weight: 500;
405 font-size: 0.875rem;*/
406 padding: 0.2rem 0.2rem;
407 font-weight: normal;
408 font-size: 14px;
409 margin: 0px 0.74rem;
410 transition: all 0.3s ease;
411 color: var(--primary-link);
412}
413
414body:not(.theme-preset-active) #masthead .navbar-nav > li > a:hover,
415body:not(.theme-preset-active)
416 #masthead
417 .navbar-nav
418 > li.current_page_item
419 > a {
420 color: var(--accent-link);
421}
422body:not(.theme-preset-active) #masthead .navbar-nav > li.active > a {
423 color: var(--accent-link);
424}
425.navbar-brand {
426 height: auto;
427}
428
429.navbar-toggle .icon-bar {
430 background: #000 none repeat scroll 0 0;
431}
432
433.dropdown-menu .dropdown-toggle::after {
434 border-bottom: 0.3em solid transparent;
435 border-left: 0.3em solid;
436 border-top: 0.3em solid transparent;
437}
438
439.dropdown.menu-item-has-children .dropdown.menu-item-has-children {
440 position: relative;
441}
442
443.dropdown.menu-item-has-children
444 .dropdown.menu-item-has-children
445 > .dropdown-menu {
446 top: 0;
447 left: 100%;
448 margin-top: -6px;
449 margin-left: -1px;
450 -webkit-border-radius: 0 6px 6px 6px;
451 -moz-border-radius: 0 6px 6px;
452 border-radius: 0 6px 6px 6px;
453}
454.dropdown.menu-item-has-children
455 .dropdown.menu-item-has-children:hover
456 > .dropdown-menu {
457 display: block;
458}
459
460.dropdown.menu-item-has-children .dropdown.menu-item-has-children > a:after {
461 display: block;
462 content: " ";
463 float: right;
464 width: 0;
465 height: 0;
466 border-color: transparent;
467 border-style: solid;
468 border-width: 5px 0 5px 5px;
469 border-left-color: #ccc;
470 margin-top: 5px;
471 margin-right: -10px;
472}
473
474.dropdown.menu-item-has-children
475 .dropdown.menu-item-has-children:hover
476 > a:after {
477 border-left-color: #fff;
478}
479
480.dropdown.menu-item-has-children .dropdown.menu-item-has-children.pull-left {
481 float: none;
482}
483
484.dropdown.menu-item-has-children
485 .dropdown.menu-item-has-children.pull-left
486 > .dropdown-menu {
487 left: -100%;
488 margin-left: 10px;
489 -webkit-border-radius: 6px 0 6px 6px;
490 -moz-border-radius: 6px 0 6px 6px;
491 border-radius: 6px 0 6px 6px;
492}
493
494/* Small menu. */
495.menu-toggle,
496.main-navigation.toggled ul {
497 display: block;
498}
499
500.dropdown-item {
501 line-height: 1.2;
502 padding-bottom: 0.313rem;
503 padding-top: 0.313rem;
504}
505
506.dropdown-menu {
507 min-width: 12.5rem;
508}
509
510.dropdown .open .dropdown-menu {
511 display: block;
512 left: 12.25em;
513 top: 0;
514}
515
516.dropdown-menu .dropdown-item {
517 white-space: normal;
518 background: transparent;
519 line-height: 1.6;
520}
521.dropdown-menu .dropdown-item:hover {
522 background: transparent;
523}
524
525@media screen and (min-width: 37.5em) {
526 .menu-toggle {
527 display: none;
528 }
529}
530@media screen and (min-width: 769px) {
531 .dropdown-menu li > .dropdown-menu {
532 right: -9.875rem;
533 top: 1.375rem;
534 }
535}
536@media screen and (max-width: 991px) {
537 .navbar-nav .dropdown-menu {
538 border: medium none;
539 margin-left: 1.25rem;
540 padding: 0;
541 }
542
543 .dropdown-menu li a {
544 padding: 0;
545 }
546
547 #masthead .navbar-nav > li > a {
548 padding-bottom: 0.625rem;
549 padding-top: 0.313rem;
550 }
551
552 .navbar-light .navbar-toggler {
553 border: medium none;
554 outline: none;
555 }
556}
557.site-main .comment-navigation,
558.site-main .posts-navigation,
559.site-main .post-navigation {
560 margin: 0 0 1.5em;
561 overflow: hidden;
562}
563
564.comment-navigation .nav-previous,
565.posts-navigation .nav-previous,
566.post-navigation .nav-previous {
567 float: left;
568 width: 50%;
569}
570
571.comment-navigation .nav-next,
572.posts-navigation .nav-next,
573.post-navigation .nav-next {
574 float: right;
575 text-align: right;
576 width: 50%;
577}
578.comment-content.card-block {
579 padding: 20px;
580}
581
582.navigation.post-navigation {
583 padding-top: 1.875rem;
584}
585
586.post-navigation .nav-previous a,
587.post-navigation .nav-next a {
588 border: 1px solid #ddd;
589 border-radius: 0.938rem;
590 display: inline-block;
591 padding: 0.313rem 0.875rem;
592 text-decoration: none;
593}
594
595.post-navigation .nav-next a::after {
596 content: " \2192";
597}
598
599.post-navigation .nav-previous a::before {
600 content: "\2190 ";
601}
602
603.post-navigation .nav-previous a:hover,
604.post-navigation .nav-next a:hover {
605 background: #eee none repeat scroll 0 0;
606}
607
608/*--------------------------------------------------------------
609# Accessibility
610--------------------------------------------------------------*/
611/* Text meant only for screen readers. */
612.screen-reader-text {
613 clip: rect(1px, 1px, 1px, 1px);
614 position: absolute !important;
615 height: 1px;
616 width: 1px;
617 overflow: hidden;
618 word-wrap: normal !important;
619 /* Many screen reader and browser combinations announce broken words as they would appear visually. */
620}
621.screen-reader-text:focus {
622 background-color: #f1f1f1;
623 border-radius: 3px;
624 box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
625 clip: auto !important;
626 color: #21759b;
627 display: block;
628 font-size: 14px;
629 font-size: 0.875rem;
630 font-weight: bold;
631 height: auto;
632 left: 0.313rem;
633 line-height: normal;
634 padding: 0.938rem 1.438rem 0.875rem;
635 text-decoration: none;
636 top: 0.313rem;
637 width: auto;
638 z-index: 100000;
639 /* Above WP toolbar. */
640}
641
642/* Do not show the outline on the skip link target. */
643#content[tabindex="-1"]:focus {
644 outline: 0;
645}
646
647/*--------------------------------------------------------------
648# Alignments
649--------------------------------------------------------------*/
650.alignleft {
651 display: inline;
652 float: left;
653 margin-right: 1.5em;
654}
655
656.alignright {
657 display: inline;
658 float: right;
659 margin-left: 1.5em;
660}
661
662.aligncenter {
663 clear: both;
664 display: block;
665 margin-left: auto;
666 margin-right: auto;
667}
668
669a img.alignright {
670 float: right;
671 margin: 0.313rem 0 1.25rem 1.25rem;
672}
673
674a img.alignnone {
675 margin: 0.313rem 1.25rem 1.25rem 0;
676}
677
678a img.alignleft {
679 float: left;
680 margin: 0.313rem 1.25rem 1.25rem 0;
681}
682
683a img.aligncenter {
684 display: block;
685 margin-left: auto;
686 margin-right: auto;
687}
688
689.wp-caption.alignnone {
690 margin: 0.313rem 1.25rem 1.25rem 0;
691}
692
693.wp-caption.alignleft {
694 margin: 0.313rem 1.25rem 1.25rem 0;
695}
696
697.wp-caption.alignright {
698 margin: 0.313rem 0 1.25rem 1.25rem;
699}
700
701/*--------------------------------------------------------------
702# Clearings
703--------------------------------------------------------------*/
704.clear:before,
705.clear:after,
706.entry-content:before,
707.entry-content:after,
708.comment-content:before,
709.comment-content:after,
710.site-header:before,
711.site-header:after,
712.site-content:before,
713.site-content:after,
714.site-footer:before,
715.site-footer:after {
716 content: "";
717 display: table;
718 table-layout: fixed;
719}
720
721.clear:after,
722.entry-content:after,
723.comment-content:after,
724.site-header:after,
725.site-content:after,
726.site-footer:after {
727 clear: both;
728}
729
730/*--------------------------------------------------------------
731# Widgets
732--------------------------------------------------------------*/
733.widget {
734 margin: 0 0 1.5em;
735 /*font-size: 1rem;*/
736 /* Make sure select elements fit in widgets. */
737}
738.widget select {
739 max-width: 100%;
740}
741
742.widget_search .search-form input[type="submit"] {
743 display: none;
744}
745
746.nav > li > a:focus,
747.nav > li > a:hover {
748 background-color: #eee;
749 text-decoration: none;
750}
751.half-rule {
752 width: 6rem;
753 margin: 2.5rem 0;
754}
755.widget_categories .nav-link {
756 display: inline-block;
757}
758
759/*--------------------------------------------------------------
760# Content
761--------------------------------------------------------------*/
762/*--------------------------------------------------------------
763## Posts and pages
764--------------------------------------------------------------*/
765#content.site-content {
766 padding-bottom: 0px;
767 padding-top: 0px;
768}
769
770.sticky .entry-title::before {
771 content: "\f08d";
772 font-family: "Font Awesome\ 5 Free";
773 font-size: 1.563rem;
774 left: -2.5rem;
775 position: absolute;
776 top: 0.375rem;
777 font-weight: 900;
778}
779
780.sticky .entry-title {
781 position: relative;
782}
783
784.single .byline,
785.group-blog .byline {
786 display: inline;
787}
788
789.page-content,
790.entry-content,
791.entry-summary {
792 margin: 1.5em 0 0;
793}
794
795.page-links {
796 clear: both;
797 margin: 0 0 1.5em;
798}
799
800.page-template-blank-page .entry-content,
801.blank-page-with-container .entry-content {
802 margin-top: 0;
803}
804
805.post.hentry {
806 margin-bottom: 2rem;
807}
808
809.posted-on,
810.byline,
811.comments-link {
812 color: #9a9a9a;
813}
814
815.entry-title > a {
816 color: inherit;
817}
818
819/*--------------------------------------------------------------
820## Comments
821--------------------------------------------------------------*/
822.comment-content a {
823 word-wrap: break-word;
824}
825
826.bypostauthor {
827 display: block;
828}
829
830.comment-body .pull-left {
831 padding-right: 0.625rem;
832}
833
834.comment-list .comment {
835 display: block;
836}
837
838.comment-list {
839 padding-left: 0;
840}
841
842.comments-title {
843 font-size: 1.125rem;
844}
845
846.comment-list .pingback {
847 border-top: 1px solid rgba(0, 0, 0, 0.125);
848 padding: 0.563rem 0;
849}
850
851.comment-list .pingback:first-child {
852 border: medium none;
853}
854
855/*--------------------------------------------------------------
856# Infinite scroll
857--------------------------------------------------------------*/
858/* Globally hidden elements when Infinite Scroll is supported and in use. */
859.infinite-scroll .posts-navigation,
860.infinite-scroll.neverending .site-footer {
861 /* Theme Footer (when set to scrolling) */
862 display: none;
863}
864
865/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
866.infinity-end.neverending .site-footer {
867 display: block;
868}
869
870/*--------------------------------------------------------------
871# Media
872--------------------------------------------------------------*/
873.page-content .wp-smiley,
874.entry-content .wp-smiley,
875.comment-content .wp-smiley {
876 border: none;
877 margin-bottom: 0;
878 margin-top: 0;
879 padding: 0;
880}
881
882/* Make sure embeds and iframes fit their containers. */
883embed,
884iframe,
885object {
886 max-width: 100%;
887}
888
889/*--------------------------------------------------------------
890## Captions
891--------------------------------------------------------------*/
892.wp-caption {
893 background: #f1f1f1 none repeat scroll 0 0;
894 border: 1px solid #f0f0f0;
895 max-width: 96%;
896 padding: 0.313rem 0.313rem 0;
897 text-align: center;
898}
899.wp-caption img[class*="wp-image-"] {
900 border: 0 none;
901 height: auto;
902 margin: 0;
903 max-width: 100%;
904 padding: 0;
905 width: auto;
906}
907.wp-caption .wp-caption-text {
908 font-size: 0.688rem;
909 line-height: 1.063rem;
910 margin: 0;
911 padding: 0.625rem;
912}
913
914.wp-caption-text {
915 text-align: center;
916}
917
918/*--------------------------------------------------------------
919## Galleries
920--------------------------------------------------------------*/
921.gallery {
922 margin-bottom: 1.5em;
923}
924
925.gallery-item {
926 display: inline-block;
927 text-align: center;
928 vertical-align: top;
929 width: 100%;
930}
931.gallery-item .gallery-columns-2 {
932 max-width: 50%;
933}
934.gallery-item .gallery-columns-3 {
935 max-width: 33.33333%;
936}
937.gallery-item .gallery-columns-4 {
938 max-width: 25%;
939}
940.gallery-item .gallery-columns-5 {
941 max-width: 20%;
942}
943.gallery-item .gallery-columns-6 {
944 max-width: 16.66667%;
945}
946.gallery-item .gallery-columns-7 {
947 max-width: 14.28571%;
948}
949.gallery-item .gallery-columns-8 {
950 max-width: 12.5%;
951}
952.gallery-item .gallery-columns-9 {
953 max-width: 11.11111%;
954}
955
956.gallery-caption {
957 display: block;
958}
959
960/*--------------------------------------------------------------
961# Plugin Compatibility
962--------------------------------------------------------------*/
963/*--------------------------------------------------------------
964## Woocommerce
965--------------------------------------------------------------*/
966.woocommerce-cart-form .shop_table .coupon .input-text {
967 width: 8.313rem !important;
968}
969
970.variations_form .variations .value > select {
971 margin-bottom: 0.625rem;
972}
973
974.woocommerce-MyAccount-content .col-1,
975.woocommerce-MyAccount-content .col-2 {
976 max-width: 100%;
977}
978
979/*--------------------------------------------------------------
980## Elementor
981--------------------------------------------------------------*/
982.elementor-page article .entry-footer {
983 display: none;
984}
985
986.elementor-page.page-template-fullwidth #content.site-content {
987 padding-bottom: 0;
988 padding-top: 0;
989}
990
991.elementor-page .entry-content {
992 margin-top: 0;
993}
994
995/*--------------------------------------------------------------
996## Visual Composer
997--------------------------------------------------------------*/
998.vc_desktop article .entry-footer {
999 display: none;
1000}
1001
1002.vc_desktop #content.site-content {
1003 padding-bottom: 0;
1004 padding-top: 0;
1005}
1006
1007.vc_desktop .entry-content {
1008 margin-top: 0;
1009}
1010
1011/*--------------------------------------------------------------
1012# Footer
1013--------------------------------------------------------------*/
1014footer#colophon {
1015 font-size: 85%;
1016 bottom: 0;
1017 position: relative;
1018 width: 100%;
1019}
1020body:not(.theme-preset-active) footer#colophon {
1021 color: #666;
1022 font-weight: 300;
1023 background: var(--background-color);
1024 border-top: 1px solid #eee;
1025}
1026.navbar-dark .site-info {
1027 color: #fff;
1028}
1029.copyright {
1030 font-size: 0.875rem;
1031 margin-bottom: 0;
1032 text-align: center;
1033}
1034
1035.copyright a,
1036footer#colophon a {
1037 color: inherit;
1038}
1039
1040@media screen and (max-width: 767px) {
1041 #masthead .navbar-nav > li > a {
1042 padding-bottom: 0.938rem;
1043 padding-top: 0.938rem;
1044 }
1045 .navbar-brand > a {
1046 width: 200px;
1047 }
1048 body:not(.theme-preset-active) #masthead .navbar-nav > li > a {
1049 padding: 0.75rem 0.2rem;
1050 font-size: 1.1rem;
1051 border-bottom: 1px solid #eee;
1052 }
1053 .site-header .container-fluid,
1054 .site-footer .container-fluid {
1055 width: 100%;
1056 }
1057}
1058/*--------------------------------------------------------------
1059# Media Query
1060--------------------------------------------------------------*/
1061/*--------------------------------------------------------------
1062## Notebook
1063--------------------------------------------------------------*/
1064@media only screen and (max-width: 1280px) {
1065 html {
1066 font-size: 95%;
1067 }
1068}
1069
1070@media screen and (max-width: 1199px) {
1071 .navbar-dark .dropdown-item {
1072 color: #fff;
1073 }
1074 .navbar-nav .dropdown-menu {
1075 background: transparent;
1076 box-shadow: none;
1077 border: none;
1078 }
1079}
1080/*--------------------------------------------------------------
1081## Netbook
1082--------------------------------------------------------------*/
1083@media only screen and (max-width: 1024px) {
1084 html {
1085 font-size: 90%;
1086 }
1087}
1088/*--------------------------------------------------------------
1089## iPad
1090--------------------------------------------------------------*/
1091@media only screen and (max-width: 960px) {
1092 html {
1093 font-size: 85%;
1094 }
1095}
1096/*--------------------------------------------------------------
1097## iPad
1098--------------------------------------------------------------*/
1099@media only screen and (max-width: 768px) {
1100 html {
1101 font-size: 80%;
1102 }
1103}
1104/*--------------------------------------------------------------
1105## iPad
1106--------------------------------------------------------------*/
1107@media only screen and (max-width: 480px) {
1108 html {
1109 font-size: 75%;
1110 }
1111}
1112
1113/* Custom CSS code by h */
1114ul.children.nav {
1115 margin-left: 1rem;
1116 margin-top: 5px;
1117}
1118aside#secondary {
1119 min-height: calc(100vh - 120px);
1120}
1121.sidebarBlock {
1122 background: #e7ecef;
1123 /* border-radius: 0px; */
1124 padding: 1.5rem 2em;
1125 border: 1px solid #e7ecef;
1126 /*margin-bottom: 2rem;*/
1127 padding-bottom: 2.5rem;
1128 min-height: 100%;
1129 outline: none;
1130}
1131.site-main {
1132 padding-left: 30px;
1133 padding-right: 30px;
1134 padding-bottom: 60px;
1135}
1136aside .nav li {
1137 padding: 0px 0 0px 0px;
1138 list-style-type: none;
1139 /* background: url(../jsv2doctheme/inc/assets/images/list-icon.png) no-repeat 0 12px; */
1140 text-shadow: none;
1141 margin-bottom: 0px;
1142 margin-top: 0px;
1143 position: relative;
1144}
1145aside .nav > li {
1146 font-size: 14px;
1147}
1148ul.children.nav > li {
1149}
1150/*aside .nav li a:before {
1151 content:'';
1152 height:6px;
1153 width:6px;
1154 background: var(--primary-link);
1155 display:inline-block;
1156 border-radius:100%;
1157 margin-right: 6px;
1158 vertical-align: middle;
1159}*/
1160aside .nav li > a {
1161 padding: 5px 0px;
1162 transition: all 0.2s ease;
1163}
1164aside .nav > li > a:focus,
1165aside .nav > li > a:hover {
1166 /*background: none;
1167 background-color:transparent;
1168 text-decoration: none;
1169 color:var(--accent-link);
1170 margin-left: 2px;*/
1171 background: none;
1172 background-color: transparent;
1173 text-decoration: none;
1174 color: var(--secondary-text);
1175 margin-left: 0px;
1176}
1177h2.entry-title {
1178 border-bottom: 2px solid #f0f1f2;
1179 padding-bottom: 5px !important;
1180}
1181.search-results h2.entry-title {
1182 font-size: 1.35rem;
1183}
1184#comments {
1185 display: none !important;
1186}
1187.entry-footer {
1188 font-size: 0.85rem;
1189 opacity: 0.85;
1190}
1191.entry-footer .cat-links {
1192 font-weight: bold;
1193}
1194.entry-footer .cat-links a {
1195 font-weight: 400;
1196}
1197.home .post.type-post,
1198.category .post.type-post {
1199 background: #fff;
1200 padding: 20px;
1201 box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.05);
1202 border-radius: 3px;
1203 border: 1px solid #f3f3f3;
1204}
1205.post-thumbnail {
1206 margin-bottom: 0px !important;
1207}
1208.entry-title > a:hover,
1209.entry-title > a:focus {
1210 text-decoration: none;
1211 outline: none;
1212 opacity: 0.85;
1213}
1214.navigation.post-navigation {
1215 display: none;
1216}
1217.title,
1218.block,
1219.box {
1220 padding: 10px 15px;
1221}
1222.title-blueBg {
1223 background: var(--secondary-text);
1224 padding: 10px 15px;
1225 color: #fff;
1226}
1227.title-rightText,
1228.title-rightText a {
1229 display: inline-block;
1230 float: right;
1231 font-size: 0.85rem;
1232}
1233.title-rightText a {
1234 color: var(--accent-link);
1235 transition: all 0.2s ease;
1236}
1237.title-rightText,
1238.title-rightText a:hover,
1239.title-rightText,
1240.title-rightText a:focus {
1241 opacity: 0.7;
1242}
1243.title-rightLabel {
1244 margin-right: 5px;
1245 display: inline-block;
1246}
1247.card.customCard {
1248 margin-bottom: 20px;
1249 margin-top: 20px;
1250 margin-left: 20px;
1251}
1252.card.customCard .card-title {
1253 margin-bottom: 1rem;
1254 border-bottom: 1px solid #d8d8d8;
1255 padding-bottom: 10px;
1256}
1257.single .entry-footer span.cat-links {
1258 display: none !important;
1259}
1260/* code on 15-11-2019*/
1261.box {
1262 padding: 20px;
1263}
1264.box-greyBg {
1265 padding: 20px;
1266 background: #f8f8f8;
1267}
1268.box-greenBg {
1269 padding: 20px;
1270 background: var(--accent-link);
1271 color: #fff;
1272}
1273.box-blueBg {
1274 padding: 20px;
1275 background: var(--secondary-text);
1276 color: #fff;
1277}
1278.box-bordered {
1279 padding: 20px;
1280 border: 1px solid #ddd;
1281 border-radius: 0px;
1282}
1283.mergeBottom {
1284 margin-bottom: 0px;
1285 padding-bottom: 10px;
1286}
1287.mergeTop {
1288 margin-top: 0px;
1289 padding-top: 10px;
1290}
1291.title-blueBg {
1292 background: var(--secondary-text);
1293 padding: 10px 15px;
1294 color: #fff;
1295 border-radius: 0px;
1296 box-sizing: border-box;
1297}
1298.title-greyBg {
1299 background: #f8f8f8;
1300 padding: 10px 15px;
1301 color: var(--secondary-text);
1302 border-radius: 0px;
1303 box-sizing: border-box;
1304}
1305.title-bottomBordered {
1306 background: none;
1307 padding: 10px 15px;
1308 color: var(--secondary-text);
1309 border-radius: 0px;
1310 border-bottom: 2px solid #eee;
1311 box-sizing: border-box;
1312}
1313
1314.arrow-list li {
1315 list-style: none;
1316 text-indent: -22px;
1317}
1318.arrow-list > li::before {
1319 -moz-border-bottom-colors: none;
1320 -moz-border-left-colors: none;
1321 -moz-border-right-colors: none;
1322 -moz-border-top-colors: none;
1323 border-color: #000;
1324 border-image: none;
1325 border-style: solid;
1326 border-width: 0 1px 1px 0;
1327 content: "";
1328 display: inline-block;
1329 margin: 2px 5px;
1330 padding: 3px;
1331 transform: rotate(-45deg);
1332 margin-right: 10px;
1333}
1334.entry-content ul,
1335.entry-content ol {
1336 padding: 10px 20px !important;
1337}
1338.entry-content p {
1339 /* padding-left:15px; */
1340 /* padding-right:15px; */
1341}
1342.entry-content p a {
1343 color: var(--accent-link);
1344 transition: all 0.2s ease;
1345 text-decoration: none;
1346}
1347.entry-content p a:hover {
1348 text-decoration: underline !important;
1349 opacity: 0.8;
1350}
1351.mb-0 {
1352 margin-bottom: 0px !important;
1353}
1354.pb-0 {
1355 padding-bottom: 0px !important;
1356}
1357
1358.contentSecondary,
1359.boxSecondary {
1360 margin-left: 5%;
1361}
1362.block {
1363 padding: 20px !important;
1364}
1365.tGreen,
1366.tGreen li,
1367.tGreen li a {
1368 color: var(--accent-link) !important;
1369}
1370.tBlue,
1371.tBlue li,
1372.tBlue li a {
1373 color: var(--secondary-text) !important;
1374}
1375.tWhite {
1376 color: #ffffff !important;
1377}
1378.tBlack {
1379 color: #000000 !important;
1380}
1381.bgGreen {
1382 background-color: var(--accent-link) !important;
1383}
1384.bgBlue {
1385 background-color: var(--secondary-text) !important;
1386}
1387.bgGrey {
1388 background-color: #f8f8f8 !important;
1389}
1390.bgWhite {
1391 background-color: #ffffff !important;
1392}
1393.bgBlack {
1394 background-color: #000000 !important;
1395}
1396.text-small {
1397 font-size: 75% !important;
1398}
1399.syntaxhighlighter .line table tr td {
1400 padding: 4px !important;
1401}
1402.entry-content a {
1403 color: var(--accent-link);
1404 transition: all 0.2s ease;
1405 font-style: italic;
1406 font-weight: 400;
1407}
1408/*#masthead .navbar-nav > li > a:after {content: '';height: 2px;width: 0%;display: block;background: var(--accent-link);transition: all 0.3s ease;}
1409#masthead .navbar-nav > li > a:hover:after { width:100%; }*/
1410
1411/* header widget area, mainly for searchbar*/
1412.headerWidgetBlock {
1413 position: absolute;
1414 top: 52px;
1415 right: 0;
1416 width: 310px;
1417}
1418.widget-area .hw-widget {
1419 background: #eee;
1420 text-align: center;
1421 padding: 12px 20px;
1422}
1423.hw-widget .search-form {
1424 position: relative;
1425 margin: 0px;
1426}
1427.hw-widget .search-form label {
1428 display: block;
1429 margin: 0px;
1430 padding: 0px;
1431}
1432.hw-widget .search-form .search-submit.btn.btn-default {
1433 position: absolute;
1434 background: var(--secondary-text);
1435 color: #fff;
1436 border-radius: 0px;
1437 top: 0;
1438 right: 0;
1439 border-color: transparent;
1440 font-size: 14px;
1441}
1442.hw-widget input.search-field.form-control {
1443 border-radius: 0px;
1444 width: 100%;
1445 font-size: 14px;
1446}
1447.hw-widget input.search-field.form-control:focus {
1448 box-shadow: none;
1449}
1450
1451li.cat-item.current-cat.nav-item > a,
1452li.page_item.current_page_item.nav-item > a,
1453.current_page_parent.nav-item > a {
1454 font-weight: bold;
1455}
1456li.cat-item.current-cat.nav-item > a:before,
1457li.page_item.current_page_item.nav-item > a:before {
1458 background: var(--secondary-text);
1459}
1460
1461/* sidebar block search widget */
1462
1463.sidebarBlock input.search-field.form-control,
1464.search-form input.search-field.form-control {
1465 width: 98%;
1466 height: calc(2.2rem + 0.75rem + 2px);
1467 padding-left: 45px;
1468 background-color: #fff;
1469 background-image: url("https://cdn1.iconfinder.com/data/icons/hawcons/32/698956-icon-111-search-512.png");
1470 background-position: 5px center;
1471 background-size: 34px;
1472 background-repeat: no-repeat;
1473 background-color: transparent;
1474}
1475
1476.search-form label {
1477 width: 100%;
1478}
1479.search-form .search-submit {
1480 display: none;
1481}
1482.sidebarBlock .widget_search {
1483 margin-top: 15px;
1484 margin-bottom: 30px;
1485}
1486.content-area.pt-5 {
1487 padding-top: 2.35rem !important;
1488}
1489body.header-fixed .site-header {
1490 position: fixed;
1491 width: 100%;
1492 top: 0px;
1493 z-index: 99;
1494}
1495body.header-fixed .sidebarBlock {
1496 padding: 80px 2em 50px 2em;
1497}
1498
1499/* code for Static Home page */
1500.modulesRow {
1501 padding-top: 6rem;
1502 padding-bottom: 6rem;
1503}
1504.iconBlock {
1505 text-align: center;
1506 padding: 0px;
1507 box-sizing: border-box;
1508 margin-bottom: 30px;
1509}
1510.iconBlock .iconImgWrap img {
1511 width: 64px;
1512 height: 64px;
1513 margin: 0 auto;
1514}
1515.iconBlock h3 {
1516 font-size: 1.15rem;
1517 color: var(--secondary-text);
1518 margin-top: 2rem;
1519 margin-bottom: 1rem;
1520}
1521.iconBlock a.btn.btn-bordered,
1522.iconBlock .btn.btn-bordered {
1523 border: 1px solid #666;
1524 display: inline-block;
1525 margin-top: 5px;
1526 margin-bottom: 5px;
1527 width: 100%;
1528 padding: 8px 10px;
1529 transition: all 0.3s ease;
1530}
1531.iconBlock a.btn.btn-bordered:hover {
1532 background-color: #f2f2f2;
1533 text-decoration: none;
1534 border-color: #eee;
1535}
1536.syntaxhighlighter.preCode {
1537 width: 90% !important;
1538 margin: 2rem auto !important;
1539}
1540p.iconBlock-brief {
1541 min-height: 95px;
1542}
1543a.iconBlockWrap {
1544 display: block;
1545 border: 1px solid transparent;
1546 padding: 1rem;
1547 border-radius: 4px;
1548 text-decoration: none;
1549 color: #333;
1550 transition: all 0.3s ease;
1551}
1552a.iconBlockWrap:hover {
1553 background: #fff;
1554 border-color: #eee;
1555 -webkit-box-shadow: 0 0.35rem 0.75rem rgba(0, 0, 0, 0.1) !important;
1556 -moz-box-shadow: 0 0.35rem 0.75rem rgba(0, 0, 0, 0.1) !important;
1557 box-shadow: 0 0.35rem 0.75rem rgba(0, 0, 0, 0.1) !important;
1558}
1559a.iconBlockWrap:hover .btn.btn-bordered {
1560 background: #eee;
1561 border-color: #ddd;
1562}
1563
1564/* sidebar nav changes */
1565
1566/*aside .nav li > a::before {
1567 -moz-border-bottom-colors: none;
1568 -moz-border-left-colors: none;
1569 -moz-border-right-colors: none;
1570 -moz-border-top-colors: none;
1571 border-color: var(--secondary-text);
1572 border-image: none;
1573 border-style: solid;
1574 border-width: 0 1px 1px 0;
1575 content: "";
1576 display: inline-block;
1577 margin: 2px 3px;
1578 padding: 3px;
1579 transform: rotate(-45deg);
1580 margin-right: 8px;
1581 background: none;
1582 border-radius:0px;
1583 margin-left:0px;
1584}*/
1585
1586/*aside .nav li.page_item_has_children > a::after {
1587 -moz-border-bottom-colors: none;
1588 -moz-border-left-colors: none;
1589 -moz-border-right-colors: none;
1590 -moz-border-top-colors: none;
1591 border-color: var(--secondary-text);
1592 border-image: none;
1593 border-style: solid;
1594 border-width: 0 1px 1px 0;
1595 content: "";
1596 display: inline-block;
1597 margin: 2px 3px;
1598 padding: 3px;
1599 transform: rotate(45deg);
1600 margin-right: 5px;
1601 background: none;
1602 border-radius:0px;
1603 margin-left: 5px;
1604 transition:all 0.2s ease;
1605}
1606aside .nav li.page_item_has_children.activeLink > a::after {
1607 transform: rotate(-135deg);
1608 margin-top:0px;
1609 margin-bottom:-2px;
1610}*/
1611li.cat-item.current-cat.nav-item > a:before,
1612li.page_item.current_page_item.nav-item > a:before {
1613 background: none;
1614}
1615
1616ul.children.nav.flex-column {
1617 display: none;
1618}
1619
1620aside .nav.children li > a {
1621 padding-top: 2px;
1622 padding-bottom: 2px;
1623}
1624header.page-header {
1625 padding-top: 30px;
1626}
1627/* changes added by h for leftbar page link issue */
1628/*li.cat-item.current-cat.nav-item > a, li.page_item.current_page_item.nav-item > a, .current_page_parent.nav-item > a {
1629 font-weight: bold;
1630} */
1631
1632a[aria-current="page"],
1633.current_page_item.nav-item > a,
1634.active.menu-item menu-item-type-custom > a {
1635 color: var(--accent-link) !important;
1636}
1637/*aside .nav li.page_item_has_children.activeLink, .current_page_parent.activeLink, .page_item_has_children.current_page_ancestor > ul {
1638 display:block !important;
1639}*/
1640
1641aside .nav li.page_item_has_children.activeLink,
1642.current_page_parent.activeLink,
1643.page_item_has_children.current_page_ancestor > ul {
1644 display: block !important;
1645}
1646aside .nav li.page_item_has_children > span.customNavIcon::after {
1647 -moz-border-bottom-colors: none;
1648 -moz-border-left-colors: none;
1649 -moz-border-right-colors: none;
1650 -moz-border-top-colors: none;
1651 border-color: #000203;
1652 border-image: none;
1653 border-style: solid;
1654 border-width: 0 1px 1px 0;
1655 content: "";
1656 display: inline-block;
1657 margin: 2px 3px;
1658 padding: 3px;
1659 transform: rotate(45deg);
1660 margin-right: 5px;
1661 background: none;
1662 border-radius: 0px;
1663 margin-left: 5px;
1664 transition: all 0.2s ease;
1665}
1666aside .nav li.page_item_has_children.activeLink > span.customNavIcon::after {
1667 transform: rotate(-135deg);
1668 margin-top: 0px;
1669 margin-bottom: -3px;
1670}
1671aside .nav li > a {
1672 padding: 4px 0px;
1673 transition: none;
1674 display: inline-block;
1675 width: auto;
1676 /*min-width: 230px;
1677 max-width: calc(100% - 22px);*/
1678}
1679span.customNavIcon {
1680 cursor: pointer;
1681 display: inline-block;
1682 font-weight: normal;
1683 text-align: center;
1684 background: none;
1685 margin-left: 3px;
1686}
1687.page_item_has_children.current_page_ancestor.current_page_parent.nav-item
1688 > span.customNavIcon {
1689 pointer-events: none;
1690 cursor: auto;
1691}
1692.qe-faq-toggle.active .qe-toggle-content {
1693 background-color: #f5f5f5;
1694 padding-top: 20px;
1695 border: 1px solid #eee;
1696}
1697.qe-faq-toggle {
1698 margin-bottom: 8px;
1699 transition: all 0.5s;
1700}
1701@media (min-width: 992px) {
1702 aside#secondary.col-lg-3 {
1703 max-width: 370px;
1704 }
1705}
1706
1707.toolbar .item.about,
1708.toolbar .item.copyToClipboard,
1709.syntaxhighlighter .toolbar a.item.about,
1710.syntaxhighlighter
1711 .toolbar
1712 a.item.copyToClipboard
1713 .syntaxhighlighter
1714 .toolbar
1715 .item.about,
1716.syntaxhighlighter .toolbar .item.copyToClipboard,
1717.syntaxhighlighter .toolbar .item.printSource {
1718 display: none !important;
1719 opacity: 0;
1720 visibility: hidden;
1721}
1722/*@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap'); */
1723
1724body {
1725 font-family: "Roboto", sans-serif !important;
1726 margin: 0;
1727 -webkit-font-smoothing: auto;
1728 font-size: 14px;
1729 font-weight: normal;
1730 line-height: 1.6;
1731}
1732div#page-sub-header h1 {
1733 font-size: 2rem !important;
1734 padding-bottom: 0px;
1735 font-weight: bold;
1736}
1737
1738#content.site-content .container,
1739div#page-sub-header .container {
1740 width: 1170px;
1741 max-width: 100%;
1742}
1743
1744.iconBlock h3 {
1745 font-weight: 500 !important;
1746}
1747a.iconBlockWrap:hover {
1748 color: initial;
1749}
🤔
Have a question?
Our super-smart AI, knowledgeable support team and an awesome community will get you an answer in a flash.
To ask a question or participate in discussions, you'll need to authenticate first.
Updated 02 Nov 2023
Did this page help you?