Added Customizing CSS documentation

2024-11-14 23:11:03 +00:00 · 2020-02-13 14:36:24 -05:00 · 2020-02-13 14:36:24 -05:00 · dbaf5dbd75
commit dbaf5dbd75
parent 2ce661d544
1 changed files with 102 additions and 0 deletions
--- a/writer/customize.md
+++ b/writer/customize.md
@ -0,0 +1,102 @@
+# Customizing CSS
+
+If you can write CSS, you can customize the appearance of your WriteFreely blog.
+
+<!--more-->
+
+## Getting Started
+
+All you need to do is go to the _Customize_ settings of your blog. Scroll down to "Custom CSS" and customize your blog from there.
+
+The following stylesheet shows a few basic selectors you'll need in order to customize certain elements. In the BASICS section, just grab the selectors (e.g. ```#blog-title a:hover```) for your stylesheet — the properties are only there to illustrate what you can do.
+
+You should copy entire sections in the RECIPES section verbatim, as each is a complete customization you might want to make, like centering an image.
+
+```CSS
+/*
+
+    BASICS
+    Use the following CSS rules to change the elements you're trying to customize.
+
+*/
+
+body {
+    background-color: #efefef;
+}
+
+/* Blog header on index and post pages */
+#blog-title a {
+    color: #fff;
+    background-color: #7a629d;
+}
+#blog-title a:hover {
+    color: #eee;
+    background-color: #7a629d;
+}
+
+/* Blog header on post pages ONLY */
+body#post #blog-title a {
+    padding: 4px 8px;
+}
+
+/* Blog description (underneath title) on index page */
+header p.description {
+    font-style: italic;
+}
+
+/* Post titles on blog index */
+.post-title {
+    font-weight: normal;
+}
+.post-title a.u-url:link, .post-title a.u-url:visited {
+    color: blue;
+}
+
+/* "Read more..." links */
+body#collection a.read-more {
+    text-decoration: underline;
+}
+
+/* Links inside blog posts */
+article p a {
+    color: #444;
+    text-decoration: none;
+    border-bottom: 2px solid orangered;
+}
+article p a:hover {
+    background-color: orangered;
+    color: white;
+    text-decoration: none;
+}
+
+/*
+
+    RECIPES
+    These are common patterns you may want to use on your blog.
+
+*/
+
+/* Center images */
+img {
+    display: block;
+    margin: 0 auto;
+}
+
+/* Disable post header fade effect */
+body#post header
+    -moz-opacity: 1;
+    -khtml-opacity: 1;
+    -webkit-opacity: 1;
+    opacity: 1;
+}
+
+/* Hide post views */
+header nav .views {
+    display: none;
+}
+
+```
+
+## Themes
+
+If you want to see how you can customize beyond the basic elements of your blog, you can check out our [Themes blog](https://write.as/themes). Here, you can find custom blogs from the WriteFreely/Write.as community whose themes you can use & remix for your own blog.