Adjusting the penscratch theme with CSS

  • Unknown's avatar
    swaldgrave · Member ·

    the blog I need help with is my writing blog/website.

    it currently uses booklite, but I have wanted to switch it over to penscratch for a better visual layout and easier viewing experience. when I was previewing the theme it showed the main body of the page being in the middle, displaying background on either side. but when testing it out on my experimental blog templatethemeblog.wordpress.com it displayed the main body stretching the entire width of my screen.

    additionally, when using the customizer, few parts of the theme change colours. so I can’t do a darker theme without css as those sections of the theme don’t change in the customizer.

    I know that to get the changes I want I must use the CSS option that unlocked along with my premium plan, but I have never tried to write CSS before. Ideally, I would like some guidance on the topic along the lines of:

    a list of the selectors to watch out for in the penscratch theme and recommendations of which selectors are important, and how to bring in the sides and display more background. maybe a css file with the core selectors and notes to what they affect.

    I tried to read the introductory tutorials, but most either went over my head or weren’t helpful towards what I wanted to do.

    ultimately I want a darker theme colouring with centred page content. I am trying to do a complete page redesign, and potentially have the option to tweak some parts of the css to show differently on phones later.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    hallluke · Member ·

    Have you added any widgets into the widget area? The Penscratch theme has two different maximum widths for the desktop view, a skinny one when you have no widgets and a slightly larger one when you make use of the sidebar – perhaps that’s why it’s looking different from the theme demo site. If you want the thinner version just delete or remove all the widgets.

    If you want to customise more than just the background and link colours it would help if you gave a few examples of what you’d want to change. Below you’ll find a few examples to get you started, let me know if you have anything specific you want to achieve.

    The first rule sets the content background, then the main text colour, then the meta link colour:

    .site {
  background: #e5e5e5;
}

body {
  color: #333;
}

.entry-footer a,
.entry-meta a,
.entry-footer a:visited,
.entry-meta a:visited {
  color: #666;
}
  • The topic ‘Adjusting the penscratch theme with CSS’ is closed to new replies.