Article Title – Css Help

• 

  shopdinelive · Member · Apr 6, 2017 at 7:51 pm

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  thesacredpath · Member · Apr 7, 2017 at 6:59 am

  • Copy link

  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.

• 

  shopdinelive · Member · Apr 7, 2017 at 1:59 pm

  • Copy link

  It worked, thank you!

• 

  shopdinelive · Member · Apr 7, 2017 at 2:00 pm

  • Copy link

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

• 

  thesacredpath · Member · Apr 7, 2017 at 9:03 pm

  • Copy link

  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.

• 

  shopdinelive · Member · Apr 10, 2017 at 1:05 pm

  • Copy link

  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.

• 

  shopdinelive · Member · Apr 10, 2017 at 1:06 pm

  • Copy link

  click read more*

• 

  thesacredpath · Member · Apr 10, 2017 at 7:30 pm

  • Copy link

  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

• 

  shopdinelive · Member · Apr 10, 2017 at 7:52 pm

  • Copy link

  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.

• 

  thesacredpath · Member · Apr 11, 2017 at 4:35 am

  • Copy link

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

• 

  shopdinelive · Member · Apr 11, 2017 at 1:18 pm

  • Copy link

  That worked perfectly, thank you! :)

• 

  shopdinelive · Member · Apr 11, 2017 at 1:18 pm

  • Copy link

  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.

• 

  thesacredpath · Member · Apr 11, 2017 at 8:28 pm

  • Copy link

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