Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

How to make button bar look like Penny Arcade's version?

CaioCaio
edited April 2012 in Vanilla 2.0 - 2.8

I was wondering how to make button bar look like Penny Arcade's version:
Can anyone help me? I want to figure out how to put the buttons in a bar and how to move the preview and save draft buttons to bottom, both which I can't figure out.

The buttons on the bottom in "normal" mode:

The buttons on the bottom in preview mode:

Best Answers

  • KasperKasper Scholar of the Bits Copenhagen Vanilla Staff
    Answer ✓

    Got the second part of your question covered: You need to create two new folders in your /themes/default folder. The first one is called "views" and inside of that you create one called "post". You should now have a path that looks like this: /themes/default/views/post/
    Inside of the "post" folder you create a new file called "comment.php". Now take the contents of the following gist: https://gist.github.com/2419542 and put them inside your comment.php file and you're done.

    Kasper Kronborg Isager (kasperisager) | Freelance Developer @Vanilla | Hit me up: Google Mail or Vanilla Mail | Find me on GitHub

  • KasperKasper Scholar of the Bits Copenhagen Vanilla Staff
    Answer ✓

    As for the first part, simply create a file called custom.css and put it in the folder /themes/default/design. Then put the contents of this gist https://gist.github.com/2419725 inside your custom.css file and you've got yourself a button bar like the one on Penny Arcade :)

    Kasper Kronborg Isager (kasperisager) | Freelance Developer @Vanilla | Hit me up: Google Mail or Vanilla Mail | Find me on GitHub

Answers

  • KasperKasper Scholar of the Bits Copenhagen Vanilla Staff

    I can help with that :) Are you using a custom theme or the standard Vanilla theme?

    Kasper Kronborg Isager (kasperisager) | Freelance Developer @Vanilla | Hit me up: Google Mail or Vanilla Mail | Find me on GitHub

  • Standard but plan on making it custom soon via the bootstrap theme you're developing.

  • KasperKasper Scholar of the Bits Copenhagen Vanilla Staff
    Answer ✓

    Got the second part of your question covered: You need to create two new folders in your /themes/default folder. The first one is called "views" and inside of that you create one called "post". You should now have a path that looks like this: /themes/default/views/post/
    Inside of the "post" folder you create a new file called "comment.php". Now take the contents of the following gist: https://gist.github.com/2419542 and put them inside your comment.php file and you're done.

    Kasper Kronborg Isager (kasperisager) | Freelance Developer @Vanilla | Hit me up: Google Mail or Vanilla Mail | Find me on GitHub

  • KasperKasper Scholar of the Bits Copenhagen Vanilla Staff
    Answer ✓

    As for the first part, simply create a file called custom.css and put it in the folder /themes/default/design. Then put the contents of this gist https://gist.github.com/2419725 inside your custom.css file and you've got yourself a button bar like the one on Penny Arcade :)

    Kasper Kronborg Isager (kasperisager) | Freelance Developer @Vanilla | Hit me up: Google Mail or Vanilla Mail | Find me on GitHub

  • Thank you!

  • CaioCaio
    edited April 2012

    @kasperisager, are you self tought or schooled in coding?

  • KasperKasper Scholar of the Bits Copenhagen Vanilla Staff

    @Caio I'm completely self-tought, began when I was 15 and I'm 18 today. I'll be going to the IT University of Copenhagen to study software development and math some time next year, so I can gain some more theoretical knowledge on the subject.

    Kasper Kronborg Isager (kasperisager) | Freelance Developer @Vanilla | Hit me up: Google Mail or Vanilla Mail | Find me on GitHub

  • I thought I should mention the custom.css shouldn't be there, it should be in the buttonbar.css file.

  • I can do css, html, java, c++, c#, c, vb, read only php, but cannot understand js at all.

  • @kasperisager do you have another link to that gist.github link you provided to post directly into the custom.css file within /themes/default/design? It seems to have disappeared since April.

  • @kirkpa31 said:
    kasperisager do you have another link to that gist.github link you provided to post directly into the custom.css file within /themes/default/design? It seems to have disappeared since April.

    Got it! Please ignore that last one.

  • GaryFunkGaryFunk Senior Application Developer ✭✭

    @kirkpa31 said:
    Got it! Please ignore that last one.

    Got it where?

  • @GaryFunk

    Copy over all 3 codes into their respective files, easily labeled thanks to Mark O'Sullivan

    https://github.com/vanillaforums/Garden/commit/2eb79d1e4c34a134fa3f3a6c3b7a346391cd35f4

  • GaryFunkGaryFunk Senior Application Developer ✭✭

    Thanks.

Sign In or Register to comment.