Borders around header

• 

  stormsocialmedia · Member · Jan 12, 2017 at 7:31 am

  • Copy link
  • Add topic to favorites

  Hi,

  I posted this query already but not sure if I put it on the right forum.

  I am using Pique theme. On the home page, there are borders around the headers. Is it possible to put the same kind of border around the headers on the other pages?

  Thanks

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

• 

  thesacredpath · Member · Jan 12, 2017 at 8:56 pm

  • Copy link

  Hi, are you talking about the borders on the titles, such as Why do we use… ? If so, add the following at the very bottom of your custom CSS.

  body:not(.home) .entry-title {
  	display: inline-block;
  	position: relative;
  	border-top: 2px solid #fcfbf9;
  	border-left: 2px solid #fcfbf9;
  	border-right: 2px solid #fcfbf9;
  	padding: 0.75rem 1.5rem 0.85rem;
  }
  body:not(.home) .entry-title::before, body:not(.home) .entry-title::after {
  	border-bottom: 2px solid #fcfbf9;
  bottom: 0;
  content: '';
  display: block;
  height: 0;
  position: absolute;
  width: 50px;
  }
  body:not(.home) .entry-title::before {
  	left: 0;
  }
  body:not(.home) .entry-title::after {
  	right: 0;
  }
  body:not(.home) .entry-header {
  	text-align: center;
  }

• 

  stormsocialmedia · Member · Jan 13, 2017 at 7:37 am

  • Copy link

  Thank you so much for this.

  I entered the coding and it has kind of worked however, the bottom right border doesn’t quite line up. I have tried to edit the coding but that just makes the bottom-right border jump around and not sit where I want it to :-)

  Also, the border hasn’t worked on the home page… is this because of the theme?

  Many thanks

• 

  eallas · Member · Jan 14, 2017 at 3:31 am

  • Copy link

  Howdy stormsocialmedia!

  Chiming in to help out in fixing the issue! I created a fix for the border issue; however, I don’t believe it’s the best way but it works for now!

  Replace this code:

  body:not(.home) .entry-title::before {
  	left: 0;
  }
  body:not(.home) .entry-title::after {
  	right: 0;

  With this code:

  body:not(.home) .entry-title::before {
  	left:0;
  	top:61px;
  }
  body:not(.home) .entry-title::after {
  	right:0;
  	top: 45px;
  }

  Also, the border hasn’t worked on the home page… is this because of the theme?

  The border doesn’t work on the homepage because of the :not(.home) portion of the code. You can attempt to remove it from the code and see if it works on the homepage well.

• 

  stormsocialmedia · Member · Jan 14, 2017 at 1:52 pm

  • Copy link

  It worked!! Thank you so much for this, really appreciate the help :-)

• 

  eallas · Member · Jan 14, 2017 at 2:39 pm

  • Copy link

  You’re very welcome! Let us know if you need anything else!

• 

  stormsocialmedia · Member · Jan 18, 2017 at 11:57 am

  • Copy link

  Hi,

  Just had a look at my site and the borders have worked perfectly on every page, except one. the page I am having problems with is called Social Media Content – Management and Maintenance. This page title goes into 2 lines, so the border hasn’t lined up properly. Do I need to give a separate code for this?

  Thanks

• 

  eallas · Member · Jan 19, 2017 at 4:03 am

  • Copy link

  Hi Again!

  Yes, you will need a separate code. This one should do the trick!

  body.page-id-86 .entry-title::before {
  	left:0;
  	top:99px;
  }
  body.page-id-86 .entry-title::after {
  	right:0;
  	top: 83px;
  }

  This code is meant just for that page.

• 

  stormsocialmedia · Member · Jan 24, 2017 at 12:00 pm

  • Copy link

  Thank you so much, this worked perfectly!

• 

  eallas · Member · Jan 24, 2017 at 1:23 pm

  • Copy link

  You’re very welcome! Let us know if any other pages are affected in the future.