[paul2higgins]

Been working on this for a while and made oms changes and thought I'd share.

So, I wanted to choose which main tabs a user sees, so no I can add and edit a user and allow which tabs they get to use.

I also wanted to limit scrolling and see data in a quicker view, so I split the views into sub tabs....see screenshot.
This got me thinking, what if I wanted extra fields and more sub tabs? So, in admin, I can now add as many sub tabs and fields within them

I also wanted a tagging system where you click on the view and start typing, and match this tagging system to jobs- so you can tag a candidate and tag a company - and search and see both who have the same tags

More works in the pipeline, will keep you updated and get any feedback.

[RussH]

Looking good, Paul - we're always open to discussions on a more effective workflow etc.

[cptr13]

I want to know how did you get it to LOOK like that... The tabs...they're so shiny and square

[cptr13]

Paul.....mind sharing this code? I'd love to see it

[karthikjoe]

Hi.....Paul I think your OPENCATS looking like a new. If you Share your all source code it will be most helpful for most of them.

[dveos]

I have achieved similar to this if anyone is interested.

Please see screenshots below:-







If anyone is interested the files are attached! I haven't yet added this to contacts etc. but is in the pipeline.

Note: I have added in some extra functionality to the original install (i.e. emails)

Add this to main.css:-

Code: Select all

/* Style the tab */
.tabout {
    overflow: hidden;
    background-color: #FFFFFF;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}	

.tab {
    overflow: hidden;
    background-color: #acacac;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: #ddd;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 4px 8px;
    transition: 0.3s;
    font-size: 14px;
    margin-left: 4px;
    margin-right: 4px;
    margin-top: 4px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #f7f7f7;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #fff;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

/* Fade in tabs */
@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

Upload Show.tpl to modules/candidates/

[dveos]

Update: Here is contacts :

[dveos]

Companies :

[caines1989]

Been working on this for a while and made oms changes and thought I'd share.

So, I wanted to choose which main tabs a user sees, so no I can add and edit a user and allow which tabs they get to use.

I also wanted to limit scrolling and see data in a quicker view, so I split the views into sub tabs....see screenshot.
This got me thinking, what if I wanted extra fields and more sub tabs? So, in admin, I can now add as many sub tabs and fields within them

I also wanted a tagging system where you click on the view and start typing, and match this tagging system to jobs- so you can tag a candidate and tag a company - and search and see both who have the same tags

More works in the pipeline, will keep you updated and get any feedback.

hey Paul it looks super nice, do you have the files, so i can replicate this look also and give it a try please?

[caines1989]

I have achieved similar to this if anyone is interested.

Please see screenshots below:-







If anyone is interested the files are attached! I haven't yet added this to contacts etc. but is in the pipeline.

Note: I have added in some extra functionality to the original install (i.e. emails)

Add this to main.css:-

Code: Select all

/* Style the tab */
.tabout {
    overflow: hidden;
    background-color: #FFFFFF;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}	

.tab {
    overflow: hidden;
    background-color: #acacac;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: #ddd;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 4px 8px;
    transition: 0.3s;
    font-size: 14px;
    margin-left: 4px;
    margin-right: 4px;
    margin-top: 4px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #f7f7f7;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #fff;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

/* Fade in tabs */
@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

Upload Show.tpl to modules/candidates/ Show.zip

Hey dveos I gave this a try but i didn't get the blue border around the buttons , do you maybe know why or what I could do to change this?

I added your 3 show files in each module section, candidates, clients and company