Customizer | DCT for WP

Documentation

Settings

Debugger

Designer

Developer

Customizer

Code editor

Help

Docs: Customizer

About customizer

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Page preloader

Show a customizable preloader when loading frontend pages.

Enable page preloader to customize background, border, image and animations.

On update:
Basic mode: New code will be generated to update the related partial SCSS file and all CSS will be compiled. Related theme mod will be updated.
Advanced mode: Editor code will be used to update the related partial SCSS file and all CSS will be compiled. Related theme mod will not be updated.

On reset:
Preloader will be disabled.
Related partial SCSS file will reset to default template and all CSS compiled. Related theme mod will reset to default values.

Page preloader

Show a customizable preloader when loading frontend pages.

Enable page preloader to customize background, border, image and animations.

Page preloader

Background

Background color

Background gradient

Gradient direction

deg

Gradient start color

Gradient start position

Gradient end color

Gradient end position

Background image

customizer-preloader-basic-background-image-ml

customizer-preloader-basic-background-image-ml-id

customizer-preloader-basic-background-image-url

Background image size

Background image position

Background image repeat

Background image blend mode

Gradient above image.

Background border width

Background border color

Background border

Image/logo

Preloader image

customizer-preloader-basic-image-url

customizer-preloader-basic-image-url-id

Preloader image color

Image width

Image horizontal position

Image vertical position

Image animation

Image animation duration

sec

Animation out

Preloader animation out

Duration

sec

dct-input-code-generator-customizer-preloader-basic

dct-debug-panel-action--name

dct-debug-panel-action--value

Page preloader

Show a customizable preloader when loading frontend pages.

Enable page preloader to customize background, border, image and animations.

Page preloader

//////////////////////////////////////
// Customizer: Page preloader
//////////////////////////////////////

// Variables
/////////////////////////////////////

// Preloader background styles
@mixin dct-preloader-background {
   background-color: #f0f0f1;
   border: 0px solid #CCC;
}

@mixin dct-preloader-animation-out { 
   opacity: 0;
   transition-duration: 0.2s;
}

// Preloader image styles
@mixin dct-preloader-image {
   width: 100px;
   height: auto;
   top: 50%;
   left: 50%;
}

@mixin dct-preloader-image-animation { 
   @include animate-pulse(3s);
}


// Styles
////////////////////////////////////

// Preloader background
#dct-page-preloader { 
    position: fixed; 
    top: 0; bottom: 0; left: 0; right: 0;
    width: 100%; height: 100%; 
    overflow: hidden; 
    z-index: 99999999;
    box-sizing: border-box;
    background-origin: border-box;
    transition-property: opacity, top, left;
    @include dct-preloader-background;

    &.preloader-animation-out { 
        pointer-events: none; 
        @include dct-preloader-animation-out;
    }
    
    // Preloader image
    #dct-page-preloader-image {
        position:absolute; transform: translate(-50%, -50%);
        @include dct-preloader-image;

        img, svg { 
            width:100%; height:auto;
            @include dct-preloader-image-animation;
        }
    }
    
}

dct-code-editor-customizer-preloader-advanced-file-name

dct-code-editor-customizer-preloader-advanced-file-path

Currently using basic mode.
Updating the generator in advanced mode will overwrite basic mode generator options code.

dct-debug-panel-action--name

dct-debug-panel-action--value

Preloader preview

Preloader disabled.

Admin panel

Customize admin panel colors, logos and other options.

Enable to customize admin panel sidebar colors and logo, admin topbar styles and admin panel footer info and credits.

On update:
Basic mode: New code will be generated to update the related partial SCSS file and all CSS will be compiled. Related theme mod will be updated.
Advanced mode: Editor code will be used to update the related partial SCSS file and all CSS will be compiled. Related theme mod will not be updated.

On reset:
Admin panel will reset to default styles.
Related partial SCSS file will reset to default template and all CSS compiled. Related theme mod will reset to default values.

Admin panel

Customize admin panel colors, logos and other options.

Enable to customize admin panel sidebar colors and logo, admin topbar styles and admin panel footer info and credits.

On update:
Basic mode: New code will be generated to update the related partial SCSS file and all CSS will be compiled. Related theme mod will be updated.
Advanced mode: Editor code will be used to update the related partial SCSS file and all CSS will be compiled. Related theme mod will not be updated.

