hello i am in a fix on what to do with my current situation.
I am trying to implement an html5 blog template with Umbraco. My template loads the css files with the help of jquery for the sake of responsive design.
Now this is okay for the home page as all the files are placed at the root of the site.
But whenever I click on a particular blogpost, the css files are not correctly retrieved because of the folder structure. A blogpost is placed in a datefolder directory as you already know.
I cant explicitly include the css files as all the files are not loaded at once. They are loaded one at a time depending on the browser window size.
Please give me some directions about which way to go. Ask me if you need more details.
You could use the base tag to define the base URL for all linking attributes, e.g. href, src
<head>
<base href="http://www.site.com" />
</head>
Even if this does not work exactly as intended in loading your CSS dynamically, you could use jQuery to pull the base tag's href value out to prepend the CSS file location.
You can of course make the href value editable via the CMS if required.
Related
I has a css file named styles.css and it was loaded in masterPage of sharepoint .I change this css file but not working. I make sure this css file already loaded in html page.I also clear cache but I don't know why it doesn't affect when I edit. Please help me, thank you so much!
It is not recommended to modify the online master page directly.
Firstly, you need to check if the CSS file is really imported.
Secondly,if the file is not imported, classic page you could upload CSS here.
modern page we should upload CSS with SPFX,here is a tutorial: https://github.com/hugoabernier/react-application-injectcss.
If the file is imported, first check whether the content of the file is displayed normally (excluding problems caused by encoding), then you can add ‘! Important’ after the style.
The way it works now, Meteor automatically finds CSS files in the client directory and renders it without having to call it in the HTML's header tag.
However, how would I be able (if it's even remotely possible) to associate one particular CSS file or files to just one HTML page?
I recently purchased a theme for one section of my website that I didn't want to bother creating myself, since I hate doing UI for my main page myself. But when I place the CSS files of this template with the ones I have for the other template I use, one template's CSS files overwrite the other, so everything ends up looking like a huge jumbled mess.
I hope I'm being clear with my question. Is there a way to get around this?
So, if there's not a way to keep the file from being included in meteor, you could add a class to the body tag of the page you want the styles to appear in, then prepend that class to the beginning of the styles in your new stylesheet, ex: .yourBodyClass#stylehseetID, .yourBodyClass.stylesheetClass
if you put your stylesheet in the public folder, it will be treated as a static file, but then it should go in the header which is rendered by Meteor, and since Meteor is a single page app (SPA), it only has one header for the whole application.
If you need specific styles for a page, you can use some prefix for your css classes. That's probably the easiest.
I built a custom calculator using HTML5, CSS3, and jQuery.
I have a basic hosting account and loaded all the files through cPanel to my root directory. The files include calc.html with a CSS folder holding my stylesheet and a JS folder holding my custom jQuery.
Now someone would like to put my calculator on their Wordpress site and we can not figure out how to do it. For now I just used iframe to show my site on their Wordpress page but we want the calculator to be hosted from his site.
I tried copying and pasting my HTML code from my calc.html file into a Wordpress page which works but I do not have the styling of my CSS and the JS dose not function. So I used FileZilla and created a folder called CALC with the follwing path (public_html/wp-content/themes/parallaxpro/cyberchimpscss/calc/) and added the JS sand CSS contents in there.
I linked my CSS in the header of my calc.html code
<link rel="stylesheet" href="public_html/wp-content/themes/parallaxpro/cyberchimpscss/calc/css/mainCalc.css">
I linked my JS towards the end of the body in calc.html
<script src="public_html/wp-content/themes/parallaxpro/cyberchimpscss/calc/js/main.js"></script>
I view the page and still have my ugly HTML code with no styling and no JS functionality.
Im new to Wordpress/coding and this is the first thing that popped in my mind so I tried it and failed.
I also thought I could put calc.html, mainCalc.css, and main.js inside of the calc directory i created(public_html/wp-content/themes/parallaxpro/cyberchimpscss/calc/)
and then use iframe to display calc.html on the wordpress page. I also failed at this.
I used
<iframe src="public_html/wp-content/themes/parallaxpro/cyberchimpscss/calc/calc.html"></iframe>
You could do with creating a custom page template.
Basically you will follow the docs https://developer.wordpress.org/themes/template-files-section/page-template-files/page-templates/ and create a page with the HTML + CSS + JS in the content part.
When you done, you just create a new page in the admin part, select the template from the list under the publish button. Save it, and that's it.
Its simpler from writing a plugin.
as you all know, ASP.NET includes each CSS stylesheet in the App_Themes's Theme folder inside the page. No discussion.
But now, I'm facing a little problem having lots of CSS files in a theme and willing to use a static content domain. I would like to load all the static content of my website from the static domain (not only CSS, but also icons, images, etc.), but let's now pay attention only to CSS.
My question is
Is it possible to override the behaviour of Page class, and for each CSS file found in Theme's folder, rewrite the <link> tag with the correct URL of the static content domain? I have nothing preventing me to deploy files into http://static.domain.com/App_Themes/Theme path, so at least adding a prefix to the tag is fine.
Thank you in advance.
Yes, you can. You can have a custom base page class write the CSS files it finds in the folder. Though, I'm not sure you can override the default behavior of the themes feature, so the easiest way is to move the CSS files outside of the default themes. Then, you can use the System.IO objects to read the directory, access the file, and generate the link.
HTH.
An alternate method is to write an http module. Have the module inspect the html being sent back to the client.
If it detects a style sheet reference, change the location that the style sheet is pulling from.
This works for the other items as well, such as images etc.
Apart from the global.css i'm including in my header.php, i would also like to load certain page-content specific styles.
But since my <head></head> is already covered by my header file, and i don't wish to resort to inlines, what is the best way to place the styles on the specific page?
Thanks ! :D
I would try one of the following:
Break the header.php in 2 distinct files to allow any pages including it to add their own link tags
At the top of the file, before including header.php, set an array like $included_css containing styles (style1.css, style2.css). Then in header.php you can do a simple foreach and include them after global.css (to allow them to take precedence)
in our CMS we have a header folder inside the template directory. If you name a file form.tpl its gonna insert it self only in when form.tpl is called (we handle that with the smarty template engine). What is good practice i think.
An other solution would be to uses classes or id's on your body. <body id="suscribeForm"> and to use them as reference in your css. (the problem is the CSS is loaded even if you don't use it, but on the other side its already cashed if the user changes to an other page).
You can link different CSS files in your main CSS also, but this is not a good practice, because your browser is gonna wait until mains.css is loaded and then load the linked files.