Highlight the title colour in my recipes

  • Author
    Posts
  • #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.

    #2877715

    jjberg83
    Member

    Hi @tbelloy,

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

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

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

    #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

    #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?

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

    #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?

    #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?

    #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.

    #2877781

    tbelloy
    Member

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

    #2877784

    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!

    #2877790

    jjberg83
    Member

    Thanks the same @tbelloy =)

    #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?

    #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

    #2877797

    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!

    #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

    #2877799

    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).

The topic ‘Highlight the title colour in my recipes’ is closed to new replies.