On reset:
Admin panel will reset to default styles.
Related partial SCSS file will reset to default template and all CSS compiled. Related theme mod will reset to default values.

Admin panel customizer

Admin sidebar

Sidebar text color

Submenu text color

Current menu text color

Admin topbar

Topbar text color

Admin footer

Footer custom text

HTML allowed. Use {{TAG}} to replace content: {{AUTHOR}} {{AUTHOR-URL}} {{THEME-NAME}} {{THEME-VERSION}} {{THEME-URL}} {{YEAR}}

dct-input-code-generator-customizer-admin-panel-basic

dct-debug-panel-action--name

dct-debug-panel-action--value

Admin panel

Customize admin panel colors, logos and other options.

Enable to customize admin panel sidebar colors and logo, admin topbar styles and admin panel footer info and credits.

On update:
Basic mode: New code will be generated to update the related partial SCSS file and all CSS will be compiled. Related theme mod will be updated.
Advanced mode: Editor code will be used to update the related partial SCSS file and all CSS will be compiled. Related theme mod will not be updated.

On reset:
Admin panel will reset to default styles.
Related partial SCSS file will reset to default template and all CSS compiled. Related theme mod will reset to default values.

Admin panel customizer

//////////////////////////////////////
// Customizer: Admin panel
//////////////////////////////////////
// Variables
/////////////////////////////////////
$dct-admin-sidebar-background-color: $primary-darker;
$dct-admin-sidebar-text-color: #f0f0f1;
$dct-admin-sidebar-submenu-color: $primary;
$dct-admin-sidebar-submenu-text-color: #ffffff;
$dct-admin-sidebar-featured-color: $primary-comp;
$dct-admin-sidebar-featured-text-color: #FFF;

$dct-admin-topbar-background-color: #1d2327;
$dct-admin-topbar-text-color: #f0f0f1;


@mixin dct-admin-sidebar-logo { 
   background-image: url("");
   height: 0px;
}

@mixin dct-admin-sidebar-folded-logo { 
   background-image: url("");
   height: 0px;
}


// Styles
////////////////////////////////////
// Menu hover colors
$dct-admin-sidebar-featured-color-hover: darken($dct-admin-sidebar-featured-color, 5);
$dct-admin-topbar-background-color-hover: darken($dct-admin-topbar-background-color, 10);

// ADMIN LEFT SIDEBAR
// Sidebar general background & text
#adminmenu, #adminmenuback, #adminmenuwrap { 
	background-color: $dct-admin-sidebar-background-color;
}
#adminmenu {
	a, a:hover, li.menu-top>a:focus {
		color: $dct-admin-sidebar-text-color; 
	}
	#collapse-button {
		color: $dct-admin-sidebar-text-color;
		opacity: 0.8; 
		&:hover, &:focus { 
			color: $dct-admin-sidebar-text-color;
			opacity: 1;
		}
	}
}

// Sidebar top image/logo
#adminmenu li#toplevel_page_sidebar_top_image {
	@include dct-admin-sidebar-logo;
	background-color: transparent;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top center;
	min-height: 0;
	&:hover { 
		background-color: transparent; 
	}
	a, div.wp-menu-image {
		display: none; 
	}
}
// Sidebar folded top image/logo
body.folded #adminmenu li#toplevel_page_sidebar_top_image {
	@include dct-admin-sidebar-folded-logo;
}
	

// Sidebar menu hover & current
#adminmenu {
	li.menu-top:hover, li.opensub>a.menu-top, li>a.menu-top:focus {
		background-color: $dct-admin-sidebar-featured-color-hover;
		color: $dct-admin-sidebar-featured-text-color;
		.wp-menu-name { 
			color: $dct-admin-sidebar-featured-text-color;
		}
	}
	.wp-has-current-submenu .wp-submenu .wp-submenu-head, 
	.wp-menu-arrow, .wp-menu-arrow div, li.current a.menu-top,
	li.wp-has-current-submenu a.wp-has-current-submenu {
		background: $dct-admin-sidebar-featured-color;
		color: $dct-admin-sidebar-featured-text-color;
	}
}
ul#adminmenu a.wp-has-current-submenu:after,
ul#adminmenu > li.current > a.current:after {
	border-right-color: $dct-admin-sidebar-featured-color-hover;
}

