custom color a links within a specific header

• 

  gotmaester · Member · Nov 30, 2017 at 4:35 am

  • Copy link
  • Add topic to favorites

  On most of my pages links inside paragraphs point to wikipedia. However, sometimes I have links that go to a related news story or a website. To differentiate these links I created a special h6 header. An example of one can be found at the bottom of the following page.

  https://ewtn.blog/2017/11/29/ewtn-news-nightly-11-29-17/

  Right now it has a dark pink branding, but I want to make it blue. I have no problem changing the left border, but how would I go about changing the color of the link inside h6 header?

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

• 

  shubhamgmath · Member · Nov 30, 2017 at 1:08 pm

  • Copy link

  Hi

  To change the colour for the links with dark pink branding you can try the below code as you have created h6 header for the links so if we use this code it will help us to give blue colour all the links under h6 tag.

  h6 a {
      color: blue;
  }

  And if you want to change the colour of borders also then you have to change the piece of code

  h6 {
      font-weight: 100;
      text-transform: initial;
      line-height: 1.2;
      letter-spacing: 0;
      text-align: left;
      font-style: normal;
      display: block;
      color: #000;
      background: #f9f9f9;
      padding: 15px 20px;
      margin: 35px 0;
      border-left: 12px solid #ff706c;
      border-right: 2px solid #ff706c;
      -moz-box-shadow: 2px 2px 15px #ccc;
      -webkit-box-shadow: 2px 2px 15px #ccc;
      box-shadow: 2px 2px 15px #ccc;
  }

  Change this h6 code to the code given below:

  h6 {
      font-weight: 100;
      text-transform: initial;
      line-height: 1.2;
      letter-spacing: 0;
      text-align: left;
      font-style: normal;
      display: block;
      color: #000;
      background: #f9f9f9;
      padding: 15px 20px;
      margin: 35px 0;
      border-left: 12px solid blue;
      border-right: 2px solid blue;
      -moz-box-shadow: 2px 2px 15px #ccc;
      -webkit-box-shadow: 2px 2px 15px #ccc;
      box-shadow: 2px 2px 15px #ccc;
  }

  Hope this will solve your problem.

• 

  gotmaester · Member · Nov 30, 2017 at 2:38 pm

  • Copy link

  yea, the changing of the border is simple enough, but I can’t get the following to work

  h6 a {
  color: #0047B1;
  }

• 

  shubhamgmath · Member · Nov 30, 2017 at 2:54 pm

  • Copy link

  Hi

  The code is fine i saw you also added that code if you open your site in incognito it will show you blue.
  This is because your site has a code with css a:visited which is having that dard pink colour, If you want it to be blue even after link is visited then add the code too

  h6 a:visited {
      color: #0047B1;
  }

  This will work.

• 

  gotmaester · Member · Nov 30, 2017 at 3:16 pm

  • Copy link

  perfect. Thanks.

• 

  shubhamgmath · Member · Nov 30, 2017 at 3:18 pm

  • Copy link

  Your Welcome :)