Category: cms

<!-- Headings -->
<h1>Editable Heading</h1>
<h2>Editable Subheading</h2>

<!-- Paragraphs -->
<p>This text will be editable.</p>

<!-- Spans -->
<span>Editable inline text</span>

<!-- List items -->
<ul>
    <li>Editable list item</li>
    <li>Another editable item</li>
</ul>

<!-- Buttons -->
<button>Editable Button Text</button>

<!-- Divs with text only -->
<div>This div text is editable</div>

<!-- Links -->
<a href="#">Editable Link Text</a>

What happens in EDIT mode:

Text becomes directly editable
Shows dashed outline on hover
Focus shows solid outline
Changes auto-save after 2.5 seconds

2. Editable Background Images

Use `data-editable-bg="true"` attribute:

html

<!-- Section with editable background -->
<section class="hero" data-editable-bg="true" style="background-image: url(initial.jpg)">
    <h1>Hero Content</h1>
</section>

<!-- Div with editable background -->
<div class="content__bg" data-editable-bg="true" style="background-image: url(bg.jpg)">
    <p>Content here</p>
</div>

<!-- Grid item with background -->
<div class="grid__item-img" data-editable-bg="true" style="background-image: url(image.jpg)">
</div>

In BG mode:

Click element → Opens Media Panel
Select image → Updates background
Drag from desktop → Updates background
Use color/gradient pickers

CSS Classes that auto-work in BG mode (no attribute needed):

.content__bg
.grid__item-img
.cover
.thumb

3. Editable SVG Images (with clip-path)

Use `data-editable-image="true"` on `<image>` tag:

html

<svg class="image-clip" width="500px" height="750px" viewBox="0 0 500 750">
    <defs>
        <clipPath id="shape1">
            <path d="M 0 0 L 500 0 C 331 608 485 551 500 750 L 0 750 Z"></path>
        </clipPath>
    </defs>
    <image data-editable-image="true" 
           clip-path="url(#shape1)" 
           xlink:href="https://picsum.photos/1200/800?random=1" 
           x="0" y="0" 
           width="500" height="750">
    </image>
</svg>

In EDIT mode:

Click SVG → Opens Media Panel
Select image → Updates xlink:href
Drag from desktop → Updates SVG
Grabber appears on hover for moving

4. Regular Images (no SVG)

Standard `<img>` tags:

html

<img src="image.jpg" alt="Description">

In EDIT mode:

Click → Opens file upload
Drag from desktop → Replaces image
Grabber for moving

5. Video Elements

Auto-embed from YouTube/Vimeo URLs:

html

<!-- Videos added via CMS will appear as: -->
<div class="cms-video-res" 
     data-video-url="https://youtu.be/xxx" 
     data-video-id="xxx" 
     data-video-platform="youtube">
    <iframe src="https://www.youtube.com/embed/xxx" 
            allowfullscreen></iframe>
</div>

Video Features:

16:9 aspect ratio maintained
Alignment: Left, Center, Right
Edit URL via click
Gallery stores all videos

6. Spacer Elements

Add spacing between elements:

html

<hr class="cms-spacer">

In EDIT mode:

Hover shows dashed outline
Can be moved/deleted
Adds 1rem spacing

7. Right-Click Menu Items

Elements that can be added via right-click:

Option	Creates
Heading	`<h2>New Text</h2>`
Paragraph	`<p>New Text</p>`
List	`<ul><li>New Item</li></ul>`
Image	Opens Media Panel
Video	Opens URL prompt
Button	`<button>Button</button>`
Space	`<hr class="cms-spacer">`

8. Complete Template Example

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My Template</title>
    <style>
        /* Your styles here */
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .content__bg {
            padding: 100px 20px;
        }
        .grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }
        .grid__item-img {
            aspect-ratio: 1;
            background-size: cover;
            background-position: center;
            border-radius: 20px;
        }
    </style>
