Welcome Guest Search | Active Topics | Sign In | Register

Web.Dialog and custom CSS header Options
Simon
Posted: Tuesday, August 30, 2011 12:35:48 PM
Rank: Member
Groups: Member

Joined: 8/19/2011
Posts: 15
I would like to know if this is possible, What I am trying to do is place a nice custom header on the web dialog, this needs to be a smaller version of the header I am using on my main pages, the header is made up of 4 CSS classes, one for the background, two for the image and the 4th is the text on the right hand side.

If this is possible how do I go about it, this is my style sheet:
.TLCBanner
{
position: fixed;
top: 0px;
left: 0px;
padding: 3px;
background-color:#CF142B;
background-repeat: repeat-x;
width: 100%;
height: 45px;
z-index: 0;
}

.TLCBanner-Left
{
position: fixed;
background-image: url('img/tlc/QLook-Logo-for-Red-BG.png');
background-position: left;
background-color: #CF142B;
width: 106px;
height: 43px;
top:3px;
left:10px;
z-index: 1;
}

.TLCCrosshair-Extend {
background-position: 100px;
background-image: url('img/tlc/QLook-Extend-for-Red-BG.png');
background-repeat: repeat-x;
float:left;
left: 116px;
top: 14px;
right: 16%;
height: 20px;
position: fixed;
z-index: 2;
}

.TLCBanner-Right
{
font-family: tahoma;
font-size: x-large;
font-weight: bold;
color: white;
background-color: #CF142B;
position: fixed;
float: right;
right: 50px;
top: 6px;
height: 40px;
padding-left: 5px;
z-index: 3;
}
eo_support
Posted: Tuesday, August 30, 2011 12:44:36 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

You don't use 4 CSS style on dialog title with our dialog. Usually the only CSS you use is HeaderStyleActive. That would apply to the whole title region.

Other UI elements on the dialog, such as icon, text, and close button are controlled by other properties, not CSS. For example, you can set the dialog's IconUrl to give the dialog an icon. You don't need to have a separate CSS with a higher zIndex to lay on top of the title. You can take a look of the sample and documentation to see what's available.

Of course, you can combine CSS with certain properties. For example, you can set text to "Hello", or set it to "<div class='whatever'>Hello</div>".

Hope this helps. Please feel free to let us know if you still have any questions.

Thanks!
Simon
Posted: Tuesday, August 30, 2011 2:32:05 PM
Rank: Member
Groups: Member

Joined: 8/19/2011
Posts: 15
Thanks for quick response, the CSS posted above is the one that is used on the main page, as this all needs to be fixed, I posted this to show you what I need to appear in the dialog, I need this sort of header on the dialog, so that if it is resized the logo and text moves with the resize, so with what you have said is it possible to add the 1st logo on the left followed by the line extender graphic and then the text on the right hand side of the dialog, if not then I think I could just hide the dialog header and add the banner to the content loaded in the dialog, that would work would it not ?
eo_support
Posted: Tuesday, August 30, 2011 2:37:41 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

Judging from what you described it should work.

Thanks


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.