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.
Related
I use VS 2010 . I add button to webfrom that created, but I can't change his position.
I read in previous questions that I need to change the layout to absolute , but it didn't work. when I drag the button to the center it's back automatically to left-center..
you can see that in the picture:
how can I fix that?
Thank you!!
solution:
Tools -> Options, and set HTML Designer -> CSS Styling to "Change positioning to absolute.."
Changing the position to absolute seems more like a workaround which would introduce further problems after "solving" this one. Unless you really know what you're doing for styling, don't do that.
Centering an element on a webpage is really a matter for the CSS styling. Take a look at the markup (HTML) view and find where that button is. You can add a class to that button for the CSS styling:
<asp:Button runat="server" ID="Button1" CssClass="centeredButton" ...
Then in your site's CSS file (Site.css might be the standard in the ASP.NET template? I don't remember) you can apply the styling you're looking for. There's a lot you can do at that point. Not knowing how the rest of the page is laid out, I can only offer very random suggestions. Something like this for example:
.centeredButton {
display: block;
margin: auto;
}
That's one way to center that particular element. There are definitely more, depending on how the rest of the markup/layout is structured.
First of all i recommend not to use this drag options. Because what happens behind this whenever you drag a button or anything, will make you more confused. You can do it using div or table.
I am dynamically creating controls, one of which is a multiline textbox. I have seen links about how to do it when it is hard coded into my aspx page, however I can't do that since the control is dynamically generated. I would like to avoid having to modify my .css files if possible. If anyone has any ideas on how to do this, any advice would be great thanks!
In general "resize:none" (there are funs of "overflow:auto") is the solution, therefore the typical option is to include it in your .css textarea definition and use the relative class name (if needed) in your aspx code. If needed means that by adding "textarea { resize: none; ... }" to your .css files there is no need to use CssClass in your asp:TextBox.
If you insist to not change your .css files, then you have to add a new css rule by JavaScript code somewhere (i.e. header control) on the server or add a new global .css file and serve it within your html header from aspx (this is better because you avoid checking existing css rules).
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);
I have a ASP.Net MVC view which contains other partial views derived of ViewUserControl. The view itself is contained in a master page, so the control hierarchy can be summarized as follows:
Master page - basic settings
ViewPage - "the" page
ViewUserControl - content component 1
ViewUserControl - content component 2
...
ViewUserControl - content component n
Additionally, we have a custom control for the declaration of CSS and Javascript files. This custom control ensures that, no matter how deep into the hierarchy, whenever there is a CSS or JS dependency it will be rendered inside the Page.Header, thus avoiding scattered and duplicated references. Let's call this custom control <my:dependency>.
All is well when <my:dependency> is hosted in the master or ViewPage. But if I use it deeper inside the content components, Page.Header is null. Debugging revealed that, for controls hosted in a ViewUserControl, their Page is the very ViewUserControl in which they're in, and so the Header is indeed missing.
How can I make <my:dependency> "see" the topmost ViewPage and get access to the Header? Thanks.
Now I could be wrong, but you appear to be trying to get a web forms control to work in MVC, something that is not recommended for reasons you've discovered.
You might want to look at something involving the ViewData collection.
Simon
I get this error when I try to have my C# class change the skin of an asp control:
The 'SkinId' property can only be set in or before the Page_PreInit
event for static controls. For dynamic controls, set the property before
adding it to the Controls collection.
My goal is to provide a panel, call it ID="response", on every page, and then dynamically change it's CSS class from Error to Success, or Success to Error (so it's red or green). And also I make it visible = true, when a response is created.
Apparently, I am forced to use CssClass attribute, which is the only way this will work.
As a side-off-topic note:
In PHP, you would not have a problem of using different "pre-init" "post-init" etc. A completely unnecessary process. You would simply change the html before you send it back to the user. I'm a bit confused why ASP.NET decides to overcomplicate everything. It's a bit silly for me to take time to learn all these different complicated processes to simply display a webpage. It takes time to learn all the quirks written in difficult-to-read ASP life-cycle documents on microsoft. Not to insult any microsoft people, but it's just not practical.
If it is a static control, that is you are defining the Panel in your .aspx page, then the only place to change the SkinId is in the PreInit method e.g.:
protected override void OnPreInit(EventArgs e)
{
base.OnPreInit(e);
String panelSkin = ViewState("panelSkin").toString();
panel1.SkinId = panelSkin;
}
Of Course, the PreInit method is only called when the Page is being first Initialized -- not on a PostBack.
You could save the skinId you wanted to use to the ViewState and then call a Response.Redirect("myPage.aspx")... and as seen above grab the skinId string from the ViewState and set the Panel skinId accordingly.
Alternatively, rather than using a Panel try using an UpdatePanel from the .Net Ajax library. Clicking a button in the UpdatePanel (provided it's setup to Trigger an ASyncPostBack) will run the OnPreInit method.
That said, provided you are changing the background, going with the CssClass property would be the most efficient way to do this.
ASP, and its child ASP.NET, is basically a huge hack of vanilla HTML and the IIS page renderer. It hooks into various stages of the lifecycle that already existed in IIS, rather than having its own lifecycle like PHP. As such, there are things you can do in certain areas because the things it depends on either aren't set in stone so you can change them, or are so you can work with them. The great power of ASP.NET, which is the interop with .NET classes and the .NET Framework, IMO makes up for some of its idiosyncracies.
Anyway, Skins are part of Themes, which are loaded early in the process so the controls can be initialized with their proper default Styles. That's the key; the Theme is locked after PreInit, but the Styles (and CssClasses) behind the Skins are editable right up to and including PreRender, which includes event handlers (which fire validation). So, set the Style or the CssClass dynamically.
To do it without a full postback, you can put the controls that should change color in an AJAX UpdatePanel, which can be re-rendered separately from the other elements of the page and will keep its current contents until the DOM is modified via the JavaScript client-side.
Setting the CssClass attribute is much closer to what you'd do with PHP, so why not just do that?
The two real benefits of Skin files are setting defaults for all controls (no skinId at all) or setting properties that can't be controlled with css.