</head>
<body>
    <!-- Editable Hero Section -->
    <section class="hero" data-editable-bg="true" 
             style="background-image: url(https://picsum.photos/1920/1080?random=1)">
        <div>
            <h1>Welcome to My Site</h1>
            <p>This text is fully editable</p>
            <button>Get Started</button>
        </div>
    </section>

    <!-- Content Section with Background -->
    <section class="content__bg" data-editable-bg="true"
             style="background-image: url(https://picsum.photos/1920/1080?random=2)">
        <h2>About Us</h2>
        <p>Edit this text to describe your business.</p>
    </section>

    <!-- Image Grid -->
    <div class="grid">
        <div class="grid__item-img" data-editable-bg="true"
             style="background-image: url(https://picsum.photos/800/800?random=3)">
        </div>
        <div class="grid__item-img" data-editable-bg="true"
             style="background-image: url(https://picsum.photos/800/800?random=4)">
        </div>
    </div>

    <!-- SVG with Clip-path -->
    <svg class="image-clip" width="500px" height="500px" viewBox="0 0 500 500">
        <defs>
            <clipPath id="circle">
                <circle cx="250" cy="250" r="250"></circle>
            </clipPath>
        </defs>
        <image data-editable-image="true" 
               clip-path="url(#circle)" 
               xlink:href="https://picsum.photos/500/500?random=5" 
               x="0" y="0" width="500" height="500">
        </image>
    </svg>

    <!-- Regular Image -->
    <img src="https://picsum.photos/800/600?random=6" alt="Editable image">

    <!-- Footer -->
    <footer>
        <p>© 2024 My Site. All rights reserved.</p>
    </footer>
</body>
</html>

9. CMS Toolbar Modes

Mode	Function
EDIT	Edit text, click images/SVG to change
CLONE	Click element to duplicate
MOVE	Drag elements to reorder
BG	Click backgrounds to change (opens Media Panel)
DEL	Click element to delete
MEDIA	Open media manager
VIDEO	Open video gallery
UNDO	Undo last action
EXIT	Exit edit mode

10. Quick Reference Table

Feature	Attribute/Class	Click Action	Drop Action
Text	(automatic)	Edit inline	–
BG Image	`data-editable-bg="true"`	Open Media Panel	Replace BG
BG Image	`.content__bg`, `.grid__item-img`	Open Media Panel	Replace BG
SVG Image	`data-editable-image="true"`	Open Media Panel	Replace SVG
Regular Image	`<img>`	File upload	Replace image
Video	`.cms-video-res`	Edit URL	–

11. Tips

Always add data-editable-bg="true" to elements that should have changeable backgrounds
Use semantic HTML – headings, paragraphs, lists auto-become editable
SVG images need data-editable-image="true" on the <image> tag
BG mode only affects elements with the attribute or specific classes
Videos maintain 16:9 ratio – ensure container has space
Right-click anywhere for quick element insertion

blog cms

lol 1st bill for AI

Post author By rawi
Post date April 13, 2026

blog cms officialstupid

Sumnima CMS Templating Guide

Post author By rawi
Post date April 12, 2026

This is your Sumnima CMS Templating Guide. Use these tags and classes in your index.html to make the editor work perfectly.

1. Drag & Drop (Moving Blocks)

To make a block moveable, use these standard tags. The editor looks for them automatically:

Big Blocks: <section>, <article>, <header>, <footer>
Small Blocks: Use class card or cell.
- Example: <div class="card">...</div> or <div class="cell">...</div>
Tip: Keep elements you want to swap as “siblings” (inside the same parent div).

2. Text Editing

The editor automatically makes these tags editable if they contain text:

<h1>, <h2>, <h3>, <h4>
<p>, <span>, <a>
<button>
<li> (Supports Enter for new bullet points)
Note: Don’t put a div inside a p tag, or the editor might get confused.

3. Images (Click to Swap)

Standard: All <img> tags are automatically clickable to upload a new photo.
Theory Template: SVG <image> tags are also supported.

4. Background Photos (BG Mode)

To change the background image of a section or div, add this attribute:

data-editable-bg="true"
Example:
<section style="background-image: url('img.jpg')" data-editable-bg="true">
How to edit: Switch to BG mode in the top bar, then click the section.

5. Footers & Menus (Columns)

To make footer columns or menu items reorderable, use the .cell class:

Example:

 <footer style="display:flex">
       <div class="cell">Column 1 Content</div>
       <div class="cell">Column 2 Content</div>
</footer>

🚀 The “Perfect Block” Example

Copy this structure for a clean, fully editable section:

<section data-editable-bg="true" style="background-image: url('bg.jpg')">
    <div class="container">
        <h1>Editable Title</h1>
        <p>This is a paragraph you can edit or right-click to add a list.</p>

        <div style="display:flex">
            <div class="card">
                <img src="thumb1.jpg">
                <h3>Feature 1</h3>
            </div>
            <div class="card">
                <img src="thumb2.jpg">
                <h3>Feature 2</h3>
            </div>
        </div>
    </div>
</section>

Cheat Sheet Summary:

Move: Use <section>, .card, or .cell.
Edit: Use <h1>, <p>, <li>.
BG: Use data-editable-bg="true".
Add: Right-click any existing text/image to insert a new element below it.

blog haiku wordpress

WordPress

Post author By rawi
Post date November 1, 2025

“Code is Poetry”;
Deepseak —
flows like water.

#haiku #wordpress #deepseak #AI

blog Design Dharan.city wordpress

dharan.city – Day 3

Post author By rawi
Post date October 12, 2025

set a new target for my free time!

bigcommerce blog Child theme cms wordpress wordpress

wordpress remove customize section – child theme

Post author By rawi
Post date May 25, 2020

stupid like me want such change 😛

#bookmark #remove #customize #section #wordpress

function remove_customize_register() { global $wp_customize; $wp_customize->remove_section( 'colors' ); //Modify this line as needed } add_action( 'customize_register', 'remove_customize_register', 11 );

Tags bigcommerce, child theme, childtheme, wordpress

blog ecommerce Storefront WooCommerce wordpress

WooCommerce Storefront Child Theme: Remove Sidebar @ Single Product Page

Post author By rawi
Post date January 19, 2018

Hide the sidebar on product pages of Woocommerce Storefront child theme. The following snippet disables the sidebar with no additional CSS required, whilst still making the product page content area 100% wide.

/** * Disable sidebar on product pages in Storefront. * * @param bool $is_active_sidebar * @param int|string $index * * @return bool */ function product_remove_sidebar( $is_active_sidebar, $index ) { if( $index !== "sidebar-1" ) { return $is_active_sidebar; } if( ! is_product() ) { return $is_active_sidebar; } return false; } add_filter( 'is_active_sidebar', product_remove_sidebar', 10, 2 );

code to the functions.php file in your Storefront child theme.

Tags child theme, Storefront, theme, woocommerce

blog cms multisite Nginx wordpress

wordpress multisite too many server redirects nginx conf

Post author By rawi
Post date November 23, 2016

too many server redirects.

#wordpress #multisite #wordpressmultisite .conf #nginx #bookmark

server {
server_name example.com *.example.com ;
 
access_log /var/log/nginx/example.com.access.log;
error_log /var/log/nginx/example.com.error.log;
 
root /var/www/example.com/htdocs;
index index.php;
 
if (!-e $request_filename) {
rewrite /wp-admin$ $scheme://$host$uri/ permanent;
rewrite ^(/[^/]+)?(/wp-.*) $2 last;
rewrite ^(/[^/]+)?(/.*\.php) $2 last;
}
 
location / {
try_files $uri $uri/ /index.php?$args ;
}
 
location ~ \.php$ {
try_files $uri /index.php;
include fastcgi_params;
fastcgi_pass unix:/var/run/php5-fpm.sock;
}
 
location ~* ^.+\.(ogg|ogv|svg|svgz|eot|otf|woff|mp4|ttf|rss|atom|jpg|jpeg|gif|png|ico|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf)$ {
access_log off; log_not_found off; expires max;
}
 
location = /robots.txt { access_log off; log_not_found off; }
location ~ /\. { deny all; access_log off; log_not_found off; }
}

Tags mutisite, Nginx, redirection, wordpress

blog ecommerce WooCommerce wordpress

woocommerce redirect to a custom page after logging out

Post author By rawi
Post date November 7, 2015

// redirects for login / logout
add_filter(‘woocommerce_login_redirect’, ‘login_redirect’);

function login_redirect($redirect_to) {

return home_url();
}

add_action(‘wp_logout’,’logout_redirect’);

function logout_redirect(){

wp_redirect( home_url() );

exit();
}

Tags logout, woocommerce, wordpress

Overview

1. Editable Text Elements

Any text-containing element becomes automatically editable in EDIT mode:

2. Editable Background Images

Use data-editable-bg="true" attribute:

3. Editable SVG Images (with clip-path)

Use data-editable-image="true" on <image> tag:

4. Regular Images (no SVG)

Standard <img> tags:

5. Video Elements

Auto-embed from YouTube/Vimeo URLs:

6. Spacer Elements

Add spacing between elements:

7. Right-Click Menu Items

Elements that can be added via right-click:

8. Complete Template Example

9. CMS Toolbar Modes

10. Quick Reference Table

11. Tips

1. Drag & Drop (Moving Blocks)

2. Text Editing

3. Images (Click to Swap)

4. Background Photos (BG Mode)

5. Footers & Menus (Columns)

🚀 The “Perfect Block” Example

Use `data-editable-bg="true"` attribute:

Use `data-editable-image="true"` on `<image>` tag:

Standard `<img>` tags: