CINXE.COM

<!doctype html>   <html lang="en" prefix="og: http://ogp.me/ns#">  <head> <link rel="subresource" href="//cdn.citatis.com/css/main.min.vd417aeb3.css" /> <link rel="preconnect" href="https://cdnjs.cloudflare.com" /> <link rel="preconnect" href="//cdn.citatis.com/img/"> <link rel="preconnect" href="//pagead2.googlesyndication.com"> <link rel="preconnect" href="//www.google-analytics.com"> <link rel="preconnect" href="//googleads.g.doubleclick.net"> <link rel="preconnect" href="//securepubads.g.doubleclick.net"> <link rel="preconnect" href="//tpc.googlesyndication.com"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, user-scalable=yes" /> <meta name="description" content="The best quotes from all over the world on your website! You can select specific themes, authors or even professions of the authors to fit your website context." /> <meta name="keywords" content="widgets_keywords" /> <meta property="og:title" content="Widgets" /> <meta property="og:type" content="website" /> <meta property="og:url" content="https://citatis.com/widgets/" /> <meta property="fb:app_id" content="428075874317092" /> <meta property="og:site_name" content="Citatis.com" /> <meta property="og:description" content="The best quotes from all over the world on your website! You can select specific themes, authors or even professions of the authors to fit your website context." /> <meta name="twitter:site" content="@citatiscom"> <meta name="twitter:creator" content="@citatiscom"> <meta name="twitter:title" content="Widgets"> <meta name="twitter:description" content="The best quotes from all over the world on your website! You can select specific themes, authors or even professions of the authors to fit your website context."> <link rel="apple-touch-icon" sizes="180x180" href="//cdn.citatis.com/img/apple-touch-icon.png" /> <link rel="icon" type="image/png" sizes="32x32" href="//cdn.citatis.com/img/favicon-32x32.png" /> <link rel="icon" type="image/png" sizes="16x16" href="//cdn.citatis.com/img/favicon-16x16.png" /> <link rel="manifest" href="//cdn.citatis.com/img/manifest.json" /> <link rel="mask-icon" href="//cdn.citatis.com/img/safari-pinned-tab.svg" color="#5bbad5" /> <meta name="theme-color" content="#ffffff" /> <link rel="stylesheet" media="screen" href="//cdn.citatis.com/css/main.min.vd417aeb3.css" />   <title>Widgets | Citatis</title>  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-52815707-9"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-52815707-9'); </script> <script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script> <script> var googletag = googletag || {}; googletag.cmd = googletag.cmd || []; googletag.cmd.push(function() { if (screen.width > 1000) { googletag.defineSlot('/150025860/citatis-top', [[728, 90]], 'div-gpt-ad-1539479904694-0').addService(googletag.pubads()); googletag.defineSlot('/150025860/citatis-footer', [[728, 90]], 'div-gpt-ad-1539483707189-0').addService(googletag.pubads()); } else { googletag.defineSlot('/150025860/citatis-top', [[336, 280]], 'div-gpt-ad-1539479904694-0').addService(googletag.pubads()); googletag.defineSlot('/150025860/citatis-footer', [[336, 280]], 'div-gpt-ad-1539483707189-0').addService(googletag.pubads()); } googletag.defineSlot('/150025860/adsense-citatis-right', [[336, 280]], 'div-gpt-ad-1539482008349-0').addService(googletag.pubads()); googletag.pubads().enableSingleRequest(); googletag.enableServices(); }); </script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script> (adsbygoogle = window.adsbygoogle || []).push({ google_ad_client: "ca-pub-2640316034442145", enable_page_level_ads: true }); </script> </head> <body itemscope itemtype="http://schema.org/WebPage"> <header> <button class="nav__menu-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-label="Open site Navigation"></button> <button id="search_open" class="nav__search-open" aria-label="Site Search"></button> <a href="/" class="i-logo"><img src="//cdn.citatis.com/img/citatis_logo.svg" title="Popular Quotes" alt="Popular Quotes"></a> <nav class="panel"> <ul class="nav collapse" id="navbar" aria-expanded="false"> <li class="nav__item "> <a href="/topics/" role="button">TOPICS</a> </li> <li class="nav__item "> <a href="/authors/" role="button">AUTHORS</a> </li> <li class="nav__item "> <a href="/day/" role="button">QUOTE OF THE DAY</a> </li> <li class="nav__item noactive"> <a href="#popup_auth" data-toggle="modal" role="button">FAVORITES</a> </li> <li class="nav__item--login"> <a href="#popup_auth" data-toggle="modal" role="button">LOG IN</a> </li> </ul> <form class="nav__search" id="nav__search" action="/search/" method="GET"> <input type="search" id="search" value="" name="q" required="" placeholder="SEARCH" aria-label="Enter search query"/> <button id="b_search" type="submit" class="i-search" title="search"></button> <i id="close" class="i-close" aria-label="Close Search form"></i> </form> </nav> </header> <div class="wrapper" id="body_wrapper"> <script> var citatis_w = citatis_w || { langId: "English" }; citatis_w.stop = true; </script> <main> <h1 class="hr__switch news__headline">Widgets</h1> <div class="switch"> <ul class="switch-option" role="menu"> <li role="menuitem" class="active">Common Widget</li> </ul> </div> <p class="main__description">The best quotes from all over the world. You can select specific themes, authors or even professions of the authors to fit your website context.</p> <section class="widgets__widget"> <div class="CQ" id="cititis_w_5f77f362f4b17ae6"> <style media="screen" id="CQstyles"> /*Common*/ .CQ div{padding:0!important;background:none!important;border:0!important;text-align:center!important;text-shadow:none!important;text-decoration:none!important;text-indent:0!important;text-transform:none!important;box-shadow:none!important;font-style:normal!important;word-wrap:break-word;user-select:none}div.CQ{margin:0;padding:0;border-style:solid;font-size:100.01%!important;text-align:center;transition:all .25s}a.CQa{display:block;position:relative;padding:24px 32px 61px!important;margin:0!important;border:0!important;background:transparent!important;text-indent:0!important;text-shadow:none!important;text-decoration:none!important;-webkit-filter:none;-ms-filter:none;filter:none!important;cursor:pointer!important}a.CQa::before,a.CQa::after{content:none}.CQ img{vertical-align:top!important;border:0!important;border-radius:0!important;-webkit-filter:none;-ms-filter:none;filter:none!important;-webkit-transform:none;-ms-transform:none;-o-transform:none;transform:none!important}img.CQl{display:block;position:absolute;bottom:16px;left:50%;margin:0 0 0 -24px!important;height:21px!important;width:49px!important}div.CQt{display:inline-block;position:relative;margin:0 0 40px;font:175%/1.2 Georgia,Baskerville,'Times New Roman',Times,serif!important}.CQt::before,.CQt::after{display:block;content:'';position:absolute;padding:0;width:50%;height:24px;bottom:-44px;border-width:1px 0 0 0;border-style:solid;overflow:hidden}.CQt::before{left:0;margin:0;border-radius:0 12px 0 0}.CQt::after{right:0;padding:0;margin:0 0 0 -1px;border-radius:12px 0 0 0}.CQq{margin:0 0 18px;font:125%/1.48 Georgia,Baskerville,'Times New Roman',Times,serif!important;transition:color .25s}div.CQc{margin:0;font:85%/1.2 sans-serif!important;}.CQc::before{display:block;content:'';width:24px;height:1px;padding:0;margin:0 auto 8px;border-style:solid;border-width:1px 0 0} </style> <style media="screen" id="cititis_w_5f77f362f4b17ae6_settings"> /*Custom*/ div.CQ{background-color:#ffffff;width:auto;border-width:1px;border-radius:8px} /* widget background color, width, border on/off, radius on/off */ div.CQ:hover{box-shadow:6px 6px 0 rgba(0,9,27,0.1)} /* widget:hover shadow on/off */ a.CQa:active div.CQq,div.CQt,div.CQc{color:#0394d5} /* texts color */ div.CQ,.CQt::before,.CQt::after,.CQc::before{border-color:#0394d5} /* borders color */ div.CQq{color:#343434} /* quote text color */ /* If Author's image is "on" only */ div.CQi{height:48px;width:48px;margin:0 auto 8px;user-select:none;overflow:hidden;border-radius:50%}img.CQi-clip{margin:0;width:48px;min-height:48px;-o-object-fit:cover;object-fit:cover}.CQi+.CQc::before{content:none}@supports(clip-path:url(#CQi-clip)){div.CQi{position:relative;border-radius:0}img.CQi-clip{clip-path:url(#CQi-clip)}svg.CQi-stroke{position:absolute;left:0;top:0;width:100%!important;min-height:48px!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;-webkit-filter:none;-ms-filter:none;filter:none!important;-webkit-transform:none;-ms-transform:none;-o-transform:none;transform:none!important}}_::-webkit-full-page-media,_:future,:root div.CQi{border-radius:50%}@media all and (-ms-high-contrast:none){div.CQi{border-radius:50%}*::-ms-backdrop,div.CQi{border-radius:50%}}@supports(-ms-ime-align:auto){div.CQi{border-radius:50%}} </style> <a class="CQa" href="" target="citatis"> <div class="CQt">Best Quotes by Famous People</div> <div class="CQq"> </div> <div class="CQi"> <img class="CQi-clip" src="" alt=""> <svg class="CQi-stroke"><defs> <clipPath id="CQi-clip"> <path d="M24,0C17.9,0,12.4,2.3,8.2,5.9C4.7,5.4,1.5,3.7,0,0c0,5.8,0,9.5,2.7,12.9C1,16.3,0,20,0,24 c0,13.3,10.7,24,24,24s24-10.7,24-24S37.3,0,24,0L24,0z"></path> </clipPath> </defs> <path fill-opacity="0" stroke="rgba(0,0,0,.125)" stroke-width="1" d="M24,0C17.9,0,12.4,2.3,8.2,5.9C4.7,5.4,1.5,3.7,0,0c0,5.8,0,9.5,2.7,12.9C1,16.3,0,20,0,24 c0,13.3,10.7,24,24,24s24-10.7,24-24S37.3,0,24,0L24,0z"></path> </svg> </div> <div class="CQc"></div> <img class="CQl" src="//cdn.citatis.com/img/clw.svg" alt="Citatis.com"></a> <script> var citatis_w = citatis_w || { langId: "English" }; citatis_w.cmd = citatis_w.cmd || []; citatis_w.host = "https://citatis.com"; citatis_w.cmd.push(function() { citatis_w.init("cititis_w_5f77f362f4b17ae6"); }); var s, t; s = document.createElement('script'); s.type = 'text/javascript'; s.src = "//cdn.citatis.com/js/qwidget.min.vbff8db03.js"; t = document.getElementsByTagName('script')[0]; t.parentNode.insertBefore(s, t); </script> </div> </section> </main> <main class="widgets"> <form class="widgets-settings"> <div class="widgets-settings__column" data-title="title"> <fieldset> <label for="w_title">Widget title:</label> <br><input id="w_title" opt="w_title" optshort="o1" type="text" value="Best Quotes by Famous People" placeholder="widget_set_title" tabindex="1"> <br><span class="widgets-settings__description">Delete text to hide title</span> </fieldset> <fieldset class="input-suggestion"> <label for="w_tags">Quotes themes:</label> <br> <input id="w_tags" opt="w_tags" search type="text" value="" placeholder="Select quotes themes" tabindex="2"> <input id="w_tags_hidden" opt="w_tags_hidden" optshort="o2h" type="hidden"> <ul class="input-suggestion__menu src_suggestion" role="menu" style="display: none;" data-type="tags" data-needlink="false"> </fieldset> <fieldset class="input-suggestion"> <label for="w_authors">Quotes authors:</label> <br><input id="w_authors" opt="w_authors" search type="text" value="" placeholder="Select quotes authors" tabindex="3"> <input id="w_authors_hidden" opt="w_authors_hidden" optshort="o3h" type="hidden"> <ul class="input-suggestion__menu src_suggestion" role="menu" style="display: none;" data-type="authors" data-needlink="false"></ul> </fieldset> <fieldset class="input-suggestion"> <label for="w_professions">Professions:</label> <br><input id="w_professions" opt="w_professions" search type="text" value="" placeholder="Select professions of the authors" tabindex="3"> <input id="w_professions_hidden" opt="w_professions_hidden" optshort="o4h" type="hidden" value=""> <ul class="input-suggestion__menu src_suggestion" role="menu" style="display: none;" data-type="professions" data-needlink="false"></ul> </fieldset>  </div> <div class="widgets-settings__column" data-title="properties"> <fieldset> <input type="checkbox" id="w_border_round" opt="w_border_round" optshort="o5" checked=""><label for="w_border_round" tabindex="8">Edge rounding</label> </fieldset> <fieldset> <input type="checkbox" id="w_border" opt="w_border" optshort="o6" checked=""><label for="w_border" tabindex="9">widget border</label> </fieldset> <fieldset> <input type="checkbox" id="w_shadow" opt="w_shadow" optshort="o7" checked=""><label for="w_shadow" tabindex="10">widget shadow</label> </fieldset> <fieldset> <input type="checkbox" id="w_author_image" opt="w_author_image" optshort="o8" checked=""><label for="w_author_image" tabindex="11">author's portrait</label> </fieldset> <fieldset> <input type="checkbox" id="w_fixed_width" opt="w_fixed_width" optshort="o9"><label for="w_fixed_width" tabindex="12">Fixed width</label> <div class="widgets-settings__option" id="w_fixed_width_div"> <input type="number" id="w_fixed_width_input" opt="w_fixed_width_input" optshort="o10" value="300" size="3" maxlength="3" min="240" max="999" pattern="[0-9]{2}"><label for="w_fixed_width_input"> pixels.</label> </div> </fieldset> <fieldset> <span class="widgets-settings__color"><input type="color" id="w_color" opt="w_color" optshort="o11" value="#0394d5"></span><label for="w_color" tabindex="5">widget color</label> </fieldset> <fieldset> <span class="widgets-settings__color"><input type="color" id="w_bg_color" opt="w_bg_color" optshort="o12" value="#ffffff"></span><label for="w_bg_color" tabindex="6">Widget background color</label> </fieldset> <fieldset> <span class="widgets-settings__color"><input type="color" id="w_text_color" opt="w_text_color" optshort="o13"value="#343434"></span><label for="w_text_color" tabindex="7">Widget text color</label> </fieldset>  </div> <div class="widgets-settings__row" data-title="reset"> <input type="button" class="cancel-small" id="default" value="Reset to defaults"> </div> </form> </main> <aside class="widgets"> <div class="widgets__code" id="widgets_code-1"> Copy and paste this code into your site: <textarea id="code" rows="5" readonly="readonly" tabindex="13"></textarea> <input type="button" class="button-small" id="copy_code" value="Copy widget code" tabindex="14"> </div> </aside>  </div> <footer> <div class="banner--main"> <div id='div-gpt-ad-1539483707189-0'> <script> var slotName = "div-gpt-ad-1539483707189-0"; if (screen.width <= 1000) { document.getElementById(slotName).classList.add("banner--mobile"); } googletag.cmd.push(function() { googletag.display(slotName); }); </script> </div></div> <div class="footer"> <p class="footer__copyright">© Citatis, 2017-2025. <wbr />Created by <a href="https://final-level.com/" target="_blank">Final Level</a>.</p> <ul class="footer__navbar" role="menubar"> <li role="menuitem"><a href="/terms/" class="active">Terms</a></li> <li role="menuitem"><a href="/privacy/">Privacy</a></li> <li role="menuitem" class="footer__navbar__add"><a href="#popup_auth" data-toggle="modal" role="button">Add Quote</a></li> <li role="menuitem"><a href="/widgets/">Widgets</a></li> </ul> <p class="footer__social"> Follow us on: <br /> <a href="https://www.facebook.com/citatiscom/" class="i-fb" title="Facebook" target="_blank"></a> <a href="https://twitter.com/citatiscom/" class="i-tw" title="Twitter" target="_blank"></a> <a href="https://www.instagram.com/citatis_com/" class="i-inst" title="Instagram" target="_blank"></a> </p> </div> </footer> <div class="modal _login fade" id="popup_auth" tabindex="-1" aria-labelledby="myModalLabel_0" aria-hidden="true" role="dialog"> <div class="modal__dialog"> <div class="modal__content"> <button class="i-close" data-dismiss="modal" aria-label="Close" aria-hidden="true"></button> <h3 class="modal__heading" id="myModalLabel_0">Log in, please</h3> <p> Authorization is only required to store your personal settings and favorites. </p> <div class="login__agreement" id="login_agree"> <input type="checkbox" id="user-agree"> <label for="user-agree">I have read and agree with the</label> <a href="/terms/" target="policy">Terms</a> &  <a href="/privacy/" target="policy">Privacy</a> </div> <p> Log in with: </p> <div class="login__social-buttons"> <a href="/social/redirect/1/" class="i-fb disabled" title="Facebook"></a> <a href="/social/redirect/3/" class="i-google disabled" title="Google"></a> <a href="/social/redirect/2/" class="i-tw disabled" title="Twitter"></a> </div> </div> </div> </div> <div class="modal fade" id="popup_embed" tabindex="-1" aria-labelledby="popup_embed_0" aria-hidden="true" role="dialog" style="display: none;"> <div class="modal__dialog"> <div class="modal__content"> <button class="i-close" data-dismiss="modal" aria-label="Close" aria-hidden="true"></button> <h3 class="modal__heading" id="popup_embed_0">Code for embedding the Quote anywhere</h3> <form> <p> <label for="quote_code"> Use this code for embedding the Quote anywhere </label> </p> <p> <textarea id="quote_code" rows="7" readonly="readonly" onclick="this.focus();this.select();"></textarea> </p> <button id="copy_embed" type="button" class="button">Copy the Code</button> </form> </div> </div> </div> <div class="panel alert--cookies collapse in" id="alert_cookies" role="alertdialog"> <span> This site uses <a href="/privacy/">cookies</a>. By continuing to use this website, you agree to our policies regarding the use of cookies. </span> <span class="action"> <input type="button" id="agree_cookies" data-toggle="collapse" data-target="#alert_cookies" aria-expanded="true" value="I agree"> </span> </div> <script src="//cdn.citatis.com/js/jquery.js"></script><script src="//cdn.citatis.com/js/history.min.vd53c7a13.js"></script><script src="//cdn.citatis.com/js/citatis.min.v81864d4f.js"></script><script src="//cdn.citatis.com/js/bootstrap.min.v6ac5a32f.js"></script><script src="//cdn.citatis.com/js/widget.min.veb6c159a.js"></script><script src="//cdn.citatis.com/js/qwidget.min.vbff8db03.js"></script> </body> </html>