Cleaning up the theme velocity clutter

New to the next release of 5.1 and 5.2 are more streamlined templates. We’ve condensed all the includes and some code into 2 includes to cut the confusion and the clutter. Though a small update, I thought it would be important to let anyone who is developing a theme in Liferay know because some lines of text have been moved around and this could cause some needless frustration.

In portal_normal.vm there used to be a lot of things going on – some lines of css and multiple includes. Well, we’ve found that for the majority of themes people are going to leave these lines alone. Therefore, we've moved code into the general top head and the bottom includes.

So,

$theme.include($top_head_include)

is going to include the folowing code:

#css ($css_main_file)

<script type="text/javascript">
    // <![CDATA[
        $page_javascript_1
        $page_javascript_2
        $page_javascript_3
    // ]]>
</script>

#if ($company_logo != "")
    <style type="text/css">
        /* <![CDATA[ */
            #banner .logo a {
                background: url($company_logo) no-repeat;
                display: block;
                font-size: 0;
                height: ${company_logo_height}px;
                text-indent: -9999em;
                width: ${company_logo_width}px;
            }

            #ie6_png_fix()
        /* ]]> */
    </style>
#end

and

$theme.include($bottom_include)

is now including:

#js ($js_main_file)

So for anyone who has modified or removed those lines and are seeing them in their themes, it is because we’ve made them manditory in all themes. And, for those who have modified portal_normal.vm but not the above code, you should remove the moved code so that they're not included twice.

Blogs
Ryan - What will be the recommended way to customize this type of stuff from here on out? For example, I typically change the company logo's size in the included CSS block. Also, should other Javascript includes still be added to the bottom of portal_normal.vm?
Hi Josh,
The CSS in that block could be over written simply by specifying a higher weighted CSS selector in you css file. For example,

body #banner .logo a {height: 10px; width: 10px}

As far as including the JS, what are you attempting to include? You could write your JS into javascript.js in the javascript folder in your theme and it will automatically get included.
Thanks, Ryan. I'll give that a shot. Regarding the Javascript, I am including some other jQuery libraries like Superfish and Cycle Lite for some of my themes. I thought that adding them via the portal_normal in this manner

#js("$javascript_folder/superfish.js")

was a good practice -- and then calling them from the theme's javascript.js. How would you recommend including stuff like this?
Hi Ryan,

Can I remove the $theme.include($top_head_include) from my theme? If yes, is there any significant effect to liferay functionality Or do you know specifically which head JavaScript can be remove ?? If no, any reason why not?

Any suggestions, insights or advice would be welcome and appreciated.

Thanks in advance