mirror of
https://github.com/Lissy93/dashy.git
synced 2024-09-11 22:27:10 +03: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.
|
||||
|
||||
### 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`).
|
||||
|
@ -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) {
|
||||
|
Loading…
Reference in New Issue
Block a user