[CORE-5234] Update client theme FIVE to make some minor CSS improvements - Blesta

Details

Type: Improvement
Status: Closed
Priority: Major
Resolution: Fixed
Affects Version/s: 5.11.0-b1
Fix Version/s: 5.11.0-b1
Component/s: Client Interface
Labels:
None

Description

In 5.11 we added ~~CORE-5095~~ which allows custom CSS overrides be added to staff and client themes.

Update the existing client theme FIVE to include the following custom CSS. It should look like the attached screenshot once implemented.

Note that the official FIVE theme is not editable, and it will remain so, users can export the theme and re-import it as a new theme if they want to make changes, as in the past.

body {
    background-color: #f0f0f0;
}
body[class^="plugin-order"],
body[class^="plugin-support_managerclient-knowledgebase"] {
    background-color: #ffffff;
}
body.plugin-orderclient-orders-index {
    background-color: #f0f0f0;
}
body.client-client_login-index {
    background-color: #ffffff;
}
.nav-content .navbar {
    font-size: 1rem;
}
.nav-content .container, .nav-content .container-md {
    padding: 10px 5px;
}
.top-nav .dropdown a.dropdown-toggle, .top-nav .dropdown a.dropdown-toggle:focus {
    color: #8c8c8c !important;
}
.top-nav .dropdown a.dropdown-toggle:hover {
    color: #2e3338 !important;
}
.title {
    height: 60px;
}
.title h3 {
    line-height: 60px;
}
.cards .card {
    border-bottom: .4em solid #2e33388a;
}
.card-blesta>.card-header, .panel .card-blesta>.panel-heading {
    padding: 14px 15px;
    font-size: 1rem;
}
.cards .card .card-content {
    width: 100%;
    padding: 10px;
}
.alert {
    padding: 1.25rem;
}
.footer {
    min-height: 90px;
}

Options
- Sort By Name
- Sort By Date
- Ascending
- Descending
- Download All

Attachments

screenshot-1.png

223 kB

05/Aug/24 3:59 PM

Issue Links

is blocked by

CORE-5235 Add class to body tag related to the current url

Closed

Activity

Ascending order - Click to sort in descending order

Paul Phillips created issue - 05/Aug/24 3:58 PM

Paul Phillips made changes - 05/Aug/24 3:58 PM

