Does anyone know of a good way to use Bootstrap styles for a SharePoint web part? I don't want to restyle the entire SharePoint site with bootstrap styles. I just want to be able to use bootstrap elements like buttons and forms and modals within a SharePoint web part without interfering with the regular SharePoint styles on the rest of the site. So with that in mind looking at the example below should give a good picture of what I want. Basically I want to reset the styles and then apply bootstrap styling within the div with ID BootstrapContent but everything outside of that div should be unaffected and just use the normal SharePoint styles. Thanks for the help.
<html>
<body>
STANDARD SHAREPOINT STYLES
<div id='BootstrapContent'>
HTML CONTENT WITH BOOTSTRAP STYLES
</div>
STANDARD SHAREPOINT STYLES
</body>
</html>
There's no good way to isolate one part of your html without using iFrames. If you went that way you could put your html into a doc lib, then call it from an iframe. That html file would reference bootstrap and only affect the iframe. You can use the Page Viewer web part to create the iframe for you.
Another option which isn't quite what you are asking, is you could get a cut down (customized) version of bootstrap customized. If you only need the grid system for example, only get that option. You might be able to exclude a lot of the generic things that interfere with SP. However, you'd likely lose things you want.
Related
I have a problem when developing a new Liferay 7.2 theme based on gradle as a build tool, the problem is when I added a custom css in the file _custom.scss in order to customize some styles within my theme, the default liferay admin Control panel and Menu( in the left hand side and in the top ) are looking very bad and my theme looks not Responsive(I mean the style and there are buttons which are not displayed anymore example the toast-animation-btn is not visible ).
From my perspective, maybe my custom css ( because I have a large css file it is kind of Migration from 6.2 --> 7.2) is impacting the default liferay portal things --> this is just my opinion and maybe I could be wrong...
Otherwise, if my reasoning is true please How could prevent my styles to impact liferay default menu?
A whole lot of things have changed between 6.2 and 7.x html markup. I would strongly advise testing each small css feature independently and rewrite the one that is not compatible anymore. By feature I mean all css code related to a specific portlet or section of your template.
Also the theme template themselves have changed a lot and are not strictly compatible. In this case I'd suggest starting with a new theme templates and bring back one by one the customization, you made in it. Also look at the new content page feature: https://portal.liferay.dev/docs/7-2/user/-/knowledge_base/u/creating-content-pages You might be able to replace many theme customization with them in a more maintainable and web admin-friendly way.
That being said if you just want to isolate you sass code from impacting the admin menu, in the default template there is no quick way to identify the content section of the page (well, there is #wrapper and #content, but they are too generic and present in the admin page as well) I'd suggest that you add an id at the right level of your own template. After that just embed all your sass code inside that id.
I would like to know how change backgroung sharepoint to custom background with username of user.
I suggest you provide the screenshots for further research.
If you want to custom background of the user's username in list view, we can use the css below to achieve it in classic UI. We can add the style into master page using SharePoint designer.
<style>
.ms-vb-user{
background-color:green;
}
</style>
For modern UI, we need inject a custom Cascading Style Sheet (CSS) using SPFx application customizer to achieve it. The solution below for your reference.
SPFx Applications Customiser CSS Injection
I realized a simple interface for my sub SharePoint site. but I have no idea how I download my files Interface (Javasript, css, html) that index.html becomes my homepage on my website .
best regards
Upload all files to a document library, then use SharePoint Designer to set index.html as the home page.
http://www.learningsharepoint.com/2013/09/05/how-to-set-a-page-as-home-page-in-sharepoint-2013-site/
Edit: If you want SharePoint functionality, then you need to do what we all do: Use a SharePoint page and customize it to show/hide what you want to see. In many cases, custom CSS can be used to hide unwanted SharePoint elements. Custom HTML can be applied by editing an individual page.
Second edit: It seems that you have very sparse understanding of SharePoint and what it can do. You need to learn how SharePoint works. It's way more than just html and it's WAAAAY more than can be posted in an answer here. No way around that. Get clued up about what SharePoint does before you do things with it that it does not do naturally.
I've been developing an static website (just html, css and js files) for a client who now wants to load the site on to Kentico CMS.
I don't know anything about this CMS. Is this a practical way to import the completed code into this system?
Thanks.
I would do things the way Kentico expects.
Take your header/footer and put them into the master page (template).
Take individual template HTML and create Layouts and Templates from them.
Use Kentico Web Part where possible
For dynamic content areas, use the Editable Content Web Part.
For the menu use the CSS Menu Web Part.
Use the Portal Engine technique. Don't use ASPX pages unless you really have to.
Here is some documentation from version 8: https://docs.kentico.com/display/K8/Creating+portal+engine+master+pages.
I have a web part which uses many SharePoint controls like menu, SPGrid, tool bar etc.
I want the user to be able to change the style by specifying an external CSS file.
Can somebody tell me how I can achieve this?
Here is a web part that allows user to provide a CSS file for overriding the stylesused in the web part. This web part allows you to provide the custom CSS file link in the web part property and it overrides the default out of the box style of tool bar.
http://sharepointexplored.wordpress.com/2009/05/17/how-to-override-sharepoint-styles-for-custom-web-parts/
Hope this helps