How to assign custom CSS to Sharepoint site - css

I have the Sharepoint site collection. I have my custom CSS. I want to assign the this CSS to my Sharepoint site collection . What I have to do. I don't want to use the Sharepoint designer. In fact is is restrict to use me the same. please guide me

The way I have deployed custom CSS is to package it as a theme in "C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES".
The easiest solution is to copy a theme folder, rename it, change images, css as you please and the .inf and .xml files to reflect folder name and theme name.
After the theme is done, change theme for desired sites.

Anything you can do in SharePoint designer, you can do by manually editing the files (it's just much more, well, manual). the files can be accessed using WebDAV via \servername...
If you have a sandbox environment or site to play with, I suggest you make the change in SP designer and then look at the files to see what changed.

Related

Sublime Text: Detect non used files in PHP (WordPress) project?

Created a PHP project in Sublime Text 3 that holds PHP, CSS, JS, HTML, and some other files and folders. Other files may be .md, .txt, .ico, images and fonts (.woff, .ttf, ...).
Actually project is WordPress, but the solution should be for all PHP based projects, and specifically I am interested only to check specific folders inside of project (liek theme and plugin files). WordPress core is no interest for me to check.
I would like to detect Files with extensions (.php, .css, .js) that are unused. Is there a smart solution do detect these?
For instance CSS file is not used if no other files references it. The reference may came from another CSS file or from some PHP file, or even JS file.
I am not searching for a perfect solution, but for something that is close to detect these or even for an idea how I may think about these.
In WordPress (PHP) there are require and include instructions, and also wp_enqueue_script/styles that represent the mechanism how to reference files for instance.
So we could create a list of all PHP, CSS, JS files, and then based on file names search for these in the content of all other files. This would be a good start.

How to integrate wrapbootstrap theme into asp.net web site in visual studio 2013?

I am new to bootstrap. I downloaded a wrapbootstrap theme and is trying to include that in my website. In the downloaded theme, there are several folders under a folder called assets, like bootstrap, css, js, icons, img. Under bootstrap folder there are again subfolders called css, fonts and js. Can anyone please tell me where exactly in the project should i add these files? In case of a simple theme, I know we need to add the bootstrap css under Content folder and the bootstrap js under Scripts folder and we need to add it in BundleConfig.cs. But here, since there are different css files and js files, where can I include them?
Thanks in advance.
Where the files are located is really irrelevant so far as your application is concerned. The ~/Scripts and ~/Content folders are just a default convention that Visual Studio uses with the templates.
However, nothing is preventing you from moving them. When working with a template, you have one of two choices.
Leave the files as they are, and simply reference them, or include them into bundles in the paths they are located in.
Determine which CSS and JS files you need, and re-shuffle everything to suit your particular projects needs.
The first option makes it easier to upgrade the template in the future, while the second option makes your project files more coherent because they follow a similar structure.
At the end of the day though... it's all just a resource location for you web server to resolve. Do whatever makes sense for your project.

In sitecore, where can I add my own custom CSS?

Our sitecore developer quit suddenly and I need to make a small change. I'm a front end developer and have no real experience with the sitecore backend. I just need to add some CSS styles to the main style.css file or I need to add my own file. I've got full access to the CMS, but no access to the hosting account. I'm trying to find the main CSS file through the CMS browser, but I'm not having any luck.
Can you help me either:
A) Locate the main CSS file so I can add some classes (preferred)
B) Add my own link in the tag to my own CSS file hosted on another domain
C) Use the home page link to CSS file where I can add some classes
A note about OPTION C... I'm in the CMS and I see there is a system folder and in that a CSS folder where I can add a custom.css file. Then I go to the home page and I can actually call that CSS file from a field in the home page BUT, when the site loads, even though it's calling this file, it comes over as .aspx and it's blank so no styles I set are applied.
you can find the location of file as suggested by Maciej or use firebug or any other developer tools to find the location of main style.css. Once you get the location you can browser the physical file on server by going to Sitecore start menu -> All Application ->File explorer . Download file using File explorer make your changes and upload it back, make sure you check override existing file when you upload. Also make sure you upload file to delivery server once you test your changes, typically you will be accessing Sitecore using Authoring Server so instance you are accessing might not be same as CD server.
You could right-click in your browser to figure out where your css is coming from relative to the server root. Although not completely fool-proof, this method may give you a quick answer.
According to documentation for sitecore 6.2, style sheet location is determined by the developer so it could be anywhere that the developer has chosen.
Take a look at this answer for more details.
You should also be wary of how code gets built and deployed. Most Sitecore developers have very specific methodologies for how they include code (including front end) in their solutions.
Make sure you're aware of any deployment methodologies your developer used, so that your work doesn't get overwritten in a future deployment.
Did they use a source control management solution (like Git or TFS)? Did they use an automated tool to do deployments (like Octopus Deploy)?
If you can find main CSS file in physical location, you can update the file with new CSS styles.
If you want to add your own CSS as an additional CSS style, you might need to create a new template for css link and use that template when you create new page with your own CSS.
Just for future reference, by default the location of the used css files is described in Sitecore.config like this:
<!-- WEB SITE STYLESHEET
CSS file for HTML content of Sitecore database.
The file pointed to by WebStylesheet setting is automatically included in Html and Rich Text fields.
By using it, you can make the content of HTML fields look the same as the actual Web Site
-->
<setting name="WebStylesheet" value="/default.css"/>
Paths are relative to the root of your sitecore installation, you can find default.css in the root of the sitecore application on the webserver.
In Chrome Browser, Inspect element and select source tab
and open required css file and make changes.

