Deploy custom Css,Js files in SharePoint 2010 using visual studio 2010

2024-04-22 09:38

本文主要是介绍Deploy custom Css,Js files in SharePoint 2010 using visual studio 2010,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

Deploy custom Css,Js files in SharePoint 2010 using visual studio 2010

In this post you learn how to deploy files like Css, js or images in Sharepoint 2010′s “Style library” using a solution package created in Visual studio 2010.
For deploying files to “STYLES” folder in 14 hive or “_layouts/1033/Styles” please see the post Add custom css file to styles folder in _layouts Sharepoint 2010

Steps to add Css file in “Style library” available in your SharePoint 2010 site -

1. Create an ‘Empty SharePoint project” in visual studio 2010 and name it “DeployFiles”. See the screen below.

Next, enter the url of your SharePoint site and select deploy as ‘Farm solution”.

2. Next, right click on the project and click Add -> New Item… then from the “Add new” item wizard select “Module” in SharePoint tab. Give it a name “CustomCssmodule”

3. Once you create the module you will get and “Elements.xml” and “Sample.txt” files create under it. For this example we will delete the Sample.txt file and will add our . I have used “Text File” from General tab to add my new Custom.css file. See the screen below. You can also add an existing CSS, XSL or Js file in the module.

4. After, adding the module and the css file your project should look like below.

5. Once your done adding your files you now need to modify your “Elements.xml” to specify the URL\ Path where the files will be deployed. To deploy the files into the “Styles Library” we will specify URL=”Style library” or if you want to deploy files into ‘MasterPage Gallery”  use URl=”_catalogs/masterpage. You typically do that when your deploying custom master or layout page.
Modified elements.xml

Don’t forget to add Type=”GhostableInLibrary” in your File tag.

6. Next, you make sure your feature includes your module so just open the feature1.feature and check that all the files are included in the module in the right side of your feature. Here you can also set the feature “Scope” to “Site,Web,Farm or web application”. I have set to to “Site”.

7. Now, all we have to do is “Build solution f6″ and then “Deploy”( Right click project properties).

8. Now navigate to “Style Library” in Site Actions -> View All Site Content -> Style Library and verify that your file Custom.css is deployed.

 

More to link: http://www.learningsharepoint.com/2011/05/15/deploy-custom-cssjs-files-in-sharepoint-2010-using-visual-studio-2010/

这篇关于Deploy custom Css,Js files in SharePoint 2010 using visual studio 2010的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/925435

相关文章

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意:总结前言在javascript中控制视频播放

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构:try: with sync_playwright(

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤:代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js

CSS @media print 使用详解

《CSS@mediaprint使用详解》:本文主要介绍了CSS中的打印媒体查询@mediaprint包括基本语法、常见使用场景和代码示例,如隐藏非必要元素、调整字体和颜色、处理链接的URL显示、分页控制、调整边距和背景等,还提供了测试方法和关键注意事项,并分享了进阶技巧,详细内容请阅读本文,希望能对你有所帮助...