HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

How to Create your own Logo or Banner and Style it

edited August 2013 in Tutorials

To create your own Banner/Logo for your forum is very simple. The one thing to keep in mind is the width and the height of the banner/Logo . Most themes work with a 980px fixed width , some have other values so you may need to adjust the image size to fit the space or adjust the theme to accommodate the banner.

The height should not be too much because this will adversely affect people with smaller screens . Usually 150px is enough. Try to make your images work well with the proper width and height perspectives.

If your image is square, it will take too much space top and bottom and empty space to the sides. It is recommended to use a rectangular image for this reason. But you can make it any way you want .

To style your Logo from the Custom.css style sheet you may need to add a few lines of code, however you need to look at your default.master.php or default.master.tpl to see the exact location for the logo/Banner

If the order in your master view is Head, h1,span,img (this is where the Logo image is)

this code will work to style the image:

    #Head h1 span img {
    height: auto;
    width: 98%;
    border-radius:10px;
    border:2px solid #00ffcc;
    box-shadow:0 1px 3px #000;
    }

If the order it is in is If the order in your master view is Head, Menu,h1,span,img (this is where the Logo image is)

this code will work:

    #Head Menu h1 span img {
    height: auto;
    width: 98%;
    border-radius:10px;
    border:2px solid #00ffcc;
    box-shadow:0 1px 3px #000;
    }

You will need to look in your master to make sure...

I have compiled a list of free online image editors and generators to help you create graphics buttons logos banners and edit images . These are easy to use and totally free. All these sites also offer tutorials, but it is very easy to use.

    Glass Button Generator http://www.holshousersoftware.com/glass/

    Free Online Image Editor http://www.online-image-editor.com/

    Cool Text Logo Maker  http://cooltext.com/LogoBrowse.aspx

    Flaming Text logo maker  http://www3.flamingtext.com/

    Free Buttons Generator http://www.freebuttons.com/index.php?page=freebuttons

    Gif Magic http://www.gifmagic.com

    Gif Animator  http://www.gif-animator.com

    Luna Pic  http://www151.lunapic.com/editor/

    GRSites Text Logo Maker  http://www.grsites.com/generate/group/6000/?

    Banner Maker  http://banner.fotor.com

    Bannersketch   http://www.bannersketch.com/?pid=generator&pag=1&opt=2

    Webbanner24 banner maker   http://www.webbanner24.com

    Sign Generators  http://www.signgenerator.org

    Badge maker  http://www.onlinebadgemaker.com

    Badge Generator  http://www.webestools.com/web20-badge-generator-free-image-beta-photoshop-web20-badge-generator.html

If you can find any more great resources for free graphic creation and editing please post the links here.

Comments

Sign In or Register to comment.