I am creating a custom page for a dynamic site and I was wondering if there was a way to block the Default CSS (of the overall site) from affecting my custom page. Nowhere on my custom page do I call up the default .css but I DO link to my custom .css for the particular page I am working on. Some of the .css is picked up from MY CSS, while other parts are altered by the CSS for the existing site. I didn't know if there was some way to ensure that a page only answers to ONE .css page. I basically want to BLOCK the Default style sheet from affecting my custom page. I hope this isn't too wordy and confusing of a question! Thank you!
You basically have two options. One is to just download their default CSS stylesheet, make a copy of it, and for each and every style they have defined, reset it to the auto value or whatever value works for your site's design. This will be extremely tedious, and won't work if they update their stylesheet, but should work.
Another option would be to use javascript to remove the stylesheet's association with the page. As long as the URL of the stylesheet you want to remove remains constant, you should be able to do this. A quick google search found the following code to do this:
function removejscssfile(filename, filetype){
var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none" //determine element type to create nodelist from
var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none" //determine corresponding attribute to test for
var allsuspects=document.getElementsByTagName(targetelement)
for (var i=allsuspects.length; i>=0; i--){ //search backwards within nodelist for matching elements to remove
if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1)
allsuspects[i].parentNode.removeChild(allsuspects[i]) //remove element by calling parentNode.removeChild()
}
}
removejscssfile("somestyle.css", "css") //remove all occurences "somestyle.css" on page
Essentially, what this does is it searches the page for any stylesheets, then checks their location, and if it matches what you want to remove, removes that stylesheet. The script I found also works for javascript files.
Related
Suppose I want all <textarea>s to have some property, but I don't want to modify all pages individually. The website uses a common .css file for all pages.
If it's a change of fonts, padding, paragraph colouring, etc, it's easy, I modify the site .css file and all pages inherit.
But what about adding attribs like onkeydown="STRING" (sorry, not onclick) or autocomplete="off" - can I do that in any way through the .css file, or do I have no choice but hard-coding in each textarea or adding an onload script to every page that has text area elements?
From my answer here:
CSS is not HTML. You cannot set or change the value of an HTML attribute using CSS.
[...]
If you're trying to assign metadata to a class name which then applies to all elements with that class name, that's (again) completely outside of the purview of CSS, and simply not possible in HTML. The only way to assign metadata to an element is to specify it as an attribute on that element. (You can move the attribute declarations to a script if you don't want to specify the attributes on every instance of that class within the markup, but at the end of the day the script still has to populate each element's dataset with those values. Depending on your needs, though, this may be sufficient.)
You don't need to add an onclick handler to every page that contains textareas. You can put the handler in a script and link to that script in every page, just as you would a stylesheet. If you mean you want to do this from the stylesheet alone without modifying the pages or introducing another external file, then the point about CSS not being HTML, or JavaScript for that matter, remains.
If that's still not an option, I'm afraid there are no alternatives. There certainly aren't any for the autocomplete attribute.
I am using the same style sheet for 2 pages (index.html & contact.html). All styling has been applied to index.html. Now I have copied and pasted the same code into contact.html, but have found that the new CSS styling I have tried to use will not apply to this page. The pathfile to the style.css sheet has not been changed. What I don't understand is why some of the styling is being applied from the other page but when trying to add new styling it does not?
Have you tried clearing your browser cache or going incognito/private browsing
Are you applying new styles using classes or ids? Id is unique, while classes are reusable. Also if you have inline styling it will override the stylesheet. Can you post your code as an example?
Well there can be a couple of reasons for this:
Make sure that your stylesheet is properly loading. I don't know if you are using in page styling or an external stylesheet but make sure that it actually exists there.
How can you do that? When you open the contact.html page in the browser, hit Ctrl + U if you are using windows or Command + U if you are using Mac. If it is an internal styling, you will be able to see the actual code there. If you are using an external stylesheet make sure that the <link> tag exists in the page. If it exists the right click on it and select Open file in a new tab. If you see can see the code in the next tab. It means that your styles are properly loading.
Make sure that your elements in the html page and stylesheet file have the same appropriate names. For example # of id's and . for classes.
If everything is okay then it can be a cache issue. Since browsers cache the static assets, you should consider refreshing the cache by Hard Reloading the page. How can you do that? It's simple, just hit Ctrl + Shift + R if you are using windows or Command + Shift + R if you are using Mac. If these keys don't work, just click and hold the reload button on the browser until it shows a dropdown. Then simply select Hard Reload.
In case it doesn't work, then send us a link to your webpage. I'm here to help you. Just let me now :-)
Is there a way to change the CSS style, according to what page the users clicks? And not load different CSS files every time, to do this?
I have a web mapping site, so in small devices I want to do display : none for the header, so the map's div will appear bigger. I will use media queries for this, but the header also changes in all the other pages. I want it to change only in the map's page.
How can I do this? It would be great if there is a method that you dont have to load different CSS files. Is it?
Thanks in advance.
EDIT
The structure of my files is like
<?php
error_reporting(E_ALL);
include_once('header.php');
//rest of the code of the file starts here....
where header.php contains header, menu bar, metadata.
So I cannot just give an id to the header, cause it will still be the same id visible from all the pages
Thanks again
If your page is static one and you need to make only one change, just create a class with display:none; and apply the same to the header without affecting any other page or page elements.
This way, your header also gets hidden and your purpose also gets resolved.
Other way would be to add an id to your <body> and by using parent child CSS selector, hiding your header subsequently for those pages.
Hope this helps.
ou can check your URL through JavaScript and add style for specific element
example
if (window.location.href.toString().toLowerCase().indexOf("map") != -1) { // If url contains maps
document.getElementById("p2").style.display="none";
}
I haven't quite the right process to change the body classes based on the page being viewed.
I have about 20 or so pages within a subsection that all have a different background color and reversed nav links from the main site.
I can't figure out if there is some kind of preprocess function to use (and which) in template.php or if I should do something specifically in the certain xx-page.tpl.php file.
Just adding an ID to the body tag in the xx-page.tpl.php isn't reliable due to browser caching.
I've seen this snippet:
if (drupal_is_front_page()) {
$vars['body_class'] .= ' home';
}
however, "is it the front or not" isn't enough because it's also not just a page, it's a specific page but I've either missed the syntax or am doing something wrong.
Is this a case where I need to create a custom function and if so, is the template.php page where it goes?
also, I'm in Drupal 6.26
Thanks
Are you looking for this function?
http://api.drupal.org/api/drupal/includes!theme.inc/function/template_preprocess_page/6
You might also want to have a look at the Context module.
I have some user controls that I'm loading in SharePoint and I would prefer to have all those styles contained in an external style sheet. What's the best way to link to an external stylesheet in CSS?
Thanks.
Can you not add a <link rel...> to the head? If not, can you this.page.header.controls.add?
This code will ensure that you only add 1 stylesheet reference to a page regardless of how many web parts you have on it - same code snippet can be used for javascript.
protected override void OnPreRender(EventArgs e)
{
const string stylesheet = "YourStylesheet.css";
if (!Page.IsClientScriptBlockRegistered(stylesheet))
{
Page.RegisterClientScriptBlock(stylesheet,
string.Format(#"<link href=""{0}/{1}"" rel=""stylesheet""/>",
this.ClassResourcePath, stylesheet));
}
base.OnPreRender(e);
}
Thanks,
I was looking at that way too complicated like. Your answer solved my problem and will actually work a lot better than the method that I was going to approach it from.
If you're using MOSS, you can remove this configuration from your code entirely by using SharePoint's built in alternate style sheet property.
Drop down the Site Actions menu, and select Site Settings->Modify All Site Settings.
On the resulting page, click on the Master page link in the Look and Feel column.
On the Site Master Page Settings page, scroll to the bottom to the Alternate CSS URL section. Select the Specify a CSS file... radio button and enter the URL of your style sheet. I put mine in the Home site's Style Library, but you can pretty much put it where you want.
If you like, you can set it for all the subsites to by selecting the Reset all subsites to inherit this alternate CSS URL checkbox.
Click the OK button.
Sadly,this configuration isn't available for WSS sites. But the object model does have it. So you can apply it with code in both WSS and MOSS, either in a web part or via something like PowerShell.
In code, once you have a reference to the the SPWeb object, say in a cleverly named variable called theWeb, you can just assign the URL of stylesheet with the following code:
theWeb.AlternateCssUrl = "http://server/site/library/stylesheet.css";
theWeb.Update();