Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
saharisahari 

Background Image for a Page Block Table

Hi

 

I need to have a background image for a pageblock table.

But I see we cannot include a style class for a page block table.

Is there any work around for this?

Any help is greatly appreciated.

Edwin VijayEdwin Vijay

Hi,

 

You will have to override the style defenitions of the Pageblocktable...

 

!important keyword is what you would have to use..

 

This article might help you .. Click here .. Let me know if you still find any issues
saharisahari

Hey Edwin,

 

Thanks for your reply. But I could'nt know the styleclass for the page block table.

Could you please explain me a little more detailed?
JeeedeeeJeeedeee

Just a question, do you want to add an image to the header of the pageblocksection, or to the content itself. In the first case I only see a javascript option. In the second case, maybe you can add an pageblocksection item? Anyway, I was having some fun tonight and below is my code. I am curious if you have found already a better solution.

 

 

<apex:page>
<style>
.backgroundimage {
    background-image: url('https://na5.salesforce.com/img/sales_logo_sum10.gif');
    !important; }
</style>

<script src="/js/dojo/0.4.1/dojo.js"></script>
<script type="text/javascript">
    // This functions adds an image to the upper area, containing the name of the pageBlockSection
    function changeimg() {
         // Here I retrieve my pageblocksection which is called 'With image'
         var elements = document.getElementsByName('With image');
         // I append the image class to the parentNode, this results in the fact
         // that I have a original small header, with part of the image (depending on the size)
         elements[0].parentNode.className = elements[0].parentNode.className + ' backgroundimage';
    }
    dojo.addOnLoad(changeimg);
</script>


    <apex:pageBlock title="Test with background image">
        <apex:pageBlockSection id="anID" title="With image" showHeader="true" >
            <apex:pageBlockSectionItem  dataStyleClass="backgroundimage" >
                Some content here with an backgroud image
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>

 

 

Greetings, Jan-Dirk