Reduce Apostrophe Theme Header Size

Where is the CSS (or PHP?) that will allow us to significantly shrink the header or masthead?

You could do that with some custom CSS in your child theme, as I see you’ve already set one up. This CSS is in a media query to apply the size change to larger screens only:

@media (min-width: 768px) {
  .site-branding {
     max-height: 200px;
  }
}

You could use similar CSS with other media queries to affect other mobile breakpoints, if you like.

2. APOSTROPHE PLUG-IN SUPPORT — Also it’s important to us to be able to make posts into two columns — there are several plugins for WordPress WYSIWYG editors which make this possible and easy. WILL THESE SORTS OF MULTI-COLUMN PLUGINS WORK IN APOSTROPHE?

Interesting question. While we haven’t tested Apostrophe specifically with this type of plugin, there’s nothing unusual about the theme that should prevent them from working as expected, so I’d encourage you to give it a try.

Thanks Kathryn, I really appreciate your guidance, it’s providing some confidence. I’d be grateful for some more pointers:

1) SOURCES OF INFO? How does the whole WordPress free theme thing work? Is it expected that savvy non-programmers should be able to tweak things? I’d like to “RTM”, but being new to WP, not really sure about this. Maybe that’s not really the intention???

2) BACKGROUND — I have been on Drupal successfully since 2009 with two websites, still in operation, but new Drupal 8 is very corporate-oriented. And the layout is — let’s be polite — a “mishmash of things” (Drupal 8 does not even have much of the layout capability ported yet, so making a typographically sophisticated site still means Drupal 7). So however much I like Drupal (which is a lot) it doesn’t meet my / our very targetted needs right now, unfortunately.

3) IMAGE ADDED — As you will see if you have time to check decisionedge.org, the image is loaded (original image is 1050 X 91 pixels), but showing up much too large. I’d really like to slim it down in the interests of providing good content, not just wasted image real estate.

4) IMAGE + HEADER — It seems that there are several WP elements that work together to deliver the nice responsive header / top of page in WordPress Apostrophe. There is padding and image size ahd header and @media etc. etc. Unfortunately I’m not in a position to be able to hire anyone at this time; I was hoping that this would be easier than alternatives. (And for the record I have done enough programming in my day to be able to perform simple tasks.)

5) YOUR CSS CODE — I did try adding your suggested CSS code for @media in various ways in the child theme (setting max-height: 100px; for example) but the effect did not show up in the live site. I have been able to confirm that I am successfully making changes because if I change some things (e.g. hover color), they work. Any more hints on the way forward? (As you can see I do RTM, thus the “child theme”, but so far with the CSS, not very successful.)

6) GOAL – MAGAZINE OR NEWSPAPER STYLE — Apostrophe seems to provide the possibility of a nice, simple magazine- or newspaper-style layout. I have a strong background from years ago in layout, including using hot wax manual layout, and I really enjoy good layout. I’m fully expecting the move to WP will support this. (Although having read up on the CSS “multi-column” problem, which applies to all publishing platforms, I realize that full drag-and-drop layout control as in traditional overlapping physical paper layouts or via software driven page layouts is likely not yet possible on CSS- and HTML5-based pages, unless you can afford a very big custom job and your website has the three letters “N”, “Y” and “T” in them . . .)

7) SELF-HOSTED / OPEN SOURCE — I note that if WordPress is hostng then you need “WordPress.com Premium” or “WordPress.com Business” in order to be able to customize your CSS — however I see I can make the site background orange via customer CSS — so I’m assuming the CSS restrictions only apply if you are not self-hosting or via an independent ISP?

Super thanks for any additional pointers!

In hope and solidarity,

John

Success! Kathryn, pleased to report the following:

1. Via CSS Stylesheet Editor,

2. Add the following:

@media (min-width: 768px) {
.site-branding {
min-height: 100px !important;
max-height: 100px !important;
padding: 0em !important;
}
}

3. And discovered the design elements via en.support.wordpress.com/custom-design/editing-css/, which shows up via the CSS Stylesheet Editor page. In other words (for others who want to follow this) the browser tools (e.g. Chrome Developer Tools) allow you to highlight exactly the elements in your design that you want to manage — and see the CSS that is driving it — then it’s a simple matter of finding that in your style sheet, and making a change via the child style sheet.

4. OK, the interrelationship of elements can be tricky, but looks like we are done now.

Hi there! Glad you were able to sort out a couple of your questions already. ??

I’m not sure why you had to add the !importants to your code because they weren’t needed in my testing. Generally it’s good to try to avoid !important as much as possible with CSS, because it can cause problems overriding an element later, so just keep that in mind if you try to add more CSS later related to this element and it’s not working. ??

Let me reply to a couple of your earlier questions.

1) SOURCES OF INFO? How does the whole WordPress free theme thing work? Is it expected that savvy non-programmers should be able to tweak things? I’d like to “RTM”, but being new to WP, not really sure about this. Maybe that’s not really the intention???

www.ads-software.com users have different levels of technical skill, and we’re here to guide you in the right direction if you need a hand with customization. Other theme authors may provide no forum support, or limit support to bug fixes, without touching customization questions. Then there are all the wonderful forum volunteers who lend a hand as well. For more complex customization, we sometimes suggest you hire a designer or developer, but in most cases, we can help with smaller tweaks.

7) SELF-HOSTED / OPEN SOURCE — I note that if WordPress is hostng then you need “WordPress.com Premium” or “WordPress.com Business” in order to be able to customize your CSS

Those paid plans only apply when you host your site over at WordPress.com. When you use the software from www.ads-software.com on your own hosting, you can customize your site through a number of means, including a custom CSS plugin or child-theming, which is used when you need to make more major changes beyond what can be done just with CSS.

3. And discovered the design elements via en.support.wordpress.com/custom-design/editing-css/, which shows up via the CSS Stylesheet Editor page.

Yes, that’s a great resource applicable to self-hosted sites running a custom CSS plugin, in addition to sites hosted at WordPress.com!

Learning how to target your site’s CSS is invaluable when making design and layout changes. Here are a few more posts you might find helpful:

https://dailypost.wordpress.com/2013/07/25/css-selectors/

https://dailypost.wordpress.com/2013/06/21/css-intro/

https://dailypost.wordpress.com/2013/08/29/css-matched-rule-pane/

https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

https://thewc.co/articles/view/web-inspector-tutorial

https://cssworkshop.wordpress.com/

And if you decide to restrict your changes to certain screen sizes — as you did above — you can learn more about using media queries that target certain screen sizes here:

https://en.support.wordpress.com/custom-design/custom-css-media-queries/
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
https://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

Good luck in your continuing WordPress adventure! If you need help with anything else, feel free to start a new thread. I’ll mark this one as resolved.

Thanks Kathryn. Your help has been much appreciated. Off to a good start.

Also solved another problem which was quite vexing. It’s important I think that images be properly “lined up” — typically with the top of the paragraph in which they are embedded for example. A lot of themes seem to do this automatically. I found this works:

figure {
margin: .6em 0;
}

Very simple, good result. Don’t know yet what the bigger implications might be.

Is there another way to do it maybe?

Thanks again.

If you want, you could restrict that modification to images within the post/page, by targetting a slightly more specific element:

.entry-content figure {
  margin: .6em 0;
}