Article Title – Css Help

  • Author
    Posts
  • #2916360

    shopdinelive
    Member

    Hello,

    I would like to add a thin black outline for the titles on all the articles in my featured slider like this https://cloudup.com/cbeU9iAjKxM.

    I had someone help me in chat, they gave me a code to do this but it would not save correctly on my site, she said the customizer is stripping a piece out and I need professional help from forum.

    Please help.

    Thank you kindly,
    Jen

    The blog I need help with is shopdinelive.net.

    #2916473

    Hi Jen, there used to be a text-outline CSS we could use for this, but it is long ago depreciated. We can use a text shadow although the results aren’t perfect. Add the following to your custom CSS and see what you think.

    .featured-content .entry-title a {
    	text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
    }

    A second possibility would be to use a standard text shadow, but with a 0 blur setting.

    .featured-content .entry-title a {
    	text-shadow: 3px 3px 0 #000;
    }

    Try them both and see what you think.

    #2916515

    shopdinelive
    Member

    It worked, thank you!

    #2916516

    shopdinelive
    Member

    I really like how it looks, is there a way to add it to all of the article titles and page titles?

    #2916547

    Most certainly. Change the CSS selector from this
    .featured-content .entry-title a
    to this
    .featured-content .entry-title a, .page .entry-title, .single .entry-title, .page-title
    and it will apply to all page and post titles. I checked everything, but make sure and click around on your site to make sure it doesn’t miss anything or cause issues somewhere.

    #2916565

    shopdinelive
    Member

    Hello, that worked but I don’t want the article names in the “Recent News” on my homepage to have it, their font is too small so it looks really bad with the border so I had to change the css back to how it was before. Is there a way for just the article titles in my featured article slider and the actual whole article title to have it when you click more? I don’t want that border anywhere else around the title names besides those two areas basically. Sorry if this is confusing.

    #2916566

    shopdinelive
    Member

    click read more*

    #2916568

    Ah, use this set of CSS selectors instead, which excludes the change from the home page.
    .featured-content .entry-title a, body:not(.home) .page .entry-title, .single .entry-title, .page-title

    #2916569

    shopdinelive
    Member

    Okay that worked perfectly : ) Is there anyway to do it to all of the page titles as well? Like when you click each tab. Ex: https://shopdinelive.net/shop-dine-live/ – I want the page title for all tabs to have the black border around words like the article do so that the text doesn’t get lost in lighter photos. Thank you for all of your help! Sorry I should have mentioned this before.

    #2916574

    Ok, sorry, I got part of my code a bit backwards. Replace that rule with this.

    .featured-content .entry-title a,body.page:not(.home) .entry-title,.single .entry-title,.page-title {
    	text-shadow:-2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
    }

    #2916578

    shopdinelive
    Member

    That worked perfectly, thank you! :)

    #2916579

    shopdinelive
    Member

    I am all good now, thank you for going back and forth with me and helping me find the right code! I really appreciate it.

    #2916582

    Awesome, and you are welcome! Let us know if you have additional questions.

The topic ‘Article Title – Css Help’ is closed to new replies.