resize the page header

[ntnewbies]

Hi friends,
I am using the base theme for NT11.04 web server application.
I am planning to put flash / image inside the pageheader (something like slider). But if i put a larger image, then it overlap the menu area.
I am sure that the resize solution is in css.
May i know which css to look for?
by default the web server put the styles as custom.css
But custom.css is not in the application working directory.

The menu procedure mention something about the following css
'nt-site-header-6 ui-widget-header ui-corner-top'

but where is it located?

[Bruce]

>> I am planning to put flash ... inside the pageheader

If you put Flash inside the header, then I don't know you and you shouldn't expect any help
_Please_ don't do that.... (for so many reasons, too many to list here... just don't do it...)

>> I am planning to put image inside the pageheader. But if i put a larger image, then it overlap the menu area. I am sure that the resize solution is in css.

It is indeed CSS.

>> May i know which css to look for?

Impossible to say without an example of what you are doing.

>> by default the web server put the styles as custom.css. But custom.css is not in the application working directory.

Correct. I don't ship that file - it's there for you to put your own custom css into. (you create the file, add to it whatever you want, and so on.)

>> The menu procedure mention something about the following css 'nt-site-header-6 ui-widget-header ui-corner-top' but where is it located?

The shipping CSS is in the "styles" folder. In a variety of files. Also in the \Themes\whatever folder. but you should not edit any of these files, you should put your edits in your own custom.css.

Cheers
Bruce

[DonRidley]

I wouldn't do Flash.  You cannot guarantee the end users' browsers will be setup correctly to  display it and other things.

The ability to use custom.css is very powerful.  You can use it to do just about anything you want styling wise.  You can overide the default NT css in your custom css by redeclaring the css rule in your custom css file and changing the values or declaring new values.  But, I wouldn't modify the shipped css.

Good luck,

Don

[ntnewbies]

Thanks Don and Bruce for the tips.

Ok, i will avoid the flash. As an alternative, can i use animated GIF?

Right now, i have put a static jpg file in the pageheader. I notice that the image is not resized well if i use it in mobile.

Is there code that maybe if i detect if the website is loaded in mobile, then show smaller version of image in the page header and if non mobile, then show larger width image ?

[Bruce]

>> As an alternative, can i use animated GIF?

That would be better.... (although I usually cringe at the words "animated gif".) But some adverts will have a 3 second pause between frames, so that would work as an animated gif.

>> Is there code that maybe if i detect if the website is loaded in mobile,

don't think "mobile" - think "small screen".  And yes you absolutely can use CSS to change things like width and height depending on the screen size. (google for css media queries and you'll find lots of info on that.)

>> then show smaller version of image in the page header and if non mobile, then show larger width image ?

yeah, that sort of thing.

Bear in mind that you can specify the image URL in CSS (as a background image) so there are lots of techniques you can use here.)

Cheers
Bruce

[DonRidley]

Use animated elements with caution.  Too many or not formatted properly and your site can quickly become a gaudy mess.  It's also important to differentiate between a web application and a web site.  If it purpose is to be used for work, I would keep it simple.  Jazz it up a little but sparingly.  If it's a web site for a company or something, jazz it up a lot. 

As far as your header, I looked at a header of a web site recently that had a YouTube video embedded in it via a url.  It looked really good.   It was set to auto replay.  The sky is the limit (exxcept for Flash LOL).  We haven't even mentioned what you can do with JavaScript.

Check this out:  https://www.tuscaloosa.com

Apparently they removed the embedded video but the site looks good.  If you put your browser in mobile/responsive mode (CTRL+SHIFT+M), you can resize the page with your mouse and watch how the page responds to size changes.  All done with CSS media queries.

Good luck,

Don

[ntnewbies]

Thanks Don and Bruce for the wealth of information and ideas.

embedded video in page header...thats interesting...

actually i am developing an online grocery store.  the purpose of moving images/video would be to show promotional video or
promotional gif.

now i need to get css that is relevant to online store...

[DonRidley]

One thing to remember as well is that you can embed NetTalk objects inside static pages.  Take a look at the Pages example app.  All you have to do is include <!-- Net:Webserver --> at the very top of each static page.  Browses and forms can be placed inside the pages with tags such as <!-- Net:BrowseWhatever --> , etc.  You can use CSS and security settings to determine what is displayed and what's not.  For example, have a way for site administrators to login to the page.  When logged in they can enter new content.

I have used free website templates along with this technique to create sites. 

Don