How to change the CSS for specific buttons (one page only)?

1
We like to change the look and feel of our program, starting with the homepage. This is for now a few static images with links (click on event) beneath every individual image. The links are only there because of their functionality, because the click on event can't be set to the images themselves (and that's what we want). We thought to have a work around for this purpose. The links were made button style, and now you can throw in an image + having a click on event behind it. Only now we have the problem of styling these "buttons", because when changing the css in our template, this is done for all buttons throughout the whole project. The homepage buttons should stand on their own. Can this be done and when yes, how can this be done? When there is a different solution for my problem, please react too. Ps. where can I find how this class option really works, being one of the properties of a button?
asked
3 answers
5

The class option is simply the html class that is assigned to the node in the DOM.

These can then be used with css to specify their styling.

If you set the class 'btn_img_only' on your buttons, you can style them like this:

.btn_img_only {
    display: block;
    color : blue;
}

If you are using some sort of templating, you can put a class on the cell that contains the specific implementation of the template and use CSS selectors to style the buttons differently.

.my_template .btn_img_only {
    display: block;
    color : blue;
}
answered
1

You can use the "class" property in order to give only that specific dataview a different css class. That way you could style a special selection of buttons only for a specific table or dataview. When you've set you own class, you can use this example to style a button in your dataview:

.yourcssclass .tundra .mendix_Button_button {
border:2px solid green; (just an example)
}
answered
0

Thank you both for the quick reactions, however I do not seem to get any result. For now, I made a simple set up to experiment with this and nothing happens.

I have one table, giving it the class: homepage

Then, in my custom.css of the template (default) I set this:

.homepage .tundra .mendixButtonbutton { border:10px solid green; color: blue; }

This is somewhat the simplest option there this, and it gives me no result whatsoever. I am doing something wrong...

answered