How edit <rich:fileUpload> CSS?

Question

I'm trying to show only the button add and the uploaded picture below the button, but it doesn't matter what I do in my CSS, the table generated by richfaces is always the same:

This is my form using richfaces:

<ui:define name="content">
        <h:form>
            <h:panelGrid>
                <rich:fileUpload fileUploadListener="#{fileUploadBean.listener}" id="upload" acceptedTypes="jpg, gif, png, bmp"  ontyperejected="alert('Just JPG, GIF, PNG and BMP are allowed');" maxFilesQuantity="12" immediateUpload="true" >
                    <a4j:ajax event="uploadcomplete" execute="@none" render="info" />
                </rich:fileUpload>

                <h:panelGroup id="info">
                    <h:outputText value="Add picture" rendered="#{fileUploadBean.size==0}" />
                    <rich:dataGrid columns="4" value="#{fileUploadBean.files}" var="file" rowKeyVar="row">
                        <a4j:mediaOutput element="img" mimeType="image/jpeg" createContent="#{fileUploadBean.paint}" value="#{row}" style="width:100px; height:100px;" cacheable="false" />
                    </rich:dataGrid>

                    <br />
                    <a4j:commandButton action="#{fileUploadBean.clearUploadData}" render="info, upload" value="Clear Uploaded Data" rendered="#{fileUploadBean.size>0}" />
                </h:panelGroup>
            </h:panelGrid>
        </h:form>
    </ui:define>

And this is how is generated :

I want something more simple 'cause in another moment I will some jQuery slider plugin. But I can't disappear with this table generated by richfaces. And yes skins are disable in my richfaces configuration:

update Following the suggestion my CSS look like this now:

    <style>
    div div.rf-fu { border: 0px; width: 85px; }
    div div.rf-fu-hdr { border: 0px; }
    span span.rf-fu-btn-clr { border: 0px; }
    span.rf-fu-btns-lft{ width: 85px; }
    span.rf-fu-btns-rgh{ display: none; }
    div div.rf-fu-lst { display:none; }
    </style>

And now my add.. file button looks like:

These post was very useful too:

Should I use 'border: none' or 'border: 0'?
Inner div has borders - how to override with a class on an outer div?

Answer 1

You can use Adrian's answer to override richfaces css however you don't need to use !important to override richfaces css. Just use selector specificity to override the css applied by richfaces.

For Instance in case where you are using important, apply the css as:

div div.rf-fu-lst { display:none } and it will work for you.

Answer 2

I'm currently doing this for my project. You have to override the richfaces css in your stylesheet like this:

.rf-fu, .rf-fu-hdr {
    float: left;
    width: auto;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
}

.rf-fu-btn-cnt-add {
    paddin-left: 0;
    cursor: pointer;
}

.rf-fu-btn-add {
    margin: 0;
}

.rf-fu-btns-rgh, .rf-fu-lst {
    display: none;
}

.rf-fu-btns-lft {
    width: 100%;
}