Hyperlink in Footer: Penscratch Theme

• 

  shawnemac · Member · Nov 21, 2015 at 10:48 pm

  • Copy link
  • Add topic to favorites

  Is there a way to add a hyperlinked email address to the footer of a penscratch theme wordpress site?

• 

  thesacredpath · Member · Nov 23, 2015 at 7:41 pm

  • Copy link

  CSS cannot be used to add links or other HTML. It is for styling and positioning of content. You can with the :before and :after pseudo selectors add some text, as you have. On those, you have a huge font size set, which means that the text doesn’t show since it is way too large.

  Also, you have set the font size for the existing footer credits nearly at zero, and you are not allowed to hide or edit the WordPress.com and theme footer credits per our Terms of Service (#11). Even the VIP sites here at WordPress.com (CNN, Time, etc.) are required to keep the footer credits. See the Frequently Asked Questions on the Custom Design support page for more information.

  You are allowed to restyle the footer credits to better fit with your design as long as they remain readable. I would suggest the following changes to what you have.

  First, remove font size on this rule to restore the existing footer credits
  .site-footer
  next, replace these two rules with the following

  .site-info::before {
      content: "604.790.7017 (email visible only to moderators and staff) Vancouver, BC";
      display: block;
      font-size: 120%;
      line-height: 2.5em;
      text-transform: none;
      color: #333;
  }
  .site-info::after {
      content: "© 2015 MacIntyre Appraisals. The contents of this website is informational only and while we hope you find it useful, it should not be a substitute for professional legal, insurance, tax or conservation advice. MacIntyre Appraisals shall not be held responsible for any loss sustained by any person or entity that relies on this information.";
      display: block;
      font-size: 120%;
      line-height: 1.5em;
      text-transform: none;
      color: #333;
      padding-top: 10px;
  }

  then add this one to make the added text full width.

  .site-info {
      display: block;
      max-width: 100% !important;
  }

  See what you think with that and we can go from there.