how to add css in web user control

Question

2.00/5 (1 vote)

See more:

i am using a web user control and there is a modal popup, i want to add css to the modal popup.
i have googled this topic but haven't get any fruitful answer. Please give me some proper solution through which i can use css to web user control.

Thanks in advance. Code given below:

ASP.NET

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="PopupLoginControl.ascx.cs" 
Inherits="Ajax_PopupLoginControl" %> 
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxtoolkit" %>

<script type="text/css" src="<%= ResolveUrl("../css/style.css") %>"></script> 
<link href="../css/style.css" rel="stylesheet" type="text/css" /> 

<asp:Button ID="btnShowPopup" runat="server" Style="display: none" /> 
<ajaxtoolkit:ModalPopupExtender BackgroundCssClass="modalBackground" CancelControlID="btnClose"  runat="server" PopupControlID="Panel1" ID="ModalPopupExtender1" TargetControlID="btnShowPopup" /> 
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" DefaultButton="btnOk"> 
<table width="100%" border="0" cellpadding="2" cellspacing="5"> 
   <tr > 
      <td style="width:35%;padding-removed50px;"> </td> 
      <td style="background:removed(../images/item_box.gif) repeat-x;"> 
          <asp:Label id="labMsg" runat="server" /> Username : admin Password : admin 
      </td>
   </tr>
   <tr>
      <td align="right" valign="middle"> Email Id : </td> 
      <td>
          <asp:TextBox ID="txtLogin" runat="server"> 
      </td>
   </tr> 
   <tr>
      <td align="right" valign="middle"> Password : </td>
      <td>
         <asp:TextBox ID="txtPassword" runat="server" TextMode="Password"> 
      </td>
   </tr>
   <tr>
      <td> </td>
      <td> 
        <asp:Button ID="btnOk" OnClick="Login" runat="server" Text="Sign In" /> 
        <asp:Button ID="btnClose" runat="server" Text="Cancel" /> 
      </td> 
   </tr>
</table>

Posted 9-Jul-12 19:10pm

sahabiswarup

Updated 13-May-20 17:30pm

Vani Kulkarni

v2

Add a Solution

Comments

Sergey Alexandrovich Kryukov 10-Jul-12 1:35am

CSS (style sheet) or a style?
--SA

sahabiswarup 10-Jul-12 1:58am

Sergey Alexandrovich Kryukov i want to apply css

4 solutions

Solution 1

I am assuming that you are using Modal Popup Extender from AJAX Control Toolkit. Add below property to your Modal Popup:
BackgroundCssClass="modalBackground"

CSS can be defined in your CSS Class and referred in the above property.

C#

.modalBackground
{
    background-color:
    filter:alpha(opacity=70);
    opacity:0.7;
}

For more information look at below links:

Modal Popup Extender Basics[^]
ModalPopup Extender[^]

Posted 9-Jul-12 19:17pm

Vani Kulkarni

Comments

sahabiswarup 10-Jul-12 1:20am

Thanks for you reply; i have used above code to apply css in modal popup extender.
But it is not working in web user control.

Jim Jos 10-Jul-12 1:43am

The web user control is your own control? Please provide the code for that control also..

sahabiswarup 10-Jul-12 1:44am

Here is my web user control code

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="PopupLoginControl.ascx.cs"
Inherits="Ajax_PopupLoginControl" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxtoolkit" %>
<script type="text/css" src="<%= ResolveUrl("../css/style.css") %>"></script>
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<asp:Button ID="btnShowPopup" runat="server" Style="display: none" />
<ajaxtoolkit:ModalPopupExtender BackgroundCssClass="modalBackground"
CancelControlID="btnClose" runat="server" PopupControlID="Panel1" ID="ModalPopupExtender1"
TargetControlID="btnShowPopup" />

<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" DefaultButton="btnOk">
<table width="100%" border="0" cellpadding="2" cellspacing="5">
<tr >
<td style="width:35%;padding-top:50px;">
</td>
<td style="background:url(../images/item_box.gif) repeat-x;">
<asp:Label id="labMsg" runat="server" />
Username : admin
Password : admin
</td>
</tr>
<tr>
<td align="right" valign="middle">
Email Id :
</td>
<td>
<asp:TextBox ID="txtLogin" runat="server">
</td>
</tr>
<tr>
<td align="right" valign="middle">
Password :
</td>
<td>
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password">
</td>
</tr>
<tr>
<td>

</td>
<td>
<asp:Button ID="btnOk" OnClick="Login" runat="server" Text="Sign In" />
<asp:Button ID="btnClose" runat="server" Text="Cancel" />
</td>
</tr>
</table>

Vani Kulkarni 10-Jul-12 2:15am

Try keeping modalBackground CSS class in this page for testing purpose, see if it works.

sahabiswarup 10-Jul-12 5:14am

I have also try your mentioned method but it doesn't work.

Solution 3

include your css file to master page or main page which is contain web user control thats it...

Posted 11-Sep-12 12:29pm

Hasan Huseyin Ozkaya

Solution 4

in .ascx

ASP.NET

<link href="../css/style.css" rel="stylesheet" type="text/css" runat="server" id="linkCSS1" />

in .cs Page_Load

C#

linkCSS1.Attributes("href") = ResolveUrl(linkCSS1.Attributes("href"));

Posted 13-May-20 17:31pm

foosam

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

sahabiswarup · Accepted Answer · 2012-07-09T23:48:00

Solution 2

VS2010 adds this DOCTYPE by default -

Quote:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Change it to

Quote:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

This solves the issue. Stylesheet gets applied properly !!!

Posted 9-Jul-12 23:48pm

sahabiswarup

Comments

Vani Kulkarni 10-Jul-12 6:03am

Interesting did not know about this.

sahabiswarup 10-Jul-12 7:17am

it works..[:)]