Editing a custom theme

Your question is not so easy to answer because nobody here knows the individual programming of the theme. As far as I can see it is based on underscores – a well known base theme for such developments: https://underscores.me

Unfortunately I don’t know what kind of customizations you are looking for. If it’s about padding, you don’t need any plugins. These are individual style specifications that you can store in the Customizer > Additional CSS.

Since underscoreS based themes are custom built and are not subject to periodic updates, you can edit anything within the theme you wish. For example, while Additional CSS is the usual go-to place for CSS overrides, you could directly edit style.css instead. Or alter the template files as desired.

Depending on how extensive the desired changes are, you have 3 general options:
1) edit the current theme if changes are not too extensive.
2) abandon the current theme and start over with a new copy of underscoreS or any other starter theme. You’d have full control over the end result.
3) Switch to a fully developed theme that’s close to what you want and make any minor CSS overrides via Additional CSS.

Thank you both, I appreciate it. Could you please outline how I would go about adding padding to sections on my homepage with additional CSS?

In terms of the 3 general options outlined above … (2) abandon the current theme and start over with a new copy of underscoreS or any other starter theme. You’d have full control over the end result. – How would I go about this? Can I switch it over to a new copy without losing the current layout, or would i have to start again?

Many thanks!

Jono.

Use your browser’s element inspector tool to help you identify what existing CSS is establishing the padding you want to change. You can edit the current padding distance in the tool to see how much is to your liking. Changes here do not persist. To make the new distance persistent, copy the appropriate padding rule and selectors to Additional CSS.

If you’re working on a theme you’ll be responsible for maintaining, such as an underscoreS based theme, you could directly edit the rule where ever it exists in the theme. The inspector tool tells you which file and line number where the rule is.

You’ll likely need to re-establish the layout if you started with a new starter theme. The underscroeS theme when it’s freshly downloaded has virtually zero styling. Go ahead and download a fresh copy from underscores.me. Give it a unique name. Install it and preview it on your site. The point being to visually show just how little styling is initially defined by default.

You can then decide if it’s something you want to tackle or not. At least you’d have an existing theme to use as guidance on how to accomplish certain elements.

Thanks a lot for the info! I will editing the CSS first.

Do you have any guides or other resources that tell me how to do the steps you outlined above? I am new to this side of wordpress so could use all the help I can get!

Best,

Jono

Or, if there is a plug in I can use that will do this?

Jono.

CSS is the realm of themes. Plugins are generally more for adding additional functionality. I could be wrong, but I don’t think there’s any plugin that would help with altering a theme’s CSS. I’ve found a browser’s element inspector tool to be the best aid in customizing CSS.

You could search the web for articles about any specific CSS style rules you’re interested in. Formal tutorials may not be in abundance, but there is documentation and lots of examples to be found to help you out. For example search “CSS padding“.

Also: “Using inspect element”

Thanks for the info here! However, I am still struggling to make this work (I am not a coder).

Question – on this page here https://fortysouth.co.nz/ – are you able to give me a quick run down on how to add padding to the three text elements on the bottom of the page? Any help will be greatly appreciated!

Best, Jono.

Here’s what I would do: I’m using Chrome, the process is similar for other browsers, but the terminology used might vary some. My window is currently 1400px wide. This impacts what CSS I examine. After determining CSS changes at this width, you’ll want to try out different widths to check responsiveness and different CSS at various widths.

I think you wish to decrease the spacing between the 3 section with a light background. If not, the process is similar for other elements so this lesson is still applicable. Changes here can affect other parts of your site. If that’s undesirable, you’ll need to come up with more specific CSS selectors. Hint: the body tag is a good source of classes unique to the current page, such as “page-id-99”.

I started by examining the bottom H2 element with right-click > Inspect. The choice is arbitrary, as long as it’s in one of the sections you want to alter. On the HTML side (left side) of the inspector tool, the current element is highlighted. Starting there move your cursor up the HTML lines, watching what gets highlighted on your page. Highlights are color coded. Elements are blue, margins orange, padding green. Stop moving and hover when you see orange or green spacing you want to alter. Click the related HTML line. The CSS applied to this element will be shown on the right.

I stopped on the div with classes section intro-block-wrap p-large, about 7 lines up. Find the respective padding rule on the CSS side. Such as:

.section.p-large {
    padding: 165px 0;
}

Similar rules that do not apply are struck through. Alter its value to your liking. I went with 72px. Changes here will not persist. For persistence copy the altered rule to the customizer’s Additional CSS section.

The copied rule looks like this:

@media (min-width: 1441px)
.section.p-large {
    padding: 72px 0;
}

However, the media query is missing its curly braces. You need to add them for valid syntax:

@media (min-width: 1441px) {
  .section.p-large {
    padding: 72px 0;
  }
}

Publish the CSS you’ve added. Proceed similarly for other rules you want to alter.