Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

improve visibility of custom CSS tips #104

Merged
merged 1 commit into from
Jul 19, 2024
Merged

improve visibility of custom CSS tips #104

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/views/settings/edit.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
<%= render "fonts", setting: @setting, allow_remove: false %>
<p><%= link_to "Modify custom fonts", edit_fonts_path %></p>
<p>
<%= form.label :css, (link_to "Custom CSS", "/themes", target: "_blank" )%><br>
<%= form.label :css, (link_to "Custom CSS (click for tips)", "/themes", target: "_blank" )%><br>
<%= form.text_area :css, :style => 'display:block;width:100%;' %>
</p>

Expand Down
12 changes: 6 additions & 6 deletions app/views/static/themes.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<h1>CSS and Themes</h1>
<p>CSS is the way websites control the format and style of their content. Your blog allows you to add custom CSS code to change how it looks. Here are a few themes you can use that demonstrate how to change colors and fonts.
<p>CSS is the way websites control the format and style of their content. Your haven allows you to add custom CSS code to change how it looks. Here are a few themes you can use that demonstrate how to change colors and fonts.

<h2>Default</h2>
<img src="/img/default.png" alt="Dark mode preview" width="360px" style="border: 5px solid #555" />
<p>This theme represents the default colors used in your blog. You can use it as a starting point to change some of the colors on your blog. Each line defines a CSS variable for a color in hex notation.
<img src="/img/default.png" alt="Default mode preview" width="360px" style="border: 5px solid #555" />
<p>This theme represents the default colors used in your Haven. You can use it as a starting point to change some of the colors. Each line defines a CSS variable for a color in hex notation.

<pre>
:root {
Expand Down Expand Up @@ -44,7 +44,7 @@
</pre>

<h2>Terminal</h2>
<img src="/img/terminal.png" alt="Dark mode preview" width="360px" style="border: 5px solid #555" />
<img src="/img/terminal.png" alt="Terminal theme preview" width="360px" style="border: 5px solid #555" />
<p>This theme uses green text on a black background inspired by old computer terminals.
<pre>
:root {
Expand All @@ -64,8 +64,8 @@
</pre>

<h2>Custom Fonts</h2>
<img src="/img/lora.png" alt="Dark mode preview" width="360px" style="border: 5px solid #555" />
<p>This example demonstrates using a custom font. In order to use a custom font you must first upload your font on the Settings page. For this example, we're going to use the <a href="https://fonts.google.com/specimen/Lora">Lora</a> font from Google. Download the <a href="/Lora.ttf">Lora font here</a>.
<img src="/img/lora.png" alt="Lora font preview" width="360px" style="border: 5px solid #555" />
<p>This example demonstrates using a custom font. In order to use a custom font you must first upload your font on the Settings page. For this example, we're going to use the <a href="https://fonts.google.com/specimen/Lora">Lora</a> font from Google. Download the <a href="/Lora.ttf">Lora font here</a>. You should be able to use any <code>.ttf</code> font.

<p>After uploading the font on the settings page, you will be able to reference it by name. In this example, we use the Lora font for all headings. Use the same name for the font as the settings page lists. Do not put the font name in quotes.

Expand Down
Loading