Field	Original Value	New Value
Description	In 5.11 we added ~~CORE-5095~~ which allows custom CSS overrides be added to staff and client themes. Update the existing client theme FIVE to include the following custom CSS. {code:css} body { background-color: #f0f0f0; } .nav-content .navbar { font-size: 1rem; } .nav-content .container, .nav-content .container-md { padding: 10px 5px; } .top-nav .dropdown a.dropdown-toggle, .top-nav .dropdown a.dropdown-toggle:focus { color: #8c8c8c !important; } .top-nav .dropdown a.dropdown-toggle:hover { color: #2e3338 !important; } .title { height: 60px; } .title h3 { line-height: 60px; } .cards .card { border-bottom: .4em solid #2e33388a; } .card-blesta>.card-header, .panel .card-blesta>.panel-heading { padding: 14px 15px; font-size: 1rem; } .cards .card .card-content { width: 100%; padding: 10px; } .alert { padding: 1.25rem; } .footer { min-height: 90px; } {code}	In 5.11 we added ~~CORE-5095~~ which allows custom CSS overrides be added to staff and client themes. Update the existing client theme FIVE to include the following custom CSS. {code:html} body { background-color: #f0f0f0; } .nav-content .navbar { font-size: 1rem; } .nav-content .container, .nav-content .container-md { padding: 10px 5px; } .top-nav .dropdown a.dropdown-toggle, .top-nav .dropdown a.dropdown-toggle:focus { color: #8c8c8c !important; } .top-nav .dropdown a.dropdown-toggle:hover { color: #2e3338 !important; } .title { height: 60px; } .title h3 { line-height: 60px; } .cards .card { border-bottom: .4em solid #2e33388a; } .card-blesta>.card-header, .panel .card-blesta>.panel-heading { padding: 14px 15px; font-size: 1rem; } .cards .card .card-content { width: 100%; padding: 10px; } .alert { padding: 1.25rem; } .footer { min-height: 90px; } {code}

Paul Phillips made changes - 05/Aug/24 3:59 PM

Attachment

screenshot-1.png [ 13001 ]

Paul Phillips made changes - 05/Aug/24 4:00 PM

Description

In 5.11 we added ~~CORE-5095~~ which allows custom CSS overrides be added to staff and client themes.

Update the existing client theme FIVE to include the following custom CSS.

{code:html}
body {
    background-color: #f0f0f0;
}
.nav-content .navbar {
    font-size: 1rem;
}
.nav-content .container, .nav-content .container-md {
    padding: 10px 5px;
}
.top-nav .dropdown a.dropdown-toggle, .top-nav .dropdown a.dropdown-toggle:focus {
    color: #8c8c8c !important;
}
.top-nav .dropdown a.dropdown-toggle:hover {
    color: #2e3338 !important;
}
.title {
    height: 60px;
}
.title h3 {
    line-height: 60px;
}
.cards .card {
    border-bottom: .4em solid #2e33388a;
}
.card-blesta>.card-header, .panel .card-blesta>.panel-heading {
    padding: 14px 15px;
    font-size: 1rem;
}
.cards .card .card-content {
    width: 100%;
    padding: 10px;
}
.alert {
    padding: 1.25rem;
}
.footer {
    min-height: 90px;
}
{code}

In 5.11 we added ~~CORE-5095~~ which allows custom CSS overrides be added to staff and client themes.

Update the existing client theme FIVE to include the following custom CSS. It should look like the attached screenshot once implemented.

Note that the official FIVE theme is not editable, and it will remain so, users can export the theme and re-import it as a new theme if they want to make changes, as in the past.

{code:html}
body {
    background-color: #f0f0f0;
}
.nav-content .navbar {
    font-size: 1rem;
}
.nav-content .container, .nav-content .container-md {
    padding: 10px 5px;
}
.top-nav .dropdown a.dropdown-toggle, .top-nav .dropdown a.dropdown-toggle:focus {
    color: #8c8c8c !important;
}
.top-nav .dropdown a.dropdown-toggle:hover {
    color: #2e3338 !important;
}
.title {
    height: 60px;
}
.title h3 {
    line-height: 60px;
}
.cards .card {
    border-bottom: .4em solid #2e33388a;
}
.card-blesta>.card-header, .panel .card-blesta>.panel-heading {
    padding: 14px 15px;
    font-size: 1rem;
}
.cards .card .card-content {
    width: 100%;
    padding: 10px;
}
.alert {
    padding: 1.25rem;
}
.footer {
    min-height: 90px;
}
{code}

Paul Phillips made changes - 05/Aug/24 4:03 PM

Rank

Ranked higher

Hide

Permalink

Paul Phillips added a comment - 06/Aug/24 11:28 PM

Note: A few known issues:

Login page background is gray with the attached CSS changes. There's no class assigned to the body so we can't set it to white there specifically. Need to add a class to the body tag on the login page?
Order pages have a similar issue.

How can we make order pages and login page white while still overriding t he background on the login pages?

Show

Paul Phillips added a comment - 06/Aug/24 11:28 PM Note: A few known issues: Login page background is gray with the attached CSS changes. There's no class assigned to the body so we can't set it to white there specifically. Need to add a class to the body tag on the login page? Order pages have a similar issue. How can we make order pages and login page white while still overriding t he background on the login pages?

Jonathan Reissmueller made changes - 07/Aug/24 3:48 PM

Link

This issue relates to ~~CORE-5235~~ [ ~~CORE-5235~~ ]

Jonathan Reissmueller made changes - 07/Aug/24 3:52 PM

Link

This issue is blocked by ~~CORE-5235~~ [ ~~CORE-5235~~ ]

Jonathan Reissmueller made changes - 07/Aug/24 3:52 PM

Link

This issue relates to ~~CORE-5235~~ [ ~~CORE-5235~~ ]

Paul Phillips made changes - 12/Aug/24 8:15 PM

Description

In 5.11 we added ~~CORE-5095~~ which allows custom CSS overrides be added to staff and client themes.

Update the existing client theme FIVE to include the following custom CSS. It should look like the attached screenshot once implemented.

Note that the official FIVE theme is not editable, and it will remain so, users can export the theme and re-import it as a new theme if they want to make changes, as in the past.

{code:html}
body {
    background-color: #f0f0f0;
}
body[class^="plugin-order"],
body[class^="plugin-support_managerclient-knowledgebase"] {
    background-color: #ffffff;
}
body.plugin-orderclient-orders-index {
    background-color: #f0f0f0;
}
.nav-content .navbar {
    font-size: 1rem;
}
.nav-content .container, .nav-content .container-md {
    padding: 10px 5px;
}
.top-nav .dropdown a.dropdown-toggle, .top-nav .dropdown a.dropdown-toggle:focus {
    color: #8c8c8c !important;
}
.top-nav .dropdown a.dropdown-toggle:hover {
    color: #2e3338 !important;
}
.title {
    height: 60px;
}
.title h3 {
    line-height: 60px;
}
.cards .card {
    border-bottom: .4em solid #2e33388a;
}
.card-blesta>.card-header, .panel .card-blesta>.panel-heading {
    padding: 14px 15px;
    font-size: 1rem;
}
.cards .card .card-content {
    width: 100%;
    padding: 10px;
}
.alert {
    padding: 1.25rem;
}
.footer {
    min-height: 90px;
}
{code}

Paul Phillips made changes - 11/Sep/24 4:56 PM

Description

In 5.11 we added ~~CORE-5095~~ which allows custom CSS overrides be added to staff and client themes.

Update the existing client theme FIVE to include the following custom CSS. It should look like the attached screenshot once implemented.

Note that the official FIVE theme is not editable, and it will remain so, users can export the theme and re-import it as a new theme if they want to make changes, as in the past.

{code:html}
body {
    background-color: #f0f0f0;
}
body[class^="plugin-order"],
body[class^="plugin-support_managerclient-knowledgebase"] {
    background-color: #ffffff;
}
body.plugin-orderclient-orders-index {
    background-color: #f0f0f0;
}
.nav-content .navbar {
    font-size: 1rem;
}
.nav-content .container, .nav-content .container-md {
    padding: 10px 5px;
}
.top-nav .dropdown a.dropdown-toggle, .top-nav .dropdown a.dropdown-toggle:focus {
    color: #8c8c8c !important;
}
.top-nav .dropdown a.dropdown-toggle:hover {
    color: #2e3338 !important;
}
.title {
    height: 60px;
}
.title h3 {
    line-height: 60px;
}
.cards .card {
    border-bottom: .4em solid #2e33388a;
}
.card-blesta>.card-header, .panel .card-blesta>.panel-heading {
    padding: 14px 15px;
    font-size: 1rem;
}
.cards .card .card-content {
    width: 100%;
    padding: 10px;
}
.alert {
    padding: 1.25rem;
}
.footer {
    min-height: 90px;
}
{code}

In 5.11 we added ~~CORE-5095~~ which allows custom CSS overrides be added to staff and client themes.

Update the existing client theme FIVE to include the following custom CSS. It should look like the attached screenshot once implemented.

Note that the official FIVE theme is not editable, and it will remain so, users can export the theme and re-import it as a new theme if they want to make changes, as in the past.

{code:html}
body {
    background-color: #f0f0f0;
}
body[class^="plugin-order"],
body[class^="plugin-support_managerclient-knowledgebase"] {
    background-color: #ffffff;
}
body.plugin-orderclient-orders-index {
    background-color: #f0f0f0;
}
body.client-client_login-index {
    background-color: #ffffff;
}
.nav-content .navbar {
    font-size: 1rem;
}
.nav-content .container, .nav-content .container-md {
    padding: 10px 5px;
}
.top-nav .dropdown a.dropdown-toggle, .top-nav .dropdown a.dropdown-toggle:focus {
    color: #8c8c8c !important;
}
.top-nav .dropdown a.dropdown-toggle:hover {
    color: #2e3338 !important;
}
.title {
    height: 60px;
}
.title h3 {
    line-height: 60px;
}
.cards .card {
    border-bottom: .4em solid #2e33388a;
}
.card-blesta>.card-header, .panel .card-blesta>.panel-heading {
    padding: 14px 15px;
    font-size: 1rem;
}
.cards .card .card-content {
    width: 100%;
    padding: 10px;
}
.alert {
    padding: 1.25rem;
}
.footer {
    min-height: 90px;
}
{code}

Jonathan Reissmueller made changes - 17/Sep/24 3:49 PM

Sprint

5.11.0 Sprint 5 [ 204 ]

Jonathan Reissmueller made changes - 17/Sep/24 3:49 PM

Rank

Ranked lower

Abdy Franco made changes - 02/Oct/24 10:40 PM

Remaining Estimate		0 minutes [ 0 ]
Time Spent		2 hours, 18 minutes [ 8280 ]
Worklog Id	17405 [ 17405 ]

Abdy Franco made changes - 02/Oct/24 10:40 PM

Status	Open [ 1 ]	In Review [ 5 ]
Resolution		Fixed [ 1 ]

Jonathan Reissmueller made changes - Yesterday 3:49 PM

Status

In Review [ 5 ]

Closed [ 6 ]

People

Assignee:

Abdy Franco

Reporter:

Paul Phillips

Votes:

0 Vote for this issue

Watchers:

1 Start watching this issue

Dates

Created:

05/Aug/24 3:58 PM

Updated:

Yesterday 3:49 PM

Resolved:

02/Oct/24 10:40 PM

Time Tracking

Estimated:

Not Specified

Remaining:

Logged:

2h 18m

Agile

Active Sprint:

5.11.0 Sprint 5 ends 07/Nov/24
View on Board