Tabbed UI home page background

[bob9145]

I wanted to use an image to style the home page background in a tabbed UI component.

There is an HTML builder in the properties, but it is WYSIWYG
How do I use it to set the background?

This is also true for the header.I wanted to set the background there as well.

I also want to continue this theme on other panels which contain grids. Is there a way to set the background for each panel while maintaining an Alpha style for the grid itself?

The button panel brings up a style editor which allows you to set the background easily.

What I am trying to accomplish is using Alpha's base styles and setting them in some complimentary backgrounds.

Tks
Bob

[Steve Wood]

Re: Tabbed UI home page background

Don't use the html editor for the home page, change the Home Page HTML Source to URL, something like tabbed_home.a5w. And then create a page named tabbed_home.a5w with whatever background, text, images, etc.

[bob9145]

Re: Tabbed UI home page background

I see that makes sense. What if I wanted to change the background on all the tabbed panes that have grids on them to create a theme for the the whole tabbed UI?


Would I do this by editing one of the alpha styles or does this need to be done within the component?

I checked out the html in firebug and it's easy to see where the background image is called for the button panel. It's not so clear however where you would do this on an individual pane or for all panes.

Is this area surrounding the grid in a tabbed UI part of the grid's table or is it the a5w page or something else?

I would like to work within my grid component with a beach in the background.

background-image: url(beach.jpg);

Tks
Bob

[Steve Wood]

Re: Tabbed UI home page background

If I recall there is an option for all grids to assume the same style as the tabbedui. But if you add A5W pages I am sure they have whatever style you give to those pages via linked css. But if you do use css, and each page is linked to the same css, then they should all look the same. At one point I had a home page with an image via css using background-image:url(), and the grid would superimpose on top of that image. I made it stretch full height/width too by giving the image height=100% width=100%.

[bob9145]

Re: Tabbed UI home page background

Thanks for your help Steve.

If you open a5w pages with grids on them don't you loose some of the filter and easy to use link properties that are in the tabbed UI?

There must be a way to do this within the component. There also must be way to differentiate between panes as well, so each pane could have a different background.

Setting the grid on top of the image and having the image cover the whole pane is exactly what I am trying to do. This will bring great eye appeal to the tabbed UI!



I am thinking that some one else must have already thought of this and accomplished it. If not it would be of great design value to all.

What is a pane? Is it a Div or a part of the table(grid)? Could it be done in the over ride settings property for the pane?

Tks
Bob

[bob9145]

Re: Tabbed UI home page background

It would look like a fine dessert on an even fancier ornate tray.

Sounds like a great idea for a work in progress!

Anybody on the West coast listen to Dennis Miller?

Bob

[Steve Wood]

Re: Tabbed UI home page background

May I be struck by lightning if I build an application with a different background image or color per tab, but this is one way to do it. I attached an example.

Go to the GRID that you are inserting in the tabbedui (not the tabbedui itself). Go to Properties > Freeform Edit Region > Above Grid. Enter in this style code, but use an image that you have rather than the header.jpg I show.

<div style="padding:10px;background-color:green;background-image:url(images/header.jpg);background-repeat:no-repeat;background-position:center">

Go to Freeform Region > Below Grid and just add the closing "</div>"

Go back to your tabbedui and preview or publish and view.

Play with the padding and position settings to get what you want. You can also add "height:500px" to force your colored area to be of greater height. The image will always center.

It's not perfect since the grid is not transparent, the background image does not bleed through. The colored area and image are relative to the Grid, not the Pane, so the color does not extend to the bottom of the pane.

The reason this is difficult is because in the tabbedui, your Grid takes on a new complex naming structure. And the Pane is NOT associated with the Grid. The first tab is tab.0 no matter what Grid is opened in that tab.

--------------

I listen to a lot of strong comedy on ITunes. Sorry, I always turn the station if Miller comes on.

[bob9145]

Re: Tabbed UI home page background

Psychedelic site! Maybe Ti-die!

I was thinking to try the free form areas when I woke up this morning but thought it might still have a common background

I'll give your method a try.

So what your demonstrating is that the background is a part of the ajax window itself?

Thanks again.

[bob9145]

Re: Tabbed UI home page background

This works but leaves a small border around the perimeter of the pane (also in the browser). I tried setting the border it didn't work.

It is not dynamic so you have to compensate the padding to anticipate different grid sizes. For instance if the grid renders with no records you would need more padding. If you put to much you get scroll bars.

I set the top and left padding to position the grid in the pane and than use the right and bottom regions to fill the rest of the pane.

<div style="BACKGROUND-IMAGE: url(flag.jpg); PADDING-BOTTOM: 275px; PADDING-LEFT: 50px; PADDING-RIGHT: 275px; PADDING-TOP: 25px">

you need to remove the closing tag. Note: Alpha re adds it each time you open the editor . You put the closing div tag in the below property (editor) and save.

Steve identified the pane as tab.0 for all panes,could you set the background for tab.0 somewhere? Could it be made dynamic? Can you get rid of the perimeter space this way?

Tks
Bob

[bob9145]

Re: Tabbed UI home page background

I tried using the style editor. The pagebody setting changes the header section. You can set the button panel style in the properties of the tabbed UI.

The problem is setting the pane background. In order to change the pane background you have to change the css of dataTD in the style editor. This works however it also sets the background of the row cells in the grid.

Can these 2 settings be separated ? This would give you a lot more design possibilities in the Tabbed UI.

Tks
Bob

[jdusoe]

Re: Tabbed UI home page background

Bob,

There is a very simple way to set the style of the containing div of the Tabbed UI. (Thanks to Bob Moore for pointing me in the right direction)

In the Tabbed UI, there is a section labelled Tab Pane Javascript. In the onInitial event add the following code (set values to taste):

var currTab = paneObj.value + '.PANE';
$(currTab).style.backgroundImage='url(bg_1920x1080.jpg)';
$(currTab).style.padding='.5in';

In my case, I wanted to set a background image and set the padding around a grid to provide more "white space". You can also use:

var currTabName = paneObj.html;

This will give you the tab's name so you can programatically set background colors and other styles based on the currTabName value.

The secret is the paneObj which does not show up in the DOM, but rather seems to be created and destroyed as the pane is instantiated.

Hope this is helpful...

[bob9145]

Re: Tabbed UI home page background

Jim,
I will give it a try.
Thanks,
Bob