Page 1 of 1
Action button
Posted: Tue Jul 18, 2017 4:35 pm
by tobbe
Hi
I was wondering if it would be possible to change the way the action buttons look.
Would it be possible to have the label on top of the image instead of under, like it is now?
Currently, if I want text on top of the label, I would have to create two images for each button with the text I want, instead of creating two images, and the just adding the text in the configuration.
As you can imagine, that would be quite the nightmare to do and upkeep.
It would be nice to be able to change to font size and colour of the text as well.
Regards,
Tobbe
Re: Action button
Posted: Tue Jul 18, 2017 10:05 pm
by stefangsbb
Well, here we are entering the area of personal taste and preferences...
I don't want to change the text position just for this element, and making it configurable would kind of open Pandoras box - BUT I can do something better (I think). I now added the possibility to add a custom .css-file to each Plan-Item, so you can style anything on the page anyway you like!
You upload your custom .css-file like a media-file in settings, and then you can go the the Plan-Item (called "CreatedPlan" among "Infrastructure"-Items), and select it as CustomCSS (new attribute I added).
If you for example want the text above the action buttons and in big red letters, the custom css could look like this:
Code: Select all
.actionbutton ul {
display: flex;
flex-direction: column;
}
.actionbutton ul li:first-child {
order: 3;
}
.actionbutton ul li:nth-child(2) {
order: 2;
font-family: "Times New Roman", Times, serif;
font-size: 20px;
color: red;
}
The changes are in a nightly build near you
Re: Action button
Posted: Wed Jul 19, 2017 1:05 pm
by stefangsbb
The custom css opened up more possibilities than I thought of from the beginning! I added identities of all the Items on the plan page, and that makes it possible to change the icons for individual Items via the custom css. If for example a switch is connected to a toaster, it looks silly with a lamp Icon. Now you can upload a toaster icon to the media library and restyle that individual item with the new toaster icon. You have to know the Id of the Item, so I added the ID on the edit item page, so you can find it there.
As an example, if the toaster switch has id 56, the css to change the icons for it would be:
Code: Select all
#ID56 li.icon.lamp_off {
background: url(toaster_off.png) no-repeat center;
}
#ID56 li.icon.lamp_on {
background: url(toaster_on.png) no-repeat center;
}
I also made the css-configuration available from the edit mode of the plan page, so you just have to click the "Edit this page"-link and select the css-file in the drop down menu at the top. The changes are in the nightly build
Re: Action button
Posted: Wed Jul 19, 2017 1:49 pm
by tobbe
Excellent work as usual!
I think this will be very helpful and let me customize my display just the way I want to.
Thank you for taking time out of your day to keep making OpenNetHome the best out there!
Tobbe