web design
Moving WordPress website to a live server
Creating a WP webpage on a local server and when finished moving it to a live server can cause different problems. For example the website I moved to a clients' server, ended up with a great amount of missing parts.
Taggings:
Firstly I made the root div fit the screen by giving it the attribute "height: 100vh;". I then used flexbox to make the root div show the items in a colum by adding "display: flex; flex-direction:column;". The last thing I added was "flex: 1;" to the content div which is equivalent to "flex: 1 1 0;" This means "flex-grow : 1; flex-shrink : 1; flex-basis : 0;". Grow and shrink make the div grow and shrink in same proportion as the window-size. Basis makes the div take up screen as per the screen size available. For example if there are 4 divs with this they will all take up 25% of the available space.
Taggings:
Embed Calendar
When creating Blogs or Websites, it's sometimes helpful to have a calendar on the site. This is often needed to inform certain members of a group or organization about a schedule or certain events. While it can be painful to create a calendar on your own, there are online calendars which can be embedded into a webpage very easily.
Task:
<ul><li>Find an online calendar of your choice.</li>
<li>Learn how to embed this calendar into your webpage.</li>
<li>Try to customize color and size of the calendar.</li></ul>
Taggings:
Easy maintainable static website
A static website shall be built, where all pages use the same layout.
The layout may divide a page into several regions, like: footer, header, a menu, and maybe a region for displaying news.
There may be other parts which all of the pages have in common (e.g. included resources like css, ...)
The goal is that information shared by all pages shall not be duplicated, as this would complicate the maintainance of the website.
Taggings:
Adding generated pages to a website which uses relative paths and a layout template
There is website for a conference using relative paths to reference resources.
The content of existing pages are maintained as XML files (containing HTML formatted text)
There is one main template that defines the basic layout: header, footer, and a menu. Links defined here use relative paths.
This template, an XSL file, is applied to all content pages to transform them into HTML-files. Until now all pages of the website have been located in the same folder.
The challenge:
A foto gallery shall be integrated into the website.
It was generated with an arbitrary tool (e.g. Adobe Lightroom) that organises images and referencing pages in a folder hierarchy of multiple levels.
An example: A foto gallery with an album overview, and two alums: Reception and Dinner
- Album Overview
| . index.html :with a link to each album, thumbnail
L Reception
| . index.html (with thumbnails of all fotos, linked to detailed view)
| L detailed
| | . IMG_001.html
| | . IMG_012.html
| | . IMG_...
| L fotos
| | . IMG_001.jpg
| | . IMG_012.jpg
| | . IMG_...
L Dinner
| . index.html (with thumbnails of all fotos, linked to detailed view)
| L detailed
| | . IMG_011.html
| | . IMG_015.html
| | . IMG_...
| L fotos
| | . IMG_011.jpg
| | . IMG_015.jpg
| | . IMG_...
<ul>
Problems:
<li>These pages should follow the general layout</li>
<li>These pages depend on the generated folder structure, so they can't be moved</li>
<li>When the layout template is applied to the files of the gallery, the links (menu!) defined in there are <em>broken</em> (as they are relative references)</li>
</ul>
Find a way to integrate these pages, so they use the same layout template, and links with relative paths are still working.
Taggings:
