Showing posts with label style. Show all posts
Showing posts with label style. Show all posts

Monday, March 26, 2012

How do I change the cursor style when the user hovers over a DIV element?

A simple question: I just want to change the style of the cursor when the user hovers over a DIV element. I know how to do it in JavaScript, I'm just wondering if there is an ATLAS way to do it.

Thanks in advance!

Disregard the previous question. That can be achieved simply by setting the CSS stlye of the element. What I meant to ask is how do I change the cursor to a "move" type when the mouse is clicked on the DIV element, as in the case when it is dragged around using the ATLAS drag and drop functionality.

Wednesday, March 21, 2012

How can I override the default "TAB" look on the TabControl.

Basically, I'm the designer and trying to customize this tab control. I don't want the default "style" look and need to customize it to my liking. There really isn't much information on this. I do know how to create the tab options as a headertemplate. I just don't know how to TURN off the XP default tab. Can anyone lend any assistance?

I believe I have figured this out - Thanks to an external web site. I'm posting the solution here so others may benefit from it.

Basically I found out that the default CSS styles are listed below: The tab control uses CSS inheritance to set the cascade. So if you change the

<ajaxToolkit:TabContainerrunat="server"Height="300px"width="750px"ScrollBars="Vertical"CssClass="ajax__tab_xp"> to the following and modify the class value you can take control of the CSS in an external style sheet. The one problem is utilizing the embedded images.

/*AJAX.NET TAB CONTROL */.ajax__tab_xp .ajax__tab_header { font-family:verdana,tahoma,helvetica; font-size:11px; background: url(AjaxControlToolkit.Tabs.tab-line.gif")%>) repeat-x bottom;}.ajax__tab_xp .ajax__tab_outer { padding-right:4px; background: url(AjaxControlToolkit.Tabs.tab-right.gif")%>) no-repeat right; height:21px;}.ajax__tab_xp .ajax__tab_inner { padding-left:3px; background: url(AjaxControlToolkit.Tabs.tab-left.gif")%>) no-repeat;}.ajax__tab_xp .ajax__tab_tab { height:13px; padding:4px; margin:0; background: url(AjaxControlToolkit.Tabs.tab.gif")%>) repeat-x;}.ajax__tab_xp .ajax__tab_hover .ajax__tab_outer { background: url(AjaxControlToolkit.Tabs.tab-hover-right.gif")%>) no-repeat right;}.ajax__tab_xp .ajax__tab_hover .ajax__tab_inner { background: url(AjaxControlToolkit.Tabs.tab-hover-left.gif")%>) no-repeat;}.ajax__tab_xp .ajax__tab_hover .ajax__tab_tab { background: url(AjaxControlToolkit.Tabs.tab-hover.gif")%>) repeat-x;}.ajax__tab_xp .ajax__tab_active .ajax__tab_outer { background: url(AjaxControlToolkit.Tabs.tab-active-right.gif")%>) no-repeat right;}.ajax__tab_xp .ajax__tab_active .ajax__tab_inner { background: url(AjaxControlToolkit.Tabs.tab-active-left.gif")%>) no-repeat;}.ajax__tab_xp .ajax__tab_active .ajax__tab_tab { background: url(AjaxControlToolkit.Tabs.tab-active.gif")%>) repeat-x;}.ajax__tab_xp .ajax__tab_body { font-family:verdana,tahoma,helvetica; font-size:10pt; border:1px solid #999999; border-top:0; padding:8px; background-color:#ffffff;}

Hi,

Do you know if there any sample css styles for the tabs out there? I am not very good with css and was wondering if I could look at some samples.

Thanks