1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Modifying navbar into block-like design

Discussion in 'Styling and Customization Questions' started by Trombones13, Apr 8, 2012.

  1. Trombones13

    Trombones13 Well-Known Member

    As part of my upcoming site redesign, I want to change my navbar to make the Home/Forums/Members/etc. links look like blocks, all of which should be the same size. I made some sketches on my iPad (see attachments), but I'm not sure how to transfer that to code. I'll also need to move the profile links (inbox/alerts/log out) to the right side of where the logo is. I've seen that done on a few released styles--could someone explain how that's done as well? Thanks!

    See attachments for some ideas I'm considering, several of which are explained above.
    voice-redesign-sketch.jpg voice-redesign-sketch-2.jpg voice-redesign-sketch-3.jpg

    EDIT: Also, if it matters, I'm planning to use Jake's Nodes As Tabs add-on to link to a couple of forums.
     
  2. Morgain

    Morgain Well-Known Member

    Not absolutely certain but I think Syndol did an addon to move the right hand tabs up to the top on the right. Someone did it quite recently - sorry for vagueness but it's just to reassure it HAS been done.
     
  3. Morgain

    Morgain Well-Known Member

    You can change the size and look of tabs in the Style Properties area in admincp.
     
  4. Forsaken

    Forsaken Well-Known Member

    By blocks, do you mean something like what I do with my Imperial Style (http://xenique.com/forums/misc/style?style_id=47)?

    Your sketches aren't really informative for others, so giving an example (Whether it is wordpress or something) is best.
     
  5. Floris

    Floris Guest

    Thanks for the mockup you made with the color app for iPad, I will PC you.
     
  6. Trombones13

    Trombones13 Well-Known Member

    Thanks for the info, Morgain, and thanks again for the PC, Floris! (p.s. It's the Paper app for iPad, which is free with in-app payments: http://www.fiftythree.com/paper)

    Yeah; that's what I'm looking for (except that there'd be six to eight blocks and they'd stretch across the whole navbar). The way you do user info in the header is close to what I'm looking for as well (if the first sketch isn't informative enough on that, I can go into more detail). Also, If you have any suggestions on how to make those sketches more informative for future reference, feel free to let me know!
     
  7. Forsaken

    Forsaken Well-Known Member

    Just cleaning up the lines and notations for something like that.
     
  8. Floris

    Floris Guest

    Yeah Paper, I got the name wrong. I meant that one. It's from the guys that also worked on the prototyping Courier for Microsoft or whatever.
    It's pretty nice. I still prefer Sketchbook Pro - this is just for more simpler stuff, and it's better organized.
     
  9. Forsaken

    Forsaken Well-Known Member

    To do what you want you're going to have to use a fixed width.
     
  10. Floris

    Floris Guest

    You could calculate the block width, minus the objects, the padding between them, and what space you have left, etc. And adjust. But .. it's a bit tricky and fixed width certainly helps.
     

Share This Page