I'm looking for a way to include parts of one page into another page. The issue that comes up is that the other page has different styling than my main page. Is there a way to use the other style for some of the content and keep the old style for the already existing content?
For example: I have a navbar that I want to keep on every page, but my blog.html page has different styling than my navbar. How can I keep my navbar styling without affecting the blog.html style?
Yes! you can maintain both styles in the same page. But condition is that both styles elements (tag classes and id) properties can't match each other style. you must have to custom style of the included page. This style may be inline or included like css file.
you can include css style file like this:
<link rel = "stylesheet" type = "text/css" href = "myStyle.css" />
and inlcude php file:
include('header.html);
Or
include('abc.html);
Create a stylesheet and refer to that on all the webpages you want to copy the style on. If you want to overide a part of the style, write a the new piece of code after reffering to the stylesheet.
<link rel = "stylesheet" type = "text/css" href = "myStyle.css" />
Related
I'm developing my own site and it supports multi themes for example (light & dark) theme when you click on option it apply theme and no problem to face but when you reload page you have then to choose theme again.
I've tried to fix that by adding key and value for local storage and I saw a lot of tutorials about it and no progress.
HTML Code
Head
<link rel=stylesheet" href="view/light-view.css">
default theme it will changes after user choose theme and replace light-view.css with theme name.
Body
<span class="mode-toggler" data-value="view/light-view.css">Light</span>
<span class="mode-toggler" data-value="view/dark-view.css">Dark</span>
set data-value into css default theme after click I achieve this by jquery
jQuery Code
$('.mode-toggler').click(function() {
// Change attribute of css default theme by checking for statements with href attribute contains view keyword
$("link[href*='view']").attr("href", $(this).attr("data-value");
});
So firstly you need to set in localstorage, the user selected theme:
$('.mode-toggler').click(function() {
// Change attribute of css default theme by checking for statements with href attribute contains view keyword
$("link[href*='view']").attr("href", $(this).attr("data-value"));
// set localstorage
localstorage.setItem("selectedTheme", $(this).attr("data-value"));
});
And when you load the webpage next time, you will have to check for selectedTheme even before your page has loaded. Just include this script in you head tag.
<script>
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = localstorage.getItem("selectedTheme") || "view/light-view.css";
document.head.appendChild(link);
</script>
But I am afraid that this might lead to a flicker because at first, the raw html(without CSS) will get painted in your browser and then the whole of CSS gets inserted and DOM repaints with CSS. You can solve this by removing theme related CSS in a separate file(say darktheme.css) and put all other CSS in a constant css file(styles.css). While the page loads, load it with styles.css and load the *theme.css through script tag.
I'd like to apply Bootstrap classes globally to my website and not have all the website elements jump around as the Bootstrap classes get applied through jQuery.
For example, I'd like to make every h1 element have the Bootstrap classes text-center and border-bottom. To do this, I can use jQuery's .addClass() method to apply the appropriate Bootstrap classes to all matching elements. The problem is that every time a user goes to a different page on the website, the un-styled elements load first, then they jump around as the Bootstrap classes get applied. I'm assuming this happens because my jQuery script only runs after the page has finished loading.
To avoid this, I could just put the Bootstrap classes directly in the h1 element, like so: <h1 class="text-center border-bottom">...</h1>. Obviously this is not a good solution though because I don't want to have to "hard-code" the classes onto every h1 element across the site.
Is there a way to apply Bootstrap classes before loading/publishing the website so that the "jumping" of web page elements doesn't happen?
I'm currently hosting the website locally using XAMPP and I am using PHP to include the same header and footer across all pages. The header and footer contain the necessary Bootstrap styling and script resources.
What I like to do is wrap my HTML in a div, lets call it wrap. And in the page's head:
<style>.wrap{display:none;}</style>
then in my 'CSS` file have
.wrap{display:block;}
Then in the footer defer the loading of my css:
<noscript id="deferred-styles">
<link rel="stylesheet" type="text/css" href="compressed.css" />
</noscript>
<script>
var loadDeferredStyles = function() {
var addStylesNode = document.getElementById("deferred-styles");
var replacement = document.createElement("div");
replacement.innerHTML = addStylesNode.textContent;
document.body.appendChild(replacement)
addStylesNode.parentElement.removeChild(addStylesNode);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
else window.addEventListener('load', loadDeferredStyles);
</script>
This will "hide" the contents of the page until the CSS is full loaded.
I also compress all of my CSS into one file, which is easy as I developed a custom CMS and don't use wordpress, but that is a different conversation.
I am working on a shopping cart on Netsuite coded with nested tables... I know it sucks.
Because I only have access to fields to customize the website I need a JS snippet to be able to load a specific CSS file for the shopping cart (to avoid styling the rest of the website)
I have never done that before, here is how I would start:
<script type="text/javascript">
var path = window.location.pathname;
if(path.indexOf('/Cart') !=-1 {
// load css file
}
</script>
What code would do that for me?
Aside from closing your if(... with a ), this should get you going:
var styles = document.createElement("link");
styles.rel = "stylesheet";
styles.type = "text/css";
styles.href = "file.css"; // your file's URL
document.getElementsByTagName("head")[0].appendChild(styles);
While testing the url does work there is a better way to add tab and category specific markup.
In your website theme in the "Additions to Head" section add a tag <TAB_ADDONS> and add that to the site builder Tags but with a blank body
Then go to your list of tabs and find the shopping cart tab.
Edit it and select Tag Overrides
find TAB_ADDONS and enter:
<link rel="stylesheet" type="text/css" href="file.css">
you'd use the root relative url for the href.
This keeps your theme much cleaner and allows arbitrary code inclusions.
Is there any easy way to take in a block of CSS from the user from an textarea and add this styling to the styling for a specific div?
See I'm creating a simple code preview tool like codePen, so far I have two textarea inputs, one for Html and one for CSS, as the user types in the Html input this updates the preview pane, this works, now I want to do it for CSS.
CSS textarea could contain a few blocks like:
h1 {
font-size:23px;
}
.myClass {
//Somestyle
}
Now I want this CSS to be contained in the
<div id="preview"></div>
So it doesnt effect the rest of the page, so a manual example would be
$('preview h1').css('font-size','23px');
Anyway to automate this?
Do it like this. Hope it works.
Add a style block for dynamic styling.
<style id="dynamicCss">
</style>
on the apply button click handler, set the style
$('#btnApplyStyle').click(function(){
$('#dynamicCss').html('').html($('#txtaCustomCss').val());
});
See the Fiddle here.
Please use developer tools to see the new style tag added to head section.
This script simply adds rule to the document. If you don't want that behavior, you can use this plugin in combination with my logic to set scope for rule. You will need to place the style tag inside of the container and add a scoped attribute to style for it to work. Please see the documentation.
If you want to use the iframe approach instead, you'll first need an HTML document to host inside of the iframe. The iframe document should be loaded for the same origin (protocol + domain) as the host document (cross-document cross-domain stuff is tricky otherwise). With your application, this is probably not an issue.
Host page:
<iframe id="preview" src="preview.html"></iframe>
To make things easier on yourself, this iframe document could load a script with convenience functions for injecting the HTML and CSS from the host.
preview.html:
<html>
<head>
<script src="preview.js"></script>
<style type="text/css" id="page-css"></style>
</head>
<body></body>
</html>
preview.js:
function setHTML(html) {
document.querySelector('body').innerHTML = html;
}
function setCSS(css) {
var stylesheet = document.querySelector('#page-css');
// Empty the stylesheet
while (stylesheet.firstChild) {
stylesheet.removeChild(stylesheet.firstChild);
}
// Inject new CSS
stylesheet.appendChild(document.createTextNode(css));
}
Now, from the host page, you can call these functions whenever your text inputs change:
document.querySelector('#preview').contentWindow.setCSS(someCSS);
This plugin may come in handy: https://github.com/websanova/wJSNova/downloads .
Edited
Insert the text of the rules in one of the existing cssStyleSheets you have.
It will be something like
window.document.styleSheets[0].insertRule("a{color:red;}",window.document.styleSheets[0].cssRules.length)
The first parameter is the rule to insert and the second is the index.
Fiddle
The only problem here is that this will affect all the DOM on the page maybe looking for a way to add the #preview before each css rule to get something like
#preview h1{}
I need to include a link to a css file, but, the name changes.
The problem is, I am working with MSCRM 2011, and I am integrating a custom pop up window, that I need to have the "CRM style"
The link looks like this:
<LINK rel=stylesheet type=text/css href="/MyOrgtest/_common/styles/fonts.css.aspx?lcid=1033&ver=-900509389">
The thing is, when I do it in a test environment (organization "MyOrgTest") the css link names includes the organization.
So, I need to, somehow, dynamically change this link, with something like a wildcard... I don't know, so I do not have to change the link manually.
Is this possible???
If you open your solution (Settings > Solutions > Open your solution) and select "Web Resources" you should be able to add an html page like you have done with your css file. It will have a url just like your css file:
<Microsoft CRM URL>/WebResources/<name of Web resource>
You can then reference your css file by a relative path like:
<link rel="stylesheet" type="text/css" href="/styles/fonts.css" />
An un-necessary alternative would be to dynamically generate the url of the css via javascript, using the context to get the server url:
var context = GetGlobalContext();
var serverUrl = context.getServerUrl();
var cssPath = serverUrl + "/WebResources/styles/fonts.css";
Once you had this you could check questions like this one to add the css file via javascript.