Colour of cursor and font size

[robertdiab]

Hi everyone,

Really dig the theme. Wondering how I can make the size of the text in the body of posts a touch bigger. And I'd like, if possible, to change the colour of the blinking cursor from pink to blue or something else.

I'm a relative newbie to coding, so I would be extremely grateful if you could be as explicit as possible about the steps. Assume that I know absolutely nothing about CSS, html, or Hugo. (It's a miracle I got my site up and running...!)

Thanks so much,

Robert

[Ben-Chapman]

hey @robertdiab, This should be pretty easy to accomplish.

• Create a new file named style.css in your site directory under the static directory. This should look like <site_directory>/static/style.css
• Paste the following text into this newly created style.css file:

  
  body {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.54;
  }

.logo__cursor { background: #fe5186; }

- To adjust the text size within your posts, you want to adjust the `font-size` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size). Try changing from `1rem` to `2rem` which will display _very_ large body text. If needed you can also adjust the `font-weight` and `line-height` to achieve the look you're going for.

- To adjust the logo cursor colour, adjust the `background` property to the colour you're looking for. You'll need to define this colour as a hex value, so try using an [online color picker tool](https://htmlcolorcodes.com/color-picker/) to find the colour you're looking for. As an example, changing the background value to `#52FF33` will change the cursor colour to bright green.

You can customize most visual elements of this theme by overriding the CSS in your `static.css` file. This will likely be a trial and error process unless you know exactly what you're doing. The best way to get familiar with what's possible is to leverage the developer tools within your browser. [Chrome](https://developers.google.com/web/tools/chrome-devtools) and [Firefox](https://developer.mozilla.org/en-US/docs/Tools) have developer tools built into the browser, which are incredibly powerful and a good way to poke around with the CSS in your site to get the look you're going after.

Good luck!

[robertdiab]

Ben,

You're the best! Thank you so much. Worked perfectly.

It's great to discover your blog. If I can impose on you with one further question: how do you get the rounded edges in your images?

Thanks again!

[Ben-Chapman]

Thanks for the feedback, glad you like the blog :)

Images with rounded edges are already present in this theme, but I adjusted it slightly by adding the following to style.css

img {
    border-radius: 8px;
}

[robertdiab]

Ben,

That is awesome! Thank you again!

[salwinat0r]

Hey @Ben-Chapman. I've been trying to replicate exactly how you mentioned but the changes don't seem to appear on the website. Also, I don't find a file named static.css

[Ben-Chapman]

Hey @Salwyn13, Take another look at the instructions I posted above, I think you may have reversed the name of the directory and the css file. You need to create a directory called static, and within that directory a file called style.css.

You should end up with something like:

<site_directory>
  ├── archetypes
  ├── content
  ├── ...more directories here...
  ├── static
    └── style.css

I hope this helps!

[panr]

Thank you @Ben-Chapman for your commitment and help 🙏