Yet Another Alternative Homepage Style

Got something cool to share with AppGini users? Feel free to post it here!
Post Reply
User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Yet Another Alternative Homepage Style

Post by jsetzer » 2018-09-30 18:57

You may already know my forum post here: https://forums.appgini.com/phpbb/viewto ... 8549#p8549 in which I have described an alternative "tile-styled" AppGini-homepage


Inspired by the UI of my new backup NAS I've once again modified the default AppGini homepage to something more "desktop like".

This time i've changed this...
default AppGini homepage + background-image

homepage-default-1024x991.jpg
homepage-default-1024x991.jpg (82.41 KiB) Viewed 4156 times


...into that ...
(some labels have been blurred out for privacy reasons)

homepage-desktopstyle-1024x991.jpg
homepage-desktopstyle-1024x991.jpg (71.54 KiB) Viewed 4156 times

  1. Finding the links has been described in the other post: https://forums.appgini.com/phpbb/viewto ... 8549#p8665
  2. First of all, there is a <div class="row">...</div>
  3. Inside that .row there is a column <div class="col-xs-12 col-sm-4 col-md-2">...</div> for every table group
  4. Inside the columns there is a panel-default with the name of the table group as panel-heading
  5. Then there is a panel-body for every (visible) table with image, text and (right-aligned) badge showing the number of records
On :hover there is a semi-transparent background-color and the cursor changes:
homepage-desktopstyle-hover.gif
homepage-desktopstyle-hover.gif (39.29 KiB) Viewed 4156 times


Once again no overwritable files have been touched. Everything you see has been done using JQuery and some CSS.


This is the html code for one item:

Code: Select all

<div class="desktop-tile panel-body text-center" onclick="window.open('tasks_view.php', '_self', '');">
    <span class="pull-right" style="position: absolute; right: 0px; margin-right: 15px;">
        <span class="badge hspacer-lg text-bold">0</span>
    </span>
    <p>
        <img src="resources/table_icons/IMAGEFILENAMEHERE.png">
    </p>
    <!-- todo: put element's style in external css file -->
    <p style="text-shadow: rgb(238, 238, 238) -1px -1px 0px, rgb(238, 238, 238) 1px -1px 0px, rgb(238, 238, 238) -1px 1px 0px, rgb(238, 238, 238) 1px 1px 0px; color: gray;">
        Aufgaben
    </p>
</div>

and the css for the :hover effect looks like this:

Code: Select all

<style>
    .desktop-tile {
        border-radius: 2px;
        cursor: pointer;
    }
    .desktop-tile:hover {
        background-color: rgba(173,216,230,0.3);
    }
</style>
I hope you like it and it gives you an idea of how to start building your own customized AppGini homepage.

Kind Regards,
Jan
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

User avatar
ronwill
Veteran Member
Posts: 228
Joined: 2015-08-08 10:12
Location: Cheltenham UK +Weatherford USA

Re: Yet Another Alternative Homepage Style

Post by ronwill » 2018-10-10 08:24

Thanks for sharing, very helpful.
Ron
Ron - Gloucestershire, UK: AppGini Pro V 23.15 Rev 1484 - LOVING IT!
Plugins: Mass Update + Search Page Maker + Summary Reports + Calendar + Messages
Bizzworxx: AppGiniHelper + Inline Detail View
Alejandro Landini: To-Do List + MPI + TV Field Editor
Other: Udemy Course

federico
Veteran Member
Posts: 74
Joined: 2020-10-29 14:52

Re: Yet Another Alternative Homepage Style

Post by federico » 2021-03-14 21:01

Hi Jan
really nice job. Is it still in beta version? Just searched on your website.

Post Reply