Several useful itemsheaderbar slide top

Several useful items in this section
Previous topicNext topic
User avatar

Topic Author
TRUBLITZ
Users
Users
Magic user status: Offline
Posts: 33
Joined: Mar 15th, '18, 13:35
    Windows 8 Chrome

headerbar slide top

Post by TRUBLITZ »

Slide-Top

Add some movement to your style. In this example we will slide the headerbar, and slide it upwards (top).

Demo: - you can peek at my headerbar, i current have this installed.

Open: - Your last loading css file. (not responsive) and add,

CSS

Code: Select all

@keyframes slide-top {
  0% {
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
    opacity: 1;
  }
}
Find:

Code: Select all

.headerbar
After Add:

Code: Select all

    webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;
    animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;
    
save, upload, dump your cache.

Yes, you can add this code to navbar, forumbg, forabg etc.. add just like you added to headerbar.

If you add this to forumbg, add this to your css, it will add some margin bottom to the action bar

Code: Select all

.action-bar {
    margin: 8px 0;
}
Last edited by TRUBLITZ on Apr 10th, '20, 22:08, edited 2 times in total.
My Styles
:guns: I AM THE DESCENDANT OF THOSE WHO REFUSE TO BE RULED :guns:
User avatar

martin
Admin
Admin
Magic user status: Offline
Posts: 4913
Joined: Apr 6th, '14, 14:12
    Linux Chrome

Re: headerbar slide top

Post by martin »

Put it in a ext since 3.1 ppl dont care for edits any more.
Use this to install an ext on your board no more ftp or path making.
Path too install this ext is ext/boardtools/upload
Download is here Make it easy for us to solve your issues
User avatar

Topic Author
TRUBLITZ
Users
Users
Magic user status: Offline
Posts: 33
Joined: Mar 15th, '18, 13:35
    Windows 8 Chrome

Re: headerbar slide top

Post by TRUBLITZ »

Wish i knew how.. Im a 3d modeler and stylist, i dont know jack about php or how to make exts. Wish i did. Feel free :rolling:
User avatar

martin
Admin
Admin
Magic user status: Offline
Posts: 4913
Joined: Apr 6th, '14, 14:12
    Linux Chrome

Re: headerbar slide top

Post by martin »

I have it in ext now.

Take it and rename it.
removed.
User avatar

Topic Author
TRUBLITZ
Users
Users
Magic user status: Offline
Posts: 33
Joined: Mar 15th, '18, 13:35
    Windows 8 Chrome

Re: headerbar slide top

Post by TRUBLITZ »

No shit huh? Nice! No need to rename it thou you did it! Nice job man!
User avatar

martin
Admin
Admin
Magic user status: Offline
Posts: 4913
Joined: Apr 6th, '14, 14:12
    Linux Chrome

Re: headerbar slide top

Post by martin »

Simple one change my name to yours in all files and board links.
User avatar

dmzx
Founder
Founder
Magic user status: Offline
Posts: 6102
Joined: Jan 13th, '14, 20:45
    Android Chrome

Re: headerbar slide top

Post by dmzx »

:thumbup:
User avatar

Wesleyw3zep
Users
Users
Magic user status: Offline
Posts: 3
Joined: Sep 3rd, '20, 19:30
    Windows 7 Chrome

Re: headerbar slide top

Post by Wesleyw3zep »

Which .css file do i need to edit?

utilities.css ?
User avatar

martin
Admin
Admin
Magic user status: Offline
Posts: 4913
Joined: Apr 6th, '14, 14:12
    Linux Chrome

Re: headerbar slide top

Post by martin »

I'l put it back into an ext if you want. Edits are a thing of the passed.

https://www.youtube.com/watch?v=3k_3mJd ... b-test.com
User avatar

Wesleyw3zep
Users
Users
Magic user status: Offline
Posts: 3
Joined: Sep 3rd, '20, 19:30
    Android Chrome

Re: headerbar slide top

Post by Wesleyw3zep »

Hello, ok that would be great :tumbsyes:

[ Posted using my Samsung Galaxy S8 ]
Previous topicNext topic