// Sidebar submenu expanded
#adminmenu {
	.wp-submenu {
		background-color: $dct-admin-sidebar-submenu-color;
		a {
			color: $dct-admin-sidebar-submenu-text-color;
			opacity:0.8;
		}
		a:focus, a:hover {
			color: $dct-admin-sidebar-submenu-text-color;
			opacity:1;
		}
		li.current, li.current a, li.current a:focus, li.current a:hover {
			color: $dct-admin-sidebar-submenu-text-color;
		}
		.wp-submenu-head { 
			background: darken($dct-admin-sidebar-submenu-color, 10);
			color: $dct-admin-sidebar-submenu-text-color;
		}
	}
	li.wp-has-submenu.wp-not-current-submenu.opensub:hover::after,
	li.wp-has-submenu.wp-not-current-submenu:focus-within::after {
		border-right-color:$dct-admin-sidebar-submenu-color; 
	}
	.opensub .wp-submenu li.current a,
	a.wp-has-current-submenu:focus+.wp-submenu li.current a {
		color: $dct-admin-sidebar-submenu-text-color;
	}	
}

// Sidebar icons
#adminmenu div.wp-menu-image:before {
	color: inherit; opacity:0.8;
}
#adminmenu {
	.current div.wp-menu-image:before, .wp-has-current-submenu div.wp-menu-image:before,
	a.current:hover div.wp-menu-image:before, a.wp-has-current-submenu:hover div.wp-menu-image:before,
	li.wp-has-current-submenu a:focus div.wp-menu-image:before, 
	li.wp-has-current-submenu.opensub div.wp-menu-image:before,
	li.wp-has-current-submenu:hover div.wp-menu-image:before { 
		color: $dct-admin-sidebar-featured-text-color; opacity:0.9;
	}
	li a:focus div.wp-menu-image:before, li.opensub div.wp-menu-image:before, li:hover div.wp-menu-image:before {
		color: $dct-admin-sidebar-featured-text-color;
	}
	// Notifications
	.awaiting-mod, .menu-counter, .update-plugins,
	li a.wp-has-current-submenu .update-plugins, li.current a .awaiting-mod {
		background-color: #d63638;
		color: #fff;
	}
}

// Sidebar Responsive < 782px
.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a { background: $dct-admin-sidebar-background-color; }
.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before { color: $dct-admin-sidebar-text-color; }



// ADMIN TOPBAR
////////////////////////
#wpadminbar {
	background: $dct-admin-topbar-background-color;
	
	// Menu topbar items & dropdowns
	.menupop .ab-sub-wrapper, .shortlink-input { 
		background: $dct-admin-topbar-background-color-hover;
	}		
	// Menu items hover
	.ab-top-menu>li.hover>.ab-item,
	&.nojq .quicklinks .ab-top-menu>li>.ab-item:focus,
	&:not(.mobile) .ab-top-menu>li:hover>.ab-item,
	&:not(.mobile) .ab-top-menu>li>.ab-item:focus {
		background: $dct-admin-topbar-background-color-hover;
		color: $dct-admin-topbar-text-color;
	}
	// Menu items text
	.ab-empty-item, a.ab-item, 
	&>#wp-toolbar span.ab-label, &>#wp-toolbar span.noticon, &>#wp-toolbar li.hover span.ab-label,
	&:not(.mobile)>#wp-toolbar a:focus span.ab-label, &:not(.mobile)>#wp-toolbar li:hover span.ab-label  { 
		color: $dct-admin-topbar-text-color; 
	}
	// Topbar icons
	#adminbarsearch:before, .ab-icon:before, .ab-item:before { 
		color: $dct-admin-topbar-text-color;
		opacity:0.6;
	}
	.ab-submenu .ab-item {
		color: $dct-admin-topbar-text-color;
		opacity:0.7;
	}
	.screen-reader-shortcut {
		background: $dct-admin-topbar-background-color;
		color: $dct-admin-topbar-text-color;
	}

	// Topbar class quicklinks
	.quicklinks {
		.ab-sub-wrapper .menupop.hover>a  { 
			color: $dct-admin-topbar-text-color; 
		}
		.menupop {
			ul li a, ul li a strong, &.hover ul li a { 
				color: $dct-admin-topbar-text-color;
				opacity:0.7;
			}
			ul li a:focus, ul li a:focus strong, ul li a:hover, ul li a:hover strong,
			&.hover ul li a:focus,&.hover ul li a:hover,
			&.hover ul li div[tabindex]:focus,&.hover ul li div[tabindex]:hover {
				color: $dct-admin-topbar-text-color;
				opacity:1;
			}
			.ab-sub-secondary>li .ab-item:focus a, .ab-sub-secondary>li>a:hover {
				color: $dct-admin-topbar-text-color;
				opacity:1;
			}
			ul.ab-sub-secondary, ul.ab-sub-secondary .ab-submenu {
				background: $dct-admin-topbar-background-color-hover;
			}
		}		
	}

	// Topbar icons
	li {
		#adminbarsearch.adminbar-focused:before,
		.ab-item:focus .ab-icon:before, .ab-item:focus:before, a:focus .ab-icon:before,
		&.hover .ab-icon:before, &.hover .ab-item:before,
		&:hover #adminbarsearch:before {
			color: $dct-admin-topbar-text-color;
		}
	}
}

