define ('WP_MEMORY_LIMIT', '768M');
define('WP_MAX_MEMORY_LIMIT', '756M');
set_time_limit(300);
.site-main p a {
font-weight: bold;
}
p:last-of-type{
margin: 0;
}
body {overflow-x:hidden !important;}
Customize Password Protect Page Login
.post-password-form {
padding: 200px 100px;
height: 75vh;
background: #e7f1f3;
}
#pwbox-1762 {
background-color: #ffffff;
}
/*
Plugin Name: Purge Cache
Description: Adds a button to the WordPress dashboard to clear the object cache
*/
add_action( 'admin_bar_menu', 'add_purge_cache_button', 999 );
function add_purge_cache_button( $wp_admin_bar ) {
if ( ! current_user_can( 'manage_options' ) ) {
return;
}
$args = array(
'id' => 'purge-cache',
'title' => 'Purge Cache',
'href' => '#',
'meta' => array( 'class' => 'purge-cache' )
);
$wp_admin_bar->add_node( $args );
}
add_action( 'admin_footer', 'add_purge_cache_script' );
function add_purge_cache_script() {
if ( ! current_user_can( 'manage_options' ) ) {
return;
}
?>
<script>
jQuery(document).ready(function($) {
$('#wp-admin-bar-purge-cache').click(function() {
if (confirm('Are you sure you want to purge the cache?')) {
$.ajax({
url: '<?php echo admin_url( 'admin-ajax.php' ); ?>',
data: {
action: 'purge_cache',
},
success: function() {
alert('Cache purged successfully!');
},
error: function() {
alert('An error occurred while purging the cache.');
}
});
}
});
});
</script>
<?php
}
add_action( 'wp_ajax_purge_cache', 'purge_cache_callback' );
function purge_cache_callback() {
global $wp_object_cache;
if ( ! current_user_can( 'manage_options' ) ) {
wp_die();
}
wp_cache_flush();
wp_die();
}
//Remove Gutenberg Block Library CSS from loading on the frontend
function smartwp_remove_wp_block_library_css(){
wp_dequeue_style( 'wp-block-library' );
wp_dequeue_style( 'wp-block-library-theme' );
}
add_action( 'wp_enqueue_scripts', 'smartwp_remove_wp_block_library_css' );
Explicit Fixed Width and Height
add_filter( 'the_content', 'add_image_dimensions' );
function add_image_dimensions( $content ) {
preg_match_all( '/<img[^>]+>/i', $content, $images);
if (count($images) < 1)
return $content;
foreach ($images[0] as $image) {
preg_match_all( '/(alt|title|src|width|class|id|height)=("[^"]*")/i', $image, $img );
if ( !in_array( 'src', $img[1] ) )
continue;
if ( !in_array( 'width', $img[1] ) || !in_array( 'height', $img[1] ) ) {
$src = $img[2][ array_search('src', $img[1]) ];
$alt = in_array( 'alt', $img[1] ) ? ' alt=' . $img[2][ array_search('alt', $img[1]) ] : '';
$title = in_array( 'title', $img[1] ) ? ' title=' . $img[2][ array_search('title', $img[1]) ] : '';
$class = in_array( 'class', $img[1] ) ? ' class=' . $img[2][ array_search('class', $img[1]) ] : '';
$id = in_array( 'id', $img[1] ) ? ' id=' . $img[2][ array_search('id', $img[1]) ] : '';
list( $width, $height, $type, $attr ) = getimagesize( str_replace( "\"", "" , $src ) );
$image_tag = sprintf( '<img src=%s%s%s%s%s width="%d" height="%d" />', $src, $alt, $title, $class, $id, $width, $height );
$content = str_replace($image, $image_tag, $content);
}
}
return $content;
}
Remove Unused JS
/**
* We will Dequeue the jQuery UI script as example.
*
* Hooked to the wp_print_scripts action, with a late priority (99),
* so that it is after the script was enqueued.
*/
function wp_remove_scripts() {
// check if user is admina
if (current_user_can( 'update_core' )) {
return;
}
else {
// Check for the page you want to target
if ( is_page( 'homepage' ) ) {
// Remove Scripts
wp_dequeue_style( 'jquery-ui-core' );
}
}
}
add_action( 'wp_enqueue_scripts', 'wp_remove_scripts', 99 );
Ensure Webfont is loaded
add_filter( 'elementor_pro/custom_fonts/font_display', function( $current_value, $font_family, $data ) {
return 'swap';
}, 10, 3 );
Remove Google Fonts
add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );
Web Squadron Code Snippet Library:
Codes
Password protected Page Styling: https://youtu.be/q8TQU3kMci0?si=lbFIRZ9kpqtBhSBI
Add Preview Sizes, Swapping and Ratios to the Top Bar: remove PHP at top!
<?php
/* Elementor Editor Window Extras
*
* Adds custom width/height inputs, min/max toggle, swap dimensions, and an aspect ratio dropdown
* to the Elementor editor’s responsive preview toolbar.
*
* Features:
* - Width/Height Inputs: Edit preview size directly (disabled in desktop/widescreen). Drag on number to resize live.
* - Min/Max Width Toggle: Toggle breakpoints default loading to min or max width(setting saved in browser).
* - Swap Dimensions Button: Instantly swap width and height of the preview window.
* - Aspect Ratio Dropdown: Apply common aspect ratios with a single click (not persistent/locking).
*
* Installation:
* - Add to a custom plugin, theme's functions.php, or a snippet plugin like WPCodeBox.
* - For extra safety, you may wrap with:
* if (did_action('elementor/loaded')) { add_action('elementor/editor/after_enqueue_scripts', 'add_custom_script_to_elementor'); }
*
* Compatibility:
* - Elementor Free/Pro 3.6+; custom breakpoints supported.
* - No dependencies.
* - Paste as a single snippet. "Run in Admin" or "Run Everywhere".
*
* Usage:
* - Controls appear near the Notes button.
* - Edit or drag width/height, toggle min/max, swap dimensions, or pick an aspect ratio from dropdown.
*
* Debug:
* - Controls not showing? Check Elementor DOM changes, or preview wrapper (#elementor-preview-responsive-wrapper).
* - Increase setTimeout delays if UI seems laggy.
* - You may freely share, modify, or maintain this for your own or community use!
*/
// ==== DEFAULT MOBILE MINIMUM WIDTH ====
// Set default minimum width in Px for the mobile breakpoint(it can manually be made smaller in the editor)
define('ELEMENTOR_MIN_MOBILE_WIDTH', 420);
// ==============================
add_action('elementor/editor/after_enqueue_scripts', function() {
?>
<script type="text/javascript">
(() => {
const MIN_MOBILE_WIDTH = <?php echo ELEMENTOR_MIN_MOBILE_WIDTH; ?>;
const ASPECTS = [
{ label: "16:9", value: 16 / 9 },
{ label: "9:16", value: 9 / 16 },
{ label: "16:10", value: 16 / 10 },
{ label: "10:16", value: 10 / 16 },
{ label: "3:4", value: 3 / 4 },
{ label: "4:3", value: 4 / 3 },
{ label: "19.5:9", value: 19.5 / 9 },
{ label: "9:19.5", value: 9 / 19.5 },
];
let minMaxActive = localStorage.getItem('elementor-minmax-toggle') === '1';
let editing = { width: false, height: false };
function getPreviewWrapper() {
return document.getElementById('elementor-preview-responsive-wrapper');
}
function getBreakpoint() {
return document.body.className.match(/elementor-device-([^\s]+)/)?.[1] || 'tablet';
}
function getBreakpointInfo(name) {
const breakpoints = elementorFrontend?.config?.responsive?.activeBreakpoints || {
mobile: { value: 767, direction: 'max', is_enabled: true },
tablet: { value: 1024, direction: 'max', is_enabled: true },
laptop: { value: 1366, direction: 'max', is_enabled: true },
desktop: { value: 9999, direction: 'min', is_enabled: true },
widescreen: { value: 2400, direction: 'min', is_enabled: true }
};
const bps = Object.keys(breakpoints)
.filter(k => breakpoints[k].is_enabled)
.map(k => ({ name: k, value: breakpoints[k].value, direction: breakpoints[k].direction }))
.sort((a, b) => a.value - b.value);
const bp = bps.find(b => b.name === name) || { name: 'tablet', value: 1024 };
const i = bps.indexOf(bp);
let min;
if (bp.name === 'mobile') {
min = MIN_MOBILE_WIDTH;
} else {
min = bp.direction === 'max' ? (i > 0 ? (bps[i-1].name === 'mobile' ? MIN_MOBILE_WIDTH : bps[i-1].value + 1) : MIN_MOBILE_WIDTH) : bp.value;
}
const max = bp.direction === 'max' ? bp.value : (i < bps.length - 1 ? bps[i+1].value - 1 : 9999);
return { min, max };
}
// NEW: Always display live offsetWidth/offsetHeight on desktop/widescreen
function getWidth(forceLive=false) {
const w = getPreviewWrapper();
const bp = getBreakpoint();
if (!w) return 0;
if (bp === 'desktop' || bp === 'widescreen' || forceLive) return w.offsetWidth;
return parseInt(getComputedStyle(w).getPropertyValue('--e-editor-preview-width')) || w.offsetWidth || 0;
}
function getHeight(forceLive=false) {
const w = getPreviewWrapper();
const bp = getBreakpoint();
if (!w) return 0;
if (bp === 'desktop' || bp === 'widescreen' || forceLive) return w.offsetHeight;
return parseInt(getComputedStyle(w).getPropertyValue('--e-editor-preview-height')) || w.offsetHeight || 0;
}
function setWidthHeight(width, height, updateDisplays = true) {
const w = getPreviewWrapper();
if (!w) return;
w.style.setProperty('--e-editor-preview-width', width + 'px');
w.style.setProperty('--e-editor-preview-height', height + 'px');
w.style.width = '';
w.style.height = '';
w.dispatchEvent(new Event('resize'));
if (updateDisplays) updateAllDisplays();
}
function updateAllDisplays() {
const wrapper = getPreviewWrapper();
const widthSpan = document.querySelector('#width-number');
const heightSpan = document.querySelector('#height-number');
const controlWrapper = document.querySelector('.e-size-control-wrapper');
if (!wrapper || !widthSpan || !heightSpan || !controlWrapper) return;
const bp = getBreakpoint();
const isDisabled = (bp === 'desktop' || bp === 'widescreen');
// FIX: Always display live size on desktop/widescreen (never editable there)
if (!editing.width) widthSpan.textContent = getWidth(true);
if (!editing.height) heightSpan.textContent = getHeight(true);
[widthSpan, heightSpan].forEach((span, i) => {
span.contentEditable = !isDisabled;
span.style.cursor = isDisabled ? 'default' : 'text';
span.setAttribute('data-tooltip', isDisabled ? '' : `Edit ${i ? 'Height' : 'Width'}`);
});
controlWrapper.setAttribute('data-tooltip', isDisabled ? 'Disabled in Desktop Mode' : '');
updateButtonVisibility();
updateMinMaxButtonVisual();
}
function updateButtonVisibility() {
const bp = getBreakpoint();
document.querySelectorAll('.e-size-icon-button').forEach(btn => btn.style.display = 'none');
if (bp === 'desktop' || bp === 'widescreen') return;
if (bp === 'laptop') {
document.querySelector('.e-size-icon-button.minmax')?.style.setProperty('display', '');
} else {
document.querySelectorAll('.e-size-icon-button').forEach(btn => btn.style.display = '');
}
}
function updateMinMaxButtonVisual() {
const minmaxBtn = document.querySelector('.e-size-icon-button.minmax');
if (!minmaxBtn) return;
const icon = minmaxBtn.querySelector('i');
if (minMaxActive) {
minmaxBtn.classList.add('active');
icon.className = 'elementor-icon eicon-shrink';
icon.style.transition = 'transform 0.23s ease-in-out';
icon.style.transform = 'rotate(180deg)';
minmaxBtn.setAttribute('data-tooltip', 'Toggle Min Width');
} else {
minmaxBtn.classList.remove('active');
icon.className = 'elementor-icon eicon-grow';
icon.style.transition = 'transform 0.23s ease-in-out';
icon.style.transform = 'rotate(0deg)';
minmaxBtn.setAttribute('data-tooltip', 'Toggle Max Width');
}
}
function createSizeField(type) {
const container = document.createElement('div');
container.className = 'e-size-field';
container.innerHTML = `<span>${type.charAt(0).toUpperCase() + type.slice(1)}:</span>
<span id="${type}-number" contenteditable="false"></span>
<span>px</span>`;
const span = container.querySelector(`#${type}-number`);
span.onfocus = () => {
editing[type] = true;
setTimeout(() => {
const sel = window.getSelection();
const range = document.createRange();
range.selectNodeContents(span); sel.removeAllRanges(); sel.addRange(range);
}, 10);
};
span.onblur = () => {
editing[type] = false;
const value = parseInt(span.textContent, 10);
if (!isNaN(value) && value > 0) {
if (type === 'width') setWidthHeight(value, getHeight());
else setWidthHeight(getWidth(), value);
}
setTimeout(updateAllDisplays, 80);
};
span.onkeydown = e => {
if (e.key === 'Enter') { e.preventDefault(); span.blur(); }
if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
e.preventDefault();
let value = parseInt(span.textContent, 10) || (type === 'width' ? getWidth() : getHeight());
if (e.key === 'ArrowUp') value++;
else value = Math.max(1, value - 1);
if (type === 'width') setWidthHeight(value, getHeight());
else setWidthHeight(getWidth(), value);
span.textContent = value;
}
};
let dragStart = null, origWidth = 0, origHeight = 0;
span.addEventListener('mousedown', e => {
if (e.button !== 0 || span.isContentEditable === false) return;
dragStart = type === 'width' ? e.clientX : e.clientY;
origWidth = getWidth();
origHeight = getHeight();
document.body.style.userSelect = 'none';
const moveHandler = ev => {
let delta = (type === 'width' ? ev.clientX : ev.clientY) - dragStart;
let value = (type === 'width' ? origWidth + delta : origHeight + delta);
if (value < 1) value = 1;
if (type === 'width') setWidthHeight(value, getHeight(), false);
else setWidthHeight(getWidth(), value, false);
span.textContent = value;
};
const upHandler = () => {
document.removeEventListener('mousemove', moveHandler);
document.removeEventListener('mouseup', upHandler);
document.body.style.userSelect = '';
setTimeout(updateAllDisplays, 80);
};
document.addEventListener('mousemove', moveHandler);
document.addEventListener('mouseup', upHandler);
});
return container;
}
function createDropdown(aspectBtn) {
let dropdown = document.createElement('div');
dropdown.className = 'e-size-aspect-dropdown eui-1aoepuf';
dropdown.style.display = 'none';
ASPECTS.forEach(opt => {
const nums = opt.label.split(':').map(Number);
const isLandscape = nums[0] > nums[1];
const isMobile = opt.label === "19.5:9" || opt.label === "9:19.5";
const icon = isMobile ? 'eicon-device-mobile' : 'eicon-device-tablet';
const iconStyle = isLandscape ? 'transform:rotate(-90deg);' : '';
const btn = document.createElement('button');
btn.type = 'button';
btn.innerHTML =
`<span class="elementor-icon ${icon}" style="font-size:1.18em; margin-right:0.2em; vertical-align:-2px;${iconStyle}"></span>${opt.label}`;
btn.dataset.value = opt.value;
btn.onclick = (e) => {
e.stopPropagation();
const w = getWidth();
setWidthHeight(w, Math.round(w / Number(btn.dataset.value)));
const aspectIcon = aspectBtn.querySelector('.elementor-icon');
aspectIcon.style.transition = 'transform 0.23s ease-in-out';
aspectIcon.style.transform = 'rotate(0deg)';
dropdown.style.display = 'none';
aspectBtn.classList.remove('active');
setTimeout(updateAllDisplays, 50);
};
dropdown.appendChild(btn);
});
document.body.appendChild(dropdown);
function placeDropdown() {
const rect = aspectBtn.getBoundingClientRect();
dropdown.style.position = 'fixed';
dropdown.style.left = (rect.left) + 'px';
dropdown.style.top = '42px';
dropdown.style.width = '7rem';
dropdown.style.display = 'block';
dropdown.style.zIndex = 9;
}
aspectBtn.onclick = (e) => {
e.stopPropagation();
const aspectIcon = aspectBtn.querySelector('.elementor-icon');
if (dropdown.style.display === 'block') {
dropdown.style.display = 'none';
aspectBtn.classList.remove('active');
aspectIcon.style.transition = 'transform 0.23s ease-in-out';
aspectIcon.style.transform = 'rotate(0deg)';
} else {
placeDropdown();
aspectBtn.classList.add('active');
aspectIcon.style.transition = 'transform 0.23s ease-in-out';
aspectIcon.style.transform = 'rotate(180deg)';
}
};
document.addEventListener('mousedown', (ev) => {
if (!dropdown.contains(ev.target) && ev.target !== aspectBtn && dropdown.style.display === 'block') {
dropdown.style.display = 'none';
aspectBtn.classList.remove('active');
const aspectIcon = aspectBtn.querySelector('.elementor-icon');
aspectIcon.style.transition = 'transform 0.23s ease-in-out';
aspectIcon.style.transform = 'rotate(0deg)';
}
});
return dropdown;
}
function createUI() {
if (document.querySelector('.e-size-control-wrapper')) {
document.querySelector('.e-size-control-wrapper').remove();
}
const wrapper = document.createElement('span');
wrapper.className = 'MuiBox-root eui-0 e-size-control-wrapper';
wrapper.appendChild(createSizeField('width'));
wrapper.appendChild(createSizeField('height'));
// Min/Max toggle
const toggleBtn = document.createElement('span');
toggleBtn.className = 'e-size-icon-button minmax';
toggleBtn.setAttribute('data-tooltip', 'Toggle Max Width');
toggleBtn.innerHTML = '<i class="elementor-icon eicon-grow" style="transform: rotate(0deg);"></i>';
toggleBtn.onclick = () => {
minMaxActive = !minMaxActive;
localStorage.setItem('elementor-minmax-toggle', minMaxActive ? '1' : '0');
const bp = getBreakpoint();
const { min, max } = getBreakpointInfo(bp);
if (minMaxActive) {
setWidthHeight(max, getHeight());
} else {
setWidthHeight(min, getHeight());
}
updateMinMaxButtonVisual();
};
// Swap dimensions
const rotateBtn = document.createElement('span');
rotateBtn.className = 'e-size-icon-button orientation';
rotateBtn.setAttribute('data-tooltip', 'Swap Dimensions');
rotateBtn.innerHTML = '<i class="elementor-icon eicon-redo" style="transform: rotate(90deg) scaleX(1); transition:transform 0.23s ease-in-out;"></i>';
rotateBtn.onclick = () => {
const width = getWidth();
const height = getHeight();
setWidthHeight(height, width);
const icon = rotateBtn.querySelector('i');
const isMirrored = icon.style.transform.includes('scaleX(-1)');
if (!isMirrored) icon.style.transform = 'rotate(-90deg) scaleX(-1)';
else icon.style.transform = 'rotate(90deg) scaleX(1)';
};
// Aspect ratio dropdown
const aspectBtn = document.createElement('span');
aspectBtn.className = 'e-size-icon-button aspect e-size-breakpoint-show';
aspectBtn.setAttribute('data-tooltip', 'Aspect Ratios');
aspectBtn.innerHTML = '<i class="elementor-icon eicon-frame-expand"></i>';
aspectBtn.style.fontSize = '1rem';
wrapper.appendChild(toggleBtn);
wrapper.appendChild(rotateBtn);
wrapper.appendChild(aspectBtn);
// Place after Notes button in Elementor top bar
const stackRoot = document.querySelector('.MuiStack-root.eui-1g5sxhh');
const noteBox = stackRoot?.querySelector('button[aria-label="Notes"]')?.closest('.MuiBox-root');
if (noteBox) noteBox.after(wrapper);
createDropdown(aspectBtn);
}
// --- Observe for breakpoint changes and preview resizing ---
function forceMobileMinWidth() {
const bp = getBreakpoint();
if (bp === 'mobile') {
const { min } = getBreakpointInfo(bp);
// If width isn't already set to our custom min, force it
if (getWidth(true) !== MIN_MOBILE_WIDTH) {
setWidthHeight(MIN_MOBILE_WIDTH, getHeight(true));
}
}
}
function observeBreakpointAndWindowResize() {
let lastBreakpoint = getBreakpoint();
const observer = new MutationObserver(() => {
const bp = getBreakpoint();
if (bp !== lastBreakpoint) {
lastBreakpoint = bp;
const { min, max } = getBreakpointInfo(bp);
if (minMaxActive) {
// Set width to MAX before Elementor can set min width (delay as little as possible)
requestAnimationFrame(() => setWidthHeight(max, getHeight(true)));
} else {
setTimeout(forceMobileMinWidth, 0);
}
setTimeout(updateAllDisplays, 50);
}
});
observer.observe(document.body, { attributes: true, attributeFilter: ['class'] });
const wrapper = getPreviewWrapper();
if (wrapper) {
let prevWidth = wrapper.offsetWidth, prevHeight = wrapper.offsetHeight;
new ResizeObserver(() => {
if (
(!editing.width && wrapper.offsetWidth !== prevWidth) ||
(!editing.height && wrapper.offsetHeight !== prevHeight)
) {
prevWidth = wrapper.offsetWidth;
prevHeight = wrapper.offsetHeight;
setTimeout(updateAllDisplays, 50);
}
}).observe(wrapper);
}
window.addEventListener('resize', () => {
setTimeout(updateAllDisplays, 60);
}, { passive: true });
}
document.addEventListener('DOMContentLoaded', () => {
createUI();
updateAllDisplays();
observeBreakpointAndWindowResize();
// Force min width on page load if mobile
setTimeout(forceMobileMinWidth, 25); // Short delay to allow Elementor to render first
});
})();
</script>
<style>
.e-size-icon-button {
display: flex;
align-items: center;
justify-content: center;
color: white;
width: 32px;
height: 32px;
font-size: 1.125rem;
border-radius: 4px;
background: transparent;
cursor: pointer;
position: relative;
transition: background .16s;
}
.e-size-icon-button.orientation { font-size: 1rem; }
.e-size-icon-button.aspect { font-size: 1rem !important; }
body.elementor-device-widescreen .e-size-icon-button.orientation,
body.elementor-device-desktop .e-size-icon-button.orientation,
body.elementor-device-laptop .e-size-icon-button.orientation,
body.elementor-device-widescreen .e-size-icon-button.aspect,
body.elementor-device-desktop .e-size-icon-button.aspect,
body.elementor-device-laptop .e-size-icon-button.aspect { display: none !important; }
body.elementor-device-widescreen .e-size-icon-button.minmax,
body.elementor-device-desktop .e-size-icon-button.minmax { display: none !important; }
.e-size-icon-button.aspect.active { background: #303236; }
.e-size-icon-button.aspect.active:hover { background: #36383c; }
.e-size-icon-button:hover { background: rgba(255,255,255,0.08);}
.e-size-icon-button .elementor-icon { transition: transform 0.23s ease-in-out; }
.e-size-control-wrapper [data-tooltip]:not([data-tooltip=""])::after {
content: attr(data-tooltip);
position: absolute;
background: #3F434C;
color: #fff;
font-size: 11px;
font-weight: 500;
padding: 4.5px 8px;
border-radius: 4px;
left: 50%;
transform: translateX(-50%);
opacity: 0;
white-space: nowrap;
transition: opacity 0.2s ease;
z-index: 10000;
pointer-events: none;
}
.e-size-control-wrapper [data-tooltip]:not([data-tooltip=""])::before {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
border: 12px solid transparent;
border-bottom-color: #3F434C;
opacity: 0;
transition: opacity 0.2s ease;
z-index: 9999;
pointer-events: none;
}
.e-size-control-wrapper [data-tooltip]:not([data-tooltip=""]):hover::after,
.e-size-control-wrapper [data-tooltip]:not([data-tooltip=""]):hover::before {
opacity: 1;
}
.e-size-icon-button[data-tooltip]::before { top: 29px; }
.e-size-icon-button[data-tooltip]::after { top: 48px; }
.e-size-field span[data-tooltip]::before { top: 20px; }
.e-size-field span[data-tooltip]::after { top: 38px; }
.e-size-control-wrapper[data-tooltip]::before { top: 37px; }
.e-size-control-wrapper[data-tooltip]::after { top: 55px; }
.e-size-icon-button.aspect.active[data-tooltip]::after,
.e-size-icon-button.aspect.active[data-tooltip]::before {
display: none !important;
opacity: 0 !important;
pointer-events: none !important;
}
.MuiBox-root.eui-0.e-size-control-wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
gap: 0.5rem;
position: relative;
}
.e-size-field { display: inline-flex; align-items: center;}
.e-size-field span:not([contenteditable]) { user-select: none;}
.e-size-field span[contenteditable] {
outline: none;
display: flex;
user-select: text;
cursor: text;
text-align: right;
padding: 0 0.125rem;
font-family: inherit;
position: relative;
}
#width-number { justify-content: flex-end; }
/* Aspect dropdown menu styling (matches Elementor panel menus) */
.e-size-aspect-dropdown.eui-1aoepuf {
background-color: rgb(12, 13, 14);
color: rgb(255, 255, 255);
box-shadow: rgba(0,0,0,0.2) 0px 3px 5px -1px, rgba(0,0,0,0.14) 0px 6px 10px 0px, rgba(0,0,0,0.12) 0px 1px 18px 0px;
background-image: linear-gradient(rgba(255,255,255,0.11), rgba(255,255,255,0.11));
position: absolute;
overflow-y: auto;
overflow-x: hidden;
min-height: 16px;
max-width: calc(100% - 32px);
max-height: calc(100% - 96px);
margin-top: 12px;
transition: box-shadow 300ms cubic-bezier(0.4,0,0.2,1);
border-radius: 4px;
outline: 0;
padding: 7px 0 7px 0;
font-size: 14px;
z-index: 9;
width: 7rem;
top: 42px !important;
}
.e-size-aspect-dropdown button {
background: none;
color: #fff;
width: 100%;
border: none;
padding: 10px 20px;
text-align: left;
font: inherit;
font-size: 15px;
cursor: pointer;
border-radius: 0;
margin: 0;
display: flex;
align-items: center;
gap: 0.18em;
transition: background 0.15s;
}
.e-size-aspect-dropdown button:hover {
background: rgba(255,255,255,0.08);
color: #fff;
}
.e-size-aspect-dropdown .eicon-device-tablet,
.e-size-aspect-dropdown .eicon-device-mobile {
font-size: 1.18em;
margin-right: 0.15em;
opacity: 0.87;
transition: transform 0.18s;
min-width: 1.1em;
text-align: center;
display: inline-block;
}
</style>
<?php
});
Elementor Pro Form Checkboxes
selector .elementor-field-option {
display: inline-block;
vertical-align: middle;
gap:10px;
accent-color: #21282F;
font-size: 17px
}
input {
display: inline-block;
vertical-align: middle;
width: 17px;
height: 17px;
}