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.
Related
Since, v13 or v14, I heard that we can use "iRender" or something to inject a 2sxc module into the skin.
This was the previous way Is it possible to load a specific 2sxc module in a DNN skin?
What is the newest code for injecting a 2sxc module into a DNN theme?
The idea here is to Render the output of a 2sxc module that is already on a DNN page. You are literally inserting the rendered HTML results of the module.
So in a user control, any theme (skin or container) file, like Main.ascx, you can now (2sxc v14.01+) do this nicely with the following code. All you need to know are the page ID and module ID (below you see TabID=44 and ModuleID=122):
<%# Import Namespace="ToSic.Sxc.Dnn" %>
<%# Import Namespace="ToSic.Sxc.Services" %>
<%= this.GetScopedService<IRenderService>().Module(44, 122) %>
There are a lot of great use cases for this that provide the content manager with an easy to use way of editing something in the theme. Examples? Add a Featured Something in to the output of a MegaMenu? A custom list of links or social media icons in the footer without using a janky DNN all-pages module.
Note: that prior to 2sxc v14.01, the function name was .GetService<T>()
Related 2sxc Docs:
DNN Extensnions
RenderService Interface
I just blogged about it today :)
https://2sxc.org/en/blog/post/deep-dnn-skin-and-module-integration-towel-day-2022
Use GetScopedService() and you're good to go
I have a content slot in which I need to add custom css file from Business Manager. I want to add the custom file in the head section. Is there any way by which I can do it?
I tried adding a custom css file in Content Asset and linked that asset to Content slot but it was not working.
This functionality exists for Content Assets as a customization to the Page-Show controller in older Site Genesis reference applications and sites. Unfortunately, if you want to do this via a Slot, you'll need to have some JavaScript execute to inject the CSS into the head of the page from either the slot configuration rendering template or from within the slot content itself. Slots are loaded and rendered by the Web Adapter layer which sits between the Internet and the Application Servers. This all happens after the rest of the page is rendered by the App Server.
Also, at this point, I'd consider using Page Designer components instead. Page Designer is expected to be globally available sometime this month. That said, if you need all the features of Slots, PD is not yet at feature parity with Slots. (In terms of scheduling, targeting groups of customers, etc)
We simply bake style tag into the body of the content asset or content slot (content type - HTML). You are not gaining much by having a style tag in the head of the page. Having style tag inside your div makes your markup less valid but none of the browsers even old IE will complain about it.
<style>
p{color: pink;}
</style>
The use of Custom CSS File in content asset and link asset to your slot should have worked may I know what was the error you were facing with this approach?
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.
I need to add Call tracking for a Marketing campaign on my site that is currently housed in Joomla. It requires a certain script to be added inside the <body> tag only on designated pages.
I know I can add the script tag to the template but that would make it apply to every page. I am still new to Joomla, so can you tell me if there's a way to apply the script below to only the pages we want to track calls from? It needs to go before the </body> tag.
<script type="text/javascript" src="//cdn.callrail.com/companies/808848127/e001797b95eaf41026e7/12/swap.js"></script>
The easiest way to add a script to selected pages is to use an extension such as the professional version of the EasyScript plugin, the Flexi Custom Code module or similar.
It looks like you could also do this with Blank Module which is free. Publish the module to a non-display module position such as "debug" or similar and enable the module only on the required pages by selecting these under the Menu Assignment tab.
I have create a DNN Module using the Visual Studio DotNetNuke 7 C# Compiled Module template. When my module is installed, I would like to create a page for View.ascx. How can I do this? Can this be done when I upload the module in Host > Extensions?
From the Control Panel you should use the Add new page functionality, then place your Module on that newly created page.
Check out this video for how to Add a page in DNN7.
http://www.dotnetnuke.com/Resources/Video-Library/Viewer/Video/549/View/Details/How-to-add-a-page-in-DotNetNuke-7.aspx
And this one for how to adda module to a page
http://www.dotnetnuke.com/Resources/Video-Library/Viewer/Video/537/View/Details/How-to-add-a-module-to-a-page-in-DotNetNuke-7.aspx
To answer the question specifically about having this done automatically with the module, yes, you can, BUT you have to write code to do this and I only recommend it for special circumstances.
I've seen this done using an implementation of the IUpgradable interface in DNN to detect an initial installation and create the page using DNN API calls.
There is some detail in the Wiki about how IUpgradable works