Mountains theme plus Armadillo blog - CSS help needed

RapidWeaver Classic Stacks
1

Hi fellow weavers,
I’d appreciate your kind help in adjusting the Armadillo blog page within a site built with the Mountains theme.
http://cp.rathmair.eu/
http://cp.rathmair.eu/Tipps/ (this is the blog page)

Since I prefer another font than the one in Mountain, I use the Fontstack to pull in an Open Sans font everywhere.

Here is my list of questions:

  1. How can I get the blog entry header in size 32, with Open Sans font, and with a golden background like in the headers I am using on other pages?
  2. I want to lessen the distance between blog entries
  3. Maybe a single line could be a divider between the blog entries, or maybe a soft background color for the blog entry box, so that there is a clear distinction between blog postings
  4. The date format should be dd. month year

That is enough for now. Thanks for any help!
Franz

2

I can’t answer all your questions but I’ve played around with the settings on my blog to try to mimic your header. You need to add custom CSS in the Armadillo Settings>General Settings. The following is as close as I could get to your header but there is less padding around the text. Others might be able to improve on this.

I used a colour meter to get the hex values. You will have more accurate values from the Theme. You will also need to change Helvetica to the correct font name.

.blog-permalink {background-color: #ae8141; color: #2b3136 !important; font-family: Helvetica, open-sans; font-size: 32px;}

The date format can be changed in Settings/Blog Settings.

3

Try adding this CSS to the page:

.blog-entry {
    margin-bottom: 3rem;
}

The default for this theme is 12rem (a Rem = 16px).

For the font family and size try this CSS:

h1.blog-entry-title {
    ffont-family: 'open-sans', serif;
    font-size: 32px;
    background-color: rgb(188, 147, 82);
}

You could add a border to the bottom of the blog entry above"

.blog-entry {
    margin-bottom: 3rem;
    border-bottom: black 1px solid;
}

It looks like it is:

2020-06-18_14-03-40
2020-06-18_14-03-40746×432 32.8 KB

4

Thank you, Bob, for your help! I got it running the way I want it to be.

5

Thank you, Doug, your codes were so helpful for me. And I found a few more codes for getting the letters off from the left border, increase the height of the colored box etc.

I appreciate you taking time to help! Really great!

6

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