Help Tweaking External Link on SINGL 2014 Theme
-
the amazing people on this forum recently helped me use the theme options and CSS to transform a twitter icon/link into one that takes you back to the parent site that this blog operates under.
I am hoping to achieve two more things. First when you hold the mouse over this link, though it is directed at the parent site, the yellow hover tag still reads twitter.
Second, when you click on it, it opens the path in a new window, I am hoping to have it open in the same window thus adding the feeling that the blog is as contained/adjoined to the parent site as is possible.
The blog is: http://www.mdanezahorsky.wordpress.com
the parent site is: http://www.mdanezahorsky.comThe coding used to link the button is:
#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 {
position: absolute;
left: 0;
content: ”;
background: url(‘http://mdanezahorsky.files.wordpress.com/2014/03/we.png’);
width: 34px;
height: 34px;
display: inline-block;
background-size: cover;
margin-top: 3px;
}#social-links-wrapper .twitter-link a:after {
position: absolute;
left: 25px;
content: ”;
background: url(‘http://mdanezahorsky.files.wordpress.com/2014/03/seal-small.png’);
width: 34px;
height: 34px;
display: inline-block;
background-size: cover;
margin-top: 2px;
}Much obliged to anyone that might be able to help!
The blog I need help with is: (visible only to logged in users)
-
Hi,
I worked on this yesterday and unfortunately those “Twitter” tooltip just won’t be possible to be hidden; they’re baked into the browsers.
Do you mind if we try another alternative? It should be possible to create a link as a Footer text widget, and then use CSS to put it on the top left of the site. If we do this, your second question (opening in current tab/window instead of new tab/window) can be solved as well.
First, you will need to add a text widget on your footer area. Leave the title empty, and for the content, add the following HTML:
<a href="http://www.mdanezahorsky.com/"><span class="arrow-icon"></span> Back to the main site</a>Save it when you’re done, and let us know here so me or others can start working on the CSS.
-
-
Great,
Now you need to:
1) Remove the Twitter link we added earlier, in the theme options.
2) Remove the current custom CSS that you pasted above.
3) Add the following custom CSS:
#text-4 { position: absolute; top: 34px; left: 42px; z-index: 9999; width: 100px; } #text-4 .arrow-icon { display: inline-block; width: 34px; height: 34px; background: url('http://mdanezahorsky.files.wordpress.com/2014/03/we.png'); background-size: cover; } #text-4 a { font-size: 0; } #text-4 a:after { position: absolute; left: 28px; content: ''; background: url('http://mdanezahorsky.files.wordpress.com/2014/03/seal-small.png'); width: 34px; height: 34px; display: inline-block; background-size: cover; }4) Optional: Tweak the HTML text in the text widget. Adding title paparemeter to add your own custom text when hovered, like so:
<a title="Back to the main site" href="http://www.mdanezahorsky.com/"><span class="arrow-icon"></span> Back to the main site</a> -
-
-
I added the double ## but the icons still appear in the footer.
Could we possibly work with the other work around to fix them in place like we did the white text below the header bar? Just a thought, also one thing that’s important that the previous icon CSS did was allow me to add a hover color, is this possible with the current fix? Thank you so much for taking the time.
RE:
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;
font-size:25px; -
or as a possible fix even easier. The drop down menu on the top left of the white header bar already has the link and clean text. The reason I chose not to go with text in the social media bar is because it looks off.
So is there anyway to just always have the menu down? Since it’s white just like the menu it would just look like an extended header. Just a thought. -
@mdanezahorsky, it looks like you have achieved this. I’m seeing the “back to main site” menu option at the top left of your header image and it has a yellow-ish background color on hover.
Is there still something you want to change about this?
-
Yes my hope is to not have the text floating beneath the white strip header but to have include it so it doesn’t look like an add on.
-
If I’m understanding correctly, I think this will do what you want. It moves the link up into the white area at the top.
.main-navigation #menu-item-27 a { color: #000000; font-size: 25px; position: relative; top: -50px; line-height: 25px; padding-top: 15px; } -
This worked EXACTLY liked I had hoped. I just want to say again, truly. I don’t know who all of you people are, but I am really, really grateful for your work. Thank you!
-
You are welcome. Luckily we could sneak that one in on this theme. Some themes it is much more difficult on to keep the responsive nature of the theme intact.
- The topic ‘Help Tweaking External Link on SINGL 2014 Theme’ is closed to new replies.
WordPress.com Forums 