I am currently trying to use CSS to stylize my application in Apex 5. The problem I am having is that when I write my CSS code in the "inline" section of any page in the application, then the CSS code works, but if I write the CSS code on Notepad and then upload the file and reference the file within my application, then the CSS code does not work. I have written several lines of CSS code, so I'll just post one small section of it as a sample so that you all can see my format:
body{
font: bold 12px/16px "Times New Roman";
}
I have uploaded the file in the Static Application Files section of the Shared Components page of the application. I have then tried referencing the file in different places, such as at the page level and user interface level, but nothing has worked so far. I'm very new to CSS, so any insight would be greatly appreciated. Thank you in advance!
After uploading the file have to be displayed in the list of static files. The list of files have a column Reference, which contain a string like this: #APP_IMAGES#test.css. Copy this string and put it, for example, on the page in the section CSS - File URLs. This should work.
Then make sure that file reference works. Open your page and take a look on a list of CSS files. The same functionality is present in all browsers, but it is accessible by different ways. In IE:
Press F12.
Open Network tab.
Press "Enable network traffic capturing" (a green triangle in the left top corner).
Reload the page. A list of files appears.
Find your file in a list:
If the file is not present, then you copied an incorrect link, or you copied it into an incorrect place, etc.
If the file is present, normally it should have status 200 (the Result column). If a status is not 200, there could be a lot of reasons (depending on the status).
If the file is present with the status 200, your CSS property doesn't work, because it is overridden with another CSS. To define with which one, go to the Dom Explorer tab.
You can try this approach:
On server, go to ORACHE_HOME/apex/images/css (path can be different, but you can find it by .css extension)
Put you file here
Id editor, in page properties, go to the CSS -> File URLs section
Write path like this: /i/css/new.css (i - in general, alias for your images directory)
Related
I programmed a page (read index.php) including front end and back end operations,and in between i included a link -<link rel="stylesheet" href="style.css" type="text/css">, but there is no effect on the front end application whether I put this css file in the same directory of index.php or delete it. But when I remove the link from the programming page then the front end page is affected. So, how do I conclude this situation? Please anybody help me. I don't understand how the css file works when it is not in the directory where programming page lies.
Based on the information given it sounds like the file is being included from a cache.
Deleting the file on the server wouldn't affect the page render since there is a locally cached version of the file but deleting the link would prevent the browser from loading the cached version.
Sometimes when working on your localhost you have to put the entire path of the CSS file, not just it's normal location as you do when on a live website. Copy your entire path in the href on the link tag and see if it works.
Normally, if the file is in the same place as your index, you put the href the same way it is written in your example above. If your CSS file is in another folder, you would put ../style.css instead. Writing like that, will move up one folder.
I'm working on a complicated site that has a lot of css files and js files that load on every page. I'm working on a single css using Chrome's developer tools. Once the css is mostly correct in developer tools, (Element tab, Styles side bar), the css is copied to a local css file and then uploaded to the web server. Since only a single css file has been modified it would be faster to reload a single css file instead of hard refreshing and reloading the entire site including images, js, and css, etc.
The site has an option to minify the css file and combine it with the other css files, creating one single very large css file. That option is turned off while in development mode. Adding a version number to the css file name isn't the trick I'm looking for.
Is it possible in Chrome Developer tools to click on a source file and refresh only that file?
This is a bit of a hack, but I think it'll work for your scenario.
When I initially load an example page, you can see three CSS requests:
I want to refresh the devsite-googler-buttons.css file, so I find it in my DOM Tree:
(Command+F on Mac or Control+F on Windows / Linux opens up that search panel at the bottom of the Elements panel... makes it easier to find stuff in a big DOM)
Right-click, select Edit as HTML, and then append a random query string to the end of the link:
And in the Network panel, you can see that the file was re-downloaded:
See also: Konrad's answer provides some handy code for automating this via a Snippet.
It might be handy, in your situation, to automate it a bit:
function reloadCSS() {
const links = document.getElementsByTagName('link');
Array.from(links)
.filter(link => link.rel.toLowerCase() === 'stylesheet' && link.href)
.forEach(link => {
const url = new URL(link.href, location.href);
url.searchParams.set('forceReload', Date.now());
link.href = url.href;
});
}
reloadCSS();
What this function does is it forces all CSS files to be reloaded by appending current time to their URLs.
You can modify it to target a specific file. You can run it from console, via DevTools 'snippets' functionality or make it into an extension.
If you don't mind refreshing the page, but don't want to re-download all resources, try the following.
Open the css file in a new tab. (You can right click css files from the Chrome developer tools and choose "open in new tab");
Hard-refresh this tab (ctrl/cmd + f5);
Soft-refresh the page (f5 or ctrl/cms + r).
According to me only Live editing is the only possible way what you are looking for I suppose. There is no way to refresh a single css file.
I'm modifying CSS using Firebug and FireDiff. I've had a couple of 'accidents' where I have 'saved a snapshot' but in fact just saved a diff (one or two changes), uploaded it to my web server and overwrote the full CSS file with a snippet. Fortunately I have been making periodic backups.
Question: how do I ensure that I save the whole file - either using Firebug itself or FireDiff?
Firebug
With Firebug itself you can save the CSS following these steps:
After you've made your changes switch to the CSS panel
Select the modified CSS file from the CSS Location Menu
Press Ctrl+A to select the whole CSS and copy it via Ctrl+C or by right-clicking on the selection and choosing Copy from the context menu
Paste the CSS into the text editor of your choice and save it
FireDiff
With FireDiff the steps are a bit different:
After you've made your changes switch to the Changes panel
Within the change log right-click on the CSS change you've made to the file you want to save and choose Save Snapshot from the context menu
Enter a file name into the save dialog and save the it
Notes:
FireDiff requires another extension called Fireformat to save snapshots.
As the word 'snapshot' indicates FireDiff saves the file including all changes up to the one you've chosen. If you want to save the current state of a file, you need to choose the last change to that file.
For both methods you need to take care in which file the CSS was saved. In case of inline CSS, i.e. CSS included in the HTML output via the <style> tag you need to save the CSS back to the HTML output.
Other extensions
Besides doing this in Firebug or using FireDiff there are Firebug extensions, which claim to allow you to upload your changes directly to your server via FTP. These extensions are cssUpdater and FireFile. Though they seem to not be maintained anymore and may not work with current versions of Firebug.
My asp.net project has several .png (and a few .gif) files in the \Content\Images folder.
Two are not found; Chrome Dev Tool's Console tells me: "Failed to load resource: the server responded with a status of 404 (Not Found)"
...and sure enough, if I click the links that it shows (e.g., http://localhost/#System.Configuration.ConfigurationManager.AppSettings[%22ThisApp%22]/Content/Images/PlatypusorangeSprite.png) it takes me to GDT's Resources tab, and although the Images folder shows that file as being there, but there is a "broken image" representation of it.
The same thing happens with just one other image file (they are all in the same location, and the references to them, in CSS file declarations, is indeed pointing to where they exist, such as:
background:#E5EDFE url('/#System.Configuration.ConfigurationManager.AppSettings["ThisApp"]/Content/Images/PlatypusorangeSprite.png') repeat-x 0 -369px;
I can 2-click those files in the VS2010 IDE, and they open up and seem to look fine.
So why are they not being found at browsetime/seen as broken images?
UPDATE
Well, apparently it's got someting to do with my moving all the style declarations out of the cshtml file into a separate stylesheet/CSS file that is referenced in the page (I went back to the bad old way and it works fine - the pngs are found again (I even imagined that I heard them singing "Amazing Grace")). Since it is not a relative path to those pngs, why would it matter that the style info is in a .css file in the Content folder as opposed to being "inline"?
I hate it when you do the "right" thing and it makes things worse.
Some clients accidentally transform suffixes to big letters like .JPG or .PNG. If you call them by .jpg or .png, it will not match.
Render your template by compiling in Visual Studio, open your browser, look into your HTML and check the rendered path of your image:<image src="..." />. Alternatively, try to call the image direcly via ftp by url in browser like ftp://www.mysite/pics/ for example and click on link, that shows the image. Then you get the correct path in the url.
Also check if the suffix ist accidentally doubled like mypic.jpg.jpg.
Any case sensitivity discrepancies,perhaps?
I am pretty new to Sharepoint.
I need to customize some Sharepoint Masterpages (the background color, the font type and a few other css requeriments).
Considering I have available the following files: v4.master, default.master and two more pages which are content pages of default.master, plus the COREv4.css file.
I know I should create a copy of one of those master pages (I am not sure which tho) and customize it changing the CSS linked to it). The following questions come in regards of this:
1) The custom CSS file should be a modified copy of the COREv4.CSS or just another CSS file with the desired styles?
2) How do I create/link the customized CSS file for the modified page via Site Settings?. How/Where should I save the new file?.
3) As for the copy of v4.master, How do I load it to "replace" the original one for the site?.
4) The system is built upon Sharepoint 2010. That ensures that the page to have the modified CSS would be a v4.master copy only?.
Thank you for the insight as always.
**Update**
Hi,
I managed to solve the problem getting a general idea with the pdf manual provided, your suggestions and some extra steps I will describe briefly:
1) To place my custom css file I put it in the folder: C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\3082\STYLES
2) I opened the site to be customized with Sharepoint Designer 2010.
3) I clicked on the option Main Pages/Master Pages, and selected the page to be v4.master page, copied and pasted it. Then I renamed it right clicking on it, selecting "Rename" and typed the new name, after doing that I right clicked one more and selected "Set page as main default page".
4) To edit the contents of the page I right clicked once more and selected the option "Edit content in advanced mode", right before the head tag ended I copied and pasted:
<SharePoint:CssRegistration name="customname.css" runat="server" After="core4.css"/>
Note that "customname.css" is my css file. Then I clicked on the floppy disk icon on the upper left side of the screen to save.
5) After doing that I used Chrome HTML/CSS Analyzer, inspecting the original (and now copied) master page to browse on the zones that needed customization in order to identify the class names/ids/element types that managed the styles to be changed. Once identified I only added to them the properties that required change, EG:
//Webparts Alternate Highlighted Rows
div#ctl00_MSO_ContentDiv table.ms-viewlsts tbody
tr.ms-alternatingstrong{ background-color:#F7FAF4 }
table.ms-listviewtable.ms-basictable tbody
tr.ms-alternatingstrong.ms-itmhover{ background-color:#F7FAF4 }
I mostly did this by myself by trial and error with Chrome Analyzer but I also helped the task using the Chart found here (http://sharepointexperience.com/csschart/csschart.html), tho at some point going thru it turned a bit tricky and I decided to do it by myself as I mentioned. In the process I repeatedly added more styles to the custom file and then overwrote it on the server location to refresh the page/pages to see how it was looking, this till the end of the process.
Thanks for your help, I hope this serves as a guide for anyone that needs it. If you have questions let me know.
You can create a new master page from the scratch or modify the existing one.
Please have a look at this link it may help you to get answers of your questions
http://www.rdacorp.com/wp-content/uploads/ASP-NET-Master-Pages-and-SharePoint.pdf
It's not advised to modify files of SharePoint.
Better to create new master page file, specify all CSS and script you want inside and install this with feature.
What version of SharePoint do you have? SharePoint 2010 Server or Foundation? Cause with server version you can brand your master page in a cool way:
see this link
Microsoft has a good introductory article on how you can/should do this.
http://office.microsoft.com/en-us/sharepoint-designer-help/customize-a-master-page-to-brand-your-site-HA102449505.aspx