Font awesome icon in top pallet

Rainer Goergen · 2019-08-23 18:49:23

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)

rod barbee · 2019-08-23 21:28:21

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

Rainer Goergen · 2019-08-24 00:08:25

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

Rainer

rod barbee · 2019-08-24 00:13:16

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/

Rainer Goergen · 2019-08-24 00:26:07

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

Rainer

rod barbee · 2019-08-24 00:31:38

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

Rainer Goergen · 2019-08-24 00:57:32

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

Thanks Rod

Rainer Goergen · 2019-08-24 02:15:14

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)

rod barbee · 2019-08-24 02:55:11

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 barbee · 2019-08-24 03:04:54

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

Rainer Goergen · 2019-08-24 04:56:31

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)

Rainer Goergen · 2019-08-24 15:09:41

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

Rainer

rod barbee · 2019-08-24 21:28:33

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

Rainer Goergen · 2019-08-24 21:50:08

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

Community @ The Turning Gate

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

Font awesome icon in top pallet

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

Re: Font awesome icon in top pallet

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

Re: Font awesome icon in top pallet

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

Re: Font awesome icon in top pallet

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

Re: Font awesome icon in top pallet

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

Re: Font awesome icon in top pallet

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

Re: Font awesome icon in top pallet

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

Re: Font awesome icon in top pallet

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

Re: Font awesome icon in top pallet

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

Re: Font awesome icon in top pallet

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

Re: Font awesome icon in top pallet

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

Re: Font awesome icon in top pallet

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

Re: Font awesome icon in top pallet

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

Re: Font awesome icon in top pallet

Board footer