Using org-mode to generate mindmaps from heading structure has been elusive. There is a Freemind export, but I don't want to have to fire up an external app, and anyway Freemind mind maps look ugly to me.
What about using org-export-html, along with a custom CSS stylesheet, to generate a mindmap in HTML?
I found this Gist:
pure css mindmap with nest list element
It creates HTML mindmaps by styling list elements such as:
ul>li:nth-child(even):after
For an org-mode mindmap export, you would want a CSS stylesheet that used H1, H2, H3 for its mindmap nodes, instead of using list elements as the above does. Nine heading levels would be more than sufficient. The mindmap's HTML would display only headings, hiding non-heading text using something like:
p, li {display:none}
What would such CSS look like? How would you modify the above gist, or create a new CSS stylesheet, to permit such a mindmap export?
Related
Similar to Styling the Storybook JS but specifically on the content area.
I want to define the typography I am using which also includes the font. I'd rather not do any CSS !important but what I found was some extra CSS is being added in the generated HTML from Markdown and overriding my stylings.
I know I can simply use <Canvas> but I would rather have the rest of the Storybook follow the style I want.
I am new to RiotJS (just discovered it yesterday). I just tried to do a little experiment which did NOT work. I created two tag files (navbar.tag and dropdown.tag). Each one was as simple as could be – simply a h3 tag with the name of the file:
// navbar.tag
<h3>Navbar</h3>
// dropdowntag
<h3>Dropdown</h3>
On my index.html page I want to nest the dropdown tag within the navbar tag like this:
<navbar>
<dropdown></dropdown>
</navbar>
That does not to work. Navbar shows up, but not dropdown. Only if I separate the two tags do both work -- i.e., like this:
<navbar></navbar>
<dropdown></dropdown>
Any idea how I can nest different tags within an html page. I know you can nest them within .tag files, but that is not what I want to do. What I want is the flexibility to nest custom tags that I create on ay html page (like I can do with regular html tags).
Any ideas?
Thanks.
You cannot modify the existing structure. RiotJS use this constraint as an advantage to ensure good performance.
To insert another tag into existing tag, use <yield/>.
See JSFiddle.
Is there a way to add new HTML tags and to make TinyMCE take its formatting from a CSS file?
I've been looking for ways of adding new formats but the internal TinyMCE formatting engine is not as flexible as CSS.
I'll clarify:
TinyMCE works by using standard html formatting tags:
<p>, <h1>, etc.
I'd like to either, create a new format that creates a new tag such as <custom_1>. That way I'd be able to format it with the css linked to the output document.
Thanks!
In light of GMail's questionable support for CSS, I'd like to apply style elements to everything in the HTML email I'm assembling.
I'm currently using MVC3's Razor to construct the email, then sending off the generated HTML. Is there any way for me to write the template with a style sheet, then transform it such that each element gets a style attribute with the appropriate styles?
For instance, in a normal web page, I would have something like
<style>
a { color:#1c5567; }
</style>
Click here!
If a GMail user looks at this, they won't see it in that shade of teal. However, if I do
Click here!
they will. But that is a huge maintainability headache. Thus I want a process that can take HTML with the former style and output it in the latter.
. For this, I want to take that existing CSS style and transform it such that style="color:#1c5567;" gets added to every <a> on the page.
It might be the lamest way to do this but you could use a simple CSS parser like this one CSS Parser and add style attribute as required.
Since you're overriding the style in gmail from an external stylesheet, you need to use !important to override the style.
a {
color:#1c5567 !important;
}
I am first time poster. A question. How do a make a css declaration that only works within one DIV, but, not overwriting the global css? I want to jQuery loading a page into a DIV, however, the page's CSS changed my own site's CSS. I don't want that. Also I can't just take out CSS because I want them looked as intended from the source.
Basically we are going to load an external HTML with its CSS style applied locally ONLY without it changing the style elsewhere. The external HTML is not using inline CSS since we don't have control over it. They are applied to class values or even all element type. We don't want their CSS declaration modifying our own existing CSS outside of the DIV container.
Is this even possible?
Thank You?
If I understand your question correct you would place an id in the div <div id="mystyle"> content </div>. In your CSS you would write #mystyle p { color:red; }. which have no effect on global paragraphs outside the "mystyle" div.
I guess you are asking how to apply an external stylesheet to just one div. There is no way to do this using just CSS. You might be able to emulate this using JavaScript, but it's going to take quite a bit of work. Here's an outline of how you might go about doing this:
Grab the stylesheet filename from the loaded HTML and then get the contents of the CSS file via AJAX.
Somehow parse the CSS and prefix your div ID to each CSS rule, so that it applies only within your div.
Inject the modified stylesheet as inline text into the loaded HTML.
Steps 1 and 3 are relatively simple, step 2 requires a CSS parser written in JavaScript. (There seems to be one available here although there is no documentation.)