/* * These styles apply ONLY to the header and footer assets. */ *, ::after, ::before { box-sizing: inherit; } ul, li { margin: 0; padding: 0; } ul { font-size: 16px; font-weight: 500; letter-spacing: .32px; line-height: 32px; margin-bottom: 20px; } .css-28ptsh-container-container-container-fullGutter-container-fullGutter-container-fullGutter { background-color: red; } .footer-duda a { text-decoration: none; } .footer-duda .container, .footer-duda .row { margin: auto; max-width: 1200px; } .footer-duda .row::after { clear: both; } .footer-duda .row::after, .footer-duda .row::before { display: table; content: ' '; -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-order: 1; order: 1; } .small-12 { width: 100%; } .column, .column:last-child:not(:first-child), .columns, .columns:last-child:not(:first-child) { float: left; clear: none; } .column, .columns { padding-right: .625rem; padding-left: .625rem; } @media print, screen and (min-width: 64em) { .large-6 { width: 50%; } .large-12 { width: 100%; } } @media print, screen and (min-width: 40em) { .column, .columns { padding-right: .9375rem; padding-left: .9375rem; } .medium-12 { width: 100%; } } @media screen and (max-width: 0em), screen and (min-width: 40em) { .show-for-small-only { display: none; } } .footer-duda { float: right; width: 100%; background-color: #2f373a; color: #fff; padding: 0 0 40px; position: relative; z-index: 2; overflow: hidden; } /** for testing footer active. .footer-duda ul.lists li ul.active { border: dotted 1px #c7c7c7; } **/ @media (max-width: 768px) { .footer-duda { padding-bottom: 100px; } } .footer-duda .top-bg { float: right; width: 100%; background-image: url(https://du-cdn.multiscreensite.com/duda_website/images/footer/footer_background_top_part.png?v=3), linear-gradient(64.87deg, #fff 0, #fff 100%); background-position: right -150px bottom, center; background-repeat: no-repeat; height: 258px; } ul.no-bullet { list-style: none; margin-left: 0; } @media (max-width: 64em) { .footer-duda { margin-top: 0; } .footer-duda .top-bg { background-position: right -20px bottom, bottom; height: 60px; background-size: contain; } } .footer-duda .d { text-align: center; margin: 128px 0; float: right; width: 100%; } @media (max-width: 64em) { .footer-duda .d { margin: 100px 0 32px; } } .footer-duda .d .title { color: #fff; font-size: 40px; font-weight: 800; letter-spacing: 0; margin: 0 0 20px; } .footer-duda .lists { display: block; margin: 0 -25px; } .footer-duda .lists > li { float: left; list-style: none; padding: 0 25px; min-height: 300px; } @media (min-width: 64em) { .footer-duda .lists > li { min-height: 0; width: 25%; } } @media (max-width: 735px) { .footer-duda .lists > li { min-height: 350px; } } @media (max-width: 64em) { .footer-duda .d .title { font-size: 24px; } .footer-duda .lists > li { display: block; width: 100%; min-height: auto; } } .footer-duda .lists > li ul { color: #FFFFFF; margin-bottom: 40px; min-height: 186px; } .footer-duda .lists > li ul.active { padding-bottom: 20px; } @media (max-width: 64em) { .footer-duda .lists > li ul { border-bottom: 1px solid rgba(255, 255, 255, 0.5); margin: 0; min-height: auto; } .footer-duda .lists > li ul.active > li:not(.top) { display: block; } .footer-duda .lists > li ul.active > li.top svg { transform: rotateX(180deg); } .footer-duda .lists > li ul > li a { font-size: 14px !important; } .footer-duda .lists > li ul > li.top { cursor: pointer; } } .footer-duda .lists > li ul > li.top svg { display: none; float: right; transition: transform ease 0.3s; width: 14px; height: 46px; } @media (max-width: 40em) { .footer-duda .lists > li ul > li.top svg { width: 16px; } } .footer-duda .lists > li ul > li strong { letter-spacing: 1.5px; line-height: 46px; font-weight: 600; } .footer-duda .lists > li ul > li a { color: #FFFFFF; font-size: 16px; font-weight: 300; line-height: 35px; text-decoration: none; } .footer-duda .lists > li ul > li a .hiring { background: #f66135; font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 600; margin-left: 2px; } .footer-duda .lists > li ul > li a:hover { color: #c7c7c7; } .footer-duda hr { border: 1px solid #fff !important; display: inline-block; margin: 35px 0 22px !important; width: 100%; } .footer-duda .copyrights { float: left; font-size: 16px; font-weight: 400; letter-spacing: 0; } @media (max-width: 64em) { .footer-duda .lists > li ul > li.top svg { display: block; } .footer-duda .lists > li ul > li:not(.top) { display:none; } .footer-duda .copyrights { width: 100%; text-align: center; padding: 30px 0; } } .footer-duda .copyrights a { color: #fff; margin: 0 10px; } .footer-duda .copyrights .up-year { display: inline-block; margin-right: 28px; } @media (max-width: 64em) { .footer-duda .copyrights .up-year { margin-right: 15px; } } @media (max-width: 40em) { .footer-duda .copyrights { font-size: 12px; } .footer-duda .copyrights .up-year { margin-right: 10px; } } @media (max-width: 350px) { .footer-duda .copyrights .up-year { width: 100%; margin-right: 0; } } .footer-duda .social-icons { display: -ms-flexbox; display: flex; float: right; width: auto; -ms-flex-pack: center; justify-content: center; } @media (max-width: 64em) { .footer-duda .social-icons { width: 100%; } } .footer-duda .social-icons .icon { float: right; width: 38px; height: 38px; line-height: 38px; border-radius: 100%; text-align: center; font-size: 15px; color: #fff; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; margin: 0 0 0 15px; transition: all 0.3s ease; } @media (max-width: 40em) { .footer-duda .social-icons .icon { margin: 40px 6px 0; } } .footer-duda .social-icons .icon:hover { opacity: 0.8; } .footer-duda .show-for-sr, .footer-duda .show-on-focus { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important; } @media screen and (max-width: 0em), screen and (min-width: 40em) { .footer-duda .show-for-small-only { display: none!important; } } .footer-duda .column, .footer-duda .column:last-child:not(:first-child), .footer-duda .columns, .footer-duda .columns:last-child:not(:first-child) { clear: none; float: left; } @media (max-width: 768px) { .footer-duda .column, .footer-duda .column:last-child:not(:first-child), .footer-duda .columns, .footer-duda .columns:last-child:not(:first-child) { clear: both; float: initial; } } @media print, screen and (min-width: 40em) { .footer-duda .column, .footer-duda .columns { padding-right: .9375rem; padding-left: .9375rem; } } /* .footer-duda .show-for-large, .footer-duda .show-for-large-up, .footer-duda .show-for-medium, .footer-duda .show-for-medium-up, .footer-duda .show-for-xlarge { display: initial !important; } */ @media print, screen and (min-width: 64em) { .footer-duda .hide-for-large { display: none !important; } } @media screen and (max-width: 63.99875em) { .footer-duda .show-for-large { display: none!important; } } @media screen and (max-width: 39.99875em) { .footer-duda .show-for-medium { display: none!important; } } .footer-duda .column:last-child:not(:first-child), .footer-duda .columns:last-child:not(:first-child) { float: right; } @media screen and (max-width: 768px) { .footer-duda .column:last-child:not(:first-child), .footer-duda .columns:last-child:not(:first-child) { width: 100%; } } /*# sourceMappingURL=styles.css.map */ .css-iaal00-dateTime-compactRoot {color: #FAF5EB !important;} <script type="text/javascript" src="https://www.duda.co/common/min/scripts.js"> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-MNXB');

Super Fast CSS Class and ID addition

Aj_Pfeil

Aj_Pfeil Member Posts: 227 MVP

March 10 in Discussions

Hey all,

Wanted to let you all know that I added a new Idea 💡 to the Idea board.

https://ideas.duda.co/forums/930658-duda-idea-board/suggestions/44891464-add-custom-css-class-and-ids-from-content-tab

Please allow us a method to add Custom Classes and IDs without having to edit HTML or head into Developer Mode.

If you think 💬🤔 this idea is awesome 😎 be sure to up-vote it on the idea board please.

Tagged:

1

Categories

/* * These styles apply ONLY to the header and footer assets. */ *, ::after, ::before { box-sizing: inherit; } ul, li { margin: 0; padding: 0; } ul { font-size: 16px; font-weight: 500; letter-spacing: .32px; line-height: 32px; margin-bottom: 20px; } .css-28ptsh-container-container-container-fullGutter-container-fullGutter-container-fullGutter { background-color: red; } .footer-duda a { text-decoration: none; } .footer-duda .container, .footer-duda .row { margin: auto; max-width: 1200px; } .footer-duda .row::after { clear: both; } .footer-duda .row::after, .footer-duda .row::before { display: table; content: ' '; -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-order: 1; order: 1; } .small-12 { width: 100%; } .column, .column:last-child:not(:first-child), .columns, .columns:last-child:not(:first-child) { float: left; clear: none; } .column, .columns { padding-right: .625rem; padding-left: .625rem; } @media print, screen and (min-width: 64em) { .large-6 { width: 50%; } .large-12 { width: 100%; } } @media print, screen and (min-width: 40em) { .column, .columns { padding-right: .9375rem; padding-left: .9375rem; } .medium-12 { width: 100%; } } @media screen and (max-width: 0em), screen and (min-width: 40em) { .show-for-small-only { display: none; } } .footer-duda { float: right; width: 100%; background-color: #2f373a; color: #fff; padding: 0 0 40px; position: relative; z-index: 2; overflow: hidden; } /** for testing footer active. .footer-duda ul.lists li ul.active { border: dotted 1px #c7c7c7; } **/ @media (max-width: 768px) { .footer-duda { padding-bottom: 100px; } } .footer-duda .top-bg { float: right; width: 100%; background-image: url(https://du-cdn.multiscreensite.com/duda_website/images/footer/footer_background_top_part.png?v=3), linear-gradient(64.87deg, #fff 0, #fff 100%); background-position: right -150px bottom, center; background-repeat: no-repeat; height: 258px; } ul.no-bullet { list-style: none; margin-left: 0; } @media (max-width: 64em) { .footer-duda { margin-top: 0; } .footer-duda .top-bg { background-position: right -20px bottom, bottom; height: 60px; background-size: contain; } } .footer-duda .d { text-align: center; margin: 128px 0; float: right; width: 100%; } @media (max-width: 64em) { .footer-duda .d { margin: 100px 0 32px; } } .footer-duda .d .title { color: #fff; font-size: 40px; font-weight: 800; letter-spacing: 0; margin: 0 0 20px; } .footer-duda .lists { display: block; margin: 0 -25px; } .footer-duda .lists > li { float: left; list-style: none; padding: 0 25px; min-height: 300px; } @media (min-width: 64em) { .footer-duda .lists > li { min-height: 0; width: 25%; } } @media (max-width: 735px) { .footer-duda .lists > li { min-height: 350px; } } @media (max-width: 64em) { .footer-duda .d .title { font-size: 24px; } .footer-duda .lists > li { display: block; width: 100%; min-height: auto; } } .footer-duda .lists > li ul { color: #FFFFFF; margin-bottom: 40px; min-height: 186px; } .footer-duda .lists > li ul.active { padding-bottom: 20px; } @media (max-width: 64em) { .footer-duda .lists > li ul { border-bottom: 1px solid rgba(255, 255, 255, 0.5); margin: 0; min-height: auto; } .footer-duda .lists > li ul.active > li:not(.top) { display: block; } .footer-duda .lists > li ul.active > li.top svg { transform: rotateX(180deg); } .footer-duda .lists > li ul > li a { font-size: 14px !important; } .footer-duda .lists > li ul > li.top { cursor: pointer; } } .footer-duda .lists > li ul > li.top svg { display: none; float: right; transition: transform ease 0.3s; width: 14px; height: 46px; } @media (max-width: 40em) { .footer-duda .lists > li ul > li.top svg { width: 16px; } } .footer-duda .lists > li ul > li strong { letter-spacing: 1.5px; line-height: 46px; font-weight: 600; } .footer-duda .lists > li ul > li a { color: #FFFFFF; font-size: 16px; font-weight: 300; line-height: 35px; text-decoration: none; } .footer-duda .lists > li ul > li a .hiring { background: #f66135; font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 600; margin-left: 2px; } .footer-duda .lists > li ul > li a:hover { color: #c7c7c7; } .footer-duda hr { border: 1px solid #fff !important; display: inline-block; margin: 35px 0 22px !important; width: 100%; } .footer-duda .copyrights { float: left; font-size: 16px; font-weight: 400; letter-spacing: 0; } @media (max-width: 64em) { .footer-duda .lists > li ul > li.top svg { display: block; } .footer-duda .lists > li ul > li:not(.top) { display:none; } .footer-duda .copyrights { width: 100%; text-align: center; padding: 30px 0; } } .footer-duda .copyrights a { color: #fff; margin: 0 10px; } .footer-duda .copyrights .up-year { display: inline-block; margin-right: 28px; } @media (max-width: 64em) { .footer-duda .copyrights .up-year { margin-right: 15px; } } @media (max-width: 40em) { .footer-duda .copyrights { font-size: 12px; } .footer-duda .copyrights .up-year { margin-right: 10px; } } @media (max-width: 350px) { .footer-duda .copyrights .up-year { width: 100%; margin-right: 0; } } .footer-duda .social-icons { display: -ms-flexbox; display: flex; float: right; width: auto; -ms-flex-pack: center; justify-content: center; } @media (max-width: 64em) { .footer-duda .social-icons { width: 100%; } } .footer-duda .social-icons .icon { float: right; width: 38px; height: 38px; line-height: 38px; border-radius: 100%; text-align: center; font-size: 15px; color: #fff; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; margin: 0 0 0 15px; transition: all 0.3s ease; } @media (max-width: 40em) { .footer-duda .social-icons .icon { margin: 40px 6px 0; } } .footer-duda .social-icons .icon:hover { opacity: 0.8; } .footer-duda .show-for-sr, .footer-duda .show-on-focus { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important; } @media screen and (max-width: 0em), screen and (min-width: 40em) { .footer-duda .show-for-small-only { display: none!important; } } .footer-duda .column, .footer-duda .column:last-child:not(:first-child), .footer-duda .columns, .footer-duda .columns:last-child:not(:first-child) { clear: none; float: left; } @media (max-width: 768px) { .footer-duda .column, .footer-duda .column:last-child:not(:first-child), .footer-duda .columns, .footer-duda .columns:last-child:not(:first-child) { clear: both; float: initial; } } @media print, screen and (min-width: 40em) { .footer-duda .column, .footer-duda .columns { padding-right: .9375rem; padding-left: .9375rem; } } /* .footer-duda .show-for-large, .footer-duda .show-for-large-up, .footer-duda .show-for-medium, .footer-duda .show-for-medium-up, .footer-duda .show-for-xlarge { display: initial !important; } */ @media print, screen and (min-width: 64em) { .footer-duda .hide-for-large { display: none !important; } } @media screen and (max-width: 63.99875em) { .footer-duda .show-for-large { display: none!important; } } @media screen and (max-width: 39.99875em) { .footer-duda .show-for-medium { display: none!important; } } .footer-duda .column:last-child:not(:first-child), .footer-duda .columns:last-child:not(:first-child) { float: right; } @media screen and (max-width: 768px) { .footer-duda .column:last-child:not(:first-child), .footer-duda .columns:last-child:not(:first-child) { width: 100%; } } /*# sourceMappingURL=styles.css.map */ .css-iaal00-dateTime-compactRoot {color: #FAF5EB !important;}

Let’s Duda This.

- Platform
- Website Builder
- Team Collaboration Tools
- Client Management
- Full Feature Index
- Key Features
- White Label
- App Store
- eCommerce
- Templates
- Website Personalization
- Mobile Websites
- Widget Builder
- Custom Plan
- Key Features
- White Label
- App Store
- eCommerce
- Templates
- Website Personalization
- Mobile Websites
- Widget Builder
- Custom Plan
- Solutions
- Duda for Agencies
- Duda for SaaS Platforms
- Duda for Hosts
- Compare
- Duda vs. WordPress
- Duda vs. Squarespace
- Duda vs. Wix
- About Us
- Our Story
- Management
- Press
- Careers We're Hiring!
- Support
- Support Portal
- System Health Check
- Resources
- Blog
- Duda University
- Webinars
- Product Updates
- Marketing Materials
- Success Stories
- Developer Portal
- Duda Experts
- Duda Community
- COVID-19 Updates
- Compare
- Duda vs. WordPress
- Duda vs. Squarespace
- Duda vs. Wix
- Support
- Support Portal
- System Health Check

Duda © 2022

Privacy Terms GDPR

<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MNXB" height="0" width="0" style="display:none;visibility:hidden"></iframe>