Link to home
Start Free TrialLog in
Avatar of stretch73
stretch73Flag for United States of America

asked on

General Skins & CSS Question

I'm working on a site that currently uses skins and I'm trying to figure out the most logical way to use them.  For instance, we have a skin for gridviews.  The skin is good for setting stuff like pager setttings and cellpadding, things we know we'll always want the same for each control, but I'm having trouble setting stuff like the border.  I just want a black, 1 pixel, collapsed border on every instance of a gridview in the site but for some reason it won't work unless I set it in the CSS.  Which is another question related to this.  When do you set styles in CSS as opposed to in the skin, is there a general rule of thumb for this?
Avatar of R7AF
R7AF
Flag of Netherlands image
I would put as much as possible in the CSS. Put all images and css in one folder, and do this for each skin.

If you can give code we can take a look at why the code won't work. And I don't have Visual Studio, so I prefer an HTML example, preferably a complete HTML page with table, plus css in the header.
Avatar of stretch73
stretch73
Flag of United States of America image

ASKER

Here is the skin I have defined for the gridview:

<asp:GridView
    CssClass="Grid"
   
    PagerSettings-Mode="Numeric"
    PagerStyle-CssClass="GridPagerStyle"
    PagerStyle-BackColor="#339999"
    PagerStyle-HorizontalAlign="Left"
   
    CellPadding="3"
    CellSpacing="1"
   
    EditRowStyle-BackColor="#FFFFFF"
   
    EmptyDataRowStyle-CssClass="GridEmptyDataRowStyle"
    EmptyDataRowStyle-BackColor="#FFFFFF"

    SelectedRowStyle-BackColor="#D1DDF1"
    SelectedRowStyle-ForeColor="#333333"
   
    AlternatingRowStyle-CssClass="GridAltRowStyle"
    AlternatingRowStyle-BackColor="#FFFFCC"
   
    RowStyle-CssClass="GridRowStyle"
   
    HeaderStyle-CssClass="GridHeaderStyle"
    HeaderStyle-BackColor="#339999"
    HeaderStyle-Forecolor="#FFFFFF"
    HeaderStyle-Wrap="false"

    FooterStyle-CssClass="GridFooterStyle"
    FooterStyle-BackColor="#339999"
    FooterStyle-Wrap="False"

    runat="server" />

And here are a couple of the accompanying styles:
.GridHeaderStyle
{
      color:#FFFFFF;
      background-color: #339999;
      border: solid 1px black;
      border-collapse: collapse;
      text-align: center;
      vertical-align: middle;
      font-weight: bold;
      font-family: Arial;
      font-size: 15pt;
      font-weight: bold
}

Now unless I specifically specify the  HeaderStyle-CssClass="black_1px" element on the template field, that border doesn't show up.  I just assumed it would

.GridRowStyle
{
      border: solid 1px black;
      border-collapse: collapse;
      font-family: Arial;
      font-size: 8pt;
      text-align: left;
      vertical-align: middle
}

.GridHeaderStyle
{
      color:#FFFFFF;
      background-color: #339999;
      border: solid 1px black;
      border-collapse: collapse;
      text-align: center;
      vertical-align: middle;
      font-weight: bold;
      font-family: Arial;
      font-size: 15pt;
      font-weight: bold
}
ASKER CERTIFIED SOLUTION
Avatar of R7AF
R7AF
Flag of Netherlands image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of stretch73
stretch73
Flag of United States of America image

ASKER

