I want to convert my site into DNN, I have three CSS files: main.css, slick.css, slick-theme.css and two js files: main.js, slick.min.js. In their particular folders named i.e. css, and js. And one img folder containing all the images.
I think the best solution is to include those files into a dnn skin (theme).
Either you install a minimal skin and you modify it to include them, either you could developp your own dnn skin.
If you developp a skin, the file main.css can be renamed skin.css to be automaticaly loaded by dnn.
I think that main difficulty will remain to create the layouts using dnn skin objects like the menu. You can look at the Xcillion skin to see an example. It uses the DDRMenu which is flexible component to design website menus.
Here are some links to help you:
the official documentation for designers
http://www.dnnsoftware.com/DOCS/designers/index.html
an article with
many links https://www.dnnsoftware.com/wiki/dotnetnuke-skins
Related
I have a website built by Prestashop. I use PayPal and the template integral_evolution_payment.tpl. When the user goes to the payment page in mobile environment the layout of the page is too small. The buttons and the labels are very small almost unreadable.
How can I customize the page for mobile?
Thank you
Paolo
Module should have a css folder inside module folder at css or views/css. Look for it and modify css styles to accomplish what you need. Sometimes if structure has many changes between desktop and mobile version modules could use a different TPL for each version. Anyway this TPLs should be in module views/templates folder.
Good luck.
So normally, if you are developing a web application you will have to create your own .css files. In my case, I used bootstrap to design my application and created my own .css files to suit my needs.
Recently, I just found this Report Manager plugin for CakePHP. I put my plugin in the plugin folder and loaded it on my bootstrap.php file. Everything went smoothly and I can create reports.
Now, this is my first time handling plugins. Since this Report Manager plugin is using the default CakePHP design, how can I apply the bootstrap and my own design to this plugin?
Read the documentation!
You can override any plugin views from inside your app using special
paths. If you have a plugin called ‘ContactManager’ you can override
the template files of the plugin with application specific view logic
by creating files using the following template
src/Template/Plugin/[Plugin]/[Controller]/[view].ctp. For the Contacts
controller you could make the following file:
I am using a CMS (DotNetNuke) for creating a web application. I am newbe for dotnetnuke.
I searched on net for add or create multiple container for a single page and also installed some package from dotnetnuke site. But there is a issue for add or create a container in a page.
I want to use three container for top, middle and lower container.
Can any one help me out to this.
Note : I am using dotNetNuke 7.0 version on my end.
I assume by "container" you are referring to Panes, locations where you place a module on a page?
I would recommend you look at the source code for some open source skins, including my own https://multifunction.codeplex.com/ that will likely help you understand how Panes are managed.
I have made a custom dnn module. But elements in my module get all styles from dnn.
Is is possible somehow to do a css reset only in module to remove all dnn styles and apply only mine?
This is DotNetNuke's CSS priorities when loading.
DefaultCss: 5
ModuleCss: 10
SkinCss: 15
SpecificSkinCss: 20
ContainerCss: 25
SpecificContainerCss: 30
PortalCss: 35
Information above taken from DotNetNuke Wiki - Client Resource Management API
Numbers are the order the css will be loaded (5 then 10 etc, the default is 100 so this means it should be loaded last.
You could easily add your own css files into your module or if it suits, you can add them to the module.css file within you module. If you are going to use your own CSS/JS file(s) the use the following code
<%# Register TagPrefix="dnn" Namespace="DotNetNuke.Web.Client.ClientResourceManagement" Assembly="DotNetNuke.Web.Client" %>
<dnn:DnnJsInclude runat="server" ID="jsBootstrap" FilePath="~/DesktopModules/MyModuleFolder/js/bootstrap.min.js" />
<dnn:DnnCssInclude runat="server" ID="cssBootstrap" FilePath="~/DesktopModules/MyModuleFolder/css/bootstrap.min.css" />
If you are new to DotNetNuke module development I would suggest looking at this module development template from Chris Hammond (Christoc's DotNetNuke Module Development Template)
Read his blog to find out how to use and install the templates
(Using the new Module Development Templates for DotNetNuke 7)
The best advice I can give you on this is "css specificity". Using the DNN Wiki link provided by the first answer you can learn how/when DNN loads each .css file but to over come styles bleeding into your module you need to understand "css specificity".
It is a good idea to follow the loading order DNN is using as there are benefits to that like when you want to over ride styles in your module from your skin.
You could load your custom module css file last and that could help quite a bit but you should also consider implementing your styles in a more specific way to prevent the other DNN styles from bleeding in.
For example you could wrap your module html in a div tag and give it a my-foo-module class.
<div class="my-foo-module">
Module content here
</div>
Using your css classes like namespaces within your html structure will cause your module styles to take precedence over any other more generic styles that get loaded in. I don't recommend using a reset css file unless you scope it so that it only effects the elements within your my-foo-module wrapper.
Here is some good info that should help you..
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
https://www.google.com/#bav=on.2,or.r_cp.r_qf.&fp=4977db6ad6ac1fe8&q=%22css+specificity%22
And lastly I'll say that if your trying to load a third party css library like twitter bootstrap for your module and your skin is using another library or none at all this can be very challenging to say the least. Your not going to want to edit the entire bootstrap library in order to gain more "Css specificity" for your module so in this case I am unable to offer a solution as I am searching for one myself.
Friends I am starting to build one site using DotNetNuke. I am completely beginner in the DotNetNuke. I have mock up of site in html and i need to create skin and layout in DotNetNuke as in mock up. I tried to include the files in skin folder of DotNetNuke but it doesn't work.
And i am stuck with this. So, If anyone suggest me how can i change my mock up into the skin of my site in DotNetNuke?
I would start by looking at the Basic DotNetNuke Skinning webinar I recorded last year, it will give you an intro to Skinning for the platform.
http://www.dotnetnuke.com/Resources/Training/Basic-Skinning.aspx
You could also take a look at http://multifunction.codeplex.com for an example skin