Recipe box

mynths · Member · Jan 5, 2016 at 8:05 am
Copy link

Add topic to favorites
Hello!

I was wondering if you could help me make the title of the recipe box bigger. I’m using this code:

.jetpack-recipe, .recipe {
background-image: none;
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
font-size: 100%;
}

.jetpack-recipe, .recipe {
font-family: “tinos-1”, “tinos-2”, “tinos”;
}

.entry-meta-footer {
display: none !important;
}

I also have a question about the font. When I change the font of my blog to the original font, the font in the recipe box changes to times new roman or something. How can I avoid this, or get the original font (from the blog) in the recipe box?

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jan 6, 2016 at 3:14 am
Copy link
Hi, to make the recipe box title larger, this would be the CSS. Adjust the 30px value as desired. I included a font declaration that sets the font of the recipe title to the same font as the original post titles.
```
h3.jetpack-recipe-title {
    font-family: "Playfair Display",serif;
    font-size: 30px;
}
```
mynths · Member · Jan 13, 2016 at 8:42 pm
Copy link
Thank you so much!

Is it also possible to add a code so I will get the same font in my recipe box (the actual recipe, not the title) as in the rest of my blog? Because when I change from tinos to another font in the code above, nothing happens.
thesacredpath · Member · Jan 14, 2016 at 3:37 am
Copy link
Hi, what you have to do is to use the web inspector to find the actual font stack that is being used so you can use that exact same font. Here would be the change for the above. I included serif at the end just in case the fonts wouldn’t load for some reason.
```
h3.jetpack-recipe-title {
    font-family: "tinos-1","tinos-2","tinos", serif;
    font-size: 25px;
}
```
mynths · Member · Jan 14, 2016 at 3:17 pm
Copy link
Okay thank you! Could you give me a brief explanation of how to use the web inspector?
kathrynwp · Staff · Jan 14, 2016 at 7:05 pm
Copy link
Here are some good posts about using a browser inspector to tweak elements with custom CSS:

An Intro to CSS: Finding CSS Selectors

Intro to CSS: Previewing Changes with the Matched Rule Pane

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

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

No items found.