InfoQube IM - Community

Submitted by Paul_J_Miller on 2018/08/09 16:05

I am a very visual person and like to see my notes well formatted but I don't like messing about with the formatting. Having to think about the fonts and the sizes and the colours of things is tiresome and detracts from concentrating on the subject of the note.

Fortunately InfoQube amongst others has 'styles', you can say "this is a heading" or "this is a standard paragraph" without having to think about the formatting because you already sorted that out so you don't have to do it every time.

Because I use it quite a lot it would be nicer if the style drop down was on the top level instead of being a drop down inside another drop down but unfortunately that is one aspect of InfoQube which cannot be reconfigured.

Things get even more interesting when you edit the default HTML file. I tried this some time ago and it didn't work and I thought I was doing something wrong and started looking for the default file within the InfoQube program directories and Application Data. I found them and edited them but meanwhile Pierre fixed the functionality within InfoQube to save the current item as the default HTML file to be used for new items. So it's even easier now. Just create a new document, switch to HTML view, edit the HTML code then select 'Save as default ...' from the file menu (the file menu in the document pane, not the File menu in the main program window) and the edited code will be used for all new documents.

There are some programs which only have a partial implementation of the HTML and CSS standards but Pierre seems to have done a fairly comprehensive implementation. Although you can't use CSS files you can put CSS commands within the <STYLE> ... </STYLE> tags in the HTML.

I have included my default HTML document as an example of what is possible. It may not be to everyone's taste but you are welcome to either use it as it is or modify it to suit your own needs/tastes.

The purpose of including this file is as a starting point not an end point. Go forth and modify.

The style has a parchment coloured background with a very legible sans serif font in black. The headings are in purple with a brown underline, as the headings go up in number the text size diminishes and gets darker, the underline diminishes and gets lighter and the indent increases slightly.

Tables have a light violet background to distinguish them from the text.

As an example :-

That is what it looks like and here is the code, just cut and paste if interested :-

