Import HTML, CSS and Markdown

Importing HTML

There are two ways to import HTML

Copy and Paste from a Webpage

Visit a website in a browser such as Chrome or Firefox. 

Drag the cursor over the content you want to copy. Copy the content. 

In Pyxxi, click a text box. Place the cursor inside it, and then paste the content into the box (Ctrl V on windows, Command V on a Mac). 

Note that if you are pasting html elements, content in the text box will be removed and replaced with the pasted HTML. Text or inline HTML elements such as spans will be pasted into the box's existing content, without removing it. 

You can then edit the content visually in the same way as you edit content you created in Pyxxi. 

Note that if you copy content this way, all CSS styles rules and classes will be converted to inline CSS.

Copy and Paste HTML Code

Visit a web page. View the source of the web page, and then copy content from there. 

Alternatively you can paste in HTML content you have written. 

Paste the content into a text box as above. If you paste raw HTML in this way, this classes will not be converted to inline CSS, so you will then need to import style rules separately (see below).

Using the Edit HTML tool in Pyxxi to import HTML

Click on an element in a webpage. Click HTML in the Block Format dialog. Paste your HTML content into the box and click update. 

Note that the element's existing content will be overwritten.

Moving Content Around Pyxxi

You can also use edit HTML to move formatted content around Pyxxi. 

Click on an element. Click HTML. Leaving the HTML dialog open, click on another element either on the same page or a different page. Then click Update in the HTML box. 

Delete the content from the other box if required.

Import Markdown

Markdown is easy-to-read easy-to-write plain text that can be converted into HTML. 

Click an element.

Click Markdown (in the Block Format Dialog).

Paste Markdown content into the box that appears and click update. Existing content in the Element will be replaced.

Importing CSS Style Rules

Open the Styles Rules dialog at the left of the screen. Click IMPORT at the top. Paste in style rules or type them in. Then click Import (in the box). 

Media Queries

You can import media queries, but when you edit them, the conditional part of the media query will be shown as a string rather than as separate boxes. To edit it, type values into the boxes, rather than by editing the string (see CSS style generator).