[zen-ipython theme] Add new links on the social/menu/sidebar: icon and text

[mscipio]

Hi everybody! I have just started experimenting with github pages and nikola and since I like the idea of using ipython notebook as a way to prepare new posts on the website I've chosen Zen-Ipython theme as a starting point.

I was wondering if there is a way to add new "symbols" on the sidebar since note every character in the FontAwsome set seems to be present. My actual need is to add a referral to my researchgate personal page. I saw that there is no icon in FA for researchgate so I tried to use the "registered" symbol as a temporary substitution but it seems not to be available.

Moreover, I would really like to add also textual link (like categories or whatever) to that sidebar but it seems the the template just want to use symbols from a restrict set of FA.

Is there anyone who can help me sorting this out? Maybe @damianavila ... ?

Thank you very much for your attention!

[Kwpolska]

You would need to modify the navbar template. You could make it so if icon is empty, it would instead display the link text. This might need some styling changes.

[mscipio]

Thanks for your kind answer! Could you please tell me where I can find the template file related to the navbar ... I have already though of such a solution but I haven't been able yet to find the right file to make the needed changes ...

[Kwpolska]

https://github.com/getnikola/nikola-themes/blob/master/v7/zen-ipython/templates/arusahni_helper.tmpl#L124

[mscipio]

Yes I am sorry, I found out where to edit but I forgot to add my answer here ... my bad! The solution I applied as for now is a bit tricky but it partially do its job. The problem is that the images I added as new icons, not being part of the FA set, are not responsive and so if I set theme to be as beautiful as I can in the desktop visualization the disappear ones i stretch the windows size in order to simulate a mobile version of the website. I will go on working on this ... obviously any suggestion is more than welcome!

[Kwpolska]

Note sure I understand your message, but try SVG icons?

[mscipio]

I try to insert svg images inside the /image folder but when I try to launch the command "nikola build -a" I get the following error:

.  scale_images:output/ResearchGate.svg
########################################
TaskError - taskid:scale_images:output/ResearchGate.svg
PythonAction Error
Traceback (most recent call last):
  File "/usr/local/lib/python3.4/dist-packages/doit/action.py", line 383, in execute
    returned_value = self.py_callable(*self.args, **kwargs)
  File "/usr/local/lib/python3.4/dist-packages/nikola/plugins/task/scale_images.py", line 74, in process_image
    self.resize_image(src, dst, self.kw['max_image_size'], False, preserve_exif_data=self.kw['preserve_exif_data'])
  File "/usr/local/lib/python3.4/dist-packages/nikola/image_processing.py", line 58, in resize_image
    self.resize_svg(src, dst, max_size, bigger_panoramas)
  File "/usr/local/lib/python3.4/dist-packages/nikola/image_processing.py", line 110, in resize_svg
    tree = lxml.etree.XML(xml)
  File "src/lxml/lxml.etree.pyx", line 3192, in lxml.etree.XML (src/lxml/lxml.etree.c:77450)
  File "src/lxml/parser.pxi", line 1814, in lxml.etree._parseMemoryDocument (src/lxml/lxml.etree.c:116435)
ValueError: Unicode strings with encoding declaration are not supported. Please use bytes input or XML fragments without declaration.

[Kwpolska]

That bug is fixed in master, and we’d recommend putting that in files/ instead of images/ anyway.

[mscipio]

What do you mean with "in master"? And then, what it seems to me is that, with no respect of the folder I put he files in (/images, / files, or whatever), the "build" command generate an "/output" folder that is deployed in the master branch of my github repository where all those files are not in such folders but just directly inside the root one.

I believe you can access my repository with this link https://github.com/mscipio/mscipio.github.io (i think it is open access) and the website (to have a taste of my "problem" with sidebar's icons) with this other http://mscipio.github.io/

[Kwpolska]

in master → when using the development version of Nikola (the master branch of getnikola/nikola on GitHub). A release is scheduled for Friday though.

The files in /images end up in /images, unless you delete the relevant config setting (it defaults to / but new sites are set to /images). For the new behavior, use:

IMAGE_FOLDERS = {'images': 'images'}

Images in that directory are also rescaled.

As for files/ — yes, they end up in the site root, and that is the point (don’t put files in output/ yourself, they will be considered orphans, meaning they might just get deleted when you run nikola check -f --clean-files)

---

On my end, your site looks fine (I had to enable unsafe resources because HTTPS Everywhere). On mobile, it breaks because of the max-width: 100%; property. (try max-width: none; and a SVG that can be scaled with the font size) Also, your target="_blank" is broken.

[mscipio]

Hi! Thank again for your kind help!

I am not really great in developing this kind of website so I have to ask you a few addition to your previous message:

The files in /images end up in /images, unless you delete the relevant config setting (it defaults to / but new sites are set to /images). For the new behavior, use:

IMAGE_FOLDERS = {'images': 'images'}

Where do I have to set this parameter? It isn't in the conf.py file so maybe somewhere else?

I had to enable unsafe resources because HTTPS Everywhere

Is there anything I can do to change this?

try max-width: none;

this attribute that causes problems is related to what? Images in the sidebar? Because I think this is the only one I may have changed from deafult ...

SVG that can be scaled with the font size

I still don't get how to do it but I think I should do one step at time and first to try to understand how to deploy svg images without causing error in building the website!

target="_blank" is broken

It seems fine to me ... why did you say it is broken?

[Kwpolska]

Where do I have to set this parameter? It isn't in the conf.py file so maybe somewhere else?

It is in conf.py. If it isn’t, try searching again (IMAGE_FOLDERS instead of the full path). If it’s still not there, just add it (it means you created your config file on an older version and the default kicks in)

I had to enable unsafe resources because HTTPS Everywhere Is there anything I can do to change this?

use https links everywhere, including font awesome CSS

this attribute that causes problems is related to what? Images in the sidebar? Because I think this is the only one I may have changed from deafult ...

sidebar images on mobile don’t appear with max-width set to 100% (current/default)

target="_blank" is broken

It was broken yesterday (leaked into title)

[mscipio]

As soon as I can I will try inserting the IMAGE_FOLDER tag into conf.py (since it is not there) and see if it works! Then I will test the website on my smartphone to try to understand the problem related to max_width. Today I played a bit with the svg source but without any luck ... I will go back on it as soon as I have a few spare time! ^^

P.S. I saw the problem with target: _blank: it was actually broken on one of the sidebar links and I fixed it today

[mscipio]

At the end I decided to redesign my own icon set and drop off the font awesome set. Much more flexibility and just one syntax for everything I want to add to the sidebar now and in the future. I also add a few styling touches to the index.tmpl (just a welcome message, indeed! ^^) and I think I am good to start adding posts to this blog instead of just working on its "looks"!

Thank you very much for your help @Kwpolska

[Kwpolska]

You’re welcome!