How might i setup my ASP.NET project to find my files?

edit I do not want to redirect pages, specific files etc. I would like to change the path where images, videos and other media are stored from the root source directory to the directory of my choosing. In this case c:/dev/prjfiles/prjname/public (c:/dev/prjfiles/prjname/ is my working directory) and i except when my html does img src="/pic.png" it will find the image in c:/dev/prjfiles/prjname/publi/pic.png. I need a working solution, i tried looking at how to set virtual directories and etc. I cant figure it out. Thus the bounty. I am generating the html, i am not writing asp:image runat="server" etc i am pulling data from a DB and outputing the html. The part that is still a WIP is the code that handles POST request. The html already exist but i cant have hundreds of files in site.com/here pollution my source directory (c:/dev/trunk/thisprj/thisprj/where my .aspx files are and i do not wish 500 .png/gif/jpg here)
I dont know how asp.net environments are usually set up. I am assuming i have a root path that is not available from the web, a bin/ where i may put my asp.net dll and a public where i stick in any files i want.
I would like to have my project files seperated from everything else. My JS, css and image files are in prjfiles/prjname/public with my sqlite db in prjfiles/prjname/ and extra binaries in prjfiles/prjname/bin.
The problem comes when i run my app and try to load an image. Such as /cssimg/error.png. My project does not find resource in my /public folder and i have no idea how to make it find them. How can i set my project up so it does?
NOTE: I set the working directory path so its at prjfiles/prjname/. In code i write ./bin/extrabin.exe and db.sqlite3 which access the files properly.
You might want to watch the getting started videos for ASP.NET
http://www.asp.net/get-started/
EDIT: More info added
As #Murph suggests, your assumptions are incorrect.
IIS takes care of blocking HTTP access to any important files and folders like your *.aspx.cs, and *.cs in the App_Code, any DLLs, anything under the App_Data directory and the web.config.
Content files, such as *.html, *.css, *.js, .gif, .jpg, .png are all served in the normal manner.
In this way, there is no need for a "public" folder.
I dont know how asp.net environments are usually set up. I am assuming i have a root path that is not available from the web, a bin/ where i may put my asp.net dll and a public where i stick in any files i want.
This is wrong assumption!
You have a root folder, which IS available in public. You set IIS or ASP.NEt Development Server to this folder.
(optional, but always needed) You have a web.config file in this root folder for configuration
You have a bin folder for your assemblies (each page or user control "include" compiles to a class)
(optional) You have App_Data as default folder for file-based DBs and/or other data files (say XML storage, ..)
(optional) You have an App_theme folder for styling and images. Read about ASP.NET themes.
(optional) You can add App_Code folder if you want to add classes to be compiled by the server.
You can create folders for scripts, etc...
Normally for complex logic, etc.. you create in a separate project outside the root and reference the result assembly in the bin folder.
Seriously, you cannot do ASP.NET work without an IDE or a manual. Visual Web Developer 2008 Express IDE is free and http://asp.net has tons of resources for getting started.
I don't know if I got the question right, but maybe you could try the <BASE> HTML tag.
HTML <base> Tag
"Specify a default URL and a default target for all links on a page"
There's a nice and simple example at W3Schools, check it out.
The negative side is that you need to put a <BASE> tag in each page you want.
It sounds like you should be able to create a virtual directory to do what you're asking -- but it's a very non-standard setup.
Keep in mind that IIS will prevent users from downloading DLLs and other project-level files, so you usually don't need to partition them off in a separate layer.
For example, just have a cssimg folder at the top level of your project, and skip the whole public folder thing.
I see where you're coming from. ASP.NET projects are set up a little differently from how you're treating them, but you can make them work like you want.
The root of an ASP.NET project IS publicly accessible. When you created your WebSite within Visual Studio, it created a default.aspx page right on the root. Are you hosting in IIS? If so, it's set up to serve up default.aspx by default. But I digress.
Here's how to make it work like you want (mostly):
Create a WebSite, then right-click the site and add a folder named "prjfiles". Right-click that folder and make another named "public". Create another subfolder of that one called "cssimg".
Now, if you want to use the image you mentioned, you'd reference it like this: "~/prjfiles/public/cssimg/error.png" (pathing starting with the root) or "./cssimg/error.png" if you're coming from a page in the public folder (relative pathing).
Really, though, you're doing too much work. Here's how to make it work with less effort:
Create your WebSite, right-click the project and add a folder called "cssimg".
Treat the root as you would the "public" folder- put your pages right there on the root or in subfolders, as needed. You can reference that same image file like this now: "./cssimg/error.png" (relative) or "~/cssimg/error.png" (start from root)
There's also another way to tell the engine where to look for resources, but it's for your css files. Inside the "head" tag, you can add a "style" element (with type="text/css") and inside that you can add something like this: #import '<%= ResolveUrl("~/prjfiles/public/cssimg/styles.css") %>';
Good luck!
If I correctly understood your problem, you're trying to find files which aren't physically stored on a filesystem folder, or stay on a different folder. You can deal with this problems by implementing a UrlRewrite mechanism.
I suggest you to read URL Rewriting in ASP.NET and, after, to take a look into this implementation: A Complete URL Rewriting Solution for ASP.NET 2.0.
If I understand all this correctly (please comment with any correction) right now all your files are together in the root directory and you use <img src="/img.png" /> and it works.
If this is the case, make another directory in the directory the images are in, say call that directory images and put the image files there. now use <img src="/images/img.png" />.
Done.

SharePoint - Change Themes Style Sheet

I'm using the Belltown theme in a sharepoint portal and there are some styles that I want to change change in the Belltown stylesheet. I thought that I could just edit the theme.css file located at:
C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES\BELLTOWN
and restart the web server, but the style sheet isn't changing for me. What file should I be editing to change the stylesheet of a theme, or are there other steps that I'm missing?
Thanks.
I believe if you re-apply the Belltown theme to your site it will pick up your changes. When you apply a theme Sharepoint copies the contents of the TEMPLATE\THEMES\ THEME FOLDER to the site.
The other option would have been to point Sharepoint Designer at the site and modify the styles there which would apply them direct.
Deploying a new style sheet can be an iterative process. For this reason, it may be helpful to use the CSS Import Trick described on Heather Solomon's blog.
This could be helpful in that you won't have to re-apply the theme every time you make a change to the style sheet. just change the file on the file system and refresh the browser page.

Resources