How about some reusable skinning script?

As a .net developer diving into DNN, I'm eager to learn how to create reusable code for my skins. My goal is to have the header and footer sections stored in a file (similar to a master page) so that when creating my skin for the website, I can easily bring in these elements and build upon them (like a nested master page). Is there a way to achieve this while skinning? I want to avoid having separate skins for the Home page and the rest of the website, ensuring consistency in the header and footer across all pages.

The main challenge I face is making changes in multiple places. Any tips or suggestions on how to approach this?

Answer №1

If you want to incorporate controls that are used across various skins, check out the information provided in my response on this link for a more comprehensive explanation.

Answer №2

When designing a skin for DNN, you are essentially creating a "master page" that dictates the overall layout of your website. This means that all pages on your site will have the same basic structure if using one skin.

If your homepage differs in layout from your content pages, you don't necessarily need to create two separate skins. Instead, you can create two different layouts within the same skin. The main difference will be in how the content is displayed in the middle section of each page. Your skin may consist of two HTML files that translate into two .ascx files when integrated into your portal during parsing (if building with HTML; otherwise, you would design two .ascx files directly).

The key lies in how you structure the ContentPane element within your layouts. The placement of the ContentPane will vary between the homepage and content pages. For instance, if your homepage features a rotating banner beneath the header and a full-width content section without sidebars, followed by a footer at the bottom, your ContentPane should occupy the full width of the midsection.

In contrast, your content pages might share the same header and footer but include sidebars on either side or both sides (even though they may not always be visible). In this case, you would position the ContentPane accordingly to accommodate the sidebars.

In essence, the process of laying out a DNN skin mirrors that of a traditional static site, with careful consideration given to the placement of content panes based on the desired content positioning.

If you're looking for more detailed guidance on skinning in DotNetNuke, I recommend watching some of Chris Hammond's videos on the subject. His tutorials cover everything from basic HTML skin creation with tokens to advanced techniques using .ascx files and registers.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust the display of inline-block divs to disregard line breaks

I am having an issue with three side-by-side divs using the display:inline-block property. When the divs are empty, they all align perfectly on the same horizontal level. However, once I add <p> tags and some line breaks (<br/>) to the first ...

Expandable sidebar using responsive Twitter Bootstrap

I am in search of a CSS solution to implement a button that can toggle a sidebar on and off using twitter bootstrap. Is there a specific term for those small icons seen on webpages that resemble pull tabs when the sidebar is closed and then move along wit ...

Please create a gap between the main menu and the dropdown menu

I can't seem to create some space between my top navigation menu and the dropdown list (when hovered). Check out this screenshot for reference: the lack of space is making it look cluttered I attempted to add a margin-top: 10px; to the css of the dro ...

The <Button> element is incompatible with popups. (HTML, CSS, JS)

I've been struggling with this issue. I used CSS color values to create a smiley face, but when I added a button it messed up the design (adding an unwanted circle around the center of the smiley). I attempted to synchronize the button tag with the po ...

Increase the size of the Bootstrap select input area to exceed the dimensions of

Is there a way to ensure that the selection area of my bootstrap select is not larger than its parent container on small screens (mobile)? My issue can be seen in the image below and is recreated in the snippet provided. The black bar represents the edge ...

Can the meta viewport be eliminated using a script?

I currently do not have access to the HTML file on the server side, but I can make changes by adding additional HTML to the website. My issue is with a non-responsive site listed below, which now requires me to zoom in after it loads due to the new viewpor ...

Guide on how to refresh the background image using the identical URL within a directive

I am looking to refresh the background image of a div using the same URL within a directive. Upon loading my view, I utilized this directive to display the image as a background for the div. app.directive('backImg', function () { var dir ...

Flexbox element in React not resizing to fit width

I've been working on a slide carousel and it's almost complete, but I'm facing an issue with adjusting the arrows to the images. When testing the website for responsiveness, I noticed that the div inside the flexbox stops shrinking and rema ...

How can I fix the issue of the header background image not resizing properly? Any suggestions?

I am currently working on improving the responsiveness of my website when a user resizes their browser window. One specific issue I'm facing is resizing the banner image as the window size changes. The website in question can be found at The CSS code ...

Enhancing the appearance of forms on Wordpress using ninja forms styling techniques

Seeking assistance in styling a form. After attempting CSS modifications, the form still lacks a background color. Can anyone provide guidance? #nf-form-8-cont { background-color: rgb(214, 214, 194,0.5); padding: 15px; box-shadow: 0px 3p ...

What is the best way to align text and an arrow on the same line, with the text centered and the arrow positioned on the

.down { transform: rotate(45deg); -webkit-transform: rotate(45deg); } .arrow { border: solid black; border-width: 0 3px 3px 0; display: inline-block; padding: 30px; } <p>Down arrow: <i class="arrow down"></i></p> Looking to ...

Video with dynamic sizing doesn't adapt properly

I successfully achieved my main goal, which was to have a background video at the top of my page. However, I am facing an issue with making the video responsive. Currently, as I decrease the screen size, the video shrinks in both width and height rather th ...

The image for our "About Us" section is not loading

I'm facing a challenge with displaying an image in the about us section of my website. Even though the image is present in the folder, it doesn't show up on the site. I've tried various methods such as moving the picture to different locatio ...

Stopping background content from scrolling while using position: fixed

Is there a way to prevent content from scrolling behind a fixed position element? Check out the demo here .navbar-default { background-color: #4c68f9; margin-bottom: 0; border: none; } .navbar-default.affix { background-color: #4762ed; margin ...

The Bootstrap row snag causing text display issues

There seems to be a glitch when the first column has more text than the one next to it. Check out the screenshot provided for reference. Any suggestions on how to fix this issue in Bootstrap? https://i.sstatic.net/fSq68.png Live Demo: https://jsfiddle. ...

Overlapping Divs - HTML Elements Crossing Paths

My challenge is to position the Social Icons at the bottom of the screen and align the Image Gallery in the middle. However, the social Icons keep moving to the center of the screen and the Image gallery ends up overlapping them, making it difficult for me ...

Perfectly aligning css tabs both vertically and horizontally with dead centering technique

Can you help me figure this out? Currently, the tabs in the HTML and CSS provided below are positioned close to the top of the screen. How can I adjust the markup so that the tabs are dead-centered (both vertically and horizontally) instead? Check out th ...

Creating a customized design for a React application with the use of Scss and JavaScript variables

Is there a method to incorporate JavaScript variables into an SCSS file? For instance, I have a JavaScript file containing the following code: // sky blue const PRIMARY_COLOR = '#489FEF' export { PRIMARY_COLOR} and I would like to utilize it ...

How can you center two inline form buttons using HTML and CSS?

I am completely new to HTML and CSS. I am currently attempting to center two form buttons on a page. Below you'll find the code snippet that I have been working with: * { font-family: arial, sans-serif; } body { display: flex; align-items: c ...

Hover events in the browser are currently operating at a sluggish pace

When I hover over a photo, an overlay is supposed to appear. However, if I move the mouse quickly (from the top to the bottom of the page, for example), the overlay remains visible even after I stop hovering over the photo. I have tried different event ha ...