<HTML><HEAD> <META name=GENERATOR content="InfoQube 0.9.109Pre7"> <META charset=UTF-8> <STYLE> /* ** 'body' */ body { margin-right:10px; margin-left:10px; font-family:"Cadman,Candara,Sans-serif"; font-size:100%; line-height: 1.6em; color: Black; padding-bottom: .5em; background-color: #fff0c8; } /* 'p' (paragraph) */ p { font-size:small; } /* ** 'h?' (headings) */ h1 { font-family:"Cadman,Candara,Sans-serif"; font-weight:bold; margin: 0; padding-top: .5em; padding-bottom: .17em; font-size:160%; color:#4000DD; border-bottom: 2px solid GoldenRod; } h2 { font-family:"Cadman,Candara,Sans-serif"; font-weight:bold; margin: 0; padding-top: .5em; padding-bottom: .17em; font-size:150%; color:#3500CC; margin-left: 1.2em; border-bottom: 2px solid #E3B118; } h3 { font-family:"Cadman,Candara,Sans-serif"; font-weight:bold; margin: 0; padding-top: .5em; padding-bottom: .17em; font-size:140%; color:#2A00BB; margin-left: 2.4em; border-bottom: 1px solid #ECBD10; } h4 { font-family:"Cadman,Candara,Sans-serif"; font-weight:bold; margin: 0; padding-top: .5em; padding-bottom: .17em; font-size:130%; border-bottom: 1px solid #F5C908; margin-left: 3.6em; color:#1F00AA; } h5 { font-family:"Cadman,Candara,Sans-serif"; font-weight:bold; margin: 0; padding-top: .5em; padding-bottom: .17em; font-size:120%; font-family:"Cadman,Candara,Sans-serif"; border-bottom: 1px solid Gold; margin-left: 4.8em; color:#140099; margin-bottom: 0; } h6 { font-family:"Cadman,Candara,Sans-serif"; font-weight:bold; margin: 0; padding-top: .5em; padding-bottom: .17em; font-size:110%; font-family:"Cadman,Candara,Sans-serif"; color:#090099; border-bottom: 1px solid Gold; margin-left: 6em; margin-bottom: 0; } /* ** Un-Ordered Lists */ ul { margin-top: 4pt; margin-bottom: 8pt; text-align: left; /* width:90%; */ /* Width relative to the Viewing area */ line-height: 1.6em; /* Line spacing of about 1.6 times the height of a capital letter */ } /* ** Ordered List */ ol { margin-top: 4pt; margin-bottom: 4pt; } /* ** Definition List */ dl { margin-top: 4pt; margin-bottom: 4pt; } /* ** Definition Term */ dt {font-weight: bold;} /* ** Definition Element */ dd {font-weight: normal;} /* ** Typewriter Text ( Monospaced ) */ tt { font-family:"Consolas,Courier New,monospace"; color:#666666; background-color: Beige; } /* ** Pre Formatted Text ( Monospaced ) */ pre { font-family:"Monospac821 BT,Consolas,Courier New,monospace"; color:#666666; background-color: White; } pre.code { margin-top: 8pt; margin-bottom: 8pt; background-color: White; white-space:pre; border-style:solid; border-width:1px; border-color:#999999; color:#333333; padding:10px; width:100%; } .highlite { background-color: #FFFF70; } table { font-size: 110%; border-collapse: collapse; border: 2px #999 solid; background-color: #f4eaff ; } table.float { float:right; margin: 1.5em 1.5em 1.5em 0; } table.td { border: 1px #aa0 solid; padding: 5px 15px 5px 15px; } .tabletext { padding-left: 15px; padding-right: 15px; } </STYLE> </HEAD> <BODY bottomMargin=0 leftMargin=2 topMargin=2 rightMargin=2> <DIV> </DIV></BODY></HTML>

[Edited by Admin to reduce the image size]

Comments

Hi Paul,

Thanks for your contribution. It does look very nice !!

A couple of things:

If you right-click on the Doc pane toolbar, you can show the Font toolbar which does have the Style dropdown. You can drag-drop it to the main menu bar if you want (hold Ctrl to make a copy)
Ctrl 1-6 are shortcuts to apply H1...H6 and Ctrl N applies the normal format (It opens the New Item dialog right now, I'll fix it)
Also, in the next version, I'm adding separate buttons for H1...H6 and Normal styles
You can use an external style sheet, which provides an easy way to format content automatically. To do so:
- Enter <LINK rel=stylesheet href="C:\Users\PPL\Documents\styles.css"> as your default HTML file.
- Where styles.css has the content of your post (adjust path too)
- One BIG advantage to this method, is changing the style sheet file content will instantly change the look of all items that use it

I attached your Style Sheet file

Pierre_Admin

IQ Designer

[quote=Pierre_Admin]

Hi Paul,

Thanks for your contribution. It does look very nice !!

A couple of things:

If you right-click on the Doc pane toolbar, you can show the Font toolbar which does have the Style dropdown. You can drag-drop it to the main menu bar if you want (hold Ctrl to make a copy)
Ctrl 1-6 are shortcuts to apply H1...H6 and Ctrl N applies the normal format (It opens the New Item dialog right now, I'll fix it)
Also, in the next version, I'm adding separate buttons for H1...H6 and Normal styles
You can use an external style sheet, which provides an easy way to format content automatically. To do so:
- Enter <LINK rel=stylesheet href="C:\Users\PPL\Documents\styles.css"> as your default HTML file.
- Where styles.css has the content of your post (adjust path too)
- One BIG advantage to this method, is changing the style sheet file content will instantly change the look of all items that use it

Pierre_Admin

IQ Designer

[/quote]

Thank you.

You can customise the toolbars in the document pane, how did I miss that ?

I am still finding new things in this program.

On the second point, am I correct in thinking that using an external .CSS file link instead of putting the HTML code into each document pane will also reduce the overall size of the notebase ?

This certainly opens up some interesting possibilities. :)

[quote=Paul_J_Miller]

On the second point, am I correct in thinking that using an external .CSS file link instead of putting the HTML code into each document pane will also reduce the overall size of the notebase ?

This certainly opens up some interesting possibilities. :)

[/quote]

Yes it does of course ! Not to mention separating content from presentation

I'll see if in the next version, I can provide better support for css files, such as a default css file and an item specific one too

Pierre_Admin

IQ Designer

[quote=Pierre_Admin]I'll see if in the next version, I can provide better support for css files, such as a default css file and an item specific one too

Pierre_Admin

IQ Designer

[/quote]

Perhaps a default .CSS file with the option to override that with an arbitrary .CSS file. I don't know but it would be better to make it just work unobtrusively in the background unless someone wants to change it.

Some of the Table definitions are coming up in the Style drop down, I think my .CSS file is very much a work in progress at the moment.

I am aware that people may not like my styling so I will add one or two comments about how things work and how to change them. The comments will take up space but if there is only one instance of the .CSS file and it doesn't get added to each item then it is a price worth paying I think. If InfoQube ignores the comments then they should not cause much slowdown when parsing the file.

The link to a .CSS file works and reduces the size of the text in the item. I think this is the way it ought to be done.

I now have a 'Style' drop down at the top of my document pane. :)

