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, ...multiple header imagesmultiple header images
Previous
 
Next
New Post
7/15/2010 7:12 AM
 
Here is one for all the gurus out there.

I have a website I am building and part of their request is to have "random" header images. This is no problem with just a bit of javascript. Then add to that  their request for the size widgets (800, 1024, full screen) and I'm lost.  The header images are background images in a div. Any ideas?

TIA
Glenn
 
New Post
7/15/2010 7:27 AM
 

Glenn,

Couple of options here I think:

1. If you're using individual css docs to control the css for each of the sizes, the. you could add the background images here, because the css will only be called for that specific width so you have full control over the images this way.

2. Use a background image that fades into a background colour.

Rick.



PSDtoDNN - You supply the artwork... we'll build the skins!™
Website | Twitter | YouTube | Skype
 
New Post
7/15/2010 7:48 AM
 
So, I have default800.css, default1024.css, and defaultfull.css in a css/variations folder and a skin.css in the main folder. These "variations" are called from the main skin page.  Normally, the javascript would be something like  document.getElementByID("Header_area").style.background-image ='image1' ...... something like that on the page onload event.

There would be a call to the image1, image 2, image 3 with a standard randomizer. All that is doable.

Normally there would be a var image1="header1.jpg", etc

but how do you make the css understand?

I hope this makes sense.



The header images 1, 2, and 3 are all fixed sizes.

thanks again.

Glenn
 
New Post
7/15/2010 5:57 PM
 

Glenn,

I'm not 100% sure about this one, random background images and javascript arent something I've really worked with before. Thsi said though I do understand the logic behind javascript and css and think I may have come up with a solution for you, if you can script this to work.

The logic behind it is this:

  1. You have a div with and id of mainimage (or something).
  2. On page load you add a class to this div of pic1, pic2 or pic3.
  3. Each of these classes reference a different background image.
  4. You include these classes in the unique size css, not the main css so that they're referencing different images, and therefore loading different images based on the size of the site.

I hope my logic above makes sense, if not let me know and I'll try to explain more clearly.

If you do use the idea above, I'd be interested to know how it works out.

Regards,

Rick.



PSDtoDNN - You supply the artwork... we'll build the skins!™
Website | Twitter | YouTube | Skype
 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...multiple header imagesmultiple header images


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