mirror of
https://github.com/Lissy93/dashy.git
synced 2025-07-24 14:15:50 +02:00
✨ Adds option for page-specific custom styling
This commit is contained in:
parent
1aecf32466
commit
6bf0ecba34
@ -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.
|
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
|
### 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`).
|
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`).
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="dashy" :style="topLevelStyleModifications">
|
<div id="dashy" :style="topLevelStyleModifications" :class="subPageClassName">
|
||||||
<EditModeTopBanner v-if="isEditMode" />
|
<EditModeTopBanner v-if="isEditMode" />
|
||||||
<LoadingScreen :isLoading="isLoading" v-if="shouldShowSplash" />
|
<LoadingScreen :isLoading="isLoading" v-if="shouldShowSplash" />
|
||||||
<Header :pageInfo="pageInfo" />
|
<Header :pageInfo="pageInfo" />
|
||||||
@ -72,6 +72,10 @@ export default {
|
|||||||
isEditMode() {
|
isEditMode() {
|
||||||
return this.$store.state.editMode;
|
return this.$store.state.editMode;
|
||||||
},
|
},
|
||||||
|
subPageClassName() {
|
||||||
|
const currentSubPage = this.$store.state.currentConfigInfo;
|
||||||
|
return (currentSubPage && currentSubPage.pageId) ? currentSubPage.pageId : '';
|
||||||
|
},
|
||||||
topLevelStyleModifications() {
|
topLevelStyleModifications() {
|
||||||
const vc = this.visibleComponents;
|
const vc = this.visibleComponents;
|
||||||
if (!vc.footer && !vc.pageTitle) {
|
if (!vc.footer && !vc.pageTitle) {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user