This article covers Developer Mode in DudaOne. This allows you to get direct access to the HTML and CSS of the DudaOne site. The code is organized into separate files for easy access.
Tips for using Developer Mode
- Make sure you stay within the columns. DudaOne sites are split into a row-column structure. This means that each row contains a column, which ultimately holds the content. When adding or editing your own HTML -- make sure it is inside of a column.
- Leave the classes in place. Duda relies on the many classes that are added to elements. If you see an existing class (usually starts with dm), leave it in place. If you remove classes the site might not look the same when you go to preview it
- Notice the class sizes. Columns have a size value that is added as a class, such as large-6 or small-12. This determines the size of columns inside of that row. You'll want to leave these in place -- as they are the core of sizing the row on different devices.
- Avoid editing Duda extensions if possible. In the HTML, you will see placeholders of elements on the page already. If you can, avoid editing these, especially the data-values held within them. Editing these can break the widgets once you head back to the regular editor.
|DUPLICATE_ID||Every element must have a unique ID|
|INVALID_ELEMENT_LOCATION||All elements must be in a column which must be in a row|
|BAD_PROPORTION||Columns in a row must add up to 12|
|INVALID_CLASS_FOR_ELEMENT||A Duda class has been added to an invalid element|
Page HTML and CSS sections
In developer mode, all the page HTML and CSS is divided into two sections.
Page HTML / CSS
The first section includes the site's page files. The files you can edit and access are;
Site HTML / CSS
The second section includes the files that you can edit site-wide. These files include;
Developer Mode gives you access to edit your site's HTML on a per-page basis. Each page will have an HTML file that structures the site for all three devices small, medium, and large.
In addition, you also have access to the footers HTML, which is added to the bottom of every page, under Site HTML/CSS.
Rows and Columns
DudaOne's Developer Mode gives you a lot of control over the layout of your site, but certain structures must be maintained.
All DudaOne sites adhere to a row and column structure. Here's a typical piece of HTML you may find on your site:
<div class="dmRespRow" style="text-align: center;" id="1760459017"> <div class="dmRespColsWrapper" id="1104281418"> <div class="dmRespCol small-12 medium-12 large-12" id="1773415070"> <!-- *** INSERT YOUR HTML BELOW *** --> <div class="dmNewParagraph" data-dmtmpl="true" id="1397549575"> Duda uses rows! </div> </div> </div> </div>
Here you'll see a row (dmRespRow) wrapped around a column wrapper (dmRespColsWrapper ) wrapped around a column (dmRespCol). While coding your HTML you'll want to maintain this same structure.
Within each row, you can have multiple columns. Each columns width is calculated on a 12-section grid system. This means the width of the total columns in a row should add up to a multiple of 12 on each device (small for mobile; medium for tablet; large for desktop). In the example above we have only one column, but if we wanted to add another that takes up the entire width on mobile, 3/4 of the width on tablet, and 1/2 the width on desktop we would end up with something like this:
<div class="dmRespRow" style="text-align: center;" id="1760459017"> <div class="dmRespColsWrapper" id="1104281418"> <div class="dmRespCol small-12 medium-3 large-6" id="1773415070"> <!-- *** INSERT YOUR HTML BELOW *** --> <div class="dmNewParagraph" data-dmtmpl="true" id="1397549575"> Duda uses rows! </div> </div> <div class="dmRespCol small-12 medium-9 large-6" id="100">and columns</div> </div> </div>
In order for Duda to keep track of the elements on a site, each element must have a unique ID. I would recommend starting your IDs at 100 and incrementing from there.
While editing your site's CSS you have access to a bunch of CSS files. Under Page HTML/CSS you can access your page specific CSS. Here you'll find CSS files that will apply on all devices, desktop/tablet (they share CSS), and mobile.
Under Site HTML/CSS you'll find a CSS file that will apply to every page on you site, a theme CSS file that will contain global changes you've made to your theme (like globally changing your font style), and a global CSS file for each device.
I have code that I need to install, where do I install it?
That depends very greatly on the type of code you're installing (whether it's Google Adwords tracking or a custom script). The best way to find out where to install this code is to see what's the purpose of the code. Some thing to consider;
- Do you want it to appear on every page or just one?
- What are the instructions for your code for it to work?
Depending on these two questions, you will want to see the sections explanation of this article, and make the best decision on where your code should go.