Lissy93/dashy
1
1
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2024-11-22 20:25:13 +03:00
Code Issues Packages Projects Releases Wiki Activity

✨ Adds option for page-specific custom styling

Browse Source
This commit is contained in:
Alicia Sykes 2022-04-30 23:22:02 +01:00
parent 1aecf32466
commit 6bf0ecba34
2 changed files with 15 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
docs/theming.md
View File

@ -69,6 +69,16 @@ Custom CSS can be developed, tested and applied directly through the UI. Althoug
This can be done from the Config menu (spanner icon in the top-right), under the Custom Styles tab. This is then associated with `appConfig.customCss` in local storage. Styles can also be directly applied to this attribute in the config file, but this may get messy very quickly if you have a lot of CSS.
### Page-Specific Styles
If you've got multiple pages within your dashboard, you can choose to target certain styles to specific pages. The top-most element within `<body>` will have a class name specific to the current sub-page. This is usually the page's name, all lowercase, with dashes instead of spaces, but you can easily check this yourself within the dev tools.
For example, if the pages name was "CFT Toolbox", and you wanted to target `.item`s, you would do:
```css
.cft-toolbox .item { border: 4px solid yellow; }
```
### Loading External Stylesheets
The URI of a stylesheet, either local or hosted on a remote CDN can be passed into the config file. The attribute `appConfig.externalStyleSheet` accepts either a string, or an array of strings. You can also pass custom font stylesheets here, they must be in a CSS format (for example, `https://fonts.googleapis.com/css2?family=Cutive+Mono`).

6
src/App.vue
View File

@ -1,5 +1,5 @@
<template>
<div id="dashy" :style="topLevelStyleModifications">
<div id="dashy" :style="topLevelStyleModifications" :class="subPageClassName">
<EditModeTopBanner v-if="isEditMode" />
<LoadingScreen :isLoading="isLoading" v-if="shouldShowSplash" />
<Header :pageInfo="pageInfo" />
@ -72,6 +72,10 @@ export default {
isEditMode() {
return this.$store.state.editMode;
},
subPageClassName() {
const currentSubPage = this.$store.state.currentConfigInfo;
return (currentSubPage && currentSubPage.pageId) ? currentSubPage.pageId : '';
},
topLevelStyleModifications() {
const vc = this.visibleComponents;
if (!vc.footer && !vc.pageTitle) {