{"id":26167,"date":"2025-07-10T10:02:27","date_gmt":"2025-07-10T10:02:27","guid":{"rendered":"https:\/\/quotesglory.com\/?page_id=26167"},"modified":"2025-09-15T11:01:00","modified_gmt":"2025-09-15T11:01:00","slug":"write-your-own-quote","status":"publish","type":"page","link":"https:\/\/quotesglory.com\/?page_id=26167","title":{"rendered":"Write Your Own Quote"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"26167\" class=\"elementor elementor-26167\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e610ecf e-flex e-con-boxed e-con e-parent\" data-id=\"e610ecf\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a7ca71e elementor-widget elementor-widget-html\" data-id=\"a7ca71e\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n\/* --- Font & Icons --- *\/\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@1,600&family=Montserrat:wght@400;600&display=swap\" rel=\"stylesheet\">\n\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\"\/>\n\n\/* --- Global Body & Tool Container Styles --- *\/\n\nbody {\n\n    font-family: 'Montserrat', sans-serif;\n\n    background-color: #fdfcfb;\n\n    margin: 0;\n\n    padding: 0;\n\n}\n\n\n.quote-tool-container {\n\n    max-width: 1000px;\n\n    margin: auto;\n\n    padding: 40px 20px;\n\n    text-align: center;\n\n    background-color: #fff;\n\n    border-radius: 8px;\n\n    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);\n\n    box-sizing: border-box;\n\n}\n\n\n.quote-tool-container h1 {\n\n    font-size: 32px;\n\n    margin-bottom: 10px;\n\n    color: #2B3E50;\n\n}\n\n\n.quote-tool-container p {\n\n    font-size: 18px;\n\n    color: #555;\n\n    margin-bottom: 30px;\n\n}\n\n\n\/* --- Input Fields --- *\/\n\n.quote-inputs {\n\n    margin-bottom: 30px;\n\n}\n\n\n.quote-inputs textarea,\n\n.quote-inputs input {\n\n    width: 100%;\n\n    max-width: 700px;\n\n    padding: 12px 15px;\n\n    margin: 10px auto;\n\n    font-size: 16px;\n\n    border: 1px solid #ccc;\n\n    border-radius: 6px;\n\n    font-family: 'Montserrat', sans-serif;\n\n    box-sizing: border-box;\n\n}\n\n\n.quote-inputs textarea {\n\n    height: 100px;\n\n    resize: none;\n\n    overflow: auto;\n\n}\n\n\n\/* --- Design Preview Area (fixed to Minimalist Clean) --- *\/\n\n.quote-card-preview {\n\n    background-color: #fdf6ec; \/* Very light beige *\/\n\n    color: #5a4b3e; \/* Warm brown text *\/\n\n    border: none;\n\n    box-shadow: 0 2px 10px rgba(0,0,0,0.05);\n\n\n    width: 100%;\n\n    max-width: 400px;\n\n    height: 600px;\n\n    margin: 0 auto 25px auto;\n\n    overflow: hidden;\n\n\n    display: flex;\n\n    flex-direction: column;\n\n    justify-content: center;\n\n    align-items: center;\n\n    position: relative;\n\n    border-radius: 8px;\n\n    text-align: center;\n\n    padding: 80px 40px 60px 40px;\n\n}\n\n\n\/* --- Logo Positioning (Top Centre, Big Size) --- *\/\n\n.quotesglory-design-logo {\n\n    position: absolute;\n\n    top: 20px;\n\n    left: 50%;\n\n    transform: translateX(-50%);\n\n    width: 150px;\n\n    height: auto;\n\n    z-index: 10;\n\n    display: block;\n\n}\n\n\n\/* --- Quote Text Styling --- *\/\n\n.quote-text {\n\n    font-family: 'input', sans-serif;\n\n    font-weight: 600;\n\n    line-height: 1.4;\n\n    text-align: center;\n\n    width: 100%;\n\n    padding: 0 5px;\n\n    word-break: break-word;\n\n    color: #4a3b2e;\n\n    flex-shrink: 0;\n\n    margin-top: 20px;\n\n    margin-bottom: 25px;\n\n    z-index: 2;\n\n    box-sizing: border-box;\n\n    min-height: 100px;\n\n    display: flex;\n\n    align-items: center;\n\n    justify-content: center;\n\n}\n\n\n.quote-text::after { \/* Line below quote *\/\n\n    content: ;\n\n    display: block;\n\n    width: 30%;\n\n    height: 1px;\n\n    background-color: #cd9f81;\n\n    margin: 20px auto 0 auto;\n\n    opacity: 0.7;\n\n}\n\n\n\/* --- Author Name Styling --- *\/\n\n.quote-author {\n\n    font-family: 'Inter', sans-serif;\n\n    font-size: 1.1rem;\n\n    font-style: normal;\n\n    text-align: center;\n\n    width: 100%;\n\n    padding: 0 20px;\n\n    margin-top: 15px;\n\n    color: #8b7d6b;\n\n    flex-shrink: 0;\n\n    z-index: 2;\n\n}\n\n\n\/* --- Website URL Styling --- *\/\n\n.branding {\n\n    font-size: 0.8rem;\n\n    color: #a0907c;\n\n    text-align: center;\n\n    width: 100%;\n\n    position: absolute;\n\n    bottom: 25px;\n\n    left: 0;\n\n    padding: 0 10px;\n\n    opacity: 0.8;\n\n    z-index: 2;\n\n}\n\n\n\n\/* --- Quote Mark Pseudo-elements (FIXED HERE!) --- *\/\n\n.quote-card-preview::before,\n\n.quote-card-preview::after {\n\n    font-family: 'Playfair Display', serif;\n\n    font-size: 7em;\n\n    position: center;\n\n    color: #cd9f81;\n\n    line-height: 0.8;\n\n    z-index: 1;\n\n}\n\n.quote-card-preview::before {\n\n    content: '\u201c'; \/* Opening quote mark *\/\n\n    top: 30px;\n\n    left: 20px;\n\n    \/* REMOVED: transform: rotateY(180deg); *\/ \/* This was causing the issue *\/\n\n}\n\n\n\n\n\/* --- Download Button (New Color & Hover Effects) --- *\/\n\n#quotesGloryDownloadBtn {\n\n    background-color: #A46B0D;\n\n    color: white;\n\n    border: none;\n\n    padding: 15px 30px;\n\n    border-radius: 5px;\n\n    cursor: pointer;\n\n    font-size: 1.1rem;\n\n    font-weight: bold;\n\n    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;\n\n}\n\n\n#quotesGloryDownloadBtn:hover {\n\n    background-color: #8D5A0B;\n\n    transform: translateY(-2px);\n\n    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n\n}\n\n\n\/* --- Responsive adjustments --- *\/\n\n@media (max-width: 600px) {\n\n    .quote-tool-container {\n\n        padding: 15px;\n\n        margin: 10px;\n\n    }\n\n\n    .quote-tool-container h1 {\n\n        font-size: 1.4rem;\n\n    }\n\n\n    .quote-inputs textarea,\n\n    .quote-inputs input {\n\n        width: 100%;\n\n        min-height: 60px;\n\n    }\n\n\n    .quote-card-preview {\n\n        max-width: 300px;\n\n        height: 450px;\n\n        padding: 60px 20px 40px 20px;\n\n    }\n\n\n    .quote-text {\n\n        font-size: 1.5rem;\n\n        margin-top: 40px;\n\n        padding: 10px 15px;\n\n    }\n\n\n    .quote-author {\n\n        font-size: 1rem;\n\n        margin-bottom: 10px;\n\n    }\n\n\n    .branding {\n\n        bottom: 10px;\n\n        font-size: 0.75rem;\n\n    }\n\n\n    .quotesglory-design-logo {\n\n        width: 70px;\n\n        top: 15px;\n\n    }\n\n\n    .quote-card-preview::before,\n\n    .quote-card-preview::after {\n\n        font-size: 5em;\n\n        top: 15px;\n\n        left: 10px;\n\n        bottom: 15px;\n\n        right: 10px;\n\n    }\n\n\n    #quotesGloryDownloadBtn {\n\n        padding: 12px 25px;\n\n        font-size: 1rem;\n\n    }\n\n}\n\n<\/style>\n\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@1,600&family=Montserrat:wght@400;600&display=swap\" rel=\"stylesheet\">\n\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\"\/>\n\n\n\n<div class=\"quote-tool-container\">\n\n    <h1>Share Your Words with the World<\/h1>\n\n    <p>Write your own quote and preview it in beautiful designs. Download and share your creation!<\/p>\n\n\n    <div class=\"quote-inputs\">\n\n        <textarea id=\"user-quote\" maxlength=\"200\" placeholder=\"Write your quote (max 200 characters)\"><\/textarea><br>\n\n        <input type=\"text\" id=\"user-name\" maxlength=\"50\" placeholder=\"Your name (as author)\">\n\n    <\/div>\n\n\n    <div class=\"quote-card-preview\">\n\n        <img decoding=\"async\" id=\"quotesGloryLogoImage\" src=\"https:\/\/quotesglory.com\/wp-content\/uploads\/2025\/07\/quotesglorysite-golden-logo.png\" alt=\"QuotesGlory Logo\" class=\"quotesglory-design-logo\" title=\"\">\n\n        <div class=\"quote-text\" id=\"preview-quote-text\">\"Write your quote (max 200 characters)\"<\/div>\n\n        <div class=\"quote-author\" id=\"preview-author-name\">\u2013 Author Name<\/div>\n\n        <div class=\"branding\">www.quotesglory.com\/write-your-own-quote<\/div>\n\n    <\/div>\n\n\n    <button id=\"quotesGloryDownloadBtn\" class=\"quotesglory-download-button\">\n\n        <i class=\"fas fa-download\"><\/i> Download as PNG\n\n    <\/button>\n\n<\/div>\n\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n\n\n<script>\n\ndocument.addEventListener('DOMContentLoaded', () => {\n\n    const quoteInput = document.getElementById('user-quote');\n\n    const nameInput = document.getElementById('user-name');\n\n    const previewQuote = document.getElementById('preview-quote-text');\n\n    const previewName = document.getElementById('preview-author-name');\n\n    const quoteCardPreview = document.querySelector('.quote-card-preview');\n\n    const downloadBtn = document.getElementById('quotesGloryDownloadBtn');\n\n    const logoImage = document.getElementById('quotesGloryLogoImage');\n\n\n    const goldenLogo = 'https:\/\/quotesglory.com\/wp-content\/uploads\/2025\/07\/quotesglorysite-golden-logo.png';\n\n\n    function updatePreview() {\n\n        const quoteText = quoteInput.value.trim();\n\n        const authorName = nameInput.value.trim();\n\n\n        previewQuote.textContent = `\"${quoteText || quoteInput.placeholder}\"`;\n\n        previewName.textContent = `- ${authorName || nameInput.placeholder}`;\n\n\n        adjustFontSize(quoteText);\n\n    }\n\n\n    function adjustFontSize(text) {\n\n        const textLength = text.length;\n\n        const maxChars = quoteInput.maxLength; \/\/ 200\n\n        const minFontSize = 1.2; \/\/ Smallest font size (rem)\n\n        const maxFontSize = 2.2; \/\/ Largest font size (rem) for this design\n\n        const threshold = 50; \/\/ Characters after which scaling starts\n\n        \/\/ Calculate a scaling factor (how much font size reduces per character after the threshold)\n\n        const scaleFactor = (maxFontSize - minFontSize) \/ (maxChars - threshold);\n\n\n        let newSize;\n\n        if (textLength <= threshold) {\n\n            newSize = maxFontSize;\n\n        } else {\n\n            newSize = maxFontSize - (textLength - threshold) * scaleFactor;\n\n            newSize = Math.max(newSize, minFontSize); \/\/ Ensure it doesn't go below min\n\n        }\n\n\n        previewQuote.style.fontSize = `${newSize}rem`;\n\n    }\n\n\n    quoteInput.addEventListener('input', updatePreview);\n\n    nameInput.addEventListener('input', updatePreview);\n\n\n    downloadBtn.addEventListener('click', () => {\n\n        html2canvas(quoteCardPreview, {\n\n            scale: 4,\n\n            useCORS: true,\n\n            logging: false,\n\n            backgroundColor: null\n\n        }).then(canvas => {\n\n            const image = canvas.toDataURL('image\/png');\n\n            const link = document.createElement('a');\n\n            link.href = image;\n\n            link.download = `quotesglory-quote-${Date.now()}.png`;\n\n            document.body.appendChild(link);\n\n            link.click();\n\n            document.body.removeChild(link);\n\n        }).catch(error => {\n\n            console.error('Error generating image:', error);\n\n            alert('Failed to generate image. Please ensure logos are publicly accessible and try again.');\n\n        });\n\n    });\n\n\n    \/\/ Initial setup when the page loads\n\n    quoteInput.value = \"\";\n\n    nameInput.value = \"\";\n\n    updatePreview();\n\n    \n\n    logoImage.src = goldenLogo;\n\n    logoImage.style.display = 'block';\n\n});\n\n<\/script> \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-41ccce4 e-flex e-con-boxed e-con e-parent\" data-id=\"41ccce4\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-20548d2 elementor-widget elementor-widget-html\" data-id=\"20548d2\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- Quote Generator Guide & SEO Content -->\n<section style=\"padding: 40px 20px; background-color: #fffef9; max-width: 1200px; margin: auto; font-family: 'Montserrat', sans-serif;\">\n  \n  <h2 style=\"text-align: center; font-size: 32px; color: #b8860b; margin-bottom: 20px;\">\u270d\ufe0f How to Use the \"Write Your Own Quote\" Tool<\/h2>\n  \n  <p style=\"text-align: center; font-size: 18px; color: #333; max-width: 800px; margin: auto; margin-bottom: 40px;\">\n    Our free quote creator lets you turn your own thoughts into beautifully styled quote cards. Whether it\u2019s a life lesson, a piece of motivation, or something humorous \u2014 you can personalize it and download it in seconds!\n  <\/p>\n\n  <!-- Step-by-Step -->\n  <div style=\"display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; margin-bottom: 50px;\">\n    \n    <div style=\"flex: 0 1 250px; text-align: center;\">\n      <div style=\"font-size: 40px; color: #f4c542;\">\ud83d\udcdd<\/div>\n      <h3 style=\"font-size: 20px; color: #2b3e50;\">Step 1: Write Your Quote<\/h3>\n      <p style=\"font-size: 16px; color: #555;\">Type your original quote (max 200 characters) into the input box.<\/p>\n    <\/div>\n\n    <div style=\"flex: 0 1 250px; text-align: center;\">\n      <div style=\"font-size: 40px; color: #f4c542;\">\ud83d\udc64<\/div>\n      <h3 style=\"font-size: 20px; color: #2b3e50;\">Step 2: Add Your Name<\/h3>\n      <p style=\"font-size: 16px; color: #555;\">Add your name or pen name to appear below the quote.<\/p>\n    <\/div>\n\n    <div style=\"flex: 0 1 250px; text-align: center;\">\n      <div style=\"font-size: 40px; color: #f4c542;\">\ud83c\udfa8<\/div>\n      <h3 style=\"font-size: 20px; color: #2b3e50;\">Step 3: Choose a Design<\/h3>\n      <p style=\"font-size: 16px; color: #555;\">Pick from beautifully crafted quote card templates.<\/p>\n    <\/div>\n\n    <div style=\"flex: 0 1 250px; text-align: center;\">\n      <div style=\"font-size: 40px; color: #f4c542;\">\u2b07\ufe0f<\/div>\n      <h3 style=\"font-size: 20px; color: #2b3e50;\">Step 4: Download in PNG<\/h3>\n      <p style=\"font-size: 16px; color: #555;\">Preview and download your quote as a social-media-ready image.<\/p>\n    <\/div>\n\n  <\/div>\n\n  <!-- SEO Description -->\n  <h2 style=\"text-align: center; font-size: 28px; color: #b8860b; margin-top: 30px;\">\ud83d\udca1 Why Use Quote Generator?<\/h2>\n  <p style=\"text-align: center; font-size: 17px; color: #333; max-width: 900px; margin: 20px auto 40px;\">\n    QuotesGlory's free quote image maker is perfect for writers, influencers, coaches, and creatives who want to express themselves and stand out. Create quote images for Instagram, WhatsApp, Pinterest, blogs, or even print.\n  <\/p>\n\n  <ul style=\"max-width: 900px; margin: auto; font-size: 16px; color: #444; line-height: 1.8;\">\n    <li>\u2705 Completely free and browser-based (no login required)<\/li>\n    <li>\u2705 Generates high-quality PNG quote cards<\/li>\n    <li>\u2705 Designed with clean, minimalist aesthetics<\/li>\n    <li>\u2705 Works on desktop, tablet, and mobile<\/li>\n    <li>\u2705 Comes with your quote, name, and www.QuotesGlory.com branding<\/li>\n  <\/ul>\n\n  <hr style=\"margin: 50px auto; width: 80%; border: 1px dashed #ddd;\">\n\n\n\n<\/section>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0f65ece e-flex e-con-boxed e-con e-parent\" data-id=\"0f65ece\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fcb7663 elementor-widget elementor-widget-spacer\" data-id=\"fcb7663\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Share Your Words with the World Write your own quote and preview it in beautiful designs. Download and share your creation! &#8220;Write your quote (max 200 characters)&#8221; \u2013 Author Name www.quotesglory.com\/write-your-own-quote Download as PNG \u270d\ufe0f How to Use the &#8220;Write Your Own Quote&#8221; Tool Our free quote creator lets you turn your own thoughts into [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-26167","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/quotesglory.com\/index.php?rest_route=\/wp\/v2\/pages\/26167","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/quotesglory.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/quotesglory.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/quotesglory.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/quotesglory.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=26167"}],"version-history":[{"count":97,"href":"https:\/\/quotesglory.com\/index.php?rest_route=\/wp\/v2\/pages\/26167\/revisions"}],"predecessor-version":[{"id":30895,"href":"https:\/\/quotesglory.com\/index.php?rest_route=\/wp\/v2\/pages\/26167\/revisions\/30895"}],"wp:attachment":[{"href":"https:\/\/quotesglory.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=26167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}