Stump the Panel » End Users and Information Workers

How to set up the background color in Content Editor Webpart

(4 posts)
  • Started 5 months ago by Jaspreet
  • Latest reply from KenCronin

  1. Jaspreet
    Member

    Hi I am designing some newsletter and I have chosed a page layout with header, footer and 3 column.
    What I want to do is to fill the left and right column with background color.
    so I added the content editor webpart but I am not able to set the background color in the content editor webpart.
    also I want that depending upon the middle column which includes the newsletter content, the left and right column should automatically fit with the page.

    Thanks
    Jaspreet

    Posted 5 months ago #

  2. eric
    Moderator

    You'll have to do this with CSS and/or inline styling or break the site open in Sharepoint Designer and do the modifications that way.

    It'll be tricky to do because over writing the background color for the web parts will affect them all globally in the site. You may need to open SPD and make some custom styles in a CSS file and apply those custom styles to the web parts you wish to change.

    Check out www.heathersolomon.com/blog for lots of great branding tips.

    Posted 5 months ago #

  3. idosp
    Member

    I do this often using inline styles. It helps if you understand CSS. I can provide some code here if you wish.

    Posted 5 months ago #

  4. KenCronin
    Member

    Eric is absolutely right. But you can "trick" the Content Editor Web Part into displaying a background color. Using this Each Content editor web part can have a different background color.

    Basically you apply a table cell to the entire content editor web part and change the cell color.

    Open the Content Editor Menu (Modify Shared Web Part)
    Click Source Editor
    Note: Do not save until the top and bottom code has been added
    At the VERY TOP before any other code paste in the following code:

    <TABLE height="100%" width="100%">
    <TR>
    <TD bgColor="lightblue">

    Now at the VERY BOTTOM after all other code paste in the following code:

    </TD>
    </TR>
    </TABLE>

    Click Save.

    You can modify the color that displays by adding the color name or Hex# after bgColor=. You can still use the Rich Text Editor as normal after adding the code.

    For information about colors you can use and different hex codes (Example-#FFFFFF) I recommend Web Monkey - http://www.webmonkey.com/reference/Color_Charts

    Hope that helps.

    Posted 5 months ago #

RSS feed for this topic

Reply

You must log in to post.