Artful theme: Headers all too big


(Roger Moen) #1

Hi all,

I’m new to RapidWeaver. A bit overwhelmed. Just getting started, and I chose the Artful theme from RapidWeaver 8.

I’m trying to reduce the size of the headers - the font size is so big - can’t see where to do it?

The website is summitcountypianoclub.org - very simple so far, not much content.

For example, on that site above, I’d like the text " Summit County Piano Club Colorado USA" to be much smaller.

Thanks in advance!

Roger


(David) #2

There might be controls in the theme for these, but as I have not yet updated to RW8, I don’t know. If they do exist, it’s better (and easier) to change them within the theme settings.

This should work for the banner headers:

.album-title, .h1, h1 {
font-size: 2.5rem;
}

and this for the side-bar header

.h2, .photo-background .photo-navigation .photo-title, h2 {
font-size: 2rem;
}

and this for the quote:

.blockquote {
font-size: 28px;
}

Place them in the CSS window in Settings for site wide, or in the Page Inspector for individual pages.

If there is any problem with any of them, you can also add !important; like so:

.blockquote {
font-size: 28px !important;
}

On that one, you might need to remove the dot before blockquote, like this:

blockquote {
font-size: 28px !important;
}

Change the font sizes as needed.


(Roger Moen) #3

Wow - thanks for the quick reply. Unfortunately, I’m at the RapidWeaver kindergarten level here, and I’m thinking you’re in RapidWeaver graduate school… can you break that down a bit (simplify) for me?

(I used to be a computer programmer, so hopefully I’ll “get it”)


(David) #4

They’re CSS snippets. Paste them into either the CSS window in the Code window in Settings to effect pages site wide, or in the Page Inspector CSS Code window for individual pages.

If you have a specific question I’d be happy answer, but not sure what your questions is.


(Roger Moen) #5

OK, that worked great - thank you! The website looks better already.

Now, on the home page, how would I reduce the vertical space, between the " Summit County Piano Club Colorado USA A friendly group of music lovers of all musical abilities" portion at the top, and the next section below it?


(Roger Moen) #6

So, in your first reply, you said to use this for the banner headers…

.album-title, .h1, h1 {
font-size: 2.5rem;
}

I’m trying to understand the elements of that code fragment.

  1. .album-title seems clear, but how did you know that was the correct term?
  2. I remember H1 H2 H3 etc from my old HTML days, but what’s .h1 vs h1?
  3. font-size: 2.5rem appears to control the font size - but I’m not familiar with “2.5rem”?

Thanks for the help,

Roger


(David) #7
  1. You can find the elements by using the Page Inspector in your browser. You can also modify the CSS in the Inspector to see what works (or doesn’t), and then base your CSS snippet to paste into RW the CSS code that worked. Here is a link to a video on using the Page Inspector in Safari:
  1. Google “CSS” for info on CSS, elements, selectors etc. Lot’s of great info out there about CSS. Better than I could explain here, and a big enough subject to require a bit of time to get familiar with.

  2. rem and em are used for font size, as well as px. Google them to find out more. Basically they give you smaller increments than pixels.


(David) #8

Now, on the home page, how would I reduce the vertical space, between the " Summit County Piano Club Colorado USA A friendly group of music lovers of all musical abilities" portion at the top, and the next section below it?

This controls the top section space above the divider line:

.pb-5, .py-5 {
padding-bottom: 1.58rem !important;
}

and this controls the bottom space (top of the next section below the divider):

.pt-5, .py-5 {
padding-top: 2.55rem !important;
}

Btw, always use “paste as plain text” in RW when pasting in code or text to avoid also pasting in any formatting from where you copied from.

You might also want to remove the <em> tags around Colorado USA in your Site Title.


(Roger Moen) #9

Thanks so much. You rock. I’ll do some research based on these suggestions.

Roger


(Roger Moen) #10

So good. Thanks again.

Roger


(system) #11

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.