I'm just getting started DNN skinning and am confused by how skin.css works. I'm using the "legacy" skinning method, so my skin folder has SkinName.htm file in it, which I get DNN to parse each time I change it. Now I want to add some css...
According to this: (and various other references I've come across)
DotNetNuke Skinning
I should just need to add a skin.css file in my skin folder and the DNN framework should automatically add a reference to it.
But I've added a skin.css, containing the following:
.Head
{
color: Green;
}
which definitely doesn't make it to my final page; checked with firebug. Nothing like color: Green is being applied to my elements with class="Head"
Anybody have any suggestions on why my skin.css might be ignored? Does the current DNN version still work in this way? Anything obvious I should look at?
All you need is a skin.css file in your skinning directory the reference will be automatically added.
However, when developing a skin, if you first click "Parse Skin Package" when there is no skin.css file in the directory, it will be ignored after it is created. The easiest solution is to copy all your skin files to a new skin directory and re-parse the skin package.
Related
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++.
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.
i'm stuck for hours now to figure out how the heck i can get my Stylesheets into my Webpart. Now i've found several resources claiming on how it works
http://www.c-sharpcorner.com/uploadfile/manni_prince/embedding-css-file-in-custom-webpart-in-sharepoint/
Using custom css within a Sharepoint webpart as a Embedded Resource is not working, why?
some others, too, basically doing the same
Now the first one works. But it shouldn't really be needed to manually place a single CSS File in a specific folder on each System (Dev, Test, Live). There has to be a way to embedd the Webpart into the deployment file for the project.
Searching for this i came up with the second link i've posted. This pretty much LOOKS like something i wanna do, but i simply can not get it to work.
My Structure is the following:
./SOLUTION
> Properties
> References
> ...
> Webpart1
> ...
> Webpart2
> Webpart2.css
> ...
> Styles (A Folder of VS Style 'Module')
> wp2.css
Would someone be so kind to tell me how i can include the wp2.css into the sharepoint page only if the webpart is visible on the page. Without the need of me manually needing to place the css file as pointed out in link 1.
Thanks a lot in advance!
Add the Layouts mapped folder to the solution (How to: Add and Remove Mapped Folders).
Create appropriate folder structure inside (e.g. /1033/styles) and copy the CSS file there.
Build the WSP package - the CSS file will be placed inside and copied to the [14 hive]\TEMPLATE\LAYOUTS\1033\styles folder once the package is deployed.
I'm creating a Flex 4 application which contains different modules in it. The main application contains a style sheet and the modules inherit the styles defined in this file.
Its working fine when the swf's are generated using Flash Builder. But when I'm generating it using Ant script, the modules does not inherit the styles and everything looks weird.
I added
isolate-styles="false"
as an additional parameter to mxmlc, but still its not working :(
Can someone please provide your suggestions?
I have never had to do anything special in regards to modules, flex and ANT but maybe I have been lucky. Or there is something else going on in your ant script. You can try being explicit and adding your css files via the compiler argument - [defaults-css-files filename , ... but that would be a brute force method forcing the styles to be recompiled into your module. Another option to help with debugging is to call getMergedStyleDeclaration() from your module so that you can compare the difference between Flash Builder and when ant builds the file. I am sure you have already read this document, but just in case, here is Adobe's information on modular applications.
If none of this helps please post some more detailed information around your current scripts and I can help from there.
Turned out to be a simple solution. All styles except fonts were inherited to the modules.
mx|Module{
font-family : "Myriad Web";
}
Needs to be added when built using ant. Flash builder generated swf's were working fine with out this additional style definition.
I had provided only
s|Application {
font-family: "Myriad Web";
font-size: 12;
font-anti-alias-type:advanced;
}
in the main style sheet.
I was reading this tutorial from the DNN website
http://www.dotnetnuke.com/Community/Blogs/tabid/825/EntryId/2675/DotNetNuke-Skinning-101-Part-2.aspx
I found the tutorial to be very useful, however there was an issue when I tried to apply the CSS style. For example after adding the content pane in the initial index.html I have no idea where to place the CSS. If I add it to the head section then the parser will remove it.
Where could I add or reference the css file on for the skin?
thank you.
Not a DNN specialist, but:
A skin normally contains a stylesheet file called "skin.css" in the skins\skin-name folder.
The reference to this stylesheet is provided for you by the DNN framework.
To reference multiple CSS files, or to add css files with different names, you normally #import them from the skin.css file.