Color and other footer's parameters in Liferay

Question

I need to create footer which will be just like small orange bar, and I need to make it responsive, I mean when I resized my window everything should be ok. How can I do that?

<footer id="footer" role="contentinfo">
    <p class="powered-by">
        #language ("powered-by German") 
    </p>
</footer>

This is my <footer> tag in portal_normal.vm

Answer 1

In my custom.css I write this:

#footer {
    text-align: center;
    background: #ffa500
}

and get orange centered footer.

Answer 2

To make your footer responsive, you can use Liferay supported Twitter Bootstrap classes, aided by your own custom styles controlled through media queries in custom.css of theme:

Example:

<div id="footer" class="row-fluid">
    <div class="span12 text-center">
        <p class="powered-by">
            #language ("powered-by German")
        </p>
    </div>
</div>

Liferay Reference