How to change distance between social links and hover fields (like search etc.) « Support Forum | Kriesi.at

Support Forum » Corona

How to change distance between social links and hover fields (like search etc.)

16 posts from 4 voices

Started 1 year ago by colorit2
Latest reply from Devin
This topic is resolved

Tags:

colorit2
Member

Hi,

how can I change the distance between the social links, like the search icon for example, and their items appearing when hovering over them:

http://i39.tinypic.com/dgl9wy.jpg

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.

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 ==> the distance is to large, see screenshot.

Thanks.

Posted 1 year ago #
colorit2
Member

Anyone an idea please?

Posted 1 year ago #
colorit2
Member

still not resolved, support please?

Posted 1 year ago #
colorit2
Member

I need this very urgent, please any idea?
If my English is too bad to understand, please see the screenshot with descriptions in it.

Thanks.

Posted 1 year ago #
Devin
Moderator

Hi colorit2,

Have you made in css modifcations already? The base theme files have the hover effects touching the upper menu area already.

See: http://www.kriesi.at/themes/corona/

Posted 1 year ago #
colorit2
Member

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.

But I haven't found neither in my custom.css nor in the minimal.css anything, where to change

a) the margin/padding (?) for these tooltips (?)

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:

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.

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?

Thanks.

Posted 1 year ago #

Devin
Moderator

Hi colorit2,

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.

You can try:

.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 {}

These are all in your style.css between lines ~436 and ~522.

Posted 1 year ago #

colorit2
Member

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:

http://i39.tinypic.com/dgl9wy.jpg

That's especially important, because as long as it is like now, nobody can type in any search :-(

My site is here:
http://tinyurl.com/7vtuj3j
It's not yet ready, but you can see the social icons at the top.

Thanks.

Posted 1 year ago #
Kriesi
Key Master
For the general hover icons modify the margin top value:
```
body .avia_tooltip {
margin: -23px 0 0 -84px;
}
```
for the search field modify the tooltip_search_site classes margin top value
```
body .tooltip_search_site {
margin: -20px 0 0 -160px;
}
```
Posted 1 year ago #
colorit2
Member

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.

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?

Here is mine:
http://tinyurl.com/7vtuj3j

Thanks

Posted 1 year ago #
Dude
Dude
Hey!

Open up js/avia.js and search for following code:
```
start: 30,
			active: 20,
			end: 30
```
You can adjust the activate parameter - this should affect the tooltip behaviour and solve your issue.

Best regards,
Peter
Posted 1 year ago #
colorit2
Member

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.

If you look at the demo theme http://www.kriesi.at/themes/corona/ then I noticed, that

a) there the searchfield has a little arrow, which mine has not? Perhaps out of view because of some parameters (margins)?

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 ...

I'm not so familiar with PHP and JS etc, so I can't find it out ...

Posted 1 year ago #

Kriesi
Key Master

Hm probably one of the many modifications you made messed up with the field.

please try to change

body .tooltip_search_site {
margin: -20px 0 0 -160px;
}

body .tooltip_search_site {
margin: -36px 0 0 -160px;
padding-top: 11px;
}

Posted 1 year ago #

colorit2
Member

Thanks, Kriesi, this change causes a "jumping" of the searchfield ...

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?

Which file and and code is responsible, so that the search tooltip "stays visible" when the cursor moves on it?

Posted 1 year ago #
colorit2
Member

puh, I got it ..., it's such a small error, that causes such a problem ;-)

The responsible code for this whole problem is in the style.css:

.avia_tooltip { background: url("images/shared/arrow_up.png") no-repeat scroll 80px top transparent; margin: 0 0 0 -84px; padding: 10px 0 0;
position: absolute; text-align: center; width: 180px; z-index: 1000; font-size: 11px; top:0; left:-9999px; }

and there - for some reasons, don't know anymore - I have changed the part

padding: 10px 0 0;

to

padding: -10px 0 0;

So the little arrow is not shown and therefor when you move down your mouse, the tooltip disappears ... why ever ...

- - - - - - - - - -

Solution:

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:

.boxed #wrap_all { border-color: #A0918A; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); margin: 30px auto; border-color: #AAAAAA #AAAAAA -moz-use-text-color; border-style: solid solid none; border-width: 1px 1px medium; box-shadow: 0 8px 8px 0 #202020; }
body .avia_tooltip { margin: -23px 0 0 -84px; }
body .tooltip_search_site { margin: -36px 0 0 -160px; padding-top: 11 px; }

Thanks a lot, Kriesi, for your patience, but now it works like a charm :-)

Posted 1 year ago #
Devin
Moderator

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.

Posted 1 year ago #