Support community for TTG plugins and products.
NOTICE
The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.
This forum is now closed, and exists here as a read-only archive.
You are not logged in.
In case anyone else wants to change this, I did end up changing mine. I added
a {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
}
@media only screen and (max-width: 600px) {
#nav span a:active,
#nav li a:active,
#nav a:active,
#pull li a:active
{
background-color:rgba(255,255,255,.5);
}
}
to my custom.css, and added
<script>
document.addEventListener("touchstart", function() {},false);
</script>
to my ttg_head_end function in my phplugins so that the :active pseudo selector functions on iOS.
True, but then you would have to replace it with some other way of indicating the touch event.
Actually, it appears that the border radius cannot be controlled. From this site, I found:
The reason ... is that -webkit-tap-highlight-color effectively puts a rectangular background, with a 3px, or so, corner radius, over the hyperlink. It also gives the highlight a padding of about 3px.
I hadn't considered that the radius would be a in-built property of the overlay.
I don't claim to be an expert in javascript by any means, but I looked through the scripts and didn't find anything that would explain it either. I also tried inspecting it (simulating a mobile browser) with javascript disabled, and it was still happening.
It loaded quickly for me on my phone (android), but very slow on my desktop. Given that masonry only loads on the desktop, and mobile uses standard, there might be an issue with masonry.
I actually have this:
#nav span a,
#nav span a:hover,
#nav > span:first-child > a,
#nav li a,
#nav li a:hover,
#nav li span,
#nav li li a,
#nav li li span,
#nav > li:first-child > a,
#nav a:hover
{
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
}
in my custom css. I even tried changing those values in the actual navigation.css file to see if the custom css just wasn't taking hold in that case. I can't find anywhere in any of the css files that would be causing the change.
Thanks,
Kyle
Sorry, I should have clarified. Compare the menu when it's inactive:
to when it's being touched:
When it's being touched, it has a border radius that isn't there normally. It is the same effect on the open/close menu button. I have been playing with the selectors for a while, and have tried :hover, :focus, and :active on all the ones I can think of with no result. And I can't seem to find what in the default css is controlling the behavior. Since it is such a minor issue, I am really just more curious about what selector I missed. Thanks.
This is a much cleaner way of doing the same thing. This leaves the original search intact, and just hides the unwanted information, as opposed to overwriting the whole search page. With this function, the search term stays in the search bar, and you get a message for 'no photos found'.
function ttg_block_bottom( $style, $path ) {
if (G_PATH == 'SEARCH') {
echo '
<script>
(function(){
if(document.getElementById("content")!=undefined){
if(document.getElementById("content").innerHTML.indexOf("criteria")>-1){
document.getElementById("content").innerHTML="<p><cite>No photos matched your search criteria</cite></p>";
} else {
document.getElementById("content").style.display="none";
}
}
})();
</script>
';
}
} // END
Hi all,
So I know this is somewhat nitpicky, but at this point I am more curious than anything else. When you touch the menu items on a mobile device (I'm using Android), they show the focus by turning light grey. They also acquire border radii, and I cannot find what selector to use to change that. If anybody has any ideas, I would really appreciate it.
Thanks,
Kyle
I modified my search page to hide the album search using PHPlugins to replace the block. Here is my function if you are interested:
function ttg_block_top( $style, $path ) {
if (G_PATH == 'SEARCH') {
echo '
<div id="primary-content" class="container_12 collapse clearfix">
<div id="search" class="collapse clearfix">
<h2>Search</h2>
<hr />
<form action="./" method="GET">
<input type="text" id="q" name="q" value=""/>
<button type="submit">Search</button>
</form>
</div> <!-- #search -->
</div>
';
return false;
}
return true;
} // END
You can take a look here (try searching for 'Nassau'). I also increased the max width via custom css:
#search {
max-width: 1140px;
}
I can confirm that I am having the same issue with my site (kylelucy.com) regarding the email share link on android.
I had just tried it in Chrome and Firefox. I actually just figured out what it is. I use an ad blocker in both browsers, and for some reason it was picking up on the share icons... I disabled it for my domain, and everything is working again. Thanks for taking a look.
Oh, and the icons do show up in Lightroom.
Hi all,
I just noticed an issue with the Highslide presentation in my galleries; all the sharing icons in the lower right, except the email and permalink icons, are missing. I'm not sure when this started, or what I did to cause it. When inspecting the email compared to the others, I noticed that the email icon has a '::before' line in the code that the others don't, but I'm not sure how to fix the problem.
Thanks!
#nav > span:first-child > a appears to control the first item and #nav span a controls the rest. Using both got all of them. Thanks!
Hi,
I am attempting to give the menu items in the mobile menu square corners. I added the following code to my custom.css file:
@media only screen and (max-width: 600px) {
#nav > li:first-child > a
{
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
}
I am by no means an expert in css, so if anyone could give me a clue what I'm doing wrong, I would really appreciate it. My site is kylelucy.com. Thanks!
I had this problem as well. The file needs to be saved without a byte-order-mark. See the linked thread for details, but try using Notepad++ instead.
http://community.theturninggate.net/top … ge-broken/
Markdown doesn't process inside block-level HTML tags. You will have to use the HTML tags instead.
Note that Markdown formatting syntax is not processed within block-level HTML tags. E.g., you can’t use Markdown-style *emphasis* inside an HTML block.
Source: http://daringfireball.net/projects/markdown/syntax#html
You might also want to try writing the content in a Markdown editor, as opposed to directly in Lightroom. That will let you see the changes as you write it, and before you publish. Matt has some recommendations in the docs.
The screenshot you just posted if from CE4 Gallery, not CE4 Pages.
Glad to help!
If you are having trouble with fonts, you might want to try this:
http://chengyinliu.com/whatfont.html
It will show you what the font-family for the selected text is, as well as what the actual font being displayed it. It works with Google Fonts and Adobe Typekit as well.
You are coming up with some great (and original) ways to use 20/20. Very impressive!
You have some beautiful images. And I really like the design of your site. Great job!
Yeah, its a really useful way to make sure you are seeing the most current version of a page, especially when you are working on it.