We help IT Professionals succeed at work.

General Skins & CSS Question

stretch73
stretch73 asked
on
1,079 Views
Last Modified: 2013-11-26
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?
Comment
Watch Question

Top Expert 2007

Commented:
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.

Author

Commented:
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
}
Top Expert 2007
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
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>

Author

Commented:
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?
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.