Community @ The Turning Gate

Support community for TTG plugins and products.

You are not logged in.

#1 2019-08-23 18:49:23

Rainer Goergen
Member
From: Trier, Germany
Registered: 2016-05-01
Posts: 356
Website

Font awesome icon in top pallet

Hi, I tried it for hours but I found no solution.
How can I place an font awesome icon into the top pallet right?

Rainer

Edit:

One icon I have placed the code in the masthead. I think I have to do so with the second icon with code - algn: right - ?

(Quick search is only placeholder)

Last edited by Rainer Goergen (2019-08-23 19:04:15)

Offline

#2 2019-08-23 21:28:21

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 16,733
Website

Re: Font awesome icon in top pallet

Do you want to replace the search icon or add something new?

replacing the search icon with another icon is easy (it will still open a search window)
Adding an icon will be more complicated, maybe involving jQuery.
or maybe using the social_top hook in phplugins


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#3 2019-08-24 00:08:25

Rainer Goergen
Member
From: Trier, Germany
Registered: 2016-05-01
Posts: 356
Website

Re: Font awesome icon in top pallet

Adding new icon. Button scroll to top, because I changed all to iconic design and top pallet is now enabled.

Rainer

Offline

#4 2019-08-24 00:13:16

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 16,733
Website

Re: Font awesome icon in top pallet

you could probably do that by using the code most people are using and just changing the positioning (bottom and right):

https://ttg-tips-and-tricks.barbeephoto … ght-pages/


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#5 2019-08-24 00:26:07

Rainer Goergen
Member
From: Trier, Germany
Registered: 2016-05-01
Posts: 356
Website

Re: Font awesome icon in top pallet

Tried it, but the icon is in the background of top pallet. Will try it with html in masthead.

Rainer

Offline

#6 2019-08-24 00:31:38

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 16,733
Website

Re: Font awesome icon in top pallet

It’s behind the top pallet?
You could try adding z-index to the css


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#7 2019-08-24 00:57:32

Rainer Goergen
Member
From: Trier, Germany
Registered: 2016-05-01
Posts: 356
Website

Re: Font awesome icon in top pallet

Z-index 5 was the solution.
Once again something learned.

Thanks Rod

Offline

#8 2019-08-24 02:15:14

Rainer Goergen
Member
From: Trier, Germany
Registered: 2016-05-01
Posts: 356
Website

Re: Font awesome icon in top pallet

I don't need it, but I want to know what I have to change, that the arrow up icon is displayed constantly.
It disappears every time when I scroll up. (Edit: fixed, I think cache problem on iPad Safari).
I tried to change my phplugin.php but I didn't find any solution.

Rainer

Last edited by Rainer Goergen (2019-08-24 15:08:20)

Offline

#9 2019-08-24 02:55:11

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 16,733
Website

Re: Font awesome icon in top pallet

the reason it appears as you start to scroll is that's that the script is telling it to do. The css initially sets the button to not be visible (display:none;)

So you can try changing that to display:block;



At any rate, the fading in and out has to do with the second part of the script. it has to do with this section:

if ($(this).scrollTop() > 200) 

that says if scrolling is greater than 200 then the next part of the code executes, the part that fades the button in. Otherwise, if scrolling stays less than 200, the button is faded out.

You can also try eliminating the whole section that deals with the button fading in and out. I'm not positive of the results though as I only know some of the basics of jQuery:

<script>
$(document).ready(function() {
$(".btn-scroll-to-top").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});

</script>

Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#10 2019-08-24 03:04:54

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 16,733
Website

Re: Font awesome icon in top pallet

Another thing:

In your css, you're using bottom: 940px; This will by highly dependent on the size of the browser window.
Use top: 5px; instead
more on positioning: https://www.w3schools.com/css/css_positioning.asp


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#11 2019-08-24 04:56:31

Rainer Goergen
Member
From: Trier, Germany
Registered: 2016-05-01
Posts: 356
Website

Re: Font awesome icon in top pallet

Top 5px - logical worked, thanks.
The other values fade in and out I know.

Now it is late and I will try the other tomorrow.

Rainer

Last edited by Rainer Goergen (2019-08-24 04:58:35)

Offline

#12 2019-08-24 15:09:41

Rainer Goergen
Member
From: Trier, Germany
Registered: 2016-05-01
Posts: 356
Website

Re: Font awesome icon in top pallet

I tried the script of Rod - no function, no button.

Rainer

Offline

#13 2019-08-24 21:28:33

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 16,733
Website

Re: Font awesome icon in top pallet

Well, it was a guess.
I think it looks fine fading in only when needed.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#14 2019-08-24 21:50:08

Rainer Goergen
Member
From: Trier, Germany
Registered: 2016-05-01
Posts: 356
Website

Re: Font awesome icon in top pallet

Yes indeed. It seems you never sleep.
2 weeks work during holiday to change the site to iconic style. I've learnt once more a lot of programming with your help and try and error. At home, I have to upload my custom thumbnails, that's all.
After this maybe some optical corrections. For what? Only for me. Nobody is interested in my website.

Rainer smile

Offline

Board footer

Powered by FluxBB