Home / GitHub Page

Share your CSS

My CSS is a little complicated, so I created a project on my github. Here is a screenshot:

2 Likes

Very nice style, thank you for sharing it. Besides being a very useable and well thought out design, it is well laid out an just what I needed to learn css syntax

Here’s mine, it looks like github.

* {
    color: #24292e;
    font-family: "sf pro display", "Segoe UI",Helvetica,Arial,sans-serif;
}

h1 {
  margin-top: 0 !important;
  padding-bottom: .3em;
  border-bottom: 1px solid #eaecef;
  font-size: 2em;
  font-weight: 600;
  line-height: 1.25;
}

h2 {
  font-size: 1.5em;
  padding-bottom: .3em;
  border-bottom: 1px solid #eaecef;
  margin-top: 24px;
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.25;
}

h3 {
  font-size: 1.25em;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 16px;
  margin-top: 24px;
}

pre {
  border-radius: 3px;
  background-color: #f6f8fa;
}

a {
  color: #0366d6;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

hr {
  height: .25em;
  padding: 0;
  margin: 24px 0;
  background-color: #e1e4e8;
  border: 0;
}

td {
  padding: 6px 13px;
  border: 1px solid #dfe2e5;
}

tr:nth-child(even) {
  background-color: #f6f8fa;
}

2 Likes

Hi,
My stylesheet to format my messages to the members of my association.

h1, h2, h3, h4, p, a, strong, ul, ol, {}
h1 {text-align: center;}
h1 {color: #008877;}

h2 {text-align: left;
color: #007700;}

h3, h4 {color: #2222FF;}
p {line-height: 200%;
font-family: Courier, monospace;
text-align: left;
}
op {font-size: 120%;
color: #008877;
}

strong {font-size: 120%;}
italic {color: #003333;}
ul {
margin-left: 5%;
color: #003333;
font-family: Courier, monospace;
font-style: italic;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}

sup {
top: -0.5em;
}

sub {
bottom: -0.25em;
}
note {top: -0.5em;
font-style: italic;
color: darkblue;
}
u {
border-bottom: 0.5px, light, currentColor;
}

a:link {
color: darkgreen;
text-decoration: none;
}

a:visited {
text-decoration: none;
}

a:hover {
text-decoration: underline;
font-size: 150%;
}

a:active {
text-decoration: underline;
}
chapo {
font-family: sans-serif;
font: italic arial sans-serif;
font-weight: bold;
}


My userstyle.css and userchrome.css are here:

5 Likes

Are the css for the built in themes available? They would make for a great starting point for changes

1 Like

Maybe it is a good idea to build a repo to collect the Joplin theme?

Does Joplin need to be set to a certain theme in order for your styles to work?

My theme is for Dark mode, but also works for Solarized Dark. I haven’t tried the other ones. At one point I might create another folder for the Light theme, but since I’m not using it the priority for that is very low.

But others have created themes that were designed with the light theme in mind.

1 Like

Thanks. Trying to make it work in windows by dumping them in the .config\joplin-desktop folder. No luck. Great job on the color scheme!

You have to copy just the 2 css files into the profile directory. On macOS I clone the repo and create 2 symlinks, but Windows works a bit different. (I don’t think Windows has folders that start with a dot.)
I don’t know the location of the profile folder on Windows, but it will tell you in Preferences.

Done. It works now. Looks great. So much easier to read everything now!

That’s why I made those small changes. :wink: As you can see, it’s nothing fancy, but it helps with legibility.