Highlight the title colour in my recipes

tbelloy · Member · Feb 23, 2017 at 10:19 am
Copy link

Add topic to favorites
Hello,

I have used the recipe format that wordpress suggests which looks great and clean.

Is there a way to highlight the title in that recipe section to another colour?

For example I would like the title in the recipe section (not the post title) to be highlighted in blue, I still want the writing to remain black. https://vitalityawesomeness.com/2017/02/07/peanut-butter-green-protein-smoothie/ Ideally the blue would highlight the blue from the left side of the recipe frame to the write side of the recipe frame.

Thank you

The blog I need help with is: (visible only to logged in users)
jjberg83 · Member · Feb 23, 2017 at 6:31 pm
Copy link
Hi @tbelloy,

Try inserting this CSS in the CSS editor. Adjust the color as needed.

.jetpack-recipe-title {
color: blue;
}
jjberg83 · Member · Feb 23, 2017 at 6:38 pm
Copy link
Btw, if you want to find a custom color and its’ color code, some themes will let you use a tool for this. Go to your wp-admin panel, click Appearance > Customizer > Colors and Backgrounds. If you click on one of the circled colors, a link will appear a bit below the circles called “You can also pick your own color”. Click this and you’ll get to a color chart where you can find the perfect color, and its’ web color code to insert it like I’ve done below:

.jetpack-recipe-title {
color: your new color code here;
}
tbelloy · Member · Feb 23, 2017 at 6:41 pm
Copy link
Hi @jjberg83,

Thanks for your reply. What I was after was to highlight the title of the recipe with a colour, not change the actual title colour.

here is an example I found https://www.popsugar.co.uk/fitness/Harley-Pasternak-Spinach-Smoothie-Recipe-42724273 where the title is highlighted in light grey.

Thanks
Thomas
jjberg83 · Member · Feb 23, 2017 at 7:00 pm
Copy link
I see. Try this instead (I’ve added some padding to the sides of the recipe title box as well):

.jetpack-recipe-title {
background-color: #666;
padding: 0px 10px;
}

Was it more to your liking now?
jjberg83 · Member · Feb 23, 2017 at 7:02 pm
Copy link
If you want it more like the excample from the other page, play around with your padding, and consider making the text white by adding this line:

.jetpack-recipe-title {
background-color: #666;
padding: 0px 10px;
color: #fff;
}
tbelloy · Member · Feb 26, 2017 at 7:54 pm
Copy link
Thanks @jjberg83 that is perfect, it’s exactly what I was trying to do.

Another thing I was looking for was to centre the Facebook frame and the instagram frame in the widget section, is that something you could help me with?
tbelloy · Member · Feb 26, 2017 at 7:55 pm
Copy link
Thanks @jjberg83 that is perfect, it’s exactly what I was trying to do.

Another thing I was looking for was to centre the Facebook frame and the instagram frame in the widget section, is that something you could help me with?
jjberg83 · Member · Feb 27, 2017 at 5:43 am
Copy link
That’s great =)

I wasn’t able to centre the Facebook and Instagram frame, but I’ve tagged this thread staff attention, so hopefully you’ll get a reply for that soon.
tbelloy · Member · Feb 27, 2017 at 9:09 am
Copy link
ok great thanks again for your help @jjberg83. have a great day!
gemmacevans · Member · Feb 27, 2017 at 1:53 pm
Copy link
Hi tbelloy,

Centring the Facebook feed is a little tricky as the element sites inside an iframe (which contains other styles). But the good news is I managed to do so with this CSS:
```
.widget_facebook_likebox {
margin-right: -25px;
}

.fb_iframe_widget {
width: 100%;
left: 15px;
{
```
You can use this to centre the Instagram images:
```
.wpcom-instagram-images {
position: relative;
left: 20px;
}
```
I hope this helps!
jjberg83 · Member · Feb 28, 2017 at 5:42 am
Copy link
Thanks the same @tbelloy =)
tbelloy · Member · Mar 1, 2017 at 3:09 pm
Copy link
Hello and thank you @gemmacevans.

The CSS for Facebook worked perfectly. the one for facebook didn’t seem to work though. Is there something else I need to add?
tbelloy · Member · Mar 1, 2017 at 3:18 pm
Copy link
Is there also a way to do the same with the tweeter feed? so all my social media frames are centred.

The last question I would ask in this feed is whether we could do the same with the last widget “trending on” and have the post photo be centred?

Thanks for your help.
Thomas
gemmacevans · Member · Mar 1, 2017 at 4:48 pm
Copy link
Hi Thomas,

Looks like there was a small mistake in my CSS (closing bracket on .fb_iframe_widget). Sorry about that! Can you replace it with this:
```
.fb_iframe_widget {
width: 100%;
left: 15px;
}
```
Let me know if that helps!
tbelloy · Member · Mar 2, 2017 at 5:58 pm
Copy link
that definitely helped and both instagram and Facebook look great now, thank you @gemmacevans.

Are you able to help me to do the same with twitter?

At the bottom of my widgets I’m using display wordpress posts which I’ve named trending on vitality+awesomeness. are you able to help me centre the post photo and the name of the post just above. I think it will look much better and in line with the rest.

Thank you
thesacredpath · Member · Mar 3, 2017 at 6:39 am
Copy link
Hi Thomas, add the following to your custom CSS for your twitter widget width.
```
#twitter_timeline-3 {
	margin-right: -25px;
}
```
At the bottom of my widgets I’m using display wordpress posts which I’ve named trending on vitality+awesomeness

I’m not seeing that on your site right now. I see a Trending/Popular Posts (Top Posts Widget).

No items found.