about rotating header images

This is an open forum for any mojoPortal topics that don't fall into the other categories.

This thread is closed to new posts. You must sign in to post in the forums.
6/25/2010 9:18:42 PM
Gravatar
Total Posts 147
Download Free Mojo Skins http://crypticsites.net

about rotating header images

Hi Joe -- some time back (in 2009 according to the thread I was reading) you posted this:

I've made a preview of the next release available for anyone who would like to get the new features early and help test for the official release.

Its available now (only for MS SQL) on our Novell Forge Download Page, mojoportal-2-3-1-8-preview-mssql-deploymentfiles.zip

Whats New?

New Side Show with transition effects built into the Html Content Feature making it easy to animate image and content rotation.

The andreasvicklund-02-alt1 skins also shows how to rotate content in the skin.

 

Given that far newer versions are now available (I'm using 2.3.4.3 from the MS web app gallery, and I think there is a later release than that, maybe more than one), I'm guessing this is now available -- I see the andreasvicklund-02-alt1 skin, and love the rotation effect, don't really care for the white background, so it's not really suitable as a starting point to make a customized version, I'd have to change literally every color in the CSS file in order to make a dark-bg site out of it -- so what I need to know is this:  can the code that handles the rotation in layout.Master of that skin simply be lifted out into another skin's layout.Master?  Is there anything else involved, any other settings or code that needs to be copied?  The exact code I'm referring to is:

<div id="wrapheader">
        <portal:SiteTitle id="SiteTitle" runat="server"></portal:SiteTitle>  
        <portal:SlidePanel id="spanel1" runat="server" CssClass="rotatecontainer">
        <portal:SkinFolderImage ID="imgs1" runat="server" ImageFileName="head1.jpg" CssClass="rotateitem" AlternateText=" " />
        <portal:SkinFolderImage ID="imgs2" runat="server" ImageFileName="head2.jpg" CssClass="rotateitem" AlternateText=" " />
        <div class="rotateitem">
        <asp:Image id="img4" runat="server" CssClass="floatrightimage" AlternateText=" " Height="60" ImageUrl="~/Data/logos/mojothumb.jpg" />
        <p>lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor
        lorem ipsum dolor  </p>
        </div>
        <portal:SkinFolderImage ID="imgs3" runat="server" ImageFileName="head3.jpg" CssClass="rotateitem" AlternateText=" " />
        
        </portal:SlidePanel>
    </div>

 

I've located the pertinent CSS in the style.css, which is so nicely commented to make it easier for us.  I just need to know if copying that scrap of code shown above (plus the attendant CSS in style.css) is all I need to worry about, or if there's more to it.  I've studied that asp.net tutorial (mentioned in my last post a few days ago) to some degree, so the code doesn't look as foreign to me as it did at first, I can kinda figure out what's going on with it, but I'd be vastly overstating the case to say I really have a grasp of it yet.

thx!!

Andria

6/26/2010 6:19:28 AM
Gravatar
Total Posts 18439

Re: about rotating header images

Hi Andria,

You are exactly right! See, you're already good at figuring this stuff out.

Actually the only part you need from layout.master is this, you don't need the whole wrap header div:

<portal:SlidePanel id="spanel1" runat="server" CssClass="rotatecontainer">
        <portal:SkinFolderImage ID="imgs1" runat="server" ImageFileName="head1.jpg" CssClass="rotateitem" AlternateText=" " />
  <portal:SkinFolderImage ID="imgs2" runat="server" ImageFileName="head2.jpg" CssClass="rotateitem" AlternateText=" " />
  <div class="rotateitem">
  <asp:Image id="img4" runat="server" CssClass="floatrightimage" AlternateText=" " Height="60" ImageUrl="~/Data/logos/mojothumb.jpg" />
  <p>lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor
lorem ipsum dolor </p>
</div>
<portal:SkinFolderImage ID="imgs3" runat="server" ImageFileName="head3.jpg" CssClass="rotateitem" AlternateText=" " />
</portal:SlidePanel>

basically that <portal:SlidePanel just wires up the jQuery plugin for you and any top level html elements inside it become slides. The slides can be pretty much any html element but typically images or paragraghs would be used. The <portal:SkinFolderImage just makes it easy to use images from the current skin folder, it automatically resolves the base path so you can just put the file name of the image. Raw <img src... elements could also be used there but would require you to enter either the full url or the full relative url relative to the root of the web site.

Best,

Joe

6/26/2010 6:23:50 AM
Gravatar
Total Posts 18439

Re: about rotating header images

Notice also that we have this integrated into the Html content feature as well. If you go into the settings and enable slide show it will make any top level html elements in your content into slides. There is also some additional info if you click the help links in the settings for the Html feature. There are a number of settings for configuring the slide show and the help links next to them have some additional documentation about the settings.

Best,

Joe

6/26/2010 12:20:27 PM
Gravatar
Total Posts 147
Download Free Mojo Skins http://crypticsites.net

Re: about rotating header images

Awesome!  Thanks, Joe!  The main reason I included that wrapheader div is that I'm (at the moment) mainly interested in setting up a similar thing in a header, and wanted to make sure that the CSS for the header stays intact -- if I had a white-bg site in mind, I'd just customize that skin, but I always prefer dark backgrounds, and the only place I know of that automatically changes the text color to stay readable when you change the bg -- is Artisteer!

This thing really is awesome -- but I had to step away for a few days to work on a Joomla template for a book review site I'm turning over to my son -- he doesn't share my regard for dark backgrounds, but he also doesn't have a clue how to make a webpage, template, or anything else -- so of course, MOM gets to do it for him! (that seems to be the actual purpose of moms -- doing FOR the youngun too stubborn to do for himself!)  cheeky

Thanks!

Andria

6/26/2010 1:50:39 PM
Gravatar
Total Posts 147
Download Free Mojo Skins http://crypticsites.net

Re: about rotating header images

I just remembered one other thing I wanted to ask, regarding this:  about including a file to hold the rotation code, instead of having it hardcoded in the layout.Master.  I'm familiar with the way that this works in php, somewhat less so with SSI inclusions (I never can seem to get the path right, with the SSI kind), and I'm wondering if ASP.NET has something of that kind -- I'm sure it must, but not sure how to code it.  By doing it with a file inclusion, I could leave a layout.Master file fairly small, and not worry about having to update it if I wanted to update the header -- just update the included file, or create a new one and change the inclusion in layout.Master.

Is this possible, and if so, how?

Thx much!

Andria

6/27/2010 6:58:55 AM
Gravatar
Total Posts 18439

Re: about rotating header images

Hi Andria,

This question or variants thereof come up often enough that I decided to write a documentation page rather than just answer directly here in the forums.

So for your reading enjoyment, this new article should explain how to do what you want to do.

http://www.mojoportal.com/usercontrols-as-include-files.aspx

Best,

Joe

6/27/2010 10:29:34 AM
Gravatar
Total Posts 147
Download Free Mojo Skins http://crypticsites.net

Re: about rotating header images

That is awesome, Joe; thank you so much!  I knew these control things were fundamental, from first glance, and the more I learn, the more true that seems to be!  Now I just gotta learn to build them -- and I think it's a lot like when I learned HTML; I can't just read it, if I want to really get it, I need to write it myself, test it out, fiddle around with it and see what works and what doesn't.

Thanks!  You rock!

Andria

6/27/2010 1:54:30 PM
Gravatar
Total Posts 147
Download Free Mojo Skins http://crypticsites.net

Re: about rotating header images

Ok, you didn't specify exactly in the excellent docs you wrote, so I thought it worth asking: does the MyControls (for custom controls) folder go into the mojo root, or into sites/1 (or whatever number site it is)?

My gut says in the mojo root, but given my total ignorance, I could certainly be wrong.  surprise

Thx!

Andria

6/28/2010 6:08:41 AM
Gravatar
Total Posts 18439

Re: about rotating header images

Hi Andria,

Trust your gut, your gut is right! and the article even says:

First create a folder beneath the root of the web to keep any custom UserControls organized in one place. For example I created a folder named MyControls, in the folder I created a new text file named HeaderSlideShow.ascx

also anytime you see this kind of syntax in ASP.NET: "~/" that resolves to root of the site as in the example control declaration and in the Page.ResolveUrl function you've seen.

<%@ Register TagPrefix="me" tagName="Slides" src="~/MyControls/HeaderSlideShow.ascx" %>

your gut probably noticed that ~/ even if you didn't see the text in the article ;-)

Best,

Joe

6/28/2010 7:25:23 AM
Gravatar
Total Posts 147
Download Free Mojo Skins http://crypticsites.net

Re: about rotating header images

Yep, I think you're right, I did see that ~ thingie, but was a little unclear on whether it meant the mojo root or the sites/1 root -- now I know! ;)

Ok, now I'm sure you're sick of hearing about this by now, but about the slideshow settings -- when I click the wrench icon next to the first article I posted, I see the settings for the slideshow, but when I change them, it doesn't seem to affect the header -- is there some other way to change the settings, if the slideshow isn't in the content-area?

Thx much!

Andria

6/28/2010 7:47:24 AM
Gravatar
Total Posts 18439

Re: about rotating header images

Hi Andria,

The settings in the Html will only affect the slideshow if used in the Html instance it will not affect your header slide show, I just pointed you there for the help documentation. All the Html feature is doing with those settings is using them to determine what properties to set on the <portal:SlidePanel inside the Html feature.

You can specify settings directly on the control like this:

<portal:SlidePanel id="spanel1" runat="server" CssClass="rotatecontainer" TransitionEffect="fade,curtainX,turnUp,slideY,zoom,pinch,scrollRight" Random="true" TransitionInterval="3000" Speed="1000">

</portal:SlidePanel>

The properties I've shown here are the ones of interest, by default the TransitionEffect is only fade, but you can specify them comma separated as shown above, and the help in the html feature lists the possible transitions.

Best,

Joe

You must sign in to post in the forums. This thread is closed to new posts.