Here's the HTML, sorry it's so dense:

      <table class="Grid" cellspacing="1" cellpadding="3" rules="all" border="1" id="ctl00_ContentPlaceHolder1_gvProjects" style="width:100%;">
            <tr class="GridHeaderStyle" style="color:White;background-color:#339999;white-space:nowrap;">
                  <th scope="col">&nbsp;</th><th align="center" scope="col" style="width:30px;"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvProjects','Sort$ProjectTypeCode')" style="color:White;">Type</a></th><th scope="col"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvProjects','Sort$ProjectName')" style="color:White;">Project Name</a></th><th scope="col"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvProjects','Sort$ProjectID')" style="color:White;">Project ID</a></th>
            </tr><tr class="GridRowStyle" style="color:#333333;background-color:#D1DDF1;">
                  <td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvProjects','Select$0')" style="color:#333333;">Select</a></td><td align="center">B</td><td>
                                        <span id="ctl00_ContentPlaceHolder1_gvProjects_ctl02_lblProjectName" class="normal_8">BUSINESS OBJECTS</span>&nbsp;
                                    </td><td align="center">266</td>
            </tr><tr class="GridAltRowStyle" style="background-color:#FFFFCC;">
                  <td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvProjects','Select$1')">Select</a></td><td align="center">B</td><td>
                                        <span id="ctl00_ContentPlaceHolder1_gvProjects_ctl03_lblProjectName" class="normal_8">CCCP - 3815</span>&nbsp;
                                    </td><td align="center">268</td>
            </tr><tr class="GridRowStyle">
                  <td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvProjects','Select$2')">Select</a></td><td align="center">B</td><td>
                                        <span id="ctl00_ContentPlaceHolder1_gvProjects_ctl04_lblProjectName" class="normal_8">CREDIT DECISIONING EVALUATION </span>&nbsp;
                                    </td><td align="center">269</td>
            </tr><tr class="GridAltRowStyle" style="background-color:#FFFFCC;">
                  <td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvProjects','Select$3')">Select</a></td><td align="center">B</td><td>
                                        <span id="ctl00_ContentPlaceHolder1_gvProjects_ctl05_lblProjectName" class="normal_8">CHARGE-OFF - RECOVERY </span>&nbsp;
                                    </td><td align="center">272</td>
            </tr><tr class="GridRowStyle">
                  <td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvProjects','Select$4')">Select</a></td><td align="center">B</td><td>
                                        <span id="ctl00_ContentPlaceHolder1_gvProjects_ctl06_lblProjectName" class="normal_8">CRMS </span>&nbsp;
                                    </td><td align="center">275</td>
            </tr><tr class="GridAltRowStyle" style="background-color:#FFFFCC;">
                  <td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvProjects','Select$5')">Select</a></td><td align="center">B</td><td>
                                        <span id="ctl00_ContentPlaceHolder1_gvProjects_ctl07_lblProjectName" class="normal_8">DW3</span>&nbsp;
                                    </td><td align="center">279</td>
            </tr><tr class="GridRowStyle">
                  <td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvProjects','Select$6')">Select</a></td><td align="center">B</td><td>
                                        <span id="ctl00_ContentPlaceHolder1_gvProjects_ctl08_lblProjectName" class="normal_8">MIGRATION </span>&nbsp;
                                    </td><td align="center">283</td>
            </tr><tr class="GridAltRowStyle" style="background-color:#FFFFCC;">
                  <td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvProjects','Select$7')">Select</a></td><td align="center">B</td><td>
                                        <span id="ctl00_ContentPlaceHolder1_gvProjects_ctl09_lblProjectName" class="normal_8">NSTT </span>&nbsp;
                                    </td><td align="center">284</td>
            </tr><tr class="GridRowStyle">
                  <td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvProjects','Select$8')">Select</a></td><td align="center">B</td><td>
                                        <span id="ctl00_ContentPlaceHolder1_gvProjects_ctl10_lblProjectName" class="normal_8">OCE</span>&nbsp;
                                    </td><td align="center">285</td>
            </tr><tr class="GridAltRowStyle" style="background-color:#FFFFCC;">
                  <td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvProjects','Select$9')">Select</a></td><td align="center">B</td><td>
                                        <span id="ctl00_ContentPlaceHolder1_gvProjects_ctl11_lblProjectName" class="normal_8">PORTFOLIO INFORMATION MANAGEMENT SYSTEM </span>&nbsp;
                                    </td><td align="center">287</td>
            </tr><tr class="GridRowStyle">
                  <td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvProjects','Select$10')">Select</a></td><td align="center">B</td><td>
                                        <span id="ctl00_ContentPlaceHolder1_gvProjects_ctl12_lblProjectName" class="normal_8">PORTFOLIO SUMMARY </span>&nbsp;
                                    </td><td align="center">288</td>
            </tr><tr class="GridAltRowStyle" style="background-color:#FFFFCC;">
                  <td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvProjects','Select$11')">Select</a></td><td align="center">B</td><td>
                                        <span id="ctl00_ContentPlaceHolder1_gvProjects_ctl13_lblProjectName" class="normal_8">REGULATION O </span>&nbsp;
                                    </td><td align="center">289</td>
            </tr><tr class="GridRowStyle">
                  <td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvProjects','Select$12')">Select</a></td><td align="center">B</td><td>
                                        <span id="ctl00_ContentPlaceHolder1_gvProjects_ctl14_lblProjectName" class="normal_8">RERA RESEARCH PORTAL </span>&nbsp;
                                    </td><td align="center">290</td>
            </tr><tr class="GridAltRowStyle" style="background-color:#FFFFCC;">
                  <td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvProjects','Select$13')">Select</a></td><td align="center">B</td><td>
                                        <span id="ctl00_ContentPlaceHolder1_gvProjects_ctl15_lblProjectName" class="normal_8">IMPROVED RISK RATING </span>&nbsp;
                                    </td><td align="center">291</td>
            </tr><tr class="GridRowStyle">
                  <td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvProjects','Select$14')">Select</a></td><td align="center">B</td><td>
                                        <span id="ctl00_ContentPlaceHolder1_gvProjects_ctl16_lblProjectName" class="normal_8">STRUCTURED AD HOC </span>&nbsp;
                                    </td><td align="center">293</td>
            </tr><tr class="red_bold_9" align="left" style="background-color:#339999;">
                  <td colspan="4"><table border="0">
                        <tr>
                              <td><span class="normal_8">1</span></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvProjects','Page$2')">2</a></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvProjects','Page$3')">3</a></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvProjects','Page$4')">4</a></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvProjects','Page$5')">5</a></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvProjects','Page$6')">6</a></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvProjects','Page$7')">7</a></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvProjects','Page$8')">8</a></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvProjects','Page$9')">9</a></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvProjects','Page$10')">10</a></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvProjects','Page$11')">...</a></td>
                        </tr>
                  </table>
Avatar of stretch73
stretch73
Flag of United States of America image

ASKER

Okay, I added this to the GridView's skin:

    HeaderStyle-Wrap="false"
    HeaderStyle-BackColor="#339999"
    HeaderStyle-ForeColor="#FFFFFF"
    HeaderStyle-HorizontalAlign="center"
    HeaderStyle-Font-Bold="true"
    HeaderStyle-VerticalAlign="middle"
    Headerstyle-Font-Names="Arial"
    HeaderStyle-Font-Size="9pt"

And it appears exactly how I want it.  I guess my question now is, why can't I just create this:

.GridHeaderStyle
{
      color:#FFFFFF;
      background-color: #339999;
      text-align: center;
      vertical-align: middle;
      font-weight: bold;
      font-family: Arial;
      font-size: 9pt;
      font-weight: bold
}

in the CSS file and then just put this:

HeaderStyle-CssClass="GridHeaderStyle"

in the skin?