Applying css to a Web Content Display Portlet in Liferay

Question

I have used Web Content Display Portlet on my page to display some text. I have to apply css and insert some images for those. I have put the html code in the source. HOw do I apply css for it?

Here is the source that will go in my Web Content Display Portlet

   <div class="products" style="width:1000px;">



  <div class="tvc box">
  <img alt="ADVISORY" title="ADVISORY" src="Index_files/ADVISORY.PNG">
  <div class="txt">
  <p class="hdtxt"><cufon style="width: 78px; height: 16px;" alt="ADVISORY" class="cufon cufon-canvas"><canvas style="width: 85px; height: 16px; top: 1px; left: -1px;" height="16" width="85"></canvas><cufontext>ADVISORY</cufontext></cufon></p>

  </div>
  <a href="http://tt.com/Forms-Brochure/Advisory_for_ALL_SITES.pdf" title="Know More">Know More</a> </div>

  <div class="tvc box">
  <img alt="Branch Locator" title="Branch Locator" src="Index_files/branchlocator.jpg">
  <div class="txt">
  <p class="hdtxt"><cufon style="width: 68px; height: 16px;" alt="BRANCH " class="cufon cufon-canvas"><canvas style="width: 82px; height: 16px; top: 1px; left: -1px;" height="16" width="82"></canvas><cufontext>BRANCH </cufontext></cufon><br><cufon style="width: 73px; height: 16px;" alt="LOCATOR" class="cufon cufon-canvas"><canvas style="width: 80px; height: 16px; top: 1px; left: -1px;" height="16" width="80"></canvas><cufontext>LOCATOR</cufontext></cufon></p>
  <p>Use our branch locator to find the branch closest to you!</p>
  </div>
  <a href="http://www.t.com/quickylink/branchlocater.htm" title="Know More">Know More</a> </div>


  <div class="tvc box">

  <img alt="EMI Calculator" title="EMI Calculator" src="Index_files/emicalculator.jpg">
  <div class="txt">
  <p class="hdtxt"><cufon style="width: 30px; height: 16px;" alt="EMI " class="cufon cufon-canvas"><canvas style="width: 44px; height: 16px; top: 1px; left: -1px;" height="16" width="44"></canvas><cufontext>EMI </cufontext></cufon><br><cufon style="width: 102px; height: 16px;" alt="CALCULATOR" class="cufon cufon-canvas"><canvas style="width: 109px; height: 16px; top: 1px; left: -1px;" height="16" width="109"></canvas><cufontext>CALCULATOR</cufontext></cufon></p>
  <p>Knowing your home loan EMI is just a click away!</p>
  </div>
  <a href="http://www.t.com/quickylink/emicalculator.htm" title="Know More" class="sec">Know More</a> </div>
  <div class="tvc box">

  <img alt="FAQs" title="FAQs" src="Index_files/faqs.jpg">
  <div class="txt">
  <p class="hdtxt"><cufon style="width: 39px; height: 16px;" alt="FAQs" class="cufon cufon-canvas"><canvas style="width: 48px; height: 16px; top: 1px; left: -1px;" height="16" width="48"></canvas><cufontext>FAQs</cufontext></cufon></p>
  <p>Get the answers to frequently asked questions here.</p>
  </div>
  <a href="http://www.t.com/loancentre/faqs.htm" title="Know More" class="sec">Know More</a> </div>
  </div>

Each div with class "tvc box" has to appear one after another horizontally.

HOw do I apply css for it?

Answer 1

As administrator you can access the look and feel configuration of yout portlet. Clicking on options icon,and choose Look and Feel. You can see several tabs:Text styles,Background styles, border styles, advanced styling . Advanced Styling tab allows you to enter CSS code to customize your portlet. You can find how to do that in:

http://www.liferay.com/es/documentation/liferay-portal/6.2/user-guide/-/ai/look-and-feel-liferay-portal-6-2-user-guide-04-en

Also you can do a new theme for your site and put there your custom.css (I think is the best option, because you need to put images) http://www.liferay.com/es/documentation/liferay-portal/6.2/development/-/ai/creating-themes-and-layout-templates-liferay-portal-6-2-dev-guide-09-en