313
edits
New Default Web Site Information: Difference between revisions
New Default Web Site Information (view source)
Revision as of 09:08, 5 March 2021
, 09:08, 5 March 2021→Adding new pages to the new site menus
No edit summary |
NeilThomas (talk | contribs) |
||
| Line 83: | Line 83: | ||
</nowiki> | </nowiki> | ||
Note that because the mobile menu is separate from the full screen menu, you can make the menu entries a little more descriptive if you wish. | Note that because the mobile menu is separate from the full screen menu, you can make the menu entries a little more descriptive if you wish. | ||
=== Making changes to the pages=== | |||
Although looking at the new template pages makes the idea of editing them daunting, it really is not that hard. There are just a few classes that are really useful. | |||
{| class="wikitable" | |||
|- | |||
! Class !! What it does | |||
|- | |||
| w3-hide || This is the most useful as it completely removes the element from the display. The space it took up is now available for the following elements | |||
|- | |||
| w3-hide-small || This does what it says on the tin - it hides an element but only on small screens like mobile phones | |||
|- | |||
| w3-hide-medium || As for the above class but just for medium screens like tablets | |||
|- | |||
| w3-hide-large || This hides an element on a large screen | |||
|} | |||
The last three classes can all be used together in any combination. Of course using all three is the same as using just w3-hide. | |||
====Tips==== | |||
When using the above classes always start at the heading or paragraph level to see if it does enough. If it doesn't then add it to the div element above and check again. Doing it this way you end up hiding content rather than inadvertently wrecking the structure of the page. | |||
A word of advice though, this cannot remove the whole sidebar to give its space to the main body of a page - that requires changes to rows and columns. | |||
With creative use of the above classes you can change what is displayed at any screen size. | |||
For example, if a table contains a long description such as: 'Highest Temperature Range' that wraps on small screens you can have two (or even three) variations for each screen size. | |||
Make the table cell contain the following: | |||
<nowiki> | |||
<span class="w3-hide-small w3-hide-medium">Highest Temperature Range</span><span class="w3-hide-large w3-hide-small">Highest Temp. Range</span><span class="w3-hide-medium w3-hide-large">High Temp Range</span> | |||
</nowiki> | |||
It's a lot of content but the page is not uploaded as before so it will have no impact on CumulusMX but will be different on each screen size. | |||
As the new pages are dynamically updated using data tags, it is also possible to put content in more than one place. If you want to have the 'page updated' information at the top of the page and in the footer as well, you can. You can also have it display in one position on large screens and a different position on small screens. | |||
Although the new system looks intimidating it is very much more flexible that the old. | |||
== Creating New Pages == | == Creating New Pages == | ||