I'm writing a SaaS application with a web front end written in ASP.NET. I'm not much of a designer, and my ASP.NET knowledge is not yet at the expert level - I usually focus on server side stuff - but I have a basic master page and style sheets, which do the trick.
Now I want to offer my customers the ability to customize their web site with their own style sheets, colors, background pictures etc. so that their customers will log onto their portal at mycustomer.mydomain.com and see the skin that "mycustomer" has chosen.
Haven't the faintest clue how to do this. How?
If you are allowing the customer to specify his own CSS (either as a File or in some textBox in your Page). You can simply save it as a .css file in a virtual directory and During Page_Load or Page_Init Event add it to your page. You need to push a Link tag to Header of the page
Like this:
// Define an HtmlLink control.
HtmlLink myHtmlLink = new HtmlLink();
myHtmlLink.Href = "~/CustomersCustomStyleSheet.css";
myHtmlLink.Attributes.Add("rel", "stylesheet");
myHtmlLink.Attributes.Add("type", "text/css");
// Add the HtmlLink to the Head section of the page.
Page.Header.Controls.Add(myHtmlLink);
Related
I have a site running Kentico 12SP MVC. For reasons, I won't get into, my Header and Footer have a z-index in the millions. Unfortunately, the z-index is so high that it blocks the pagebuilder features in Kentico. How can I add CSS/JS to detect whether I am inside the page builder and adjust the z-index accordingly?
Welcome to SO Jeremy!
Typically your styles are defined in the SCSS/LESS stylesheets in the MVC project. See the structure of this particular project. So you'll have to go back to your stylesheets in the project and make adjustments there, then publish that code change.
UPDATE
Thanks for the more clear definition of what you're looking for. To find out what is overriding your site's CSS do the following:
Go to the page in question in Xperience on the Page tab.
Right-click on the area in question and inspect that.
Determine what class is overriding the z-index. This element is nested within an i-frame and most likely has a parent/grantparent element with the class of page-builder.
In your MVC css, add an override for something like .page-builder .your-class .thats-causing .problems { z-index: 0; }
What this will do is when you're on the Page tab using page builder functionality, it will force that z-index to be lower so page builder items are displayed/work.
I am doing a web site in asp.net (making user controls) and use them in sitefinity pages.
My navigation bar button(s) is also a user control which is placed in a template.
Requriement is on current page button for that page should have different styles (color & bgcolor).
I am not getting how to implement this requirement. Guidance request please.
Edit:
I am not getting how to apply class on selected page. How to know in user control which page is current page. As both are separate user controls being used in a sitefinity page.
Thanks
Do you have a specific requirement around using a custom control for your navigation? If you use the Navigation control that comes with Sitefinity (it's in the widget dock) - it will automatically add a CSS class ("rtSelected") to the selected page
Using themes, you can easily customize your server controls with the pre-defined looks bundled with the .NET Framework or can make your own themes according to the look and feel of your website. try this link
http://www.codeproject.com/Articles/11886/Themes-and-Skins-in-ASP-NET-2-0
EDIT #1
try this link
How to make user controls know about css classes in ASP.NET
and
Apply CSS to single instance of Custom user Control in ASP:NET
If you can, you can get ready made themes by using telerik controls.
You can write css code for it as you want and then give link to that css as follows>>
<MyUserControls:MyMenuButton ID="SalesDocumentsMyMenuButton"
RootMenuItemText="Sales Documents"
RootMenuImage="~/images/common/sales_document.gif"
UseSeperator="true"
CssClass="css/myButtonMenu.css"
runat="server" />
You can also write css for codebehind for particular control as>>
<div class='<%= CssClass %>' >
<div id="contentPlaceholder" runat="server" class="contentPlaceholderStyle">
</div>
</div>
[CssClassProperty]
public string CssClass
{
get { return (string)(ViewState["CssClass"] ?? ""); }
set { ViewState["CssClass"] = value; }
}
You can create different themes and use it according to your condition.
Themes will contain different css files.
Create css-classes with same name but with different color or background-color
And use that theme according to your condition
Example
protected void BasePage_PreInit(object sender, EventArgs e)
{
this.Page.Theme = themeName;
}
Here is a tutorial
http://www.aspdotnet-suresh.com/2011/10/how-to-change-page-theme-dynamically-in.html
http://www.codeproject.com/Articles/18300/How-to-change-page-theme-in-asp-net-2-0-dynamicall
http://aspalliance.com/959_Themes_and_Master_Pages_in_ASPNET_20__A_Perfect_Combination.4
If I'm writing an ASCX control, and that control has markup that requires CSS, and that CSS will only be used by the control itself, is there an elegant way (besides just sticking it in the ASCX file itself) to include the .css file with it?
Ideally, I'd have control.ascx, control.ascx.cs, control.js, and control.css all as a little "package".
It brings up one problem and one concern so far:
Problem: Since the control is in a subdirectory, I don't want to use a tag hardcoded with the knoweldge that the css is in a subfolder. I'd like to write it so that it's relative to the control code (ie: same folder) but still be found at runtime.
Concern: If I did this for ten controls, it's ten more server hits I suppose. Maybe ScriptManager or the RadScriptManager or RadStyleSheet manager will magically aggregate them, but its not a showstopper for me either way.
Any ideas on how to solve the relative-path issue?
To get the correct path of your stylesheet relative to the page, call the ResolveClientUrl method of your user control, passing it the path of the stylesheet relative to the control:
HtmlLink link = new HtmlLink();
link.Href = this.ResolveClientUrl("control.css"); // same directory as the control
link.Attributes["type"] = "text/css";
link.Attributes["rel"] = "stylesheet";
this.Page.Header.Controls.Add(link);
Although each stylesheet will result in a separate request, you can mitigate the issue by enabling content expiration for them.
OK I'm new to DotNetNuke and need to write a simple module in DNN that will display an article for everyone, and allow the admin to edit the article/add a new one.
I have a test page that contains a DNN module with one module definition and two controls in that definition. The default control shows the article based on an articleID field in the querystring. You then click a button that is supposed to load the edit control and pass the articleID in the query string.
If I use EditURL() in the onClick the edit control is loaded with the correct articleID, but using the admin skin. If I use Globals.NavigateURL() then the correct skin is shown but my edit control isn't loading in the page.
Any clue as to how to what I'm doing wrong or how to get the edit control loading with the correct skin?
My two methods of switching to the edit control (in my button click event) are listed below:
string newURL = this.EditUrl("articleID", Request.QueryString["articleID"], "EditArticle");
Response.Redirect(newURL);
and
string newURL = Globals.NavigateURL(this.TabId, "EditArticle","articleID="+Request.QueryString["articleID"]);
Response.Redirect(newURL);
Actually you are doing this correctly - the editurl in DNN does load the Admin skin - usually this skin is based on someone administering content so it strips out all other modules and shows the 'basics'. Right or wrong this is what it does.
If you dont want to to do that you could provide a switch in the querystring and show a seperate panel or do a multiview control and show different views based on the switch in the query string.
There are a few other approaches like changing the content area to editing text area with ajax or using popup modal style windows.
I have an asp.net content page which is used inside of a master page (with header, menu and some links). I would like to reuse it in a different context without the master page (to not display the header and menu there), or with an empty master page if this is somehow possible. I don't want to violate DRY principle by taking the whole page and creating a standalone clone of it for obvious reasons. Is this somehow possible ?
Yes, you can set the master page dynamically in the content pages Page_PreInit method:
private void Page_PreInit(object sender, EventArgs e)
{
this.MasterPageFile = "MyMasterPage.master"
}
Set up some logic to dynamically choose which master page filename to pass in, and you are now sharing one content page with many master pages.
How about wrapping-up the shared content in a user control?
A user control is a kind of composite
control that works much like an
ASP.NET Web page—you can add existing
Web server controls and markup to a
user control, and define properties
and methods for the control. You can
then embed them in ASP.NET Web pages,
where they act as a unit.