Highlight the title colour in my recipes

Author

Posts
Feb 23, 2017 at 10:19 am #2877579

tbelloy
Member

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 vitalityawesomeness.com.

Feb 23, 2017 at 6:31 pm #2877715

jjberg83
Member

Hi @tbelloy,

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

.jetpack-recipe-title {
color: blue;
}

Feb 23, 2017 at 6:38 pm #2877716

jjberg83
Member

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;
}

Feb 23, 2017 at 6:41 pm #2877717

tbelloy
Member

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

Feb 23, 2017 at 7:00 pm #2877718

jjberg83
Member

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?

Feb 23, 2017 at 7:02 pm #2877719

jjberg83
Member

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;
}

Feb 26, 2017 at 7:54 pm #2877777

tbelloy
Member

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?

Feb 26, 2017 at 7:55 pm #2877778

tbelloy
Member

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?

Feb 27, 2017 at 5:43 am #2877780

jjberg83
Member

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.

Feb 27, 2017 at 9:09 am #2877781

tbelloy
Member

ok great thanks again for your help @jjberg83. have a great day!

Feb 27, 2017 at 1:53 pm #2877784
gemmacevans
Staff
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!
Feb 28, 2017 at 5:42 am #2877790

jjberg83
Member

Thanks the same @tbelloy =)

Mar 1, 2017 at 3:09 pm #2877795

tbelloy
Member

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?

Mar 1, 2017 at 3:18 pm #2877796

tbelloy
Member

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

Mar 1, 2017 at 4:48 pm #2877797
gemmacevans
Staff
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!
Mar 2, 2017 at 5:58 pm #2877798

tbelloy
Member

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

Mar 3, 2017 at 6:39 am #2877799
thesacredpath
Staff
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).
Author

Posts