Help with a couple of CSS questions

  1. What should I add if what I want is to put a black outline in the text?.
  2. What should I add if what I want is to put the background in black?.

Thanks.

#E8C866 5px solid;

background-image: url(https://c4.wallpaperflare.com/wallpaper/618/16/12/sheet-paper-background-inscription-wallpaper-preview.jpg);

background-repeat: repeat;

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

font-size: 100px;

font-weight: 500;

font-family: Impact, Haettenschweiler, ‘Arial Narrow Bold’, sans-serif;

text-align: center;"

div clas=“container”>

JOURNAL

journal

Could you paste your code verbatim in a codeblock?

Like this,

```
*insert code*
```

1 Like

Sorry, i’m very new here…

<div style="
#E8C866 5px solid;
background-image: url(https://c4.wallpaperflare.com/wallpaper/618/16/12/sheet-paper-background-inscription-wallpaper-preview.jpg 1);
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 100px;
font-weight: 500;
font-family: Impact, Haettenschweiler, ‘Arial Narrow Bold’, sans-serif;
text-align: center;"
div clas=“container”>
JOURNAL </div>

No worries!

For future reference, make sure to double check that your CSS is the same as the one you’re posting. This would show up as invalid CSS due to the first line not having a subject

In addition, “div clas” would be “class”

It wasn’t difficult to fill in the blanks, though!

The original CSS was well written and great to start off with. However, the “class” variable in the div was unnecessary as it didn’t modify the style. But, now it does!

I decided to use pseudo elements. So, I removed the “style” variable from the div and used CSS snippets instead. This will make your markdown look more clean.

Variations

I was confused on your goal based on your first question. Therefore, I made several variations

You can modify the css snippet to change anything you want or change the backdrop!

Here is the css snippet,
journal-div.css (2.9 KB)

Here’s an example markdown file,
Journal DIV CSS.md (512 Bytes)

Implementation

You need to move the snippet file to [YourVaultPath]/.obsidian/snippets

When you’re ready to use it, add this,

<div class="journal-solid-filled-blk">Journal </div>
image

<div class="journal-solid-filled">Journal </div>
image

<div class="journal-mask-filled">Journal </div>
image

<div class="journal-mask-outline">Journal </div>
image

3 Likes

This is fantastic! I’ll keep in mind to check the css.

Thank you so much! :raised_hands::raised_hands::raised_hands:

You’re welcome! Glad I could help

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.