Unable to use stylesheet (Witty 4.0.4.)

Added by Manuel Bonaparte over 5 years ago

Hi, I'm new to Wt development.

Trying to use custom CSS with no success.

Here is a piece of my basic code:

    auto app = std::make_unique<Wt::WApplication>(env);
    auto root = app->root();
    auto appRoot = app->appRoot();

    app->setTitle("My app title");

    app->messageResourceBundle().use(appRoot+"strings");
    app->messageResourceBundle().use(appRoot+"templates");
    app->useStyleSheet("./default.css");

    root->addWidget(std::make_unique<Wt::WText>("<h3>Header</h3>"));

My CSS file:

    h3 {
    font: italic normal 1.4em georgia, sans-serif;
    letter-spacing: 1px;
    margin-bottom: 0;
    color: #FF0000;
    }

All I get is a standard h3 font title . No CSS properties applied.

Server seems to load CSS resources:

  127.0.0.1 - - [2018-Aug-12 23:50:45.701] "GET /resources/moz-transitions.css HTTP/1.1" 200 2294
  127.0.0.1 - - [2018-Aug-12 23:50:45.701] "GET /resources/themes/default/wt.css HTTP/1.1" 200 2298
  127.0.0.1 - - [2018-Aug-12 23:50:45.701] "GET /default.css HTTP/1.1" 200 2276

I will appreciate any working example with custom CSS.

Regards

Manuel

Replies (5)

RE: Unable to use stylesheet (Witty 4.0.4.) - Added by lm at over 5 years ago

I remember having some difficulty getting started with this, too. Although "GET /default.css HTTP/1.1" 200 2276 looks promising, it's not enough. I just created a minimum example, and when I investigate the css retrieved, it is not the css of my project. In fact, if you visit http://localhost:9090/default.css you'll probably see your web app instead of default.css.

You need to make sure you're serving default.css properly. Move it to css/default.css (or some other subdirectory) then change your launching script to include --docroot .;/css.

If this doesn't work for you, let us know what command you're using to launch.

RE: Unable to use stylesheet (Witty 4.0.4.) - Added by Obelix Stone over 5 years ago

You must use text file for reading resources.

Create under debug or release text file with name of your project like this:

myApp.exe.ini

and inside this file put this:

appRoot=resources

and you must use this

app->useStyleSheet(appRoot() + "./default.css");

RE: Unable to use stylesheet (Witty 4.0.4.) - Added by Manuel Bonaparte over 5 years ago

Thanks for the point.

Right now I can use CSS file following your advice. For organizational purposes, I moved CSS file into app root /css folder.

Then I changed source code to:

    app->useStyleSheet("css/default.css");

I'm developing on Linux.

Start my Wt app as: ./myapp.wt ---docroot . ---http-address 0.0.0.0 ---http-port 9090

Now I can see CSS styles applied.

Another thing which catches my attention is Wt unsuccessfully tries to load additional CSS resources (wt.css, moz-transitions.css):

127.0.0.1 - - [2018-Aug-13 16:28:01.824] "GET /resources/themes/default/wt.css HTTP/1.1" 404 85
127.0.0.1 - - [2018-Aug-13 16:28:01.825] "GET /resources/moz-transitions.css HTTP/1.1" 404 85
127.0.0.1 - - [2018-Aug-13 16:28:01.826] "GET /css/default.css HTTP/1.1" 200 3801

I not sure about the consequences of such failure. My goal is to develop a bootstrap 3 styled app...

Thanks a lot.

RE: Unable to use stylesheet (Witty 4.0.4.) - Added by lm at over 5 years ago

I'm surprised you're able to get /css/default.css without modifying your docroot, but I'm happy to hear it's working!

I am also not sure what the ramifications of the failures you're seeing with /resources/* are. Certainly, default WT styling will not be applied, but if you're shooting for bootstrap, maybe you don't care. In order to get these things working, you'll need to copy the WT resources to your deploy path. I copy /usr/share/Wt/resources/ to ./resources in my deploy path, and my docroot is .;./css,./resources.

RE: Unable to use stylesheet (Witty 4.0.4.) - Added by Manuel Bonaparte over 5 years ago

Yes, it works fine starting Wt app form bash command line and also from my IDE (Clion).

At this moment I decided to make things simple keeping ---docroot . and placing all my resource files in the app folder.

(1-5/5)

Project

General

Profile

Wt