Adding a .css file into sharepoint - html

I am trying to include this line of html into a sharepoint 2007 content section inside a page i have just created. I am the owner.
<link rel="stylesheet" type="text/css" href="/sites/gskglobal/mcLaren-partnership/Documents/live.css" />
I input this using Edit HTML Source on a piece of content (This was the only way i could find out how to input HTML directly).
When i click ok the styles display perfectly having already uploaded the css file.
When i click save it removes the entire link element and leaves me with no stylesheet.
i could put the styles in line, but i really don't want to do this.
N.B no erros are displayed only
Warning: The HTML source you entered might have been modified.

Both of those will work, however the CSS may get executed AFTER the SharePoint Page is rendered.
The short and simple way is to add the CSS file to any document library (Style Library too). Add the Link script above into a text file and upload that. Add a Content Editor Web Part to the page and through the settings, point it to the TEXT file with the script.
The CEWP part is executed during the HTML creation process when building the page thus the CSS gets executed with the header (like the rest of the CSS for SharePoint).

Try adding your .css file to your main web "Style Library"

You need only to publish your css file
Go to your all document view
find your file
publish

The best and easiest way I found to add any form of html into the document when adding a webpart simply add a form then edit the html as you would normally and this will no longer give you the
Warning: The HTML source you entered might have been modified.
It will just leave the markup in there without sharepoint stripping or editing your markup
Just wanted to make people aware that this is possible and maybe an option if you don't have access to the other suggests.

Related

Include menu into html files

I have a web site of more than 20 pages, all using the same dropdown menu. Currently, each page contains redundant HTML code for the menu, so if I want to change one thing in a menu, I have to change it for all the pages. I am using plain html/css and some javascript for my site. Is there a way to have my dropdown menu all in one file and include the reference to that file for all 20 pages?
I tried using the <embed> element to include the menu, but it did not work out for me since I cannot adequately align it as it leaves a large empty area right below it to allow for dropdown options. Not sure what is the best way to handle that
As suggested by Quetin Veron in the comment, PHP include statements are the best way to deal with it.
However, in case you're not interested in writing backend code, you can do that using JavaScript by parsing a json or an ini file/text in your script and converting it into the required links on the menu.
[Do note that you'll still have to use JavaScript for that]
If you'd not even prefer to use JS (Not recommended), you can use an iframe as the navigation menu
When you do that, add <base target="_parent"> in the head section of your iframe.
And then, in all other pages, add <iframe src="menu.html"></iframe> and replace menu.html with the path to the menu.
I hope this helps. However, please note that this just is a workaround if you wish to use frontend technologies only.
Otherwise use <?php include "menu.php";?> for PHP or for Node with EJS, use <%include "menu.ejs";%>

Link html using source

I have tried:
<html src="navbar.html"></html>
I have a file called navbar.html
Is there any way I could make it appear on every page I have?
I will be changing the navbar a lot throughout my website and I don't want to change it in all my 20+ pages. How can I make this one file appear in every page?
Would it be possible to make it in html rather than jquery and append it to every page?
something similar to
<script src="file.js"></script>
But html src
Why not just use PHP? As long as you're developing on a server (as PHP is server side) you can essentially change .html files to .php and include a file for the navbar. For example:
<?php include 'navbar.php'; ?>
Look up PHP include at http://php.net/manual/en/function.include.php. It will do exactly what you want. All you do is include the file on every page and it will be reflected in every page .
Visit our HTML tutorial
The href attribute specifies the destination address (http://www.w3schools.com/html/) of the link.
The link text is the visible part (Visit our HTML tutorial).
Clicking on the link text will send you to the specified address.
http://www.w3schools.com/html/html_links.asp

SunOne Webserver HTML Includes

I'm running a large site, one that has a nav bar at the top. Rather than change the 100+ html files each time we want to change one of the buttons in the top nav, we want to switch the navbar to be displayed using an include of some kind. I want these includes to work on both Firefox and IE, and I don't want to have to change the extensions of each file either.
So far I've tried:
Javascript read file - This works fine on firefox, but IE has file reading blocked it seems.
HTML include - So far only works if we change the extension to shtml
PHP include - I know you can set up apache servers to run php scripts within html, but I don't know how to make this happen in SunOne.
iframes - I had to block iframes in order to comply with security standards.
I'm more than open to suggestions I haven't considered, or ways to make the above attempts work. Any ideas?
Eureka! I've found it!
So rather than include the html, why not just include the javascript and css? Every page will include a .js and .css file. The css can set the image src, and in each image I can use "onclick" to tell it to execute a function in the .js file with a simple window.location. Voila! Two quick changes will change the whole site!
Thanks to Mr. Lister for the CSS idea. That set me on the path.

How to locate/edit the original source html of an aspx page on a sharepoint site

I am working with a MOSS 2007 site, the page I am currently trying to make additions/changes to specifically is a popup.
The page is an .aspx file and I know where it is located, but simply put I am trying to find and ultimately modify the original source html of this page(the html which shows up when you hit "view source" when brought up in my browser).
When i try to edit the page in sharepoint designer It only brings up a formatted view of the html code, I wish to see a much more complete version where i can edit the attributes of the tags and such.
Is there anyway to locate this original source html?
Try using CTRL + F to do quick find and then search your HTML tag id or any descriptive text you can find from viewing source or expecting the element. And then select Search Entire Solution or Current Project.
If the project is set up with a MVC structure, try finding
MainFolder/ProjectName_Web/Views
Alternately look in
MainFolder/ProjectName_Web/UserControls
If you are using Visual Studio, check out Kris Hollenbeck's solution.

Edit CSS with Delphi

I use Delphi 2010 . I am using twebbrowser to load up HTML source and view it.
Now I want to click on an area (background, links, etc) in the web browser and get the styling in the CSS file that styles the HTML.
For example: I click on the H3 region and I want to be taken to the h3{ color: white; } in the CSS.
Any help at all is much appreciated; this is hard for me to figure out.
You will have to handle the parsing of the source yourself to make this work. Because the CSS entry can be in another file or even files, this can be tricky. I would start by looking at the DIHtmlParser component which can help greatly here. You will have to parse the main document, and each identified CSS file to locate the proper file/position to jump too. I would also look at tEmbeddedWB as an alternative over TWebBrowser as it supplies much more control over the embedded browser as well as TRichEditWB which works well for viewing syntax highlighted HTML source.
Edit: You still have to parse the CSS and HTML to build an index of each tag and its CSS location. When your editing the HTML, you have to parse the tag your cursor is currently on or in, compare that to the index you parsed earlier, to display the CSS attributes in effect. Keep in mind that CSS cascades and nests, so your index will most likely be a tree, and your tag will be relative in that tree.