Adding Lines to Widget Title

• 

  thebraidedgirl · Member · Nov 24, 2015 at 8:59 pm

  • Copy link
  • Add topic to favorites

  The blog i need help with is http://www.thebraidedgirl.com

  I want to add lines on either side of the widget title.
  It would look something like this:
  —— WIDGET TITLE ——

  The standard theme only comes with a line after the title – i want de line before and after the title. I would also like to change the color of the line. The color should be #F7AABE.

  Thank you so much for your help – i appreciate!

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Nov 25, 2015 at 8:30 pm

  • Copy link

  Hi there, first off on all of your font-family declarations, replace the space between sans and serif with a dash since that is the actual font name (with the dash).

  Next, change your .widget-title CSS rule to show what is below and then add the second and third rule to your custom CSS.

  .widget-title {
    position: relative;
    display: inline-block;
    transform: translateX(-50%);
    margin-left: 50%;
    overflow: visible;
    text-indent: 0.35em;
  }
  
  .widget-title:before {
    position: absolute;
    box-sizing: content-box;
    display: block;
    content: "20";
    padding: 0 0.5em;
    width: 100%;
    height: 100%;
    top: 0;
    left: -0.5em;
    background: white;
    z-index: -1;
  }
  
  .widget-title:after {
    border-color: #f7aabe;
    position: absolute;
    width: 100em;
    left: -50em;
    z-index: -2;
  }

• 

  thesacredpath · Member · Nov 25, 2015 at 8:34 pm

  • Copy link

  Oops, I forgot something on the first rule.

  widget-title {
    position: relative;
    display: inline-block;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    margin-left: 50%;
    overflow: visible;
    text-indent: 0.35em;
  }

• 

  thebraidedgirl · Member · Nov 28, 2015 at 8:07 am

  • Copy link

  it worked – thank you so much! :-)

• 

  thesacredpath · Member · Nov 30, 2015 at 7:04 pm

  • Copy link

  You are welcome.

• 

  phokaia · Member · Dec 4, 2015 at 7:27 pm

  • Copy link

  yeahh very good .. i was try .. thank you MR. @thesacredpath