How to change the style of scrollbar?

[shenhui]

Hello all,

I have embeded CEF in my application and want to change the window's scrollbar style on web page. I wrote a piece of javascript code and called ExecuteJavascript() api when web page started loading, but it seems not work well all the time, sometimes it works and somtimes not.

I have also tried another method by set user_style_sheet_enabled in CefBrowserSettings to true and initialize user_style_sheet_location when initialize CEF, but not worked as well.

Is there anyway we can do to change the scrollbar style of CEF webpage when we embeded CEF framwork?

Any advice will be much appreciated.

ShenHui.

[magreenblatt]

Can you provide more detail about the situations where what you've tried so far has not worked? For example, did they work on some websites but not others?

CEF will support custom drawing of scrollbars in the future where the client is completely responsible for drawing the scroll bar controls. Would that satisfy what you're looking for?

[shenhui]

Hello magreenblatt,

Thanks very much for your reply.

I just want to modify the scrollbar style of CEF browser.
In my opinion, the best way is changing the custom style sheet file, I have found that there is a user_style_sheet_enabled and a user_style_sheet_location attribute in class CefBrowserSettings, then I think I can set the values of these two attributes and then pass CefBrowserSettings object into CefInitialize api. The code sample is followed below:
......
CefSettings settings;
CefBrowserSettings browserDefaults ;

browserDefaults.user_style_sheet_enabled = true ;
browserDefaults.user_style_sheet_location.str = new TCHAR[MAX_PATH] ;
_tcscpy(browserDefaults.user_style_sheet_location.str, _T("E:\\tmp\\cef_binary_r181_VS2005-VS2008\\build\\Debug\\obj2005\\custom.css")) ;

CefInitialize(settings, browserDefaults);
......
......

Then I wrote my own scrollbar style in custom.css, but it seems not work when I run the program.

[cagret]

You could provide more details.
1. When adding your custom CSS styles - did you try changing some other elements on a web page using this css? Only scroll bars don't work, or the CSS completely?
2. Did you test your custom css on a webpage in chrome? Also check javascript console for any errors.

[shenhui]

Thanks for your reply.

1. When adding your custom CSS styles - did you try changing some other elements on a web page using this css? Only scroll bars don't work, or the CSS completely?
I add my custom CSS styles by calling CefInitalize(...) when my application starts up. And all of styles in CSS file did not work.
2. Did you test your custom css on a webpage in chrome? Also check javascript console for any errors.
I have tested my own custom css on a chrome webpage by replacing the chrome's default custom.css file, and it works well.

I also found that if I execute a piece of javescript code during a web page is loading, in order to change the style of scrollbar, sometime my self-defined scrollbar can be loaded, sometime not.

I have another question, how do I initialize the value of user_style_sheet_location in CefBrowserSettings, I initialized like this:
browserDefaults.user_style_sheet_location.str = new TCHAR[MAX_PATH] ;
_tcscpy(browserSettings.user_style_sheet_location.str, file:///H://20110411//cef_binary_r181_VS2005-VS2008//build//Release//scrollbar_style.css) ;
But it does not work.

Thanks!!

[custa1200]

We have used the Webkit CSS classes for scollbars perfectly with CEF.

[shenhui]

Hello custa1200,

Could you please provide more detailed info about how to set scrollbar style?

[cagret]

Styling Scrollbars article at webkit.org:
http://www.webkit.org/blog/363/styling-scrollbars/

Example:
http://trac.webkit.org/export/41842/tru ... tions.html

[shenhui]

Hi cagret,

I have ever seen this article before and I know how to write my own style scrollbar code, what I care about is how to insert the style in CEF.

Thanks.

[cagret]

I have the same problem as shenhui, can't set user stylesheet for web pages.

Code: Select all

browserDefaults.user_style_sheet_enabled = true;
CefString(&browserDefaults.user_style_sheet_location).FromASCII("file://D:/.../proto3/shared.css");
browserDefaults.universal_access_from_file_urls_allowed = true;
browserDefaults.file_access_from_file_urls_allowed = true;


I even set "universal_access_from_file_urls_allowed" and "file_access_from_file_urls_allowed" but it doesn't help.
Setting the path to "D:/.../proto3/shared.css" (no file://) also doesn't help.
The file exists - 100% tested.
The styles in CSS also work - 100% tested.