Webkit Usage

Step 4: Finishing touches

You now have a complete website, visible online. It has both static and dynamic content in all its right places. Despite this, there are still some steps that you can take to make it easier to access and more professional-looking.

Themes

Many aesthetical features of your websites are controlled by an external file called a theme. It is part of the webkit software, and lives in the same server. A theme decides, for example, what kind of font the website is going to use. The Config block in your configuration post contains a line that tells the webkit which theme to use for your website:

<Config>
site:
  title: Research Network
  template: campaign
  theme: research
  [...]
</Config>

You can try editing that line in the configuration post to see which them fits best your website. Currently available themes are:

  1. research: a minimalistic theme developed for the website of the Research Network.
  2. edgeryders: the standard Edgeryders theme see resilience livelihoods website.

If none of the themes fits your needs, talk to the tech team in Edgeryders, they might be able to make one for you depending on their workload. If you feel adventurous, you can also try to develop your own theme: again, talk to the tech team if you wish to do so.

Polish

The webkit is made to be used by people who are not web development professionals. However, for particularly ambitious projects, you might need expert help. An example is the 2020 policy summit’s website (@hugi please insert link here?). Check with your team leader to make the necessary procurement decisions.

That said, you can add some polish yourself. For example

Add a background to a Content block

You can do this by adding a style instruction to your block:

<Content id="long-termism" style="background: #efefef;">

The color #efefef corresponds to a light grey expressed in hex format. This is a website where you can pick colors in hex. You can, however, also express colors in other formats, such as RGB.

Whenever you are using style, you are giving the webkit instructions in a format called CSS, and must observe the proper syntax. Be sure to copy all the ;, : and ", or the website will not work. More on this here.

You can also add an image as a background:

<Content id="long-termism" style="background: url('https://edgeryders.eu/uploads/your-image-file.jpeg') no-repeat; background-size: cover;">

More on this here.

Third-level domain

Your website lives at https://live.edgeryders.eu/12345. That’s fine, but we mostly prefer to add a third-level domain to make the URL easier to remember and more snappy looking: something like https://your-project.edgeryders.eu. Ask @matthias to make one for you, and point it to your website.

All done! Congratulations! :partying_face:

1 Like