Need a CSS Ninja to give me a hand

Discussion in 'Community Styling' started by fixer, Mar 12, 2018.

  1. fixer

    fixer Just Me

    947
    167
    +508
    I have added a small text shadow to increase visibility

    Screen Shot 2018-03-12 at 7.19.56 PM.png

    I dont want the shadow on scroll over

    Screen Shot 2018-03-12 at 7.18.33 PM.png

    Code:
    .ipsNavBar_primary > ul > li > a
    {
    background: rgba(255, 255, 255, 0.3);
    font-size: 14px;
    font-weight: bold;
    text-shadow: 2px 2px 4px #000000;
    color: rgba(255, 255, 255, 1);
    }
     
  2. PoetJC

    PoetJC ♠ Jacquii: Black Kween of Hearts ♠

    21,056
    1,497
    +5,102
    The following code will make it so on mouseover there is no text-shadow:

    Code:
    .ipsNavBar_primary > ul > li > a:hover {
        text-shadow: none !important;
    }
    I might say that the current text-shadow does not as much emphasize the link as it makes it more difficult to read. You might consider the following change:
    Code:
    .ipsNavBar_primary > ul > li.ipsNavBar_active > a {
        color: #18305e !important;
    }
    .ipsNavBar_primary > ul > li > a {
        text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.45) !important;
    }
    
    
    HTH,

    J.
     
  3. fixer

    fixer Just Me

    947
    167
    +508
    Thanks PoetJCPoetJC

    Code:
    .ipsNavBar_primary > ul > li > a
    {
    background: rgba(255, 255, 255, 0.3);
    font-size: 14px;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
    }
    
    .ipsNavBar_primary > ul > li.ipsNavBar_active > a {
        color: #18305e !important;
    }
    .ipsNavBar_primary > ul > li > a {
        text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.45) !important;
    }
    I made the changes you like it?

    www.mymilitia.com
     
  4. PoetJC

    PoetJC ♠ Jacquii: Black Kween of Hearts ♠

    21,056
    1,497
    +5,102
    It's a bit better than the original styling. I'm just not sure about the drop-shadow on the darker text.
    A bit of a subtle change - but makes it a bit easier to read, while also emphasizing the link. Try:
    Code:
    .ipsNavBar_primary > ul > li > a {
        text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.45) !important;
    }
    And also - might consider changing the suggested blue text to solid black #000000
    Congrats on the move to IPB btw... I really loved your XF forum - but you've done a great job on the IPB install.

    J.
     
  5. fixer

    fixer Just Me

    947
    167
    +508
    Thanks PoetJCPoetJC Much Much Better
     
  6. PoetJC

    PoetJC ♠ Jacquii: Black Kween of Hearts ♠

    21,056
    1,497
    +5,102
    No problem. It's a small css change - but definitely a bit better than the original styling.
    Happy to assist :tup:

    J.
     
    • Appreciation Appreciation x 1
    • List
  7. Tracy Perry

    Tracy Perry Opinionated asshat

    5,025
    492
    +3,459
    Background of the navbars is still to light IMHO.

    This is easier to see (specifically as you reach the right side)

    Screen Shot 2018-03-12 at 7.14.57 PM.png

    Code:
    .ipsNavBar_primary > ul > li > a { background: rgba(47, 47, 47, 0.3);}
    
    Than this

    Screen Shot 2018-03-12 at 7.16.45 PM.png
     
  8. fixer

    fixer Just Me

    947
    167
    +508
    I matched the tabs with the opacity of the logo
     
  9. PoetJC

    PoetJC ♠ Jacquii: Black Kween of Hearts ♠

    21,056
    1,497
    +5,102
    Personally - I'd do something similar to:
    mymilitia_screencap.gif

    And may consider giving the "MY MILITIA" text the transparent black color as the screencap tabs.
    Also - make the actual shield logo background black since it's the only blue element in the actual design.
    Just an idea anyway though LOL

    J.
     
  10. Tracy Perry

    Tracy Perry Opinionated asshat

    5,025
    492
    +3,459
    Rounded corners are so 2000's! :D
    But I do agree that the nav tabs need more contrast against the logo.

    I'm not a big fan of nav tabs across the top now.... I personally prefer the drop down menus. Yes, it takes more mouse movement, but it makes for a cleaner navigation bar.

    Screen Shot 2018-03-12 at 8.06.18 PM.png
     
  11. fixer

    fixer Just Me

    947
    167
    +508
  12. Tracy Perry

    Tracy Perry Opinionated asshat

    5,025
    492
    +3,459
    Much easier to see than the original was - especially for us "old crotchety assed half blind" folks. ;)

    EDIT:
    Changed "old" to a more appropriate descriptor. :whistle:
     
    • Agree Agree x 1
    • Appreciation Appreciation x 1
    • List
  13. PoetJC

    PoetJC ♠ Jacquii: Black Kween of Hearts ♠

    21,056
    1,497
    +5,102
    Ha! I knew someone would say that. Perhaps the 6px border-radius is way to much now that I think about it.
    But perhaps 2px border-radius would bring a bit of design continuity, since the forum headers are coded as
    Code:
        border-radius: 2px 2px 0px 0px;
    But yeah. Forget the idea of the hayuge border radius anyway LOL

    Much better contrast!
    I do still like the idea of having a very light border that would offer a bit more contrast between the tabs - something like:
    Code:
    .ipsNavBar_primary > ul > li > a {
        border: 1px solid rgba(255, 255, 255, 0.10);
        border-bottom: 0px !important;
    }
    And also the same border around the main logo font minus the drop-shadow would make the design a bit cleaner.

    But yeah. Much better design than originally posted! :tup:

    hmmmm. IDK about this old thang = I'm feeling like 22 at the moment anyway LMAO.
    I do agree that the design is much more easy on than the eyes than the previous one anyway...

    J.
     
  14. fixer

    fixer Just Me

    947
    167
    +508
    I added your recent edits ! Thanks PoetJCPoetJC
     
  15. PoetJC

    PoetJC ♠ Jacquii: Black Kween of Hearts ♠

    21,056
    1,497
    +5,102
    Much better.:tup:
     
    • Appreciation Appreciation x 1
    • List
  16. fixer

    fixer Just Me

    947
    167
    +508
    Screen Shot 2018-03-30 at 8.37.42 PM.png

    with the upgrade to 4.3 (MM 6.1) I updated the header :)
     
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.