Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> CSS Navigation Buttons' Theme & Doujinshi/Manga Filter Script

 
post Nov 17 2022, 19:51
Post #1
Brufh



Newcomer
*
Group: Members
Posts: 23
Joined: 30-January 10
Level 52 (Journeyman)


(IMG:[i.imgur.com] https://i.imgur.com/wGWhKjO.png)

I made a quick CSS edit to the new navigation buttons as you can see from the image above to make them pop a bit more while keeping to the theme of the site.

Just pick which version of the code you want below (with or without The Timeskip Navigation Script which adds more buttons) and slap it on Stylus.

CODE

/*Navigation Buttons*/
div.searchnav:nth-child(3) > div:nth-child(n+2):nth-child(-n+6), div.searchnav:nth-child(5) > div:nth-child(n+2):nth-child(-n+6) {
    border: 2px solid #6f6f71;
    border-radius: 8px;
    margin-left: 4px;
    padding-top: 2px !important;
    padding-bottom: 1px !important;
    background: #34353b;
    font-weight: bold;
    font-size: 15px;
}

/*Navigation Buttons w/TIMESKIP NAV USERSCRIPT*/
div.searchnav:nth-child(3) > div:nth-child(n+2):nth-child(-n+14), div.searchnav:nth-child(5) > div:nth-child(n+2):nth-child(-n+14) {
    border: 2px solid #6f6f71;
    border-radius: 8px;
    margin-left: 4px;
    padding-top: 2px !important;
    padding-bottom: 1px !important;
    background: #34353b;
    font-weight: bold;
    font-size: 15px;
}


I've also made a simple JS script (slap it on one of the Monkeys), to filter by Doujinshi & Manga by pressing the right-arrow key, you can change the shortcut by changing "e.keyCode === 39)" to whatever key you want, just Google it.
Attached File  sadsad.txt ( 888bytes ) Number of downloads: 21


My overhaul CSS theme for the site is annexed, everything is commented for easy editing. Attached File  new_1.txt ( 5.06k ) Number of downloads: 23

Recommended script by other user: LazyLoad

This post has been edited by Brufh: Nov 17 2022, 20:15
User is offlineProfile CardPM
Go to the top of the page
+Quote Post

 
post Nov 17 2022, 20:11
Post #2
atasitian



Casual Poster
****
Group: Members
Posts: 422
Joined: 18-July 10
Level 322 (Godslayer)


BTW, I'm pretty sure you should be able to detect the presence of timeskip navigation with a selector like
CODE
.searchnav[data-timeskip-nav] /* or :not([data-timeskip-nav]), as needed */
User is offlineProfile CardPM
Go to the top of the page
+Quote Post

 
post Nov 17 2022, 20:20
Post #3
Brufh



Newcomer
*
Group: Members
Posts: 23
Joined: 30-January 10
Level 52 (Journeyman)


QUOTE(atasitian @ Nov 17 2022, 21:11) *

BTW, I'm pretty sure you should be able to detect the presence of timeskip navigation with a selector like
CODE
.searchnav[data-timeskip-nav] /* or :not([data-timeskip-nav]), as needed */


I'm not good enough at CSS to do it (IMG:[invalid] style_emoticons/default/biggrin.gif), feel free to re-post with the edit if you'd like.
User is offlineProfile CardPM
Go to the top of the page
+Quote Post

 
post Nov 17 2022, 23:07
Post #4
-terry-



Veteran Poster
********
Group: Global Mods
Posts: 2,750
Joined: 9-August 19
Level 500 (Ponyslayer)


Proper buttons instead of a clickable text look much better and should be the standard on the site imo, but the timeskip buttons are maybe a bit cluttered.
You could try making it so that the timeskip buttons only appear when you click or hover on Jump/Seek.
User is offlineProfile CardPM
Go to the top of the page
+Quote Post

 
post Nov 18 2022, 09:17
Post #5
atasitian



Casual Poster
****
Group: Members
Posts: 422
Joined: 18-July 10
Level 322 (Godslayer)


QUOTE(Brufh @ Nov 17 2022, 21:20) *
I'm not good enough at CSS to do it (IMG:[invalid] style_emoticons/default/biggrin.gif), feel free to re-post with the edit if you'd like.

OK, here's a complete version:
CODE
/* Navigation buttons (top & bottom) */
div.searchnav > div:not(:empty):not(:last-child) {
    border: 2px solid #6f6f71;
    border-radius: 8px;
    margin-left: 4px;
    padding-top: 2px !important;
    padding-bottom: 1px !important;
    background: #34353b;
    font-weight: bold;
    font-size: 15px;
}

This should handle everything.
User is offlineProfile CardPM
Go to the top of the page
+Quote Post


Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 


Lo-Fi Version Time is now: 15th June 2025 - 21:17