Customizing web site appearance with version 6.20

Discuss MyInfo and get help here
Post Reply
Tester
Posts: 165
Joined: Tue Oct 22, 2013 12:08 pm

Customizing web site appearance with version 6.20

Post by Tester » Sat Dec 07, 2013 5:56 am

In the Blog (http://blog.milenix.com/myinfo-6-20-is-now-available/) the feature is described as followed:
Added: you can customize exported web site appearance (basic HTML & CSS knowledge are required)
For me it is not completely clear what this means (= what is new in this respect in version 6.20) because already when using the previous version of MyInfo (6.16) I had the possibility to change the appearance of the website by modifying the html and/or the css-file after exporting the topic to web site. I must admit that my knowledge about HTML and CSS is minimal, but nevertheless I succeeded in making some changes when still using version 6.16 (e.g.: chosing another background color for the tree, another color for the tree items etc.).

The new version 6.20 neither accepted my modifications when I copied my old css-file in the website-folder created with the new version [........].

So it would be of interest to learn if in the new version the customization process should be handled by the user in a completely different way.
Last edited by Tester on Mon Dec 09, 2013 1:43 pm, edited 1 time in total.

Tester
Posts: 165
Joined: Tue Oct 22, 2013 12:08 pm

Post by Tester » Sat Dec 07, 2013 2:50 pm

O.k., in the meantime I found out what is new concerning the customization:

The user now can make it already before starting the exporting process (and so save it for future exports):

1. File ---> Export ---> Export to: Web Site

2. In the window that opens, the user can click on "Edit":

Image

So he will come to a folder which contains the file user.css

Opening the file, it has this appearance:

Image

3. Obviously here the user can realize now the customizations he prefers - in case that he has enough knowledge of HTML and CSS (as mentioned in the Blog). Unfortunately I do not have. So this is too complicated for me. :cry:

When the user does not make his own customizations, the export to Web Site takes place only with the automatical creation of a standard css (called "common.css") which I referred to in my first posting.

Petko
MyInfo Support
Posts: 1784
Joined: Sun Jul 25, 2004 4:33 pm
Contact:

Post by Petko » Sat Dec 07, 2013 5:03 pm

This feature is intended for people with knowledge in CSS, but I can help you, if you tell me what do you want to customize.

Tester
Posts: 165
Joined: Tue Oct 22, 2013 12:08 pm

Post by Tester » Sat Dec 07, 2013 9:11 pm

Thanks for your offer to help.

Perhaps for other users too some customizations are of interest. So I thought it would be useful to describe which modifications I made when using still the previous version of MyInfoPro (6.16) by making some changes in the file "common.css" after exporting the topic to Web Site.

[.......]

Here what I had made in the "old" common.css:

1.
When exporting to Web Site you can choose a title for this export (by default it is the name of your topic/file).
If you wanted this title to appear also on the website (on top of the tree) you had to make the following modification:
Delete in the css.file the word "none" under "#topic-title" ---> "display":

Image

2.
Also on top of the tree you can see on the website the word "Documents" upon a bar. The default background color of the bar is grey (#E0E0E0). I changed it in the css.file (under "th") to a brown/ocher color (#C1C185):

Image

3.
Changing the background color of the whole tree (default is white):
I achieved it by adding in the css-file under "tree" the word "background-color" and the number of the desired color (in my case: #CCDAFF, that is a light blue):

Image

4.
Within the tree the titles of the documents are separated by a dotted horizontal line.
I changed the default color of this line (a light grey: #D5D5D5) to the stronger black (#000000). You had to do this under "#tree td, #tree th":

Image

5.
The titles of the documents listed in the tree are links. So it is logical that they have dark blue color (#3300FF). You could find it in the css-file under "a:link":

Image

I changed it to black (#000000) because so the titles are better visible on my blue background color of the tree.

Attention:
When making this customization in the user.css (MyInfo version 6.20) you will also have to add "#tree" in front of "a:link":

Image

6.
Links you have visited (= document names you have clicked on) by default change the color (I do not remember which one). If you want another color (for example when you wish that the color remains the same as before visiting the link) you have to replace the color written under "a:visited" by the color of your choice:

Image

For example, I changed the entry to black: #000000 (= same color before and after clicking a link/title).

Attention:
When making this customization in the user.css (MyInfo version 6.20) you will also have to add "#tree" in front of "a:visited":

Image

7.
The document title selected (= the one you have currently clicked on) has also an own color (by default: black: #000). I changed it to a dark red (#F0003C).

You had to do it under "#tree tr.selected a" (not the above "#tree tr.selected"):

Image

8.
There is a vertical splitter bar which separates the tree from the content / text field (don't know if I use the correct expressions).

The default color of the splitter bar is a grey (#ccc). I decided to give it a blue color (##809FFF).
You have to replace the color under ".ui-state-default { "background-color":

Image

9.
I also increased a little bit the width of the splitter bar (from 4px to 5px).
This was made under "splitter-bar-vertical":

Image

These were the changes I had made in the old css-file. I hope my unprofessional way of describing them was understandable.

There were two more details for which I could not find out how to modify them in the old css-file.

10.
A change of the background color of the content field (= of the right side of the window).

11.
Some more space (padding) on the left and on the right end of the content field. Currently this space seems very small to me (but perhaps this is only a matter of getting accustomed to):

on the left:
Image

on the right:
Image

[......]

PS:
For people who are interested to see how look certain colors and which are their codes used in a css-file, this website is very useful: http://www.colorschemer.com/online.html ("Color Schemer Online")
Last edited by Tester on Sat Dec 14, 2013 1:04 am, edited 5 times in total.

Tester
Posts: 165
Joined: Tue Oct 22, 2013 12:08 pm

Post by Tester » Mon Dec 09, 2013 2:34 am

For some unknown reason I was completely wrong when (originally) I wrote above:
Tester wrote: [...] nor did it have a (full) effect when I tried to modify directly the new css-file (= the one created when exporting the topic with version 6.20): A few modifications were accepted again (for example a change of the color for the vertical splitter-bar), but many were not (e.g. the different background color of the tree).
Tester wrote: most of these modifications do not work any longer when I try to repeat them in the common.css of the new version (6.20)
I tried it again and now I see:
All modifications that I made in the css-file of version 6.16 work in the css-file of version 6.20 too. :D

That means for users (like me) who (still?) do not have enough knowledge to use the new customization feature added in version 6.20:

You can make various changes in the appearance of your website in the following way:

1. Export your File/Topic in the usual way to Web Site:
File ---> Export ---> Export to: Web Site (and ignore the new customization option)

2. In the created folder you will find the file common.css.
You can edit this file (for example) in the way described in my above posting (modifications Nr. 1 to 9). All works in the same way as with the common.css in version 6.16.

There is only one small difference in the terminology, which is relevant in connection with modification Nr. 1 mentioned in my last posting (= the modification that the title shall appear on the website):

The entry in the common.css of version 6.20 is no longer called "#topic-title" but "#site-title".
Beneath it you will find again the word "display" after which you have to delete the word "none":

Image

The rest of the editing works exactly as described in the last posting.

3. Save this modified common.css somewhre on your computer.
And whenever you make a new export of your file/topic to Web Site simply replace the default common.css by this modified version after the export.

Surely this method is not so elegant as the professional customizing offered now in version 6.20 but anyway it enables you to change certain details in the appearance of your website. :wink:

Petko
MyInfo Support
Posts: 1784
Joined: Sun Jul 25, 2004 4:33 pm
Contact:

Post by Petko » Thu Dec 12, 2013 1:16 pm

It fact, using customizations for the web site export works almost the same way. Just copy the things you've changed in common.css to user.css in the customization and you are done!

The advantages are two:
  • You can have multiple customizations and choose the appropriate one, if you have more than one web site to create
  • Common.css should be updated by the new MyInfo versions (to fix bugs, to improve appearance, etc). By always pasting your modified common.css, you will prevent that and it can cause problems in the future.
Simple example:
To show the site/topic title, just paste the following in user.css in your customization (it is better to use "block" instead of an empty string in this case):

Code: Select all

#site-title {
    display: block;
}

Tester
Posts: 165
Joined: Tue Oct 22, 2013 12:08 pm

Post by Tester » Thu Dec 12, 2013 4:21 pm

Thanks, Petko. I am already experimenting with it. :D
_____

A suggestion for a small modification concerning the introduction of the customizing procedure, perhaps useful for beginners:

The window "Export to Web Site" looks like this (before making any customization):

Image

A beginner is tempted to click immediately the "Edit" button (and terminologically this would make sense: in order to customize something I have to edit something). But clicking "Edit" already now will be misleading, because first you have to create an own customization. I made the mistake too at the beginning, and I was confused because I could not see the user.css but only a folder ("Show State Icons").

You have first to make a customization (by clicking on the button with the green "+"), later on you will see in the dropdown field your customization, respectively its name (in the following picture e.g. "Test1" and various others):

Image

Only after selecting one of your customizations in the dropdown field, the usage of the "Edit" button makes sense.

In order to help the user to understand this I would suggest the following:

When the customizing status is "None" (see first picture above) and the user is clicking on "Edit", it should appear (instead of the Windows Explorer with a folder) a window providing the following information:

"Please make a customization before editing"
or
"You cannot edit before having made a customization"
or
"There is nothing to edit. Make a customization first."

Something like that.

wsp
Posts: 390
Joined: Thu Aug 07, 2008 8:54 am
Location: Washington, DC

Post by wsp » Sat Sep 16, 2017 8:59 pm

I'm ridiculously late to this discussion, but recently I've begun playing around with website exports, and I find there is only one extremely simple customization that I want: changing the background color of the notes to something like a pale cream.

I used to be able to code in HTML many years ago, but I haven't done it in ages and seem to have lost all my skills. Could someone (tester? Petko?) give me a set of straightforward, step-by-step instructions for doing just this one customization? I would appreciate it.
Bill

Petko
MyInfo Support
Posts: 1784
Joined: Sun Jul 25, 2004 4:33 pm
Contact:

Post by Petko » Mon Sep 18, 2017 2:17 pm

Here it is:
  • Click File > Export > Web Site and click OK to open the Export to Web Site dialog
  • Click the Plus button to create a new web site customization (enter a name for it, for example Blue Note Background). Windows Explorer will open the folder where this customization is stored
  • Open user.css with your favorite text editor.
  • Find body#document-page and change the value of background-color to the color you want. You can see a list of HTML color codes here: https://www.w3schools.com/colors/colors_picker.asp
  • Now, if you select this customization when exporting the web site, it will use the color you specified above

wsp
Posts: 390
Joined: Thu Aug 07, 2008 8:54 am
Location: Washington, DC

Post by wsp » Mon Sep 18, 2017 8:08 pm

Thanks, Petko. That worked, and it was surprisingly easy, even for me.
Bill

Post Reply