http://www.kriesi.at/support/topic/how-to-change-distance-between-social-links-and-hover-fields-like-search-etc Support Forum - Topic: How to change distance between social links and hover fields (like search etc.) en-US Thu, 23 May 2013 06:36:02 +0000 http://bbpress.org/?v=1.0.2 q http://www.kriesi.at/support/search.php http://www.kriesi.at/support/topic/how-to-change-distance-between-social-links-and-hover-fields-like-search-etc#post-47802 Thu, 22 Mar 2012 17:29:51 +0000 Devin 47802@http://www.kriesi.at/support/ <p>Glad its finally working for you and a big thanks for providing your solution with the mods you've made. I'll mark this as resolved. </p> http://www.kriesi.at/support/topic/how-to-change-distance-between-social-links-and-hover-fields-like-search-etc#post-47761 Thu, 22 Mar 2012 14:47:28 +0000 colorit2 47761@http://www.kriesi.at/support/ <p>puh, I got it ..., it's such a small error, that causes such a problem ;-)</p> <p>The responsible code for this whole problem is in the <strong>style.css:</strong></p> <p><code>.avia_tooltip {<br /> background: url("images/shared/arrow_up.png") no-repeat scroll 80px top transparent;<br /> margin: 0 0 0 -84px;<br /> padding: 10px 0 0;</p> <p>position: absolute;<br /> text-align: center;<br /> width: 180px;<br /> z-index: 1000;<br /> font-size: 11px;<br /> top:0;<br /> left:-9999px;<br /> }</code></p> <p>and there - for some reasons, don't know anymore - I have changed the part </p> <p><code>padding: 10px 0 0;</code></p> <p>to</p> <p><code>padding: -10px 0 0;</code></p> <p><strong>So the little arrow is not shown and therefor when you move down your mouse, the tooltip disappears ... why ever ...</strong></p> <p>- - - - - - - - - - </p> <p><strong>Solution:</strong></p> <p>So if somebody also needs this boxed layout of mine with a margin-top of 30px, then you need to add to your custom.css for a correct display and function of the social icons' tooltips:</p> <p><code>.boxed #wrap_all {<br /> border-color: #A0918A;<br /> box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);<br /> margin: 30px auto;<br /> border-color: #AAAAAA #AAAAAA -moz-use-text-color;<br /> border-style: solid solid none;<br /> border-width: 1px 1px medium;<br /> box-shadow: 0 8px 8px 0 #202020;<br /> }</p> <p>body .avia_tooltip {<br /> margin: -23px 0 0 -84px;<br /> }</p> <p>body .tooltip_search_site {<br /> margin: -36px 0 0 -160px;<br /> padding-top: 11 px;<br /> }</code></p> <p>Thanks a lot, Kriesi, for your patience, but now it works like a charm :-) </p> http://www.kriesi.at/support/topic/how-to-change-distance-between-social-links-and-hover-fields-like-search-etc#post-47748 Thu, 22 Mar 2012 14:04:57 +0000 colorit2 47748@http://www.kriesi.at/support/ <p>Thanks, Kriesi, this change causes a "jumping" of the searchfield ... </p> <p>Where do I find the code for this little arrow on top of (not only) the animated searchfield? I don't know, but in these file(s) I probably need to add a margin-top, too?</p> <p>Which file and and code is responsible, so that the search tooltip "stays visible" when the cursor moves on it? </p> http://www.kriesi.at/support/topic/how-to-change-distance-between-social-links-and-hover-fields-like-search-etc#post-47718 Thu, 22 Mar 2012 11:40:21 +0000 Kriesi 47718@http://www.kriesi.at/support/ <p>Hm probably one of the many modifications you made messed up with the field.</p> <p>please try to change</p> <pre> body .tooltip_search_site { margin: -20px 0 0 -160px; } </pre> <p>to</p> <pre> body .tooltip_search_site { margin: -36px 0 0 -160px; padding-top: 11px; } </pre> http://www.kriesi.at/support/topic/how-to-change-distance-between-social-links-and-hover-fields-like-search-etc#post-47671 Thu, 22 Mar 2012 08:42:09 +0000 colorit2 47671@http://www.kriesi.at/support/ <p>thanks, but unfortunately it doesn't solve this problem. I have now changed in avia.js these values, too, but the search field is disappearing as soon as you move down your cursor from the search icon to the appearing search field.</p> <p>If you look at the demo theme <a href="http://www.kriesi.at/themes/corona/" rel="nofollow">http://www.kriesi.at/themes/corona/</a> then I noticed, that</p> <p>a) there the searchfield has a little arrow, which mine has not? Perhaps out of view because of some parameters (margins)?</p> <p>b) although the search field has now nearly no distance between the search icon, it does not remain visible, when moving the cursor to it, so that you can type in any search words ... </p> <p>I'm not so familiar with PHP and JS etc, so I can't find it out ... </p> http://www.kriesi.at/support/topic/how-to-change-distance-between-social-links-and-hover-fields-like-search-etc#post-47657 Thu, 22 Mar 2012 07:06:28 +0000 Dude 47657@http://www.kriesi.at/support/ <p>Hey! </p> <p> Open up js/avia.js and search for following code:<br /> <pre><code>start: 30, active: 20, end: 30</code></pre> <p>You can adjust the activate parameter - this should affect the tooltip behaviour and solve your issue. </p> <p> Best regards,<br /> Peter </p> http://www.kriesi.at/support/topic/how-to-change-distance-between-social-links-and-hover-fields-like-search-etc#post-47637 Thu, 22 Mar 2012 01:56:24 +0000 colorit2 47637@http://www.kriesi.at/support/ <p>Thank you. The code for the margin works like a charm, but the problem still is, if I move down the cursor from the search icon, to type something into the search field, it disappears, so that I cannot write in it.</p> <p>Where can I change what, so that the search field stays, when moving the cursor from the search icon down to the search field like in the demo theme?</p> <p>Here is mine:<br /> <a href="http://tinyurl.com/7vtuj3j" rel="nofollow">http://tinyurl.com/7vtuj3j</a></p> <p>Thanks </p> http://www.kriesi.at/support/topic/how-to-change-distance-between-social-links-and-hover-fields-like-search-etc#post-47467 Wed, 21 Mar 2012 17:26:11 +0000 Kriesi 47467@http://www.kriesi.at/support/ <p>For the general hover icons modify the margin top value:</p> <pre> body .avia_tooltip { margin: -23px 0 0 -84px; } </pre> <p>for the search field modify the tooltip_search_site classes margin top value</p> <pre> body .tooltip_search_site { margin: -20px 0 0 -160px; } </pre> http://www.kriesi.at/support/topic/how-to-change-distance-between-social-links-and-hover-fields-like-search-etc#post-47199 Tue, 20 Mar 2012 18:11:54 +0000 colorit2 47199@http://www.kriesi.at/support/ <p>thanks, I have tried several, but haven't found the right one, that needs to be adjusted to change the distance between the icons itself and the field, that appears, when hovering over the icon:</p> <p><a href="http://i39.tinypic.com/dgl9wy.jpg" rel="nofollow">http://i39.tinypic.com/dgl9wy.jpg</a></p> <p>That's especially important, because as long as it is like now, nobody can type in any search :-(</p> <p>My site is here:<br /> <a href="http://tinyurl.com/7vtuj3j" rel="nofollow">http://tinyurl.com/7vtuj3j</a><br /> It's not yet ready, but you can see the social icons at the top.</p> <p>Thanks. </p> http://www.kriesi.at/support/topic/how-to-change-distance-between-social-links-and-hover-fields-like-search-etc#post-45501 Fri, 09 Mar 2012 21:38:54 +0000 Devin 45501@http://www.kriesi.at/support/ <p>Hi colorit2,</p> <p>There is a couple of classes you can try to modify, but without seeing your site live I can't tell you exactly which one will do the trick.</p> <p>You can try:<br /> <pre><code>.avia_tooltip {} .avia_tooltip_inner{} .avia_tooltip_content{} .avia_tooltip_inner, .avia_tooltip_content{} .tooltip_search_site{} .tooltip_search_site .avia_tooltip_content{} .tooltip_search_site #searchform{} .tooltip_search_site #s{} #top #searchsubmit, #top #searchsubmit:hover{} #top .tooltip_search_site #searchsubmit, #top .tooltip_search_site #searchsubmit:hover{} #top .tooltip_search_site #searchsubmit:hover {}</code></pre> <p>These are all in your style.css between lines ~436 and ~522. </p> http://www.kriesi.at/support/topic/how-to-change-distance-between-social-links-and-hover-fields-like-search-etc#post-45467 Fri, 09 Mar 2012 19:31:06 +0000 colorit2 45467@http://www.kriesi.at/support/ <p>Yes, as you can see in the screenshot, I have changed the CSS for the box layout. So it might had effect to the social icons, too.</p> <p>But I haven't found neither in my custom.css nor in the minimal.css anything, where to change</p> <p>a) the margin/padding (?) for these tooltips (?)</p> <p>b) where to change especially the searchform tooltip,because at the moment, I can't access the form in the tooltip, because it disappears, when moving the cursor down to it (see screenshot: the distance is there to much, too) and:</p> <p>c) in the demo theme, when clicking on the search icon, the tooltip remains visible, so that I can write in it, but in mine - clicking on the search icon - the tooltip with the searchform does not remain visible.</p> <p>Where can I change what code, so that the distance can get more lower and how to keep the searchform accessible for typing in it?</p> <p>Thanks. </p> http://www.kriesi.at/support/topic/how-to-change-distance-between-social-links-and-hover-fields-like-search-etc#post-45444 Fri, 09 Mar 2012 18:31:34 +0000 Devin 45444@http://www.kriesi.at/support/ <p>Hi colorit2,</p> <p>Have you made in css modifcations already? The base theme files have the hover effects touching the upper menu area already.</p> <p>See: <a href="http://www.kriesi.at/themes/corona/" rel="nofollow">http://www.kriesi.at/themes/corona/</a> </p> http://www.kriesi.at/support/topic/how-to-change-distance-between-social-links-and-hover-fields-like-search-etc#post-45117 Thu, 08 Mar 2012 10:15:34 +0000 colorit2 45117@http://www.kriesi.at/support/ <p>I need this very urgent, please any idea?<br /> If my English is too bad to understand, please see the screenshot with descriptions in it.</p> <p>Thanks. </p> http://www.kriesi.at/support/topic/how-to-change-distance-between-social-links-and-hover-fields-like-search-etc#post-44814 Tue, 06 Mar 2012 06:43:30 +0000 colorit2 44814@http://www.kriesi.at/support/ <p>still not resolved, support please? </p> http://www.kriesi.at/support/topic/how-to-change-distance-between-social-links-and-hover-fields-like-search-etc#post-44295 Thu, 01 Mar 2012 21:37:59 +0000 colorit2 44295@http://www.kriesi.at/support/ <p>Anyone an idea please? </p> http://www.kriesi.at/support/topic/how-to-change-distance-between-social-links-and-hover-fields-like-search-etc#post-44127 Thu, 01 Mar 2012 01:03:53 +0000 colorit2 44127@http://www.kriesi.at/support/ <p>Hi,</p> <p>how can I change the distance between the social links, like the search icon for example, and their items appearing when hovering over them:</p> <p><a href="http://i39.tinypic.com/dgl9wy.jpg" rel="nofollow">http://i39.tinypic.com/dgl9wy.jpg</a></p> <p>I haven't found anything, where to change the CSS (?), so that the hovering items - like the field, where to type in the search - comes more to the top to the small icons.</p> <p>The problem at my site is, that when hovering over the social icons, the search field for example, disappears when moving the mouse down, to type into it ==&gt; the distance is to large, see screenshot.</p> <p>Thanks. </p>