writefreely/docs
2
0
Fork 0
mirror of https://github.com/writefreely/documentation.git synced 2024-11-14 23:11:03 +00:00
Code Issues Releases Wiki Activity

Merge pull request #29 from writefreely/fix-customizing-css

Browse Source 
Fix customizing css guide
This commit is contained in:
Matt Baer 2020-04-22 08:07:53 -04:00 committed by GitHub
commit 9f21d607df
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
writer/customize.md → writer/css.md
View File

@ -2,24 +2,14 @@
If you can write CSS, you can customize the appearance of your WriteFreely blog. If you can write CSS, you can customize the appearance of your WriteFreely blog.
<!--more-->
## Getting Started ## 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. 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. The following stylesheet shows a few basic selectors you'll need in order to customize certain elements. You can just grab the selectors (e.g. `#blog-title a`) 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.
*/
```css
/* Entire page background */
body { body {
background-color: #efefef; background-color: #efefef;
} }
@ -68,14 +58,11 @@ article p a:hover {
color: white; color: white;
text-decoration: none; text-decoration: none;
} }
```
/* Copy these entire sections verbatim, as each is a complete customization you might want to make, like centering an image.
RECIPES
These are common patterns you may want to use on your blog.
*/
```css
/* Center images */ /* Center images */
img { img {
display: block; display: block;
@ -99,4 +86,4 @@ header nav .views {
## Themes ## 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. 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 and remix for your own blog.