1. Alley-Chan contest
    Join us in the Alley's anthropomorphizing contest!
    Deadline for entries is on May 31th at 4pm UTC.
    Dismiss Notice
  2. Dragon Ball Banner Contest
    Come enter in the Dragon Ball Banner Contest!
    Deadline for entries is June 24 at 12 pm UTC.
    Dismiss Notice
  3. Welcome to the forums! Take a second to look at our Beginner's Guide. It contains the information necessary for you to have an easier experience here.

    Thanks and have fun. -NF staff
    Dismiss Notice

News Adjustments to NF skins

Discussion in 'The Konoha Times' started by Jackk, May 16, 2019.

  1. Jackk Moderator

    Messages:
    12,823
    Likes Received:
    1,054
    Trophy Points:
    1,783
    Joined:
    Mar 25, 2011






    /** Adjustments to NF skins **/

    I've been working on and off on various adjustments for NF skins since January (2019), and I had been meaning to make a thread here to show the adjustments

    I had some concerns in the beginning. I wasn't sure if i was going to be able to make my adjustments live for everyone or how to plan this. I also wanted to do some good testing, and bundle up certain adjustments together before giving my code to an NF admin or supporting staff with the right perms to apply to the skins

    @Rinoa and @Naruto have been great help and have been working with me on different things, and while we don't have all the adjustments we've been working on ready for release yet, we decided to start releasing some stuff in parts -- so I've decided to make this thread at this point

    Now then, I will start with the first adjustment I prepared some months ago...

    --Adjustment to viewport/banner/forum resize on Naruto/Orange skin

    Before (mobile view)-



    After adjustments (mobile view)-



    Before (desktop web browser resizing)-



    After adjustments (desktop web browser resizing)-




    I've tested this quite a bit already on my pc and even on my cell phone through a browser addon

    Spoiler: here are some screenshots straight from my cell phone


    Before (mobile vertical/portrait view)-





    Before (phone flipped/horizontal/landscape mobile view)-



    After adjustments (mobile vertical/portrait view)-





    After adjustments (phone flipped/horizontal/landscape mobile view)-





     
    Last edited: May 17, 2019
    Tags:
    • Like Like x 12
    • Winner Winner x 4
    • Creative Creative x 1
    • List
  2. Jackk Moderator

    Messages:
    12,823
    Likes Received:
    1,054
    Trophy Points:
    1,783
    Joined:
    Mar 25, 2011






    /** Adjustments to NF skins index **/



















     
    Last edited: May 27, 2020
    • Winner Winner x 3
    • Like Like x 2
    • List
  3. Jackk Moderator

    Messages:
    12,823
    Likes Received:
    1,054
    Trophy Points:
    1,783
    Joined:
    Mar 25, 2011






    my apologies for not starting this thread sooner

    now i should probably try to get some sleep :catsweat

    naruto might get the first adjustment (posted in the first post of this thread) out to everyone while i'm asleep or at work later -- in any case, i think we should have it live later today or at some point this week if all goes according to plan

    and we got more stuff we want to release and i intend to show here later in the near future
     
    • Friendly Friendly x 3
    • Winner Winner x 1
    • List
  4. Jackk Moderator

    Messages:
    12,823
    Likes Received:
    1,054
    Trophy Points:
    1,783
    Joined:
    Mar 25, 2011






    that adjustment to orange skin shown on the op of the thread is live now

    thanks for bringing it to everyone @Naruto :blobfiesta

    i'll remove the 'coming soon' and other unneeded stuff from the op of the thread
     
    Last edited: May 17, 2019
  5. Jackk Moderator

    Messages:
    12,823
    Likes Received:
    1,054
    Trophy Points:
    1,783
    Joined:
    Mar 25, 2011






    i'm aware the issue with the viewport/banner/forum resize is present on all classic nf skins btw (like sasuke, akatsuki, shonen jump heroes...)

    we've now made live the adjustment for that on the naruto/orange skin. the code to adjust this on orange skin doesn't quite work for the other classic skins, but i believe i can make it work on those skins too after tweaking it some

    actually i've already tweaked it for and got it working on sasuke skin too

    @Moritsune i know you like the sasuke skin and use it on mobile. i plan to give the code for sasuke skin to @Naruto tonight after i get home to my pc, so it should look better for you soon :blobhide
     
    • Winner Winner x 2
    • Like Like x 1
    • List
  6. Azeruth Retired Staff

    Messages:
    12,517
    Likes Received:
    2,912
    Trophy Points:
    2,233
    Joined:
    Nov 25, 2012






     
    • Funny Funny x 4
    • Agree Agree x 1
    • List
  7. Jackk Moderator

    Messages:
    12,823
    Likes Received:
    1,054
    Trophy Points:
    1,783
    Joined:
    Mar 25, 2011






    this was mentioned the other day in the alley's convo thread

    but i believe this deserves a mention here too-

    --Official toggle to hide all flags on any skin

    You can now turn off flags

    go to preferences-



    Then check the box that says "Hide all flags?" and save changes



    Before-



    After-

     
  8. Jackk Moderator

    Messages:
    12,823
    Likes Received:
    1,054
    Trophy Points:
    1,783
    Joined:
    Mar 25, 2011






    --Adjustment to youtube videos inside quotes

    @Whitebeard told me about this one after he came across it

    i found it was some padding-bottom inside a span tag, and @Naruto fixed it with some .quote span css adjustment

    I'm not sure how we didn't see this one sooner, but I'm glad this was adjusted

    Before-



    After-



    --Adjustment to twitter video embeds inside quotes

    I kinda forgot to take a screenshot of this one before it got adjusted, but basically twitter video embeds would get cut off inside quotes. Now twitter embed videos don't get cut off inside quotes
     
    • Like Like x 3
    • Agree Agree x 1
    • List
  9. Nataly

    Messages:
    22,745
    Likes Received:
    8,308
    Trophy Points:
    4,282
    Joined:
    Dec 31, 2017






    @Jackk Are there any plans to adjust members' cover images on the profiles so they don't appear as banners used to, cropped, while viewing them on the mobile? Or it isn't worth making those changes?
     
  10. Jackk Moderator

    Messages:
    12,823
    Likes Received:
    1,054
    Trophy Points:
    1,783
    Joined:
    Mar 25, 2011






    oh i think this is certainly worth adjusting. thanks for reminding me about those

    some time ago i was actually messing with a xenforo addon that apparently handles those profile covers

    cause rinoa and i were planning to use it for section banners till i decided on a different approach

    anyway, i'll look into it :blobhide
     
  11. Jackk Moderator

    Messages:
    12,823
    Likes Received:
    1,054
    Trophy Points:
    1,783
    Joined:
    Mar 25, 2011






    @Nataly i'm considering this more of a preview rather than an official announcement of a new adjustment -- cause it's really not how we want it yet and we might be able to do more to it, but here's what we got for the profile covers at this point (it is live also, so you should be able to see it on your end too)-

    mobile landscape view-



    mobile portrait view-



    there's some space to the left and right of the banner on landscape view, but at least it is resized well/fully or not cutting off

    but yeah, on mobile portrait view, while it is no longer cutting off, it is now going off the page =/

    i'm kinda tempted to just make the profile cover disappear on mobile portrait view and just show it on mobile landscape view. kinda like how posts on mobile portrait view don't show full size avatars or rep bar/spiral etc, but if you flip your phone for landscape view you get the full avatar and rep/spiral etc

    i would like it if we could show the profile cover well on mobile portrait too though

    the profile covers use some xenforo addon for covers... and it can be more tricky to edit or style addon stuff...

    anyway, this is where we're at on the profile covers stuff at least

    @Naruto and i both have spent some time on it, and guess we'll revisit it later

    we've also been working on other stuff too :catsweat
     
    Last edited: Jun 24, 2019
  12. Naruto Administrator

    Messages:
    25,330
    Likes Received:
    3,139
    Trophy Points:
    2,584
    Joined:
    Sep 13, 2006




    Strange, on my phone it looks good after the recent changes.
     
  13. Jackk Moderator

    Messages:
    12,823
    Likes Received:
    1,054
    Trophy Points:
    1,783
    Joined:
    Mar 25, 2011






    hmm i'm guessing because my phone is smaller and/or not as wide as yours :thinkchuu

    i can also replicate it on my pc on firefox if i resize/narrow down my browser window enough

     
  14. Naruto Administrator

    Messages:
    25,330
    Likes Received:
    3,139
    Trophy Points:
    2,584
    Joined:
    Sep 13, 2006




    Further adjustments have been made, should look good at every window size with the expected aspect ratio.
     
  15. Jackk Moderator

    Messages:
    12,823
    Likes Received:
    1,054
    Trophy Points:
    1,783
    Joined:
    Mar 25, 2011






    yep further adjustments were made and naruto and i did several tests

    now the profile cover looks good on mobile

    both portrait and landscape view

    i'll post a proper before and after later

    i should try to get some sleep now... it's 5:38am here

    :krilldead
     
  16. Jackk Moderator

    Messages:
    12,823
    Likes Received:
    1,054
    Trophy Points:
    1,783
    Joined:
    Mar 25, 2011






    --Adjustment to profile covers (resizing/mobile view)

    The issue was that profile covers would get cut off on mobile view. Finally, the other day, @Naruto and I finished testing on my cell phone further adjustments that he did so that the profile covers would resize and show better for mobile devices or smaller screens

    Initially he got it working for his phone, but it still wasn't working on mine because my phone is smaller...

    Now it looks well even on smaller phones like mine

    Before-



    After-



    mobile portrait view-



    mobile landscape view-

     
    Last edited: Jun 20, 2019
  17. Jackk Moderator

    Messages:
    12,823
    Likes Received:
    1,054
    Trophy Points:
    1,783
    Joined:
    Mar 25, 2011






    @Moritsune sorry for the delay on the adjustment to the sasuke skin

    i was tired the other day and got distracted with different things...

    also, i almost got the code/css ready to adjust for the other classic skins too now (akatsuki and shonen jump heroes). i think i just gotta do a minor thing on akatsuki, and then take some screenshots... or i'll just quote the op with the orange skin stuff and say the adjustment is now on the other classic skins too :catmaybe

    so i'll probably finish it for all the classic skins and give to naruto to apply to the skins sometime this week :catsweat
     
    Last edited: May 22, 2019
  18. Jackk Moderator

    Messages:
    12,823
    Likes Received:
    1,054
    Trophy Points:
    1,783
    Joined:
    Mar 25, 2011






    Alright, I'm done with the adjustments to viewport/banner/forum resize for the Akatsuki, Shonen Jump Heroes, and Sasuke skins

    and @Naruto has applied to the skins to make the adjustments live for everyone using those 3 skins :blobfiesta

    also, I did an extra adjustment to the Akatsuki skin

    so first...

    --Akatsuki skin extra adjustment

    Before (desktop view)-



    After (desktop view)-



    As you can see with the 2 screenshots above, I added some padding below the banner area

    I believe it looks better this way, and it's more like how the Akatsuki skin looked on vbulletin

    Well the one on vbulletin had even more padding... but it doesn't have to be exact

    Spoiler: this is how the Akatsuki skin looked on vbulletin




    --Adjustment to viewport/banner/forum resize on Akatsuki skin

    Before (mobile view)-



    After (mobile view)-



    --Adjustment to viewport/banner/forum resize on Shonen Jump Heroes skin

    Before (mobile view)-




    After (mobile view)-



    and here's the last skin...

    --Adjustment to viewport/banner/forum resize on Sasuke skin


    Before (mobile view)-



    After (mobile view)-



    Also, yes, they all show well on both portrait and landscape view on phone

    plus they all resize properly on a computer if you resize your web browser window
     
    Last edited: Jun 20, 2019
    • Like Like x 6
    • Winner Winner x 3
    • List
  19. A Optimistic

    Messages:
    66,590
    Likes Received:
    6,259
    Trophy Points:
    5,606
    Joined:
    Jul 18, 2006






    Jackk is the GOAT.
     
    • Agree Agree x 4
    • Friendly Friendly x 1
    • List
  20. Jackk Moderator

    Messages:
    12,823
    Likes Received:
    1,054
    Trophy Points:
    1,783
    Joined:
    Mar 25, 2011






    Honestly it's @Naruto who is the goat or the real hero here

    He's done far more than I have

    Basically the only thing in this thread that I typed code/css for is the adjustment to the viewport/forum resize with respect to the banner of the classic NF skins

    Everything else was Naruto all on his own or with just very minor input/testing from me in some things, and he's still been needed and involved in the stuff that I've typed the code/css for since he has skin perms that I lack to apply stuff officially to the skins and make the adjustments live for everyone

    I basically use a web browser add-on to test and do adjustments to skins with external css, and I inspect the html/css of the forums to understand why stuff is currently showing a certain way etc

    Also, while it's true I've spent hours working on and off on other skins stuff for the past few months and I haven't posted or shown this other stuff here yet, it's also true that other stuff Naruto has done recently (and he's spent a lot of time on) hasn't been posted about yet and actually he's been doing skins stuff for years that has gone undocumented

    I don't care much for credit or recognition myself, but somehow I think it's important to have a thread or place to show people the different changes that are being applied to the NF skins. I guess I think it's good for people to see that there's some cool stuff happening, and also I think it's helpful for suggestions -- like @Nataly asked about the resizing of the profile covers for mobile, and now this has been adjusted after she brought it up

    Naruto, I realize you don't really care for credit or recognition, but I want you to know and I want to say openly that I really appreciate all the work you've done on your own and all the help you've given me and the forums
     
    Last edited: May 24, 2019
    • Friendly Friendly x 6
    • Like Like x 3
    • List
  21. i second this
     
  22. Jackk Moderator

    Messages:
    12,823
    Likes Received:
    1,054
    Trophy Points:
    1,783
    Joined:
    Mar 25, 2011






    Time to show some more adjustments we've worked on and got live now

    Also, every adjustment posted in this thread is live and for all skins unless it's specified that it's not

    --Adjustment to thread tabs on mobile view

    long thread titles in thread tabs no longer go off the page on mobile

    see in this example the text that says "the alley dumpster gif -- give me your feedback alleyans"

    Before-




    After-

    mobile portrait view-



    mobile landscape view-




    --Adjustment to layout resizing/responsiveness on classic skins

    Classic skins are the naruto/orange, akatsuki, sasuke, and shonen jump heroes skins

    text and images on the forum front page no longer get overlapped when resizing/narrowing the browser window

    so, in this regard, the classic skins now behave like the default/modern (light/dark...) skins

    Before-




    After-




    --Adjustment to text on the 'contact us' form on classic skins

    You can now see your username and email address after bringing up the 'contact us' form on classic skins

    the "contact us" link is located on the footer or the bottom of the site

    Before-



    After-




    --Adjustments to signatures

    Signature height resize

    The maximum size for an image in the signature area is 700px x 400px

    for a long time, a sig image would get cut off if its height exceeded 400px

    so for example the following image-

    (418px x 612px)


    it would show like this in the signature area-



    now the sig image automatically resizes down proportionally to show in full with 400px height or less (depending on the width)

    Before and after-

    Note: the checkbox toggle in the gif below was simply for a test and to show the comparison here




    Signature alignment

    Before-




    After-



    See the "after" version is more right-aligned

    it's also more noticeable with a wider sig like in the next example below

    Before-




    After-



    That "before" is actually right-aligned, but the image looks like it's centered-aligned...

    while in the "after" it clearly looks right-aligned

    and lastly...

    Signature resizing for mobile or narrow browser window

    Note: 'mobile portrait view' won't be shown here because signatures are basically disabled for mobile portrait view

    Before (mobile landscape view)-





    After (mobile landscape view)-



    Before (web browser resize)-




    After (web browser resize)-

     
    Last edited: Jun 22, 2019
    • Like Like x 8
    • Winner Winner x 1
    • List
  23. Patchouli Advisor

    Messages:
    25,209
    Likes Received:
    184
    Trophy Points:
    768
    Joined:
    Dec 14, 2006






    Very comfy work :kfam
     
    • Friendly Friendly x 4
    • Agree Agree x 2
    • List
  24. Jackk Moderator

    Messages:
    12,823
    Likes Received:
    1,054
    Trophy Points:
    1,783
    Joined:
    Mar 25, 2011






    --Pink rep bar

    Pink rep bar is now an option you can enable

    Yes, pink rep bar already existed on the Allure skin. Thing is now you can have a pink rep bar on any NF skin instead of it being exclusive to the Allure skin. The pink rep bar now can be an alternative to the gold rep bar

    All modern style skins can now have the pink rep bar that was previously only on the Allure skin-

    Gold and pink comparison







    All classic skins can now have a pink rep bar in the style of the classic skins rep bar-

    Gold and pink comparison









    To enable the pink rep bar on any skin-

    note: just like for gold rep bar, you need 4.5mil rep to be able to have a pink rep bar

    go to preferences-



    Then check the box that says "Pink reputation?"

    Also, make sure the box that says "Hide spirals?" is checked

    and save changes

     
    Last edited: Jul 17, 2019
  25. Jackk Moderator

    Messages:
    12,823
    Likes Received:
    1,054
    Trophy Points:
    1,783
    Joined:
    Mar 25, 2011






    --Adjustment to member cards

    adjustments have been made to member cards (this pops up when you press or click on a member's username)

    the cropping, positioning, and margins for avatars in member cards has changed

    member cards with small/wide avatars

    example small/wide avatar-


    before-




    after-





    member cards with big/large avatars

    before-



    after-



    before-



    after-




    before-



    after-



    before-



    after-

     
  26. Jackk Moderator

    Messages:
    12,823
    Likes Received:
    1,054
    Trophy Points:
    1,783
    Joined:
    Mar 25, 2011






    --Thread viewer count for mobile

    The thread viewer count was already available, but mobile view did not have this. It was only on desktop view

    Now the thread viewer count shows at the end of the thread titles on mobile too

    Before-



    After-




    --Adjustment to the magnifying glass search icon (on modern skins only)

    This icon shows up on mobile or pc if you resize/narrow your browser window enough

    The placement has been adjusted slightly, and it no longer gets cut off

    Before-






    After-






    --Adjustments to avatars, medals, and more within posts on mobile

    Avatars on mobile view now display in full and the aspect ratio has been adjusted on all skins

    Medals are now left-aligned on mobile view. Medals are still center-aligned on desktop view

    The placement of the green online indicator has been adjusted for mobile on all skins. The indicator is now more in the corner as it was already the case on desktop view for modern skins

    Margins have also been adjusted in some areas

    Before-



    After-




    Before-



    After-

     
  27. Jackk Moderator

    Messages:
    12,823
    Likes Received:
    1,054
    Trophy Points:
    1,783
    Joined:
    Mar 25, 2011






    here's a new update

    --Adjustment to username font-size in 'Users Who Are Viewing This Node'

    The username font-size in the Konoha Country Club section is now consistent with other forum sections in the "Users Who Are Viewing This Node" area

    The standard across different forum sections has been 13px as shown below (example from the Alley section)-



    but the text for that area in the KCC section was smaller, and now it has been adjusted

    Before (KCC section)-



    After (KCC section)-



    i have some other adjustments i'd like to show, some have already been applied, and some people noticed some of them... but i'm not posting about those other ones here yet because i'm waiting for another thing to be applied to the skins later and then i'll show them all together in the next post. that's the plan

    i'm posting about the 'users who are viewing this node' now because actually it wouldn't all fit in 1 post due to the 20 images per post cap. i'd have to do 2 separate posts anyway since i got like 21 screenshots in all...
     
    • Like Like x 1
    • Winner Winner x 1
    • List
  28. mina

    Messages:
    2,729
    Likes Received:
    677
    Trophy Points:
    668
    Joined:
    Nov 19, 2019






    @Jackk on mobile the reactions are spaced apart rather broadly, but it looks beautiful and hopefully it can be applied to the web version too

    however, when browsing, the paddings are a tad too much for mobile


    gorgeous updates overall, really glad to have you on this forum
     
  29. mina

    Messages:
    2,729
    Likes Received:
    677
    Trophy Points:
    668
    Joined:
    Nov 19, 2019






    also why does the kcc section have the only font size inconsistency in the nodes? :hm weird
     
  30. Jackk Moderator

    Messages:
    12,823
    Likes Received:
    1,054
    Trophy Points:
    1,783
    Joined:
    Mar 25, 2011






    glad you like. the idea also was to make it less likely to make a mistake when giving a rating (or when intending to hit the "list" link). i felt the ratings were too close together before on mobile. now they are more spaced out on mobile portrait and landscape view so it includes tablets too

    there's a certain point/size where it does go back to the old spacing for desktop/pc yeah. tbh i'd be fine either way for web/desktop view, but i figured it wasn't as needed compared to mobile and maybe most people wouldn't like the extra spacing on desktop view... so i didn't pitch it for that when i proposed this adjustment

    hmm and i know there are actually some margins i adjusted but this is not showing atm due to a priority situation in the code. i corrected already and gave my code to naruto but he's asleep now i think, so there's more to the ratings thing that we need to apply officially, which is why i didn't post about them here yet. though i'm not sure if the margins i adjusted takes care of the padding you're mentioning actually. guess we'll see

    i was asking myself the same thing

    i couldn't figure out why it was apparently different only in the kcc section :catsweat

    but i applied this css to make it consistent for all-

    Code:
    /** adjustment to username size in 'users who are viewing this node' (makes font-size in KCC section consistent with other sections) **/
    ol.listInline, .footnote, #boardStats dl {
            font-size: 13px;
    }
    
    then i called it a day
     
    Last edited: May 24, 2020
Loading...