I have a master page with a contentplaceholder control inside the head tag so that I can easily add any contents to the head tag (like link tags, styles, scripts .. etc) from the content pages.
Now, on one of the content pages, I have a style sheet (inline, ie. inside a style tag, not linked with a link tag) that I want to show/hide depending on the state of the page (the page works like a wizard using a multiview control on the page). I tried to wrap the stylesheet inside a placeholder control with Visible = false, then set Visible to true in the code but that didn't work, the style tag is not rendered in the html. I removed the placeholder control and added runat="server" directly to the style tag but that didn't work too.
The reason I keep the styles hidden in the first place is that they contain formatting placeholders, ie. {0}, {1} ..etc, which I replace in the code behind before showing the stylesheet. I don't want to send the styles to the client with these placesholders. To make it clearer, the styles look similar to this:
<asp:placeholder ID="_stylesPlaceHolder" runat="server" Visible="false">
<style type="text/css">
#elementid
{
width: {0}px;
height: {0}px;
overflow: hidden;
position: relative;
}
#elementid2
{
position: absolute;
width: {1}px;
height: {2}px;
top: {3}px;
left: {4}px;
}
.. and so on
</style>
</asp:placeholder>
I could try to add the styles dynamically from the code behind page (using Page.Header.StyleSheet.CreateStyleRule for example) but I prefer to keep them in the .aspx file for the sake of separating the html from the code and also to make it easier to change the styles with no dynamic values.
Thanks
OK, now I finally got it. First of all it's nothing wrong with ASP.NET. I was testing with google Chrome when I posted the question. As I indicated in my comment above, I tested with FireFox afterwards and found the style tag was actually there.
I checked again in Chrome but this time I checked in the code inspector instead of the page source, the style tag is also there. Chrome didn't like the style tag with the placeholders (I was testing so I still didn't replace the placeholders) and decided to hide it from the page source view and push it under the rug! Good boy!!
Related
I am trying to overwrite a style that is in a master page with one on the local page (I can not edit the master page). NOTE I had to remove parts of the tags in my code so they showed up in comments
I have a tag in a master page that looks like this:
<img class="paddingT5" src="~/Content/themes/mobius/img/smallMobiusLogo.png" />
With the tag in a separate stylesheet defined like this:
.paddingT5 {
padding-top: 5px;
}
I know I can write a style on the local page that will overwrite the style in the master page (already done it with page background color.
.paddingT5 {
padding-top: 5px;
background-image: url("~/Areas/MO/Views/SRT/TazDizzyImage.jpg");
}
If I change the padding in the above it works, but the image will not change.
Either I have the wrong CSS style, or I just can not do this.
In my html webpage I insert an iframe
but in this iframe bottom show a div which's class name mobile-desktop-link
So you want to hide the "view web version" link? Alright, than you can use this:
.mobile-desktop-link a.home-link { display: none; }
Add this to your stylesheet and you are ready to go. Of course this is only possible if the iFrame is on your domain. If you have tried the snippet I shared here above, with or without !important statement and it did not work? Well than, you can't remove it.
So my site is locked at the top of the browser which is correct, however when I hit reload (command + R) on this gallery page it now vertically centers everything which is not what I want. It's a template based site (squarespace) with stuff I have added.
I added this css:
#canvas { top: 0 !important; margin-top: 0 !important;}
and this HTML
<script type="text/javascript">
window.onload=function(){
document.getElementById('canvas').removeAttribute('id');
document.getElementById('canvasWrapper').removeAttribute('id');}; </script>
When you first load the page, you have a div (with ID something like "yui_3_10_1_1_1376940471763_412") that has no inline styling. So everything looks fine.
When you reload the page, that div no longer has an ID, and instead has an inline top margin added to it, apparently by Javascript, which pushes your site down.
Meanwhile, your code makes no sense. You've applied CSS to the div with id="canvas", and then used Javascript to remove that id, giving your CSS nothing to apply to.
Having removed that, your page is also throwing a JS error because a SquareSpace function in site.js is looking for the IDs you've deleted.
I'd try removing your added JS (leaving "canvas" and "canvas-wrapper" intact). Your CSS (with the "!important" tags) should override any inline styling that SquareSpace adds.
I have a Sharepoint 2010 intranet and I am designing the current template with my own css file. I have added my custom css file to the style library and have added this piece of code in a masterpage at the end in my tag:
<SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/custom/custom.css%>" runat="server"/>
Now I always need to add the !important tag in my css classess which are also used in the default sharepoint css file. I dont want to have to do that every time. Is there some solution where I can override my own custom css over the default sharepoint css file?
After your page is rendered by SharePoint in the browser, view the source. It is likely that your CSS page is listed before out of the box style sheets like corev4.css.
To rearrange this ordering try:
<SharePoint:CssRegistration
name="<% $SPUrl:~SiteCollection/Style Library/custom/custom.css%>"
after="corev4.css"
runat="server"/>
For more information on the After property, see:
CssRegistration.After Property
SharePoint CSSRegistration or Link?
What is new with the CssRegistration control in SharePoint 2010
This sounds like a CSS specificity problem. This article has lots of helpful explanations of the subject.
If you have written the same rule into your external style sheet
twice, than the lower rule in your style sheet is closer to the
element to be styled, it is deemed to be more specific and therefore
will be applied.
e.g. In the following case, the padding would be set as 10px, not 5px.
#content h1 {
padding: 5px;
}
#content h1 {
padding: 10px;
}
To fix your current problem, either as Dipaks suggested add your css directly in the page (as this would take preference over external css files), or even better, and more simply, just add the reference to your css file after the reference to the Sharepoint css, in which case, if they have equal specificity, your css would be applied.
I have a page from which I call fancybox which contains some html template (something like an email template). The problem is that all CSS from the main page affects the content in the fancybox and vice versa. What I would like is to isolate them somehow, so that their CSSs don't affect each other.
Example: I have background image set for h3 for the main page. Also, in fancybox I have h3 element which has no CSS assigned to it, but it pulls the style from the main page and gets the same background image (which shouldn't happen).
Is this somehow possible?
You could split your CSS into multiple files, only pulling in what you need to for each html. If you aren't able to do that you can give the body a specific #id for your template that gets loaded into the fancybox.
<body id="fancy_content">
and then adapt your styles for that template
body#fancy_content h3 {
color: green;
}
You may still end up with a bit of style clash if you leave it in one file but this will give you a method to go on to get it working.
You have 3 options really.
Run the fancybox content in iframe mode which means the content will have to be on it's own page without the main stylesheet. You can do any styling you like here or none at all.
Reset styles in the fancybox content, though this may be quite tedious depending on the number of elements affected.
Place the fancybox content outside the main #wrapper div of your page, and make all page styles inherit from #wrapper. i.e. instead of h3 {...} use #wrapper h3 {...}
try adding IDs to your html elements then use CSS IDs
h3#idname { color: #FF0000; }