My work has recently deployed Sharepoint and I'm currently trying to get to grips with it.
I'd like to be able to completely customise the way my blog looks but I have no idea where to start. I had a look through Microsoft's developer site and it does look like they have a lot of stuff there but it all seems to be pitched at a much higher level than I'm at.
I'd consider myself pretty experienced with CSS and web development, does any of this translate into sharepoint? Can I make a new CSS file and upload a bunch of images into a store and change the look of my 'site' that way, or is it a lot more complicated?
I realise this is a little vague, but I'd really appreciate some pointers to a "getting started with making sharepoint not look sucky" guide or an example of the sort of thing I can actually hope to achieve. Hopefully my question isn't too high-level.
Thanks
Use SharePoint Themes, their installation is tricky at first but once you get a good development environment you'll be able to test modifications in the traditional "save css file, press F5".
Themes have these pros:
Do not need sharepoint designer
Do not need to change masterpages and deal with (un)ghosting (the sum of all fears)
Can be applied to one subsite and have other subsites with different themes (see gl-applytheme in google for mass application of themes thru many subsites)
and these cons:
You have no access to HTML changes, for that you need masterpage love (I dont think thats a con, its a limitation that usually exists in different scenarios and also makes you improve your css skills so much in the css-zen-garden way)
Themes once applied, go to the server memory -- meaning that if you change your theme folder you need to recycle the application pool, apply a different theme and apply your theme back to see that one pixel border you forgot to put in the footer. But for that specific problem I have a solution below:
After you do your "theme setup" you'll be able to only work with CSS and images and be free to overwrite any class in SharePoint using your favorite Developer Toolbar/Firebug addon to find what you want to change.
In the folder c:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES create a folder named THEMEDEV
Inside the new folder, create a file called theme.css and another called THEMEDEV.INF
Inside the .INF file, paste this:
[info]
title=THEMEDEV
codepage=65001
version=3.00
format=3.00
readonly=true
refcount=0
[titles]
1033=THEMEDEV
now open the c:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033 folder (1033 is your language code, thats the default for english installations)
edit the SPTHEMES.XML file
below <SPThemes ...> insert:
<Templates>
<TemplateID>THEMEDEV</TemplateID>
<DisplayName>Development Theme</DisplayName>
<Description>Development Theme.</Description>
<Thumbnail>images/thnone.gif</Thumbnail>
<Preview>images/thnone.gif</Preview>
</Templates>
now edit your theme.css file, add an import to your favorite CSS development folder:
#import url('file:///C:/SharepointThemes/Theme1/theme.css');
Save everything, open your sharepoint: Site Actions => Site Settings => Look and Feel => Site theme => choose your Development Theme and hit Apply
If everything worked, you can now edit your C:\SharepointThemes\Theme1\theme.css in your favorite editor, save it with something like
* { color: red !important }
and see the changes on your site.
Something also important when developing themes: do not create folders to store, say, your images, use everything in the same folder and in the code itself use a relative fashion, like background: url('image.png')
ps1: Only you can see changes you are making to your sharepoint site due to the file://c:/ folder, if you need more people to see the changes during development, setup a network path that they all have access, the rest is the same.
ps2: Keep in mind this is a development environment, to make your theme a live theme you need to create another one to store all the content used to change your site's visuals.
The process is similar to the one creating the THEMEDEV one, just put a pretty and consistent name across all configurations (Folder name, .INF name, .INF contents, SPThemes.xml node contents), paste all your images in the Theme's folder and replace the theme.css file with your content.
Edit1: Reading your comment above, now you have a "editing + uploading to FTP" type of setup :) this works for MOSS and WSS by the way (even if you don't know the difference). For more info on customizing sharepoint, I made a post yesterday about more options:
Sharepoint: How to remove default core.css reference?
I like to always use this post as a starting point for SP branding: http://erikswenson.blogspot.com/2008/10/functional-sharepoint-branding-style.html
It depends on whether you're talking about a WSS 3.0 site or a MOSS site. WSS 3.0 sites can be customized using themes. Customizing MOSS sites is a little trickier, although you can add a SINGLE custom CSS style sheet via Central Admin - in this case, your custom files, images, etc., would be deployed as a Feature.
The best explanation of how this works that I have come across is the six part series on the cleverworkarounds.com site.
Related
I want to edit the style of multiple applications inside my workspace with the less amout of effort. What I mean by "edit the style" is font size, background color, position, etc.
My idea was creating a CSS file at "Static Workspace Files" with the classes I want and applying them to the apex items needed. Applying this in a region for instance:
*.font16{
font-size: 16px;
}
The problem is: modal pages can't find the file, which is not a problem in nomral pages. I'm using the path '#WORKSPACE_IMAGES#styles.css' in the page "CSS > File URLs" setting.
I'm not sure if this is the right approach, maybe I should edit Themes or Templates, but since I'm pretty new to Apex I chose CSS for familiarity.
Application Express v20.1
That's what Static Workspace Files are meant for, files that can be used by multiple applications in the same workspace.
The easiest approach for this is to create a CSS, like what you've done.
You don't need to inlcude the file in every single page, which would become a maintenance nightmare eventually.
You can simply include the file at the application level:
In Share Components, go in the User Interface Attributes and include the file under Cascading Style Sheets.
I usually have one global.css file (as a static workspace file) for anything common to all my apps and one app.css per application (as a static application file) for things specific to the current application.
Note that application exports will contain the static application files, but they will not contain the static workspace files. You will need to export/import them yourself.
Did you try Theme Roller? Run the page, it is down in developer's toolbar.
I inherited an already built Drupal 7 site. I have been able to figure out many things. But I am unclear on the CSS. A found a folder full of long-named CSS files but the code is all minified and hard to read. The previous developer had to be using some tools or services to alter and change the code in a more readable way. Does any know what the deal is ?
Also, I cant seem to find any way inside Drupal to enter CSS. I do not even see any classes or ID assigned to the blocks, views, nodes, or fields. So I have no clue how they were able to customize this site at all even though they obviously did. It uses Bootstrap 3 as a theme. Can anyone help explain how this works?
I will try to figure out the essence of the informations you given.
First: You have a Drupal 7 installation with compressed css files based on Bootstrap. That sounds the theme use less or sass precompiler for the theme css and you have the production (builded) instance of the project. Without the uncompressed less/sass/scss files it will be hard to edit the css. if you have no way to get the source files, the best way you can try is to add a extra css file and write you own css in it.
Second: Drupal strictly separates the code from the administration interface. Your PHP, HTML, CSS and other codes (except the WYSIWYG output) should not be entered via the administration interface. That's the best practice way. But anyway, there is a couple of modules that allows to write code inside the Drupal backend like this https://www.drupal.org/project/extra_css_js
Third: As information for you, Drupal 7s End of life is on November 28, 2022 so the best and recommanded way for you is: Freeze the Drupal 7s Instance as is (only Sercurity Updates and Hotfixes) and relaunch the Project with Drupal 9.
Drupal theme css files are mostly located in theme folder like "theme folder/css/style.css". As above mentioned, it might be used css minify tool or module for theme performance aspects. If it is created by drupal tools/module then once cache clear it will delete automatically and regenerate with new one with updated new css code on after page visit. You can also add custom css file by hook alter.
I'm trying to upgrade a Plone 3.3.5 server to 4.3.6. However, when I update the site, I find that the CSS for the site is not carried over. If I go to my CSS Registry, I find that almost all of my CSS is producing the (resource not found or not accessible) error.
My confusion seems to be in how Plone locates and links/imports stylesheets in general as Plone seems to be loading virtually none of my CSS and pretty much giving me raw HTML in the browser. I'm assuming the CSS registry is loading CSS from the buildout-cache. With this assumption, an example stylesheet that I'm targeting is located under:
Plone/buildout-cache/eggs/Products.NuPlone-1.0b3-py2.7.egg/Products/NuPlone/skins/nuplone_styles/base.css
When the CSS Registry failed to load this, I noticed that some CSS was being loaded in via handles like this:
++resource++tinymce.stylesheets/tinymce.css
But this format doesn't work with base.css and others.
So my question is, given I've got a new product installed with some CSS included in it, how do I get Plone to target said CSS?
For resources inside "skins" FS folders, the way to register on portal_css tool is to simply provide the filename, so simply put there base.css.
If this is not working probably the nuplone_styles skin folder is not registered properly in the portal_skins tool.
So go to ZMI --> portal_skins --> click on "Properties" and check the following:
what theme is used? You must probably switch back to NuPlone (but I'm not sure if it works on Plone 4)
is the nuplone_styles folder in the list of CMF layers of the used theme?
Please note also that adding the nuplone_styles layer to another theme is not a good idea. Please think about copying CSS you need in the custom directory.
This is not an answer, but some additional explanation, not fitting in a comment:
The "old" way to include style-sheets via skin-folders, requires to specify only the file-name, not a full path, and will be found by traversal, meaning the first found file with the according name, will be taken. In case of several files with the same name, the order of skins matters.
The other way is to register style-sheets via a browser-package, to have an unambiguous path to a certain file, they must start with +++resource++.
A skin.css file has been updated on a DotNetNuke website, but the updated change to the file has not yet come through on the main css file.
Tried clearing the cache within DNN and no luck...
I'm not overly familiar with DNN and how it works, but isn't it supposed to get merged into the rest of the CSS files with the DependencyHandler.axd. This does not seem to have happened.
Anyone any ideas?
When you say it isn't showing up in the Main.CSS file, I am going to assume you are using the CDF functionality in the platform. If so, you can go to the Host/Host Settings page, and look for the Client Dependency Framework portion of the settings.
In those settings you can "increase" the version number, which should cause the files to be regenerated, you can also turn off CDF to allow DNN to just load the CSS and JS files normally which generally makes debugging things a little bit easier.
After a little research it turns out that themable custom css in sharepoint should be placed either in the styles library or in the layouts folder but always in a language dependant folder structure like /<LCID>/Styles/Themable
I would like to replace the target folder of the css files in the package with the primary language of the server where the solution is deployed.
For Example, I want to change
<TemplateFile Location="Layouts\1031\Styles\mygrid.css" /> to
<TemplateFile Location="Layouts\1033\Styles\mygrid.css" /> when the solution is deployed.
A solution to this problem would also help for other files which have to be put in the Layouts\LCID directory such as theme xmls themselves.
Thanks for your help!
I understand you have only one version of css file (language independent) and you need to put it into the right folder during deployment.
The solution can be to get rid of the language specific folder schema and put your css file into Layouts\YourProject folder and then register the css file via CssRegistration control on your master page, web part or control.
See also my related question.