I now have the problem that I have many hundreds of items which were done the old way with lots of HTML to define the layout. I have to go through all of that changing them. :(

The current state of the CSS file is attached, I have added some comments to make it easier for people to modify it to suit their own preferences.

It is certainly not the final version.

Watch this space !!

[quote=Paul_J_Miller]

I now have the problem that I have many hundreds of items which were done the old way with lots of HTML to define the layout. I have to go through all of that changing them. :(

[/quote]

Don't worry, if all goes well, in the next version I'll have a way to fix those 100's of items automatically

Pierre_Admin

IQ Designer

This is the latest version of the style sheet.

I was thinking of doing one or two alternative colour schemes and posting them.

I have done a few more colour schemes and attached them.

The link to a style sheet which Pierre suggested works very well, I can just go in and change the style sheet for each individual item and so have different pages formatted in different ways. Changing the colour scheme is just a sample of what is possible.

I had thought that the style sheet filename could be made a property of each item and so could be adjusted that way, this also opens up the possibility to search for items with a certain style sheet, which might be useful depending on what the user has used them for. Just a thought.

The colour schemes so far are :-

Gray
Green
Light Blue
Parchment (this is the original VioletYellow.css)
Pink
Violet
Yellow

The name refers to the main background colour (in a subtle pastel shade so as not to have any detremental effect on the text).

Thanks for these Paul !

added all to my users folder, currently Parchment is default

Tom

I just added another Box_Header.css puts the headings in three dimensional boxes. This is just a proof of concept of what can be done with headings, I will improve on the colour scheme.

InfoQube only has CSS version 2, not version 3 so I wasn't able to do anything like linear gradients (fading from one colour to another) or drop shadows. But what we have is quite useful.

[quote=Paul_J_Miller]

I just added another Box_Header.css puts the headings in three dimensional boxes. This is just a proof of concept of what can be done with headings, I will improve on the colour scheme.

[/quote]

(just a) suggestion:

add the most recent / up-to-date upload/s (as you update them) to the first post above.

Will make it easier for people to keep track and download the most recent version/s.

Hi Paul,

I didn't test, but the doc pane should support CSS version 3, including gradients, if you have IE10 mode enabled:

(source: here)

Pierre_Admin

IQ Designer

[quote=Pierre_Admin]

Hi Paul,

I didn't test, but the doc pane should support CSS version 3, including gradients, if you have IE10 mode enabled:

(source: here)

Pierre_Admin

IQ Designer

[/quote]

Yes IE10 mode is enabled, no linear gradients don't work. I can understand why drop shadows don't work, they are not part of the CSS standard although Firefox, Safari and Opera were quick to adopt them, Microsoft has been more reticent. Linear Gradients however are part of the CSS 3 standard. I have tried the standard w3 syntax and the syntax variants for Firefox, Safari 4, Safari 5 and Opera, none work.

I have a pretty standard Windows 10, 64 bit system, I have the Firefox browser installed on my system. I believe Microsoft also install Internet Explorer and Microsof Edge by default. I don't use them but I have not taken any steps to uninstall them.

It should work, as this page loads fine in the Doc pane (with gradients)

https://css-tricks.com/snippets/css/css-linear-gradient/

Pierre_Admin

IQ Designer

[quote=Pierre_Admin]

It should work, as this page loads fine in the Doc pane (with gradients)

https://css-tricks.com/snippets/css/css-linear-gradient/

Pierre_Admin

IQ Designer

[/quote]

Not on my system!

I have just 'proved' to myself that Linear Gradients do not work in InfoQube. I edited a HTML file copied from a blank InfoQube page, inserted an example cut and pasted from the page you refer to, with the style commands taken out and pasted into the .CSS file. I then opened this HTML file in various browsers. It did not work in Firefox, fo some reason it was not picking up the link to the .CSS file. It worked in Internet Explorer, it worked in Microsoft Edge, it worked in Google Chrome and in Vivaldi.

I then took the HTML file (known to be working in all but one browser) and pasted it back into a blank InfoQube page replacing the default contents with the file, it picked up the .CSS file but did not reproduce the linear gradients, the .CSS file set the backup as a solid block of colour, that is how I know the .CSS file was being picked up correctly. Everything was being reproduced correctly except for the linear gradients which were being reproduced as their backup representations.

I can produce screen shots if you want.

Until someone comes up with a working example I will continue to assume that linear gradients do not work in InfoQube. :(

Can the styles.css belong in any directory that you choose. As long as the link file has the right path.

Thanks,

Currently yes,

The way I thought of implementing this is

Say you select the style sheet to be MyStyle.css
IQ will first look into the .files folder for it
If not found, it will look in the User folder
If not found, it will look in the AppFiles folder
If not found, it will use the default style.css (defined in Tools > Options)
The item style.css will be saved in file ItemHTMLStyle field
If the item does not have a style defined, the default one will be used (if defined)

Pierre_Admin

IQ Designer

I would think you would want it to look at InfoQube\AppFiles first and the maybe User\Documents folder next. At least to me that would be the logical sequence.

I have a directory called InfoQube on my data disk (drive D:/) which contains the InfoQube notebases, thats where I put the .CSS files and that is where my links point. It seems to work fine. I don't know where I should be putting them!

I think it doesn't matter where you put the style sheets, only that the location of the CSS file is the same as the location referenced in the item's HTML code. Which will usually match the code in the default HTML document template (newhtml.htm).

LOL

Calm down guys, I'm working on this. It will be very simple...

Pierre_Admin

IQ Designer

Coming up in v109:

New: Doc pane: Style sheet support. See doc for details
New: Fields: ItemHTMLStyle holds the item specific style sheet
New: Doc pane: Format Style Sheet: Set the style sheet for this item or leave blank to use the default style sheet (defined in Tools > Options > HTML)
New: Doc pane: Edit > Edit Style Sheet. Opens the program associated with .css files. Hold Shift to show the Open with dialog
New: Doc pane: Edit > Remove Embedded Styles command

Pierre_Admin

IQ Designer

Wow this is great !

I assume the 'ItemHTMLStyle' property will hold a pointer to a .CSS file ?

Yes, just enter the file name with or without extension, such as violet or yellow

Leave blank to use the default or enter rubbish to have no style sheet

It searches through a known path and finds the first file that matches the name:

Files folder, Item sub folder
Files folder
User folder
App files folder

So you can override a style sheet for a given item by copying the .css file in the item's folder and modifying it.

The default style sheet is:

Pierre_Admin

IQ Designer

I have tried all sorts of things to try to get Linear Gradients working. At first I was trying to get them working in the CSS file but later I was just trying to get a linear gradient working anywhere. I don't know what I am doing wrong.

If anyone gets these working could they please let me have a copy of a working example just to see it on my system.

If I could get linear gradients working there are all sorts of possibilities. A heading with a different coloured background which fades across the width of the page to the page background colour. An underline which does the same.

Cells in tables which are lighter at the top and therefore have a 3D effect.

Getting linear gradients working would be really cool.

By the way just to make it explicit, although I have put a copyright notice in these .CSS files they are copyrighted under GPL which means anyone can use them for anything without any restriction or obligation.

Paull,

You'll go come crazy if I tell you that you can also add SVG content...

Pierre_Admin

IQ Designer

Do you mean add an .SVG file to the Doc pane, I thought you could already do this and it is useful.

Although I am still in the process of transferring articles from ConnectedText to InfoQube (a couple of months in and I am approximately half way), this would be useful, I had occasion to place a diagram which I had as an .SVG file into ConnectedText and there was no way to do it. I had to convert it to a bitmap which increased it's size and made it uneditable. I still have the original, I haven't got to that article yet.

Or do you mean add things in the SVG markup language (which is XML) to the HTML of the Doc pane ? In which case it needs to be well documented or it will be useless.

Any SVG code can be added in Code view and rendered in Edit and Browse modes

Pierre_Admin

IQ Designer

Looks fantastic!

Is that a CSS drop down I see?

I look forward to getting the next version.

Hi Paul,

It is now online.

Yes, it is a dropdown, but nothing in it yet. I want to propose recent css files in it. To be included in a future version of course

Pierre_Admin

IQ Designer

That is indeed strange, as all the sample web pages work, but not embedded content...

I was setting the Doc pane editor to IE10 mode which should support it.

I'm now setting it to IE11 mode and gradients do show. I had a note from way back that there was an issue with using IE11 mode (long initial pane load time), but I don't experience it on my dev machine. So we'll try it and see

In doing so, we're gaining improved rendering. Content in the Doc pane now more closely match Chrome.

Pierre_Admin

IQ Designer

I updated my IQ to 0.9.109 and set my style sheet as the Default.css. However when I look at the Doc Pane CSS style sheet drop down. It appears empty. Is this correct? It make it seen that a person could have multiple different style sheets to choose from. But not sure how that would work.

[quote=jnmwarren]

[/quote]

Hi !

See my above comment:

[quote]

Yes, it is a dropdown, but nothing in it yet. I want to propose recent css files in it. To be included in a future version of course

[/quote]

Pierre_Admin

IQ Designer

It would be nice to say have a CSS folder like the AppFile folder. Where all of your CSS files could reside. Then the drop down could look to the file and populate the drop down. Then in the Doc Pane a person could choose any number of CSS files depending on the type of Note.

[quote=jnmwarren]

[/quote]

You can put your CSS files in the IQBase .files folder or your Users folder

IQ uses the following file search path order:

Item files
IQBase files
User files
App files

Pierre_Admin

IQ Designer

I have fixed a bug which Pierre noticed in my style sheets. I have added a few more and altered the copyright statement to explicitly state that they are under GPL.

These replace all previous versions.

The Linear Gradients are really cool!

I have put the full set of CSS files in here. Have fun. :)

This reply was made by Paul_J_Miller in the transition to the new web site, reproduced it here:

Pierre_Admin wrote:

Out of curiosity, why not use the portable flavor ?

Pierre_Admin

IQ Designer

I don't know, I guess I have a perception of 'Portable' versions as something you use only if you cannot install the non-portable version. Are there any advantages to using the portable version ?

I now have a working system which knows about all the style sheets (they appear in the style drop down for all projects), there is only one remaining problem. There are two leftovers which also appear in all projects. How do I get rid of the spurious entries in the drop down ?

[quote=Paul_J_Miller]

I don't know, I guess I have a perception of 'Portable' versions as something you use only if you cannot install the non-portable version. Are there any advantages to using the portable version ?

[/quote]

re Portable version. No admin right required, isolation from other installed apps, all IQ folders are together under the app folder. Same feature set

re drop down items: Close IQ and edit Options.ini (user folder). Entry is HTMLStyleSheets. I'll improve this in a future version.

HTH !

Pierre_Admin

IQ Designer

I edited the options.ini file and they disappeared. Thank you!

In the next version, you can now select the style sheet item with the up/down cursor keys and hit Delete to remove the entry.

This is the same method as used in the grid source bar dropdowns

Pierre_Admin

IQ Designer

I have updated the CSS files.

The CSS funtionality on the document pane now works very well and in my opinion is a big improvement to InfoQube, thanks Pierre !

These latest style sheets include styling for links which I forgot to include in previous versions.

I have tweaked the colours and headings to better suit my preferences, as before if you don't like something just edit the file. If you can't figure out what a particular setting is doing just set it to a silly value and see what changes. Experiment!

These sheets superceed the previous versions.

I have produced yet another set of styles.

I had better stop before I get too many.

This is a set of five styles four sombre and one frivolous.

Ofis_Blue.css

Ofis_Brown.css

Ofis_Green.css

Ofis_Purple.css

Bubblegum.css

The Ofis styles are suitable for use at work. Bubblegum resembles the colour scheme of a 1950's ice cream parlour.

Have fun

This is the final version of the style sheets for InfoQube.

These are the ones I use on a regular basis. Twelve is enough, any more and the drop down box needs to be scrolled.

The 'Old and Deprocated' folder contains the failed experiments and the ones I found that I didn't use or didn't like. Please feel free to explore if you wish.

The ones I did use are :-

1.        Bubblegum.css            A nostalgic treat
2.        Gold Top.css                Golden headings
3.       Light_Blue.css
4.        Night.css                      A dark theme
5.        Ofis_Blue.css                \
6.        Ofis_Brown.css            The Ofis themes have evolved and now look more stylish
7.        Ofis_Green.css            |
8.        Ofis_Purple.css             /
9.        Parchment.css             This has evolved and is the default css for all new documents
10.      Steel Top.css                Steel headings
11.      Violet.css
12.      Wikipeed.css                Resembles a well known online information source

many thanks for these :up:

I have just done a new version of the Night.css theme. Sorry to keep moving the goalposts but I think this is better than the original.

Now that they are all finished and stable (just about) Pierre could put them up as a download on the main website as an optional resource if he felt that it was appropriate to do so, just like the book database. They are all free under GPL 3. They can be uploaded/downloaded edited and used for any purpose without any obligations or restrictions apart from the obvious one that they cannot be sold.

I never thought that this thread would take on the life that it did so the original post was quite long. That makes this thread more awkward to view. If I had known then I would have made the original post much shorter ... Oh Well !