Help Making an External Link More Visible using SINGL Theme

• 

  mdanezahorsky · Member · Mar 4, 2014 at 10:13 pm

  • Copy link
  • Add topic to favorites

  I’ve added a menu to the theme at this address:

  http://www.mdanezahorsky.wordpress.com

  It appears as a white strip across the screen which is perfect as it mirrors the design of the parent site at

  http://www.mdanezahorsky.com

  This menu bears a text hyperlink back to the parent site that the blog is run under which acts as a workaround giving the feeling of an inclusive blog. I’ve gotten feedback that people want the title to be linked back to website as opposed to taking you back to the blog home, I realize this isn’t possible.

  So my question is, is there a way to either

  A. Make the link in the header drop down menu more visible [like Black text over the white header or white text below the white strip?]

  or

  B: In the theme options you can upload external links for social media like the Facebook icon that is currently there. Is there a way to add a custom icon, text, or arrow that could act in the same capacity?

  Brass tax, just want to make it as easy as possible to get back to the parent site and vice verse.

  I appreciate any help, thank you!

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

• 

  hfzrhmn · Member · Mar 4, 2014 at 11:25 pm

  • Copy link

  In the theme options you can upload external links for social media like the Facebook icon that is currently there. Is there a way to add a custom icon, text, or arrow that could act in the same capacity?

  This seems like the best way to go. You will have to make use one of the available social media icons, though. Use one of the icon, but add your own URL, then make sure it shows up on the site.

  Once it’s done, let us here know so we can help modifying it.

• 

  hfzrhmn · Member · Mar 4, 2014 at 11:26 pm

  • Copy link

  As an alternative, I also did the following CSS tweak to show white link underneath the white bar. Try it out if you want to:

  h1.menu-toggle {
  	display: none;
  }
  .main-navigation ul {
  	display: block;
  }
  .main-navigation #menu-item-27 {
  	position: absolute;
  	left: 10px;
  	top: 0;
  }
  .main-navigation #menu-item-27 a {
  	color: #fff;
  }

  The code also hides the toggle button. The downside here is that you can’t add more things into that menu area, it will screw things up. Also the text isn’t exactly that readable (but it can be modified with CSS).

• 

  mdanezahorsky · Member · Mar 4, 2014 at 11:46 pm

  • Copy link

  Thank you for the help!

  I added the external link into the Twitter icon and published it, anyway to change it to text or a uploadable png?

• 

  hfzrhmn · Member · Mar 4, 2014 at 11:48 pm

  • Copy link

  Both should be possible with CSS. I think. Decide what you want and let’s do this.

  (If you want to use PNG, please upload it first to your site and share the URL here).

• 

  mdanezahorsky · Member · Mar 4, 2014 at 11:56 pm

  • Copy link

  In a perfect world I would use the png at:

  http://mdanezahorsky.wordpress.com/?attachment_id=120

  followed by the same phrase: BACK TO THE MAIN SITE

  As The Twitter and Facebook slots are right next to each other.

  but I’ll be happy with whatever is possible, thanks again.

• 

  hfzrhmn · Member · Mar 5, 2014 at 12:27 am

  • Copy link

  Whoa, that image is too big for an icon, so when resized it gets a bit blurry. But no matter. The following CSS will do the magic:

  #social-links-wrapper {
  	width: 50%;
  }
  #social-links-wrapper .twitter-link {
  	width: 100%;
  }
  #social-links-wrapper .twitter-link a {
  	display: block;
  	width: 100%;
  	text-align: left;
  }
  #social-links-wrapper .twitter-link a:hover {
  	background-color: transparent;
  }
  #social-links-wrapper .twitter-link a:before {
  	content: '';
  	background: url('http://mdanezahorsky.files.wordpress.com/2014/03/crest-black.png');
  	width: 24px;
  	height: 24px;
  	display: inline-block;
  	background-size: cover;
  	margin-top: 7px;
  }
  #social-links-wrapper .twitter-link a:after {
  	content: 'Back to the main site';
  	top: -2px;
  	left: 32px;
  	position: absolute;
  	font-size: 14px;
  	text-transform: uppercase;
  }
  #social-links-wrapper .twitter-link a:hover:after {
  	color: #999;
  }

  P.S.: If you hover over the link text long enough, a tooltip that says ‘Twitter’ will show up. I still haven’t found out how to hide it. Perhaps others here can help.

• 

  mdanezahorsky · Member · Mar 5, 2014 at 12:40 am

  • Copy link

  This is wonderful, thank you! Is there anyway to edit the size of the text?

• 

  mdanezahorsky · Member · Mar 5, 2014 at 12:44 am

  • Copy link

  Sorry, never mind, just saw what I was looking for!