// Topbar nojs & mobile
#wpadminbar.nojs .quicklinks .menupop:hover ul li {
	a { color: $dct-admin-topbar-text-color; opacity:0.7; } 
	a:focus, a:hover { color: $dct-admin-topbar-text-color; opacity:1; }
}
#wpadminbar.mobile .quicklinks {
	.ab-icon:before, .ab-item:before { color: $dct-admin-topbar-text-color; }
	.hover .ab-icon:before, .hover .ab-item:before { color: $dct-admin-topbar-text-color; }
}



// Disable topbar WP links 
#wp-toolbar li#wp-admin-bar-wp-logo { display:none; }

dct-code-editor-customizer-admin-panel-advanced-file-name

dct-code-editor-customizer-admin-panel-advanced-file-path

Currently using basic mode.
Updating the generator in advanced mode will overwrite basic mode generator options code.

dct-debug-panel-action--name

dct-debug-panel-action--value

Dashboard custom widget

Add a custom widget panel with html contents to admin panel dashboard.

Enable dashboard custom widget to edit custom panel html contents.
Useful to add quicklinks to admin panel or forntend pages.

On update: Dashboard custom widget will appear in admin panel dashboard when enabled. Related theme mod will be updated.
On reset: Dashboard custom widget will be disabled and contents reset to default html. Related theme mod will reset to default values.

Dashboard widget

Add a custom widget panel with html contents to admin panel dashboard.

Enable dashboard custom widget to edit custom panel html contents.
Useful to add quicklinks to admin panel or forntend pages.

Add HTML contents to dashboard custom widget

<h4>Contents</h4>
<a class="button button-large button-primary" href="post-new.php">New post</a>
<a class="button button-large" href="edit.php">Posts</a>
<a class="button button-large" href="edit.php?post_type=page">Pages</a>
<hr>
<p>Settings & Appearance</p>
<a class="button button-primary" href="options-general.php">General</a>
<a class="button" href="nav-menus.php">Menus</a>
<a class="button" href="admin.php?page=dct-settings">Child theme</a>

dct-input-code-generator-customizer-dashboard-widget-basic

dct-debug-panel-action--name

dct-debug-panel-action--value

Login page

Customize login page style, logo and other options.

Enable to customize login page background, border, logo, login form and links.

On update:
Basic mode: New code will be generated to update the related partial SCSS file and all CSS will be compiled. Related theme mod will be updated.
Advanced mode: Editor code will be used to update the related partial SCSS file and all CSS will be compiled. Related theme mod will not be updated.

On reset:
Login page wil reset to default styles.
Related partial SCSS file will reset to default template and all CSS compiled. Related theme mod will reset to default values.

Login page

Customize login page style, logo and other options.

Enable to customize login page background, border, logo, login form and links.

On update:
Basic mode: New code will be generated to update the related partial SCSS file and all CSS will be compiled. Related theme mod will be updated.
Advanced mode: Editor code will be used to update the related partial SCSS file and all CSS will be compiled. Related theme mod will not be updated.

On reset:
Login page wil reset to default styles.
Related partial SCSS file will reset to default template and all CSS compiled. Related theme mod will reset to default values.

Background

customizer-login-page-basic-background-image-url

Login logo

Login form

Footer links

dct-input-code-generator-customizer-login-page-basic

dct-debug-panel-action--name

dct-debug-panel-action--value

Login page

Customize login page style, logo and other options.

Enable to customize login page background, border, logo, login form and links.

On update:
Basic mode: New code will be generated to update the related partial SCSS file and all CSS will be compiled. Related theme mod will be updated.
Advanced mode: Editor code will be used to update the related partial SCSS file and all CSS will be compiled. Related theme mod will not be updated.

On reset:
Login page wil reset to default styles.
Related partial SCSS file will reset to default template and all CSS compiled. Related theme mod will reset to default values.

//////////////////////////////////////
// Customizer: Login page
//////////////////////////////////////
@import '_colors';


// Variables
/////////////////////////////////////
// Login page background styles
@mixin dct-login-page-background {
   background-color: #f0f0f1;
   border: 0px solid #CCC;
}

// Login page logo
@mixin dct-login-page-image {

}

// Login page form
@mixin dct-login-page-form {
   background-color: #FFF;
   border: 1px solid #c3c4c7;
}

$dct-login-page-form-text-color: #333;
$dct-login-page-form-button-color: #2271b1;
$dct-login-page-form-button-text-color: #FFF;
$dct-login-page-footer-link-color: #50575e;


// Styles
////////////////////////////////////
// Background
body.login { 
    box-sizing: border-box;
    background-origin: border-box;
    @include dct-login-page-background;
}

// Custom logo
#login .wp-login-logo a { 
    background-position:center;
    background-repeat: no-repeat;
    background-size: contain;    
    padding-bottom: 10px; 
    @include dct-login-page-image;
}

// Forms Login / Lost password
.login form { 
    @include dct-login-page-form;
    box-shadow: none;

    label { 
        color: $dct-login-page-form-text-color; 
    }
    input#wp-submit.button-primary { 
        background: $dct-login-page-form-button-color; 
        color: $dct-login-page-form-button-text-color;
        opacity: 0.9; 
        &:hover { 
            opacity: 1; 
        }
    }
    // Form confirm email
    .admin-email__heading { 
        border-bottom: 1px solid $dct-login-page-form-text-color;
        color: $dct-login-page-form-text-color; 
    }
    .admin-email__details { 
        color: $dct-login-page-form-text-color;
    }
    .admin-email__actions-primary a.button {
        background: $dct-login-page-form-button-color;
        color: $dct-login-page-form-button-text-color;
    }
}

// Footer links
.login #nav a, .login #backtoblog a {
    color: $dct-login-page-footer-link-color;
    opacity: 0.8;
    &:hover, &:active, &:focus {
        color: $dct-login-page-footer-link-color;
        opacity: 1; 
    }
}

// Footer language switcher
.login .language-switcher form {
    label { 
        color: $dct-login-page-footer-link-color; 
    }
    .button {  
        background: $dct-login-page-form-button-color;
        color: $dct-login-page-form-button-text-color;
    }
}

dct-code-editor-customizer-login-page-advanced-file-name

dct-code-editor-customizer-login-page-advanced-file-path

Currently using basic mode.
Updating the generator in advanced mode will overwrite basic mode generator options code.

dct-debug-panel-action--name

dct-debug-panel-action--value

Login page custom JS

Login Page: Custom JS

/////////////////////////////////////////
// Custom child theme JS: Login page
////////////////////////////////////////


// When login page is ready
/////////////////////////////////////
jQuery(document).ready(function($) {

	// DEBUG custom JS ready
	// console.log('Custom JS for login page ready');

});

dct-code-editor-customizer-login-page-js-file-name

dct-code-editor-customizer-login-page-js-file-path

dct-debug-panel-action--name

dct-debug-panel-action--value

Docs: Customizer

About customizer

Page preloader

Page preloader

Background

Image/logo

Animation out

Page preloader

Preloader preview

Admin panel

Admin panel

Admin sidebar

Admin topbar

Admin footer

Admin panel

Dashboard custom widget

Dashboard widget

Quick links

Contents

Login page

Login page custom JS

Get DCT from Gumroad

Docs: Customizer

About customizer

Page preloader

Page preloader

Background

Image/logo

Animation out

Page preloader

Preloader preview

Admin panel

Admin panel

Admin sidebar

Admin topbar

Admin footer

Admin panel

Dashboard custom widget

Dashboard widget

Quick links

Contents

Login page

Login page

Background

Login logo

Login form

Footer links

Login page

Login page preview

Login page custom JS

Login Page: Custom JS