[RESOLVED]ASP.NET CSS in CustomPlace holder.

Hi,

I have a MastePage and one Default.aspx page.

In my MasterPage i have done one layouts so that it would fitt all my pages and the layouts are definded in my CSS.

<head runat="server">
    <title>Portal</title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>

This is no problem.

Now in my Default.aspx site i have made a "Custome placeholder" called "DefaultContent".

<asp:Content
ID="DefaultContent"
runat="server"
contentplaceholderid="MainContentPlaceHolder">

<asp:Button
ID="LeftMenuBarAdminButton"
runat="server"
Text="Admin"
/>

</asp:Content>

I want
to use my stylesheet like this:

#LeftMenuBarAdminButton

{

border-color:
White;

font-weight:bold;

color:White;

}

but this don´t work?, how so i use the same stylesheet do modify the button?

Hi,

Try to change the code as below:

<asp:Button ID="LeftMenuBarAdminButton" runat="server" CssClass="MyClass" Text="Admin" />

And in Css:

.MyClass
{ border-color: White; font-weight:bold;
color:White;
}

The reason why your code doesn’t work is, the ID of the control will be changed when it is sent to browser.

 If you right click on your page once it is rendered on browser, and select ViewSource, you can see the ID of the control will be prefixed with some auto controlIds.

See this reference:

http://highoncoding.com/Articles/703_Understanding_ClientIDMode_Mode_Feature_in_ASP_net_4_0.aspx

If you want to refer # (control Id) instead of . (dot – class name) in Css, then, you would need to grab the exact control that you can see in ViewSource and put it there in css.

#Your_Generated_Control_Id_Here
{
border-color: White;
font-weight:bold;
color:White; 
}

Otherwise, you would need to use Static control Ids.
To know more about ControlIDs:

http://msdn.microsoft.com/en-us/library/system.web.ui.clientidmode(v=vs.110).aspx

Hope this helps.

Thank you i will try this.

I have been looking into .skins is that something that would work with master page and default page and what im trying to do?

Yes ofcourse, skins and Themes together will work with all the controls and it is a separate topic altogether. You can start posting new thread, if you have any specific questions around it.

To learn more about skins:

http://www.codeproject.com/Articles/11886/Themes-and-Skins-in-ASP-NET

Hi,

Thank you this works so i have marked your answer.

But for us that don´t know the differens between .(dot) and #(hashtag) when using CSS what is the differens so that "we" know in the future?

 

. (dot) hooks to the class name that you can apply for multiple controls.

For example, if you define your css class as MyCssClass then, that can be applied to multiple div controls or span tags etc.

.MyCssClass
{
   /* styles here */
}


<span class="MyCssClass" ../>
<div id="div1" class="MyCssClass" ...> </div>
<div id="div2" class="MyCssClass" ...> </div>

All the above three tags share the same style, because they have same class="MyCssClass" associated with.

# (hash) represents the ID of the control.

#YourCtrlID
{
   /* styles here */
}

<span id="YourCtrlID"> </span> -- This tag may be in defaultOne.aspx

<span id="YourCtrlID"> </span> -- This span tag may be in defaultTwo.aspx

<div id="YourCtrlID"> ..</div> -- This tag may be in defaultOne.aspx or any other page

<div id="YourCtrlID"> </div> -- This div tag may be in defaultThree.aspx

All the above controls will share the same style, as they have same ID.

 

Leave a Reply