How to use styleTag method in Best
Best JavaScript code snippet using best
postmessage.js
Source:postmessage.js 
1(function ($) {2 var customizeBreakpoints = {3 desktop: 1024,4 tablet: 768,5 mobile: 4806 };7 var mediaQueries = {8 tablet: 'max-width: ' + (customizeBreakpoints.desktop - 1).toString() + 'px',9 mobile: 'max-width: ' + (customizeBreakpoints.tablet - 1).toString() + 'px'10 };11 /**12 * Setup style tag.13 *14 * @param {string} id The style data id.15 * @return {HTMLElement} The style tag.16 */17 function setupStyleTag(id) {18 var tag = document.createElement('style');19 tag.dataset.id = id;20 tag.className = 'wpbf-customize-live-style';21 document.head.append(tag);22 return tag;23 }24 /* Layout */25 // Page width.26 wp.customize('page_max_width', function (value) {27 var styleTag = setupStyleTag('page_max_width');28 value.bind(function (newval) {29 newval = !newval ? '1200px' : newval;30 styleTag.innerHTML = '.wpbf-container, .wpbf-boxed-layout .wpbf-page {max-width: ' + newval + ';}';31 });32 });33 // Padding.34 wp.customize('page_padding', function (value) {35 var styleTag = setupStyleTag('page_padding');36 value.bind(function (newval) {37 var obj = JSON.parse(newval),38 desktop_top = obj.desktop_top,39 desktop_right = obj.desktop_right,40 desktop_bottom = obj.desktop_bottom,41 desktop_left = obj.desktop_left,42 tablet_top = obj.tablet_top,43 tablet_right = obj.tablet_right,44 tablet_bottom = obj.tablet_bottom,45 tablet_left = obj.tablet_left,46 mobile_top = obj.mobile_top,47 mobile_right = obj.mobile_right,48 mobile_bottom = obj.mobile_bottom,49 mobile_left = obj.mobile_left;50 styleTag.innerHTML = '\51 #inner-content {\52 padding-top: ' + desktop_top + 'px;\53 padding-right: ' + desktop_right + 'px;\54 padding-bottom: ' + desktop_bottom + 'px;\55 padding-left: ' + desktop_left + 'px;\56 }\57 @media (' + mediaQueries.tablet + ') {\58 #inner-content {\59 padding-top: ' + tablet_top + 'px;\60 padding-right: ' + tablet_right + 'px;\61 padding-bottom: ' + tablet_bottom + 'px;\62 padding-left: ' + tablet_left + 'px;\63 }\64 }\65 @media (' + mediaQueries.mobile + ') {\66 #inner-content {\67 padding-top: ' + mobile_top + 'px;\68 padding-right: ' + mobile_right + 'px;\69 padding-bottom: ' + mobile_bottom + 'px;\70 padding-left: ' + mobile_left + 'px;\71 }\72 }\73 ';74 });75 });76 // Boxed margin.77 wp.customize('page_boxed_margin', function (value) {78 value.bind(function (newval) {79 $('.wpbf-page').css('margin-top', newval + 'px').css('margin-bottom', newval + 'px');80 });81 });82 // Boxed padding.83 wp.customize('page_boxed_padding', function (value) {84 var styleTag = setupStyleTag('page_boxed_padding');85 value.bind(function (newval) {86 styleTag.innerHTML = '.wpbf-container {padding-left: ' + newval + 'px; padding-right: ' + newval + 'px;}';87 });88 });89 // Boxed background color.90 wp.customize('page_boxed_background', function (value) {91 var styleTag = setupStyleTag('page_boxed_background');92 value.bind(function (newval) {93 styleTag.innerHTML = '.wpbf-page {background-color: ' + newval + ';}';94 });95 });96 // ScrollTop position.97 wp.customize('scrolltop_position', function (value) {98 var styleTag = setupStyleTag('scrolltop_position');99 value.bind(function (newval) {100 if (newval === 'left') {101 styleTag.innerHTML = '.scrolltop {left: 20px; right: auto;}';102 } else {103 styleTag.innerHTML = '.scrolltop {left: auto; right: 20px;}';104 }105 });106 });107 // ScrollTop background color.108 wp.customize('scrolltop_bg_color', function (value) {109 var styleTag = setupStyleTag('scrolltop_bg_color');110 value.bind(function (newval) {111 styleTag.innerHTML = '.scrolltop {background-color: ' + newval + ';}';112 });113 });114 // ScrollTop background color.115 wp.customize('scrolltop_bg_color_alt', function (value) {116 var styleTag = setupStyleTag('scrolltop_bg_color_alt');117 value.bind(function (newval) {118 styleTag.innerHTML = '.scrolltop:hover {background-color: ' + newval + ';}';119 });120 });121 // ScrollTop icon color.122 wp.customize('scrolltop_icon_color', function (value) {123 var styleTag = setupStyleTag('scrolltop_icon_color');124 value.bind(function (newval) {125 styleTag.innerHTML = '.scrolltop {color: ' + newval + ';}';126 });127 });128 // ScrollTop icon color.129 wp.customize('scrolltop_icon_color_alt', function (value) {130 var styleTag = setupStyleTag('scrolltop_icon_color_alt');131 value.bind(function (newval) {132 styleTag.innerHTML = '.scrolltop:hover {color: ' + newval + ';}';133 });134 });135 // ScrollTop border radius.136 wp.customize('scrolltop_border_radius', function (value) {137 var styleTag = setupStyleTag('scrolltop_border_radius');138 value.bind(function (newval) {139 styleTag.innerHTML = '.scrolltop {border-radius: ' + newval + 'px;}';140 });141 });142 /* Typography */143 wp.customize('page_font_color', function (value) {144 var styleTag = setupStyleTag('page_font_color');145 value.bind(function (newval) {146 styleTag.innerHTML = 'body {color: ' + newval + ';}';147 });148 });149 /* 404 */150 wp.customize('404_headline', function (value) {151 value.bind(function (newval) {152 $('.wpbf-404-content .entry-title').text(newval);153 });154 });155 wp.customize('404_text', function (value) {156 value.bind(function (newval) {157 $('.wpbf-404-content p').text(newval);158 });159 });160 /* Navigation */161 // Width.162 wp.customize('menu_width', function (value) {163 var styleTag = setupStyleTag('menu_width');164 value.bind(function (newval) {165 newval = !newval ? '1200px' : newval;166 styleTag.innerHTML = '.wpbf-nav-wrapper {max-width: ' + newval + ';}';167 });168 });169 // Menu height.170 wp.customize('menu_height', function (value) {171 var styleTag = setupStyleTag('menu_height');172 value.bind(function (newval) {173 styleTag.innerHTML = '.wpbf-nav-wrapper {padding-top: ' + newval + 'px; padding-bottom: ' + newval + 'px;}';174 });175 });176 // Menu padding.177 wp.customize('menu_padding', function (value) {178 var styleTag = setupStyleTag('menu_padding');179 value.bind(function (newval) {180 styleTag.innerHTML = '.wpbf-navigation .wpbf-menu > .menu-item > a {padding-left: ' + newval + 'px; padding-right: ' + newval + 'px;}';181 });182 });183 // Background color.184 wp.customize('menu_bg_color', function (value) {185 var styleTag = setupStyleTag('menu_bg_color');186 value.bind(function (newval) {187 styleTag.innerHTML = '.wpbf-navigation:not(.wpbf-navigation-transparent):not(.wpbf-navigation-active) {background-color: ' + newval + ';}';188 });189 });190 // Font color.191 wp.customize('menu_font_color', function (value) {192 var styleTag = setupStyleTag('menu_font_color');193 value.bind(function (newval) {194 styleTag.innerHTML = '.wpbf-navigation .wpbf-menu a, .wpbf-mobile-menu a, .wpbf-close {color: ' + newval + ';}';195 });196 });197 // Font color hover.198 wp.customize('menu_font_color_alt', function (value) {199 var styleTag = setupStyleTag('menu_font_color_alt');200 value.bind(function (newval) {201 styleTag.innerHTML = '\202 .wpbf-navigation .wpbf-menu a:hover, .wpbf-mobile-menu a:hover {color: ' + newval + ';}\203 .wpbf-navigation .wpbf-menu > .current-menu-item > a, .wpbf-mobile-menu > .current-menu-item > a {color: ' + newval + '!important;}\204 ';205 });206 });207 // Font size.208 wp.customize('menu_font_size', function (value) {209 var styleTag = setupStyleTag('menu_font_size');210 value.bind(function (newval) {211 var suffix = $.isNumeric(newval) ? 'px' : '';212 styleTag.innerHTML = '.wpbf-navigation .wpbf-menu a, .wpbf-mobile-menu a {font-size: ' + newval + suffix + ';}';213 });214 });215 /* Sub Menu */216 // Text alignment.217 wp.customize('sub_menu_text_alignment', function (value) {218 var styleTag = setupStyleTag('sub_menu_text_alignment');219 value.bind(function (newval) {220 styleTag.innerHTML = '\221 .wpbf-sub-menu .sub-menu {\222 text-align: ' + newval + '\223 }\224 ';225 });226 });227 // Padding.228 wp.customize('sub_menu_padding', function (value) {229 var styleTag = setupStyleTag('sub_menu_padding');230 value.bind(function (newval) {231 var obj = JSON.parse(newval),232 top = obj.top,233 right = obj.right,234 bottom = obj.bottom,235 left = obj.left;236 styleTag.innerHTML = '\237 .wpbf-sub-menu > .menu-item-has-children:not(.wpbf-mega-menu) .sub-menu a {\238 padding-top: ' + top + 'px;\239 padding-right: ' + right + 'px;\240 padding-bottom: ' + bottom + 'px;\241 padding-left: ' + left + 'px;\242 }\243 ';244 });245 });246 // Width.247 wp.customize('sub_menu_width', function (value) {248 var styleTag = setupStyleTag('sub_menu_width');249 value.bind(function (newval) {250 styleTag.innerHTML = '.wpbf-sub-menu > .menu-item-has-children:not(.wpbf-mega-menu) .sub-menu {width: ' + newval + 'px;}';251 });252 });253 // Background color.254 wp.customize('sub_menu_bg_color', function (value) {255 var styleTag = setupStyleTag('sub_menu_bg_color');256 value.bind(function (newval) {257 styleTag.innerHTML = '\258 .wpbf-sub-menu > .menu-item-has-children:not(.wpbf-mega-menu) .sub-menu li,\259 .wpbf-sub-menu > .wpbf-mega-menu > .sub-menu {\260 background-color: ' + newval + ';\261 }\262 ';263 });264 });265 // Background color hover.266 wp.customize('sub_menu_bg_color_alt', function (value) {267 var styleTag = setupStyleTag('sub_menu_bg_color_alt');268 value.bind(function (newval) {269 styleTag.innerHTML = '\270 .wpbf-sub-menu > .menu-item-has-children:not(.wpbf-mega-menu) .sub-menu li:hover {\271 background-color: ' + newval + ';\272 }\273 ';274 });275 });276 // Accent color.277 wp.customize('sub_menu_accent_color', function (value) {278 var styleTag = setupStyleTag('sub_menu_accent_color');279 value.bind(function (newval) {280 styleTag.innerHTML = '.wpbf-menu .sub-menu a {color: ' + newval + ';}';281 });282 });283 // Accent color hover.284 wp.customize('sub_menu_accent_color_alt', function (value) {285 var styleTag = setupStyleTag('sub_menu_accent_color_alt');286 value.bind(function (newval) {287 styleTag.innerHTML = '.wpbf-navigation .wpbf-menu .sub-menu a:hover {color: ' + newval + ';}';288 });289 });290 // Font size.291 wp.customize('sub_menu_font_size', function (value) {292 var styleTag = setupStyleTag('sub_menu_font_size');293 value.bind(function (newval) {294 var suffix = $.isNumeric(newval) ? 'px' : '';295 styleTag.innerHTML = '.wpbf-menu .sub-menu a {font-size: ' + newval + suffix + ';}';296 });297 });298 // Separator color.299 wp.customize('sub_menu_separator_color', function (value) {300 var styleTag = setupStyleTag('sub_menu_separator_color');301 value.bind(function (newval) {302 styleTag.innerHTML = '.wpbf-sub-menu > .menu-item-has-children:not(.wpbf-mega-menu) li {border-bottom-color: ' + newval + ';}';303 });304 });305 /* Mobile Navigation */306 // Height.307 wp.customize('mobile_menu_height', function (value) {308 var styleTag = setupStyleTag('mobile_menu_height');309 value.bind(function (newval) {310 styleTag.innerHTML = '.wpbf-mobile-nav-wrapper {padding-top: ' + newval + 'px; padding-bottom: ' + newval + 'px;}';311 });312 });313 // Background color.314 wp.customize('mobile_menu_background_color', function (value) {315 var styleTag = setupStyleTag('mobile_menu_background_color');316 value.bind(function (newval) {317 styleTag.innerHTML = '.wpbf-mobile-nav-wrapper {background-color: ' + newval + ';}';318 });319 });320 // Icon color.321 wp.customize('mobile_menu_hamburger_color', function (value) {322 var styleTag = setupStyleTag('mobile_menu_hamburger_color');323 value.bind(function (newval) {324 styleTag.innerHTML = '.wpbf-mobile-nav-item, .wpbf-mobile-nav-item a {color: ' + newval + ';}';325 });326 });327 // Hamburger size.328 wp.customize('mobile_menu_hamburger_size', function (value) {329 var styleTag = setupStyleTag('mobile_menu_hamburger_size');330 value.bind(function (newval) {331 var suffix = $.isNumeric(newval) ? 'px' : '';332 styleTag.innerHTML = '.wpbf-mobile-nav-item {font-size: ' + newval + suffix + ';}';333 });334 });335 // Hamburger border radius (filled).336 wp.customize('mobile_menu_hamburger_border_radius', function (value) {337 var styleTag = setupStyleTag('mobile_menu_hamburger_border_radius');338 value.bind(function (newval) {339 styleTag.innerHTML = '.wpbf-mobile-nav-item {border-radius: ' + newval + 'px;}';340 });341 });342 // Padding.343 wp.customize('mobile_menu_padding', function (value) {344 var styleTag = setupStyleTag('mobile_menu_padding');345 value.bind(function (newval) {346 var obj = JSON.parse(newval),347 top = obj.top,348 right = obj.right,349 bottom = obj.bottom,350 left = obj.left;351 styleTag.innerHTML = '\352 .wpbf-mobile-menu a,\353 .wpbf-mobile-menu .menu-item-has-children .wpbf-submenu-toggle {\354 padding-top: ' + top + 'px;\355 padding-right: ' + right + 'px;\356 padding-bottom: ' + bottom + 'px;\357 padding-left: ' + left + 'px;\358 }\359 ';360 });361 });362 // Menu item background color.363 wp.customize('mobile_menu_bg_color', function (value) {364 var styleTag = setupStyleTag('mobile_menu_bg_color');365 value.bind(function (newval) {366 styleTag.innerHTML = '.wpbf-mobile-menu > .menu-item a {background-color: ' + newval + ';}';367 });368 });369 // Menu item background color hover.370 wp.customize('mobile_menu_bg_color_alt', function (value) {371 var styleTag = setupStyleTag('mobile_menu_bg_color_alt');372 value.bind(function (newval) {373 styleTag.innerHTML = '.wpbf-mobile-menu > .menu-item a:hover {background-color: ' + newval + ';}';374 });375 });376 // Menu item font color.377 wp.customize('mobile_menu_font_color', function (value) {378 var styleTag = setupStyleTag('mobile_menu_font_color');379 value.bind(function (newval) {380 styleTag.innerHTML = '.wpbf-mobile-menu a, .wpbf-mobile-menu-container .wpbf-close {color: ' + newval + ';}';381 });382 });383 // Menu item font color hover.384 wp.customize('mobile_menu_font_color_alt', function (value) {385 var styleTag = setupStyleTag('mobile_menu_font_color_alt');386 value.bind(function (newval) {387 styleTag.innerHTML = '.wpbf-mobile-menu a:hover, .wpbf-mobile-menu > .current-menu-item > a {color: ' + newval + '!important;}';388 });389 });390 // Menu item divider color.391 wp.customize('mobile_menu_border_color', function (value) {392 var styleTag = setupStyleTag('mobile_menu_border_color');393 value.bind(function (newval) {394 styleTag.innerHTML = '\395 .wpbf-mobile-menu .menu-item {border-top-color: ' + newval + ';}\396 .wpbf-mobile-menu > .menu-item:last-child {border-bottom-color: ' + newval + ';}\397 ';398 });399 });400 // Sub menu arrow color.401 wp.customize('mobile_menu_submenu_arrow_color', function (value) {402 var styleTag = setupStyleTag('mobile_menu_submenu_arrow_color');403 value.bind(function (newval) {404 styleTag.innerHTML = '.wpbf-submenu-toggle {color: ' + newval + ';}';405 });406 });407 // Menu item font size.408 wp.customize('mobile_menu_font_size', function (value) {409 var styleTag = setupStyleTag('mobile_menu_font_size');410 value.bind(function (newval) {411 var suffix = $.isNumeric(newval) ? 'px' : '';412 styleTag.innerHTML = '.wpbf-mobile-menu a, .wpbf-mobile-menu .menu-item-has-children .wpbf-submenu-toggle {font-size: ' + newval + suffix + ';}';413 });414 });415 /* Mobile sub menu */416 // Submenu auto collapse.417 wp.customize('mobile_sub_menu_auto_collapse', function (value) {418 value.bind(function (newval) {419 if (!document.querySelector('#mobile-navigation')) return;420 421 if (newval) {422 $('#mobile-navigation').closest('.wpbf-navigation').addClass('wpbf-mobile-sub-menu-auto-collapse');423 } else {424 $('#mobile-navigation').closest('.wpbf-navigation').removeClass('wpbf-mobile-sub-menu-auto-collapse');425 }426 });427 });428 429 // Indent.430 wp.customize('mobile_sub_menu_indent', function (value) {431 var styleTag = setupStyleTag('mobile_sub_menu_indent');432 value.bind(function (newval) {433 var padding = wp.customize('mobile_menu_padding').get();434 padding = JSON.parse(padding);435 var calculation = parseInt(newval, 10) + parseInt(padding.left, 10);436 styleTag.innerHTML = '.wpbf-mobile-menu .sub-menu a {padding-left: ' + calculation + 'px;}';437 });438 });439 // Menu item background color.440 wp.customize('mobile_sub_menu_bg_color', function (value) {441 var styleTag = setupStyleTag('mobile_sub_menu_bg_color');442 value.bind(function (newval) {443 styleTag.innerHTML = '.wpbf-mobile-menu .sub-menu a {background-color: ' + newval + ';}';444 });445 });446 // Menu item background color hover.447 wp.customize('mobile_sub_menu_bg_color_alt', function (value) {448 var styleTag = setupStyleTag('mobile_sub_menu_bg_color_alt');449 value.bind(function (newval) {450 styleTag.innerHTML = '.wpbf-mobile-menu .sub-menu a:hover {background-color: ' + newval + ';}';451 });452 });453 // Menu item font color.454 wp.customize('mobile_sub_menu_font_color', function (value) {455 var styleTag = setupStyleTag('mobile_sub_menu_font_color');456 value.bind(function (newval) {457 styleTag.innerHTML = '.wpbf-mobile-menu .sub-menu a {color: ' + newval + ';}';458 });459 });460 // Menu item font color hover.461 wp.customize('mobile_sub_menu_font_color_alt', function (value) {462 var styleTag = setupStyleTag('mobile_sub_menu_font_color_alt');463 value.bind(function (newval) {464 styleTag.innerHTML = '.wpbf-mobile-menu .sub-menu a:hover, .wpbf-mobile-menu .sub-menu > .current-menu-item > a {color: ' + newval + '!important;}';465 });466 });467 // Menu item divider color.468 wp.customize('mobile_sub_menu_border_color', function (value) {469 var styleTag = setupStyleTag('mobile_sub_menu_border_color');470 value.bind(function (newval) {471 styleTag.innerHTML = '.wpbf-mobile-menu .sub-menu .menu-item {border-top-color: ' + newval + ';}';472 });473 });474 // Sub menu arrow color.475 wp.customize('mobile_sub_menu_arrow_color', function (value) {476 var styleTag = setupStyleTag('mobile_sub_menu_arrow_color');477 value.bind(function (newval) {478 styleTag.innerHTML = '.wpbf-mobile-menu .sub-menu .wpbf-submenu-toggle {color: ' + newval + ';}';479 });480 });481 // Menu item font size.482 wp.customize('mobile_sub_menu_font_size', function (value) {483 var styleTag = setupStyleTag('mobile_sub_menu_font_size');484 value.bind(function (newval) {485 var suffix = $.isNumeric(newval) ? 'px' : '';486 styleTag.innerHTML = '.wpbf-mobile-menu .sub-menu a, .wpbf-mobile-menu .sub-menu .menu-item-has-children .wpbf-submenu-toggle {font-size: ' + newval + suffix + ';}';487 });488 });489 /* Logo */490 // Width.491 wp.customize('menu_logo_size', function (value) {492 var styleTag = setupStyleTag('menu_logo_size');493 value.bind(function (newval) {494 var obj = JSON.parse(newval),495 desktop = obj.desktop,496 tablet = obj.tablet,497 mobile = obj.mobile,498 desktopsuffix = $.isNumeric(desktop) ? 'px' : '',499 tabletsuffix = $.isNumeric(tablet) ? 'px' : '',500 mobilesuffix = $.isNumeric(mobile) ? 'px' : '';501 styleTag.innerHTML = '\502 .wpbf-logo img, .wpbf-mobile-logo img {\503 width: ' + desktop + desktopsuffix + ';\504 }\505 @media (' + mediaQueries.tablet + ') {\506 .wpbf-mobile-logo img {width: ' + tablet + tabletsuffix + ';}\507 }\508 @media (' + mediaQueries.mobile + ') {\509 .wpbf-mobile-logo img {width: ' + mobile + mobilesuffix + ';}\510 }\511 ';512 });513 });514 // Font size.515 wp.customize('menu_logo_font_size', function (value) {516 var styleTag = setupStyleTag('menu_logo_font_size');517 value.bind(function (newval) {518 var obj = JSON.parse(newval),519 desktop = obj.desktop,520 tablet = obj.tablet,521 mobile = obj.mobile,522 desktopsuffix = $.isNumeric(desktop) ? 'px' : '',523 tabletsuffix = $.isNumeric(tablet) ? 'px' : '',524 mobilesuffix = $.isNumeric(mobile) ? 'px' : '';525 styleTag.innerHTML = '\526 .wpbf-logo a, .wpbf-mobile-logo a {\527 font-size: ' + desktop + desktopsuffix + ';\528 }\529 @media (' + mediaQueries.tablet + ') {\530 .wpbf-mobile-logo a {font-size: ' + tablet + tabletsuffix + ';}\531 }\532 @media (' + mediaQueries.mobile + ') {\533 .wpbf-mobile-logo a {font-size: ' + mobile + mobilesuffix + ';}\534 }\535 ';536 });537 });538 // Color.539 wp.customize('menu_logo_color', function (value) {540 var styleTag = setupStyleTag('menu_logo_color');541 value.bind(function (newval) {542 styleTag.innerHTML = '.wpbf-logo a, .wpbf-mobile-logo a {color: ' + newval + ';}';543 });544 });545 // Color hover.546 wp.customize('menu_logo_color_alt', function (value) {547 var styleTag = setupStyleTag('menu_logo_color_alt');548 value.bind(function (newval) {549 styleTag.innerHTML = '.wpbf-logo a:hover, .wpbf-mobile-logo a:hover {color: ' + newval + ';}';550 });551 });552 // Container width.553 wp.customize('menu_logo_container_width', function (value) {554 var styleTag = setupStyleTag('menu_logo_container_width');555 value.bind(function (newval) {556 var calculation = 100 - newval;557 styleTag.innerHTML = '\558 .wpbf-navigation .wpbf-1-4 {width: ' + newval + '%;}\559 .wpbf-navigation .wpbf-3-4 {width: ' + calculation + '%;}\560 ';561 });562 });563 // Mobile container width.564 wp.customize('mobile_menu_logo_container_width', function (value) {565 var styleTag = setupStyleTag('mobile_menu_logo_container_width');566 value.bind(function (newval) {567 var calculation = 100 - newval;568 styleTag.innerHTML = '\569 @media (' + mediaQueries.tablet + ') {\570 .wpbf-navigation .wpbf-2-3 {width: ' + newval + '%;}\571 .wpbf-navigation .wpbf-1-3 {width: ' + calculation + '%;}\572 }\573 ';574 });575 });576 /* Tagline */577 // Font size.578 wp.customize('menu_logo_description_font_size', function (value) {579 var styleTag = setupStyleTag('menu_logo_description_font_size');580 value.bind(function (newval) {581 var obj = JSON.parse(newval),582 desktop = obj.desktop,583 tablet = obj.tablet,584 mobile = obj.mobile,585 desktopsuffix = $.isNumeric(desktop) ? 'px' : '',586 tabletsuffix = $.isNumeric(tablet) ? 'px' : '',587 mobilesuffix = $.isNumeric(mobile) ? 'px' : '';588 styleTag.innerHTML = '\589 .wpbf-logo .wpbf-tagline, .wpbf-mobile-logo .wpbf-tagline {\590 font-size: ' + desktop + desktopsuffix + ';\591 }\592 @media (' + mediaQueries.tablet + ') {\593 .wpbf-mobile-logo .wpbf-tagline {font-size: ' + tablet + tabletsuffix + ';}\594 }\595 @media (' + mediaQueries.mobile + ') {\596 .wpbf-mobile-logo .wpbf-tagline {font-size: ' + mobile + mobilesuffix + ';}\597 }\598 ';599 });600 });601 // Font color.602 wp.customize('menu_logo_description_color', function (value) {603 var styleTag = setupStyleTag('menu_logo_description_color');604 value.bind(function (newval) {605 styleTag.innerHTML = '.wpbf-tagline {color: ' + newval + ';}';606 });607 });608 /* Pre Header */609 // Width.610 wp.customize('pre_header_width', function (value) {611 var styleTag = setupStyleTag('pre_header_width');612 value.bind(function (newval) {613 newval = !newval ? '1200px' : newval;614 styleTag.innerHTML = '.wpbf-inner-pre-header {max-width: ' + newval + ';}';615 });616 });617 // Height.618 wp.customize('pre_header_height', function (value) {619 var styleTag = setupStyleTag('pre_header_height');620 value.bind(function (newval) {621 styleTag.innerHTML = '.wpbf-inner-pre-header {padding-top: ' + newval + 'px; padding-bottom: ' + newval + 'px;}';622 });623 });624 // Background color.625 wp.customize('pre_header_bg_color', function (value) {626 var styleTag = setupStyleTag('pre_header_bg_color');627 value.bind(function (newval) {628 styleTag.innerHTML = '.wpbf-pre-header {background-color: ' + newval + ';}';629 });630 });631 // Font color.632 wp.customize('pre_header_font_color', function (value) {633 var styleTag = setupStyleTag('pre_header_font_color');634 value.bind(function (newval) {635 styleTag.innerHTML = '.wpbf-pre-header {color: ' + newval + ';}';636 });637 });638 // Accent color.639 wp.customize('pre_header_accent_color', function (value) {640 var styleTag = setupStyleTag('pre_header_accent_color');641 value.bind(function (newval) {642 styleTag.innerHTML = '.wpbf-pre-header a {color: ' + newval + ';}';643 });644 });645 // Accent color hover.646 wp.customize('pre_header_accent_color_alt', function (value) {647 var styleTag = setupStyleTag('pre_header_accent_color_alt');648 value.bind(function (newval) {649 styleTag.innerHTML = '.wpbf-pre-header a:hover, .wpbf-pre-header .wpbf-menu > .current-menu-item > a {color: ' + newval + '!important;}';650 });651 });652 // Font size.653 wp.customize('pre_header_font_size', function (value) {654 var styleTag = setupStyleTag('pre_header_font_size');655 value.bind(function (newval) {656 var suffix = $.isNumeric(newval) ? 'px' : '';657 styleTag.innerHTML = '\658 .wpbf-pre-header,\659 .wpbf-pre-header .wpbf-menu,\660 .wpbf-pre-header .wpbf-menu .sub-menu a {\661 font-size: ' + newval + suffix + ';\662 }\663 ';664 });665 });666 /* Blog â Pagination */667 // Border radius.668 wp.customize('blog_pagination_border_radius', function (value) {669 var styleTag = setupStyleTag('blog_pagination_border_radius');670 value.bind(function (newval) {671 styleTag.innerHTML = '.pagination .page-numbers {border-radius: ' + newval + 'px;}';672 });673 });674 // Background color.675 wp.customize('blog_pagination_background_color', function (value) {676 var styleTag = setupStyleTag('blog_pagination_background_color');677 value.bind(function (newval) {678 styleTag.innerHTML = '.pagination .page-numbers:not(.current) {background-color: ' + newval + ';}';679 });680 });681 // Background color hover.682 wp.customize('blog_pagination_background_color_alt', function (value) {683 var styleTag = setupStyleTag('blog_pagination_background_color_alt');684 value.bind(function (newval) {685 styleTag.innerHTML = '.pagination .page-numbers:not(.current):hover {background-color: ' + newval + ';}';686 });687 });688 // Background color active.689 wp.customize('blog_pagination_background_color_active', function (value) {690 var styleTag = setupStyleTag('blog_pagination_background_color_active');691 value.bind(function (newval) {692 styleTag.innerHTML = '.pagination .page-numbers.current {background-color: ' + newval + ';}';693 });694 });695 // Font color.696 wp.customize('blog_pagination_font_color', function (value) {697 var styleTag = setupStyleTag('blog_pagination_font_color');698 value.bind(function (newval) {699 styleTag.innerHTML = '.pagination .page-numbers:not(.current) {color: ' + newval + ';}';700 });701 });702 // Font color hover.703 wp.customize('blog_pagination_font_color_alt', function (value) {704 var styleTag = setupStyleTag('blog_pagination_font_color_alt');705 value.bind(function (newval) {706 styleTag.innerHTML = '.pagination .page-numbers:not(.current):hover {color: ' + newval + ';}';707 });708 });709 // Font color active.710 wp.customize('blog_pagination_font_color_active', function (value) {711 var styleTag = setupStyleTag('blog_pagination_font_color_active');712 value.bind(function (newval) {713 styleTag.innerHTML = '.pagination .page-numbers.current {color: ' + newval + ';}';714 });715 });716 // Font size.717 wp.customize('blog_pagination_font_size', function (value) {718 var styleTag = setupStyleTag('blog_pagination_font_size');719 value.bind(function (newval) {720 var suffix = $.isNumeric(newval) ? 'px' : '';721 styleTag.innerHTML = '.pagination .page-numbers {font-size: ' + newval + suffix + ';}';722 });723 });724 /* Sidebar */725 // Width.726 wp.customize('sidebar_width', function (value) {727 var styleTag = setupStyleTag('sidebar_width');728 value.bind(function (newval) {729 var calculation = 100 - newval;730 styleTag.innerHTML = '\731 .wpbf-sidebar-wrapper {width: ' + newval + '%;}\732 .wpbf-sidebar-left .wpbf-main, .wpbf-sidebar-right .wpbf-main {width: ' + calculation + '%;}\733 ';734 });735 });736 // Background color.737 wp.customize('sidebar_bg_color', function (value) {738 var styleTag = setupStyleTag('sidebar_bg_color');739 value.bind(function (newval) {740 styleTag.innerHTML = '.wpbf-sidebar .widget, .elementor-widget-sidebar .widget {background-color: ' + newval + ';}';741 });742 });743 /* Buttons */744 // Background color.745 wp.customize('button_bg_color', function (value) {746 var styleTag = setupStyleTag('button_bg_color');747 value.bind(function (newval) {748 styleTag.innerHTML = '.wpbf-button:not(.wpbf-button-primary), input[type="submit"] {background-color: ' + newval + ';}';749 });750 });751 // Background color hover.752 wp.customize('button_bg_color_alt', function (value) {753 var styleTag = setupStyleTag('button_bg_color_alt');754 value.bind(function (newval) {755 styleTag.innerHTML = '.wpbf-button:not(.wpbf-button-primary):hover, input[type="submit"]:hover {background-color: ' + newval + ';}';756 });757 });758 // Text color.759 wp.customize('button_text_color', function (value) {760 var styleTag = setupStyleTag('button_text_color');761 value.bind(function (newval) {762 styleTag.innerHTML = '.wpbf-button:not(.wpbf-button-primary), input[type="submit"] {color: ' + newval + ';}';763 });764 });765 // Text color hover.766 wp.customize('button_text_color_alt', function (value) {767 var styleTag = setupStyleTag('button_text_color_alt');768 value.bind(function (newval) {769 styleTag.innerHTML = '.wpbf-button:not(.wpbf-button-primary):hover, input[type="submit"]:hover {color: ' + newval + ';}';770 });771 });772 // Primary background color.773 wp.customize('button_primary_bg_color', function (value) {774 var styleTag = setupStyleTag('button_primary_bg_color');775 value.bind(function (newval) {776 styleTag.innerHTML = '\777 .wpbf-button-primary {background-color: ' + newval + ';}\778 .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background) {background-color: ' + newval + ';}\779 .is-style-outline .wp-block-button__link:not(.has-text-color):not(.has-background) {border-color: ' + newval + '; color: ' + newval + ';}\780 ';781 });782 });783 // Primary background color hover.784 wp.customize('button_primary_bg_color_alt', function (value) {785 var styleTag = setupStyleTag('button_primary_bg_color_alt');786 value.bind(function (newval) {787 styleTag.innerHTML = '\788 .wpbf-button-primary:hover {background-color: ' + newval + ';}\789 .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):not(.has-text-color):hover {background-color: ' + newval + ';}\790 .is-style-outline .wp-block-button__link:not(.has-text-color):not(.has-background):hover {border-color: ' + newval + '; color: ' + newval + ';}\791 ';792 });793 });794 // Primary text color.795 wp.customize('button_primary_text_color', function (value) {796 var styleTag = setupStyleTag('button_primary_text_color');797 value.bind(function (newval) {798 styleTag.innerHTML = '\799 .wpbf-button-primary {color: ' + newval + ';}\800 .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-text-color) {color: ' + newval + ';}\801 ';802 });803 });804 // Primary text color hover.805 wp.customize('button_primary_text_color_alt', function (value) {806 var styleTag = setupStyleTag('button_primary_text_color_alt');807 value.bind(function (newval) {808 styleTag.innerHTML = '\809 .wpbf-button-primary:hover {color: ' + newval + ';}\810 .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):not(.has-text-color):hover {color: ' + newval + ';}\811 ';812 });813 });814 // Border radius.815 wp.customize('button_border_radius', function (value) {816 var styleTag = setupStyleTag('button_border_radius');817 value.bind(function (newval) {818 styleTag.innerHTML = '.wpbf-button, input[type="submit"] {border-radius: ' + newval + 'px;}';819 });820 });821 // Border width.822 wp.customize('button_border_width', function (value) {823 var styleTag = setupStyleTag('button_border_width');824 value.bind(function (newval) {825 styleTag.innerHTML = '.wpbf-button, input[type="submit"] {border-width: ' + newval + 'px; border-style: solid;}';826 });827 });828 // Border color.829 wp.customize('button_border_color', function (value) {830 var styleTag = setupStyleTag('button_border_color');831 value.bind(function (newval) {832 styleTag.innerHTML = '.wpbf-button:not(.wpbf-button-primary), input[type="submit"] {border-color: ' + newval + ';}';833 });834 });835 // Border color hover.836 wp.customize('button_border_color_alt', function (value) {837 var styleTag = setupStyleTag('button_border_color_alt');838 value.bind(function (newval) {839 styleTag.innerHTML = '.wpbf-button:not(.wpbf-button-primary):hover, input[type="submit"]:hover {border-color: ' + newval + ';}';840 });841 });842 // Primary border color.843 wp.customize('button_primary_border_color', function (value) {844 var styleTag = setupStyleTag('button_primary_border_color');845 value.bind(function (newval) {846 styleTag.innerHTML = '.wpbf-button-primary {border-color: ' + newval + ';}';847 });848 });849 // Primary border color hover.850 wp.customize('button_primary_border_color_alt', function (value) {851 var styleTag = setupStyleTag('button_primary_border_color_alt');852 value.bind(function (newval) {853 styleTag.innerHTML = '.wpbf-button-primary:hover {border-color: ' + newval + ';}';854 });855 });856 /* Breadcrumbs */857 // Background background color.858 wp.customize('breadcrumbs_background_color', function (value) {859 var styleTag = setupStyleTag('breadcrumbs_background_color');860 value.bind(function (newval) {861 styleTag.innerHTML = '.wpbf-breadcrumbs-container {background-color: ' + newval + ';}';862 });863 });864 // Alignment.865 wp.customize('breadcrumbs_alignment', function (value) {866 var styleTag = setupStyleTag('breadcrumbs_alignment');867 value.bind(function (newval) {868 text - align869 styleTag.innerHTML = '.wpbf-breadcrumbs-container {text-align: ' + newval + ';}';870 });871 });872 // Font color.873 wp.customize('breadcrumbs_font_color', function (value) {874 var styleTag = setupStyleTag('breadcrumbs_font_color');875 value.bind(function (newval) {876 styleTag.innerHTML = '.wpbf-breadcrumbs {color: ' + newval + ';}';877 });878 });879 // Accent color.880 wp.customize('breadcrumbs_accent_color', function (value) {881 var styleTag = setupStyleTag('breadcrumbs_accent_color');882 value.bind(function (newval) {883 styleTag.innerHTML = '.wpbf-breadcrumbs a {color: ' + newval + ';}';884 });885 });886 // Accent color hover.887 wp.customize('breadcrumbs_accent_color_alt', function (value) {888 var styleTag = setupStyleTag('breadcrumbs_accent_color_alt');889 value.bind(function (newval) {890 styleTag.innerHTML = '.wpbf-breadcrumbs a:hover {color: ' + newval + ';}';891 });892 });893 /* Footer */894 // Width.895 wp.customize('footer_width', function (value) {896 var styleTag = setupStyleTag('footer_width');897 value.bind(function (newval) {898 newval = !newval ? '1200px' : newval;899 styleTag.innerHTML = '.wpbf-inner-footer {max-width: ' + newval + ';}';900 });901 });902 // Height.903 wp.customize('footer_height', function (value) {904 var styleTag = setupStyleTag('footer_height');905 value.bind(function (newval) {906 styleTag.innerHTML = '.wpbf-inner-footer {padding-top: ' + newval + 'px; padding-bottom: ' + newval + 'px;}';907 });908 });909 // Background color.910 wp.customize('footer_bg_color', function (value) {911 var styleTag = setupStyleTag('footer_bg_color');912 value.bind(function (newval) {913 styleTag.innerHTML = '.wpbf-page-footer {background-color: ' + newval + ';}';914 });915 });916 // Font color.917 wp.customize('footer_font_color', function (value) {918 var styleTag = setupStyleTag('footer_font_color');919 value.bind(function (newval) {920 styleTag.innerHTML = '.wpbf-inner-footer {color: ' + newval + ';}';921 });922 });923 // Accent color.924 wp.customize('footer_accent_color', function (value) {925 var styleTag = setupStyleTag('footer_accent_color');926 value.bind(function (newval) {927 styleTag.innerHTML = '.wpbf-inner-footer a {color: ' + newval + ';}';928 });929 });930 // Accent color hover.931 wp.customize('footer_accent_color_alt', function (value) {932 var styleTag = setupStyleTag('footer_accent_color_alt');933 value.bind(function (newval) {934 styleTag.innerHTML = '.wpbf-inner-footer a:hover, .wpbf-inner-footer .wpbf-menu > .current-menu-item > a {color: ' + newval + ';}';935 });936 });937 // Font size.938 wp.customize('footer_font_size', function (value) {939 var styleTag = setupStyleTag('footer_font_size');940 value.bind(function (newval) {941 var suffix = $.isNumeric(newval) ? 'px' : '';942 styleTag.innerHTML = '.wpbf-inner-footer, .wpbf-inner-footer .wpbf-menu {font-size: ' + newval + suffix + ';}';943 });944 });945 /* WooCommerce - Defaults */946 // Button border radius.947 wp.customize('button_border_radius', function (value) {948 var styleTag = setupStyleTag('button_border_radius');949 value.bind(function (newval) {950 styleTag.innerHTML = '.woocommerce a.button, .woocommerce button.button {border-radius: ' + newval + 'px;}';951 });952 });953 // Custom width.954 wp.customize('woocommerce_loop_custom_width', function (value) {955 var styleTag = setupStyleTag('woocommerce_loop_custom_width');956 value.bind(function (newval) {957 newval = !newval ? '1200px' : newval;958 styleTag.innerHTML = '.archive.woocommerce #inner-content {max-width: ' + newval + ';}';959 });960 });961 /* WooCommerce - Menu Item */962 // Desktop color.963 wp.customize('woocommerce_menu_item_desktop_color', function (value) {964 var styleTag = setupStyleTag('woocommerce_menu_item_desktop_color');965 value.bind(function (newval) {966 styleTag.innerHTML = '\967 .wpbf-menu .wpbf-woo-menu-item .wpbf-woo-menu-item-count {background-color: ' + newval + ';}\968 .wpbf-menu .wpbf-woo-menu-item .wpbf-woo-menu-item-count:before {color: ' + newval + ';}\969 ';970 });971 });972 // Mobile color.973 wp.customize('woocommerce_menu_item_mobile_color', function (value) {974 var styleTag = setupStyleTag('woocommerce_menu_item_mobile_color');975 value.bind(function (newval) {976 styleTag.innerHTML = '\977 .wpbf-mobile-nav-wrapper .wpbf-woo-menu-item .wpbf-woo-menu-item-count {background-color: ' + newval + ';}\978 .wpbf-mobile-nav-wrapper .wpbf-woo-menu-item .wpbf-woo-menu-item-count:before {color: ' + newval + ';}\979 ';980 });981 });982 /* WooCommerce - Loop */983 // Content alignment.984 wp.customize('woocommerce_loop_content_alignment', function (value) {985 var styleTag = setupStyleTag('woocommerce_loop_content_alignment');986 value.bind(function (newval) {987 if (newval === 'center') {988 styleTag.innerHTML = '\989 .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {text-align: ' + newval + ';}\990 .woocommerce .products .star-rating {margin: 0 auto 10px auto;}\991 ';992 } else if (newval === 'right') {993 styleTag.innerHTML = '\994 .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {text-align: ' + newval + ';}\995 .woocommerce .products .star-rating {display: inline-block; text-align: right;}\996 ';997 } else {998 styleTag.innerHTML = '.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {text-align: ' + newval + ';}';999 }1000 });1001 });1002 // Image alignment.1003 wp.customize('woocommerce_loop_image_alignment', function (value) {1004 var styleTag = setupStyleTag('woocommerce_loop_image_alignment');1005 value.bind(function (newval) {1006 if (newval == 'left') {1007 styleTag.innerHTML = '\1008 .wpbf-woo-list-view .wpbf-woo-loop-thumbnail-wrapper {float: left;}\1009 .wpbf-woo-list-view .wpbf-woo-loop-summary {float: right;}\1010 ';1011 } else {1012 styleTag.innerHTML = '\1013 .wpbf-woo-list-view .wpbf-woo-loop-thumbnail-wrapper {float: right;}\1014 .wpbf-woo-list-view .wpbf-woo-loop-summary {float: left;}\1015 ';1016 }1017 });1018 });1019 // Image width.1020 wp.customize('woocommerce_loop_image_width', function (value) {1021 var styleTag = setupStyleTag('woocommerce_loop_image_width');1022 value.bind(function (newval) {1023 styleTag.innerHTML = '\1024 .wpbf-woo-list-view .wpbf-woo-loop-thumbnail-wrapper {width: ' + (newval - 2) + '%;}\1025 .wpbf-woo-list-view .wpbf-woo-loop-summary {width: ' + (98 - newval) + '%;}\1026 ';1027 });1028 });1029 // Title font size.1030 wp.customize('woocommerce_loop_title_size', function (value) {1031 var styleTag = setupStyleTag('woocommerce_loop_title_size');1032 value.bind(function (newval) {1033 var suffix = $.isNumeric(newval) ? 'px' : '';1034 styleTag.innerHTML = '\1035 .woocommerce ul.products li.product h3,\1036 .woocommerce ul.products li.product .woocommerce-loop-product__title,\1037 .woocommerce ul.products li.product .woocommerce-loop-category__title {\1038 font-size: ' + newval + suffix + ';\1039 }\1040 ';1041 });1042 });1043 // Title font color.1044 wp.customize('woocommerce_loop_title_color', function (value) {1045 var styleTag = setupStyleTag('woocommerce_loop_title_color');1046 value.bind(function (newval) {1047 styleTag.innerHTML = '\1048 .woocommerce ul.products li.product h3,\1049 .woocommerce ul.products li.product .woocommerce-loop-product__title,\1050 .woocommerce ul.products li.product .woocommerce-loop-category__title {\1051 color: ' + newval + ';\1052 }\1053 ';1054 });1055 });1056 // Price font size.1057 wp.customize('woocommerce_loop_price_size', function (value) {1058 var styleTag = setupStyleTag('woocommerce_loop_price_size');1059 value.bind(function (newval) {1060 var suffix = $.isNumeric(newval) ? 'px' : '';1061 styleTag.innerHTML = '.woocommerce ul.products li.product .price {font-size: ' + newval + suffix + ';}';1062 });1063 });1064 // Price font color.1065 wp.customize('woocommerce_loop_price_color', function (value) {1066 var styleTag = setupStyleTag('woocommerce_loop_price_color');1067 value.bind(function (newval) {1068 styleTag.innerHTML = '.woocommerce ul.products li.product .price {color: ' + newval + ';}';1069 });1070 });1071 // Out of stock notice.1072 wp.customize('woocommerce_loop_out_of_stock_font_size', function (value) {1073 var styleTag = setupStyleTag('woocommerce_loop_out_of_stock_font_size');1074 value.bind(function (newval) {1075 var suffix = $.isNumeric(newval) ? 'px' : '';1076 styleTag.innerHTML = '.woocommerce ul.products li.product .wpbf-woo-loop-out-of-stock {font-size: ' + newval + suffix + ';}';1077 });1078 });1079 // Out of stock color.1080 wp.customize('woocommerce_loop_out_of_stock_font_color', function (value) {1081 var styleTag = setupStyleTag('woocommerce_loop_out_of_stock_font_color');1082 value.bind(function (newval) {1083 styleTag.innerHTML = '.woocommerce ul.products li.product .wpbf-woo-loop-out-of-stock {color: ' + newval + ';}';1084 });1085 });1086 // Out of stock background color.1087 wp.customize('woocommerce_loop_out_of_stock_background_color', function (value) {1088 var styleTag = setupStyleTag('woocommerce_loop_out_of_stock_background_color');1089 value.bind(function (newval) {1090 styleTag.innerHTML = '.woocommerce ul.products li.product .wpbf-woo-loop-out-of-stock {background-color: ' + newval + ';}';1091 });1092 });1093 // Sale font size.1094 wp.customize('woocommerce_loop_sale_font_size', function (value) {1095 var styleTag = setupStyleTag('woocommerce_loop_sale_font_size');1096 value.bind(function (newval) {1097 var suffix = $.isNumeric(newval) ? 'px' : '';1098 styleTag.innerHTML = '.woocommerce span.onsale {font-size: ' + newval + suffix + ';}';1099 });1100 });1101 // Sale font color.1102 wp.customize('woocommerce_loop_sale_font_color', function (value) {1103 var styleTag = setupStyleTag('woocommerce_loop_sale_font_color');1104 value.bind(function (newval) {1105 styleTag.innerHTML = '.woocommerce span.onsale {color: ' + newval + ';}';1106 });1107 });1108 // Sale background color.1109 wp.customize('woocommerce_loop_sale_background_color', function (value) {1110 var styleTag = setupStyleTag('woocommerce_loop_sale_background_color');1111 value.bind(function (newval) {1112 styleTag.innerHTML = '.woocommerce span.onsale {background-color: ' + newval + ';}';1113 });1114 });1115 /* WooCommerce - Single */1116 // Custom width.1117 wp.customize('woocommerce_single_custom_width', function (value) {1118 var styleTag = setupStyleTag('woocommerce_single_custom_width');1119 value.bind(function (newval) {1120 newval = !newval ? '1200px' : newval;1121 styleTag.innerHTML = '.single.woocommerce #inner-content {max-width: ' + newval + ';}';1122 });1123 });1124 // Image alignment.1125 wp.customize('woocommerce_single_alignment', function (value) {1126 var styleTag = setupStyleTag('woocommerce_single_alignment');1127 value.bind(function (newval) {1128 if (newval === 'right') {1129 styleTag.innerHTML = '\1130 .woocommerce div.product div.summary,\1131 .woocommerce #content div.product div.summary,\1132 .woocommerce-page div.product div.summary,\1133 .woocommerce-page #content div.product div.summary {float: left;}\1134 \1135 .woocommerce div.product div.images,\1136 .woocommerce #content div.product div.images,\1137 .woocommerce-page div.product div.images,\1138 .woocommerce-page #content div.product div.images {float: right;}\1139 \1140 .single-product.woocommerce span.onsale {display: none;}\1141 ';1142 } else {1143 styleTag.innerHTML = '\1144 .woocommerce div.product div.summary,\1145 .woocommerce #content div.product div.summary,\1146 .woocommerce-page div.product div.summary,\1147 .woocommerce-page #content div.product div.summary {float: right;}\1148 \1149 .woocommerce div.product div.images,\1150 .woocommerce #content div.product div.images,\1151 .woocommerce-page div.product div.images,\1152 .woocommerce-page #content div.product div.images {float: left;}\1153 \1154 .single-product.woocommerce span.onsale {display: block;}\1155 ';1156 }1157 });1158 });1159 // Image width.1160 wp.customize('woocommerce_single_image_width', function (value) {1161 var styleTag = setupStyleTag('woocommerce_single_image_width');1162 value.bind(function (newval) {1163 styleTag.innerHTML = '\1164 .woocommerce div.product div.images,\1165 .woocommerce #content div.product div.images,\1166 .woocommerce-page div.product div.images,\1167 .woocommerce-page #content div.product div.images {width: ' + (newval - 2) + '%;}\1168 \1169 .woocommerce div.product div.summary,\1170 .woocommerce #content div.product div.summary,\1171 .woocommerce-page div.product div.summary,\1172 .woocommerce-page #content div.product div.summary {width: ' + (98 - newval) + '%;}\1173 ';1174 });1175 });1176 // Price font size.1177 wp.customize('woocommerce_single_price_size', function (value) {1178 var styleTag = setupStyleTag('woocommerce_single_price_size');1179 value.bind(function (newval) {1180 var suffix = $.isNumeric(newval) ? 'px' : '';1181 styleTag.innerHTML = '.woocommerce div.product span.price, .woocommerce div.product p.price {font-size: ' + newval + suffix + ';}';1182 });1183 });1184 // Price font color.1185 wp.customize('woocommerce_single_price_color', function (value) {1186 var styleTag = setupStyleTag('woocommerce_single_price_color');1187 value.bind(function (newval) {1188 styleTag.innerHTML = '.woocommerce div.product span.price, .woocommerce div.product p.price {color: ' + newval + ';}';1189 });1190 });1191 // Tabs background color.1192 wp.customize('woocommerce_single_tabs_background_color', function (value) {1193 var styleTag = setupStyleTag('woocommerce_single_tabs_background_color');1194 value.bind(function (newval) {1195 styleTag.innerHTML = '.woocommerce div.product .woocommerce-tabs ul.tabs li {background-color: ' + newval + ';}';1196 });1197 });1198 // Tabs background color hover.1199 wp.customize('woocommerce_single_tabs_background_color_alt', function (value) {1200 var styleTag = setupStyleTag('woocommerce_single_tabs_background_color_alt');1201 value.bind(function (newval) {1202 styleTag.innerHTML = '.woocommerce div.product .woocommerce-tabs ul.tabs li:hover {background-color: ' + newval + '; border-bottom-color: ' + newval + ';}';1203 });1204 });1205 // Tabs background color active.1206 wp.customize('woocommerce_single_tabs_background_color_active', function (value) {1207 var styleTag = setupStyleTag('woocommerce_single_tabs_background_color_active');1208 value.bind(function (newval) {1209 styleTag.innerHTML = '.woocommerce div.product .woocommerce-tabs ul.tabs li.active, .woocommerce div.product .woocommerce-tabs ul.tabs li.active:hover {background-color: ' + newval + '; border-bottom-color: ' + newval + ';}';1210 });1211 });1212 // Tabs font color.1213 wp.customize('woocommerce_single_tabs_font_color', function (value) {1214 var styleTag = setupStyleTag('woocommerce_single_tabs_font_color');1215 value.bind(function (newval) {1216 styleTag.innerHTML = '.woocommerce div.product .woocommerce-tabs ul.tabs li:not(.active) a {color: ' + newval + ';}';1217 });1218 });1219 // Tabs font color hover.1220 wp.customize('woocommerce_single_tabs_font_color_alt', function (value) {1221 var styleTag = setupStyleTag('woocommerce_single_tabs_font_color_alt');1222 value.bind(function (newval) {1223 styleTag.innerHTML = '.woocommerce div.product .woocommerce-tabs ul.tabs li:not(.active) a:hover {color: ' + newval + ';}';1224 });1225 });1226 // Tabs font color active.1227 wp.customize('woocommerce_single_tabs_font_color_active', function (value) {1228 var styleTag = setupStyleTag('woocommerce_single_tabs_font_color_active');1229 value.bind(function (newval) {1230 styleTag.innerHTML = '.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {color: ' + newval + ';}';1231 });1232 });1233 /** Woocommerce Store & Notices */1234 // Woocommerce info notice's accent color.1235 wp.customize("woocommerce_info_notice_color", function (value) {1236 var styleTag = setupStyleTag("woocommerce_info_notice_color");1237 value.bind(function (newval) {1238 styleTag.innerHTML = "\1239 .woocommerce-info {border-top-color: " + newval + ";}\1240 .woocommerce-info:before, .woocommerce-info a {color: " + newval + "}\1241 ";1242 });1243 });1244 // Woocommerce success notice's accent color.1245 wp.customize("woocommerce_message_notice_color", function (value) {1246 var styleTag = setupStyleTag("woocommerce_message_notice_color");1247 value.bind(function (newval) {1248 styleTag.innerHTML = "\1249 .woocommerce-message {border-top-color: " + newval + ";}\1250 .woocommerce-message:before, .woocommerce-message a {color: " + newval + "}\1251 ";1252 });1253 });1254 // Woocommerce error notice's accent color.1255 wp.customize("woocommerce_error_notice_color", function (value) {1256 var styleTag = setupStyleTag("woocommerce_error_notice_color");1257 value.bind(function (newval) {1258 styleTag.innerHTML = "\1259 .woocommerce-error {border-top-color: " + newval + ";}\1260 .woocommerce-error:before, .woocommerce-error a {color: " + newval + "}\1261 ";1262 });1263 });1264 // Woocommerce general notice's background color.1265 wp.customize("woocommerce_notice_bg_color", function (value) {1266 var styleTag = setupStyleTag("woocommerce_notice_bg_color");1267 value.bind(function (newval) {1268 styleTag.innerHTML = ".woocommerce-message {background-color: " + newval + ";}";1269 });1270 });1271 // Woocommerce general notice's text color.1272 wp.customize("woocommerce_notice_text_color", function (value) {1273 var styleTag = setupStyleTag("woocommerce_notice_text_color");1274 value.bind(function (newval) {1275 styleTag.innerHTML = ".woocommerce-message {color: " + newval + ";}";1276 });1277 });1278 // Tabs font size.1279 wp.customize('woocommerce_single_tabs_font_size', function (value) {1280 var styleTag = setupStyleTag('woocommerce_single_tabs_font_size');1281 value.bind(function (newval) {1282 var suffix = $.isNumeric(newval) ? 'px' : '';1283 styleTag.innerHTML = '.woocommerce div.product .woocommerce-tabs ul.tabs li a {font-size: ' + newval + suffix + ';}';1284 });1285 });1286 /* EDD - Menu Item */1287 // Desktop color.1288 wp.customize('edd_menu_item_desktop_color', function (value) {1289 var styleTag = setupStyleTag('edd_menu_item_desktop_color');1290 value.bind(function (newval) {1291 styleTag.innerHTML = '\1292 .wpbf-menu .wpbf-edd-menu-item .wpbf-edd-menu-item-count {background-color: ' + newval + ';}\1293 .wpbf-menu .wpbf-edd-menu-item .wpbf-edd-menu-item-count:before {color: ' + newval + ';}\1294 ';1295 });1296 });1297 // Mobile color.1298 wp.customize('edd_menu_item_mobile_color', function (value) {1299 var styleTag = setupStyleTag('edd_menu_item_mobile_color');1300 value.bind(function (newval) {1301 styleTag.innerHTML = '\1302 .wpbf-mobile-nav-wrapper .wpbf-edd-menu-item .wpbf-edd-menu-item-count {background-color: ' + newval + ';}\1303 .wpbf-mobile-nav-wrapper .wpbf-edd-menu-item .wpbf-edd-menu-item-count:before {color: ' + newval + ';}\1304 ';1305 });1306 });1307 /* Easy Digital Downloads - Defaults */1308 // Button border radius.1309 wp.customize('button_border_radius', function (value) {1310 var styleTag = setupStyleTag('button_border_radius');1311 value.bind(function (newval) {1312 styleTag.innerHTML = '.edd-submit.button {border-radius: ' + newval + 'px;}';1313 });1314 });...
Using AI Code Generation
1var styleTag = require('./styleTag');2styleTag('body', 'background-color', 'red');3styleTag('body', 'color', 'white');4styleTag('body', 'font-family', 'arial');5styleTag('body', 'font-size', '12px');6styleTag('body', 'padding', '10px');7styleTag('body', 'margin', '0');8styleTag('a', 'color', 'blue');9styleTag('a', 'text-decoration', 'none');10module.exports = function (selector, property, value) {11 var styleTag = document.createElement('style');12 styleTag.innerHTML = selector + '{' + property + ':' + value + '}';13 document.head.appendChild(styleTag);14};
Using AI Code Generation
1const { styleTag } = require("./BestPractice");2styleTag("test.js");3const { styleTag } = require("./BestPractice");4styleTag("test.js");5const { styleTag } = require("./BestPractice");6styleTag("test.js");7const { styleTag } = require("./BestPractice");8styleTag("test.js");9const { styleTag } = require("./BestPractice");10styleTag("test.js");11const { styleTag } = require("./BestPractice");12styleTag("test.js");13const { styleTag } = require("./BestPractice");14styleTag("test.js");15const { styleTag } = require("./BestPractice");16styleTag("test.js");17const { styleTag } = require("./BestPractice");18styleTag("test.js");19const { styleTag } = require("./BestPractice");20styleTag("test.js");
Using AI Code Generation
1var styleTag = document.createElement('style');2styleTag.type = 'text/css';3styleTag.innerHTML = '.best_in_place { background-image: url("/assets/edit.png"); background-repeat: no-repeat; background-position: right center; }';4document.getElementsByTagName('head')[0].appendChild(styleTag);5var styleTag = document.createElement('style');6styleTag.type = 'text/css';7styleTag.innerHTML = '.best_in_place { background-image: url("/assets/edit.png"); background-repeat: no-repeat; background-position: right center; }';8document.getElementsByTagName('head')[0].appendChild(styleTag);9var styleTag = document.createElement('style');10styleTag.type = 'text/css';11styleTag.innerHTML = '.best_in_place { background-image: url("/assets/edit.png"); background-repeat: no-repeat; background-position: right center; }';12document.getElementsByTagName('head')[0].appendChild(styleTag);13var styleTag = document.createElement('style');14styleTag.type = 'text/css';15styleTag.innerHTML = '.best_in_place { background-image: url("/assets/edit.png"); background-repeat: no-repeat; background-position: right center; }';16document.getElementsByTagName('head')[0].appendChild(styleTag);17var styleTag = document.createElement('style');18styleTag.type = 'text/css';19styleTag.innerHTML = '.best_in_place { background-image: url("/assets/edit.png"); background-repeat: no-repeat; background-position: right center; }';20document.getElementsByTagName('head')[0].appendChild(styleTag);21var styleTag = document.createElement('style');22styleTag.type = 'text/css';23styleTag.innerHTML = '.best_in_place { background-image: url("/assets/edit.png"); background-repeat: no-repeat; background-position: right center; }';24document.getElementsByTagName('
Using AI Code Generation
1var style = new BestieJS.StyleTag();2style.addRule('body', 'background-color: #000');3var style = new BestieJS.StyleTag('test.css');4style.addRule('body', 'background-color: #000');5var style = new BestieJS.StyleTag('test.css', function(){6 console.log('callback');7});8style.addRule('body', 'background-color: #000');9##BestieJS.StyleTag.addRule(selector, rules)10var style = new BestieJS.StyleTag();11style.addRule('body', 'background-color: #000');12##BestieJS.StyleTag.removeRule(selector)13var style = new BestieJS.StyleTag();14style.addRule('body', 'background-color: #000');15style.removeRule('body');16##BestieJS.StyleTag.getRule(selector)17var style = new BestieJS.StyleTag();18style.addRule('body', 'background-color: #000');19var rule = style.getRule('body');20##BestieJS.StyleTag.getRules()21var style = new BestieJS.StyleTag();22style.addRule('body', 'background-color: #000');23var rules = style.getRules();24##BestieJS.StyleTag.getStylesheet()
Automation Testing Tutorials
Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.
LambdaTest Learning Hubs:
- JUnit Tutorial
- TestNG Tutorial
- Webdriver Tutorial
- WebDriverIO Tutorial
- Protractor Tutorial
- Selenium 4 Tutorial
- Jenkins Tutorial
- NUnit Tutorial
- Jest Tutorial
- Playwright Tutorial
- Cypress Tutorial
- PyTest Tutorial
YouTube
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Run Best automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
