I am attempting to add corner markers to notes based on predefined page boundaries in a CSS file. I am targeting specific note that have a YAML:
TemplateType: PageSetup_8.5X11
I am not having much luck getting corner markers to appear. I verified through the Dev Tools that the proper yaml values is being seen, essentially verify the correct yaml value was present.
If anyone has any ideas on how to implement such a thing please offer guidance. Here is what I have been working with:
( I have also tried a really basic version of trying to get a CSS to place a phrase into a note that has the assigned yaml property but I cannot even get that to happen. So I would assume the CSS is not actually targeting the file based on the yaml or not seeing the yaml value altogether, the CSS has been enabled and Obsidian has been restarted as part of the troubleshooting process, here is the complete code base:
/* Apply styles to notes with the ‘TemplateType: PageSetup_8.5X11’ frontmatter field /
[data-abstract=“TemplateType: PageSetup_8.5X11”] .markdown-preview-view,
[data-abstract*=“TemplateType: PageSetup_8.5X11”] .markdown-source-view {
position: relative;
max-width: 8.5in; /* Letter paper width /
padding: 1in; / Add padding for margins /
margin: 0 auto; / Center the content /
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); / Soft shadow for screen view /
border: 1px solid #ccc; / Optional: Border to show page edge */
}
/* Crosshairs for both screen and source views in light pink /
[data-abstract=“TemplateType: PageSetup_8.5X11”] .markdown-preview-view::before,
[data-abstract*=“TemplateType: PageSetup_8.5X11”] .markdown-source-view::before,
[data-abstract*=“TemplateType: PageSetup_8.5X11”] .markdown-preview-view::after,
[data-abstract*=“TemplateType: PageSetup_8.5X11”] .markdown-source-view::after {
content: ‘’;
position: absolute;
border: 1px solid lightpink; /* Changed to light pink */
width: 10px;
height: 10px;
}
[data-abstract*=“TemplateType: PageSetup_8.5X11”] .markdown-preview-view::before,
[data-abstract*=“TemplateType: PageSetup_8.5X11”] .markdown-source-view::before {
top: 0;
left: 0;
border-right: none;
border-bottom: none;
}
[data-abstract*=“TemplateType: PageSetup_8.5X11”] .markdown-preview-view::after,
[data-abstract*=“TemplateType: PageSetup_8.5X11”] .markdown-source-view::after {
bottom: 0;
right: 0;
border-left: none;
border-top: none;
}
/* Repeat crosshair markers for both screen and source views /
[data-abstract=“TemplateType: PageSetup_8.5X11”] .markdown-preview-view,
[data-abstract*=“TemplateType: PageSetup_8.5X11”] .markdown-source-view {
background-image: repeating-linear-gradient(to bottom,
transparent, transparent 10.5in,
lightpink 10.5in, lightpink 10.52in); /* Changed to light pink */
}
/* Hide crosshairs and extras when printing/exporting to PDF /
@media print {
[data-abstract=“TemplateType: PageSetup_8.5X11”] .markdown-preview-view,
[data-abstract*=“TemplateType: PageSetup_8.5X11”] .markdown-source-view {
box-shadow: none;
border: none;
padding: 0; /* Remove padding to avoid large margins in the PDF /
background-image: none; / Hide crosshair background lines */
}
/* Hide crosshair corner markers when printing /
[data-abstract=“TemplateType: PageSetup_8.5X11”] .markdown-preview-view::before,
[data-abstract*=“TemplateType: PageSetup_8.5X11”] .markdown-preview-view::after,
[data-abstract*=“TemplateType: PageSetup_8.5X11”] .markdown-source-view::before,
[data-abstract*=“TemplateType: PageSetup_8.5X11”] .markdown-source-view::after {
display: none;
}
}
Thanks for taking time to consider my request
Best Regards
-Tim C.