Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Changing Background image of a pageChanging Background image of a page
Previous
 
Next
New Post
12/20/2010 6:44 PM
 
On an existing skin, how would i place a background image for the page?  I know how to do it for a specific module, but i want it on the whole page underneath all modules.  Anyone able to help?

 
New Post
12/20/2010 7:23 PM
 
Typically a skin would have the background image defined in CSS using the Body tag, though there are other ways to do it as well.

Chris Hammond
Former DNN Corp Employee, MVP, Core Team Member, Trustee
Christoc.com Software Solutions DotNetNuke Module Development, Upgrades and consulting.
dnnCHAT.com a chat room for DotNetNuke discussions
 
New Post
12/20/2010 7:25 PM
 
you need to investigate the skin source file, whether there is an id or class assigned to the element you want the image to apply (td, div, ...) and add an appropriate definition to either skin.css or portal.css. Using a developer toolbar (e.g. by pressing F12 in IE 8 or 9) allows you to select the proper html element by clicking.

Cheers from Germany,
Sebastian Leupold

dnnWerk - The DotNetNuke Experts   German Spoken DotNetNuke User Group

Speed up your DNN Websites with TurboDNN
 
New Post
12/20/2010 10:17 PM
 
I figured out how to change the web site background using hard coded CSS as well as using the CSS for the portal. That's about the extent of my knowledge in CSS at this time. So as to identifying an ID or class i am unsure of how to accomplish this.  I was able to manipulate the website background image by placing this into the portal.css:

#Body {
background-attachment:fixed;
Background-position:center center;
background-repeat:no-repeat;
}

Now it is my understanding that the #Body is an ID reference which is handled at the website level.  The skins CSS file has a Body in it as well, but when i make changes directly to the file, i do not see any changes happen at the website.  This is where my confusion comes in.  I am an avid VB.NET applications developer, and having to deal with the multiple layers that comprises a website is definitely a long way from home for me! 

 
New Post
12/20/2010 11:30 PM
 
Found it!

#pagemaster{
background-image:url('/Portals/0/BlueWaveAbstract.png');
background-repeat:no-repeat; }

After closer examination from your suggestion Sebastian, i found the pagemaster ID in the skin.css. Through a random background color change, and viewed the change i was looking for. The above snippet was what i put into the portal.css available via the site settings to manipulate my change. Thank you for pointing me in the right direction!!

 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Changing Background image of a pageChanging Background image of a page


These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out