Twentyone Template

[indieben]

Hi Folks, 

Unfortunately, it would not appear that WHMCS has published a list of CSS targets for the twentyone template, or possibly any others. It would seem that they strongly want to encourage folks to buy templates from the marketplace instead because, when you raise a ticket, they won't help nor point you to any meaningful guidance or build in colour changes for key areas within the WHMCS settings GUI. To me, they should be publishing this kind of information for everybody's benefit. Not all of us, particularly as startups, can afford custom templates or website designers and it also doesn't seem that WHMCS makes their code particularly user friendly - perhaps this sort of thing is released when you start selling on the Marketplace.

I would like to think WHMCS would make it easier for people to change the colour schemes - for example, to build in the ability to change them through the backend GUI or, at least, to release some detailed information because branding and, also within that, colour are key areas of any business. 

I've just spent a fair few hours in Firefox's Inspector trying to find the correct targets and trying everything to get my changes in - to no avail. I saw another post that suggested that the template cache should be cleared, but, with trial and error, it should be possible to turn the caching off altogether otherwise this is meaningless as you can't possibly manually do this every time that you make a small change. Naturally, I also cleared the browser cache. 

Notwithstanding this, I was hoping somebody knowledgeable in the ways of WHMCS re templating might be able to point me in the right direction here. I realise already that I can create a custom.css file and pop this in the theme template and, in theory, it should override the main template. What I was seeing was that the css for twentyone was actually overriding the custom.css and using !important made absolutely not a jot of difference. I suspect my targetting was not specific enough. 

 

A few questions please regarding branding background colours/fonts:

..not logged in to client area..

The breadcrumb blueish stipe - i'm trying to target the background and text color and the font style.
Around the "browse our products/services" i'm trying to target the background and text color and the font style.
Footer background - i'm trying to target the background and text color and the font style.
..logged into client area..

The logged in bar - i'm trying to target background color, font color and font style
The breadcrumb blueish stipe - i'm trying to target the background and text color and the font style.
The outer body - i'm trying to target the background
I'm also trying to target the font-style across the whole of the logged in area too.
Green button color and font style
Orange button color and font style
Footer background - i'm trying to target the background and text color and the font style.
 

My current feeling is that it would be better not to use WHMCS and to use an alternative billing software, outsourced staff are cheaper once it gets too much for me to manually provision accounts than to have a client portal that does not match the rest of our website and they can be hired for as little as an hour to essentially do data entry and i'll store the rest in SuiteCRM converting potential customers into sales. 

Thanks and Kind Regards,

indieben. 

 

 

 

[Sjen87]

If your custom CSS file has anything like the example below, make sure you haven't typed it anywhere in between the  * * *  * even though that's what it instructs you to do. Whoever wrote that must have been half asleep, it's misleading and causes so many people trouble. As for the changes you want to make, I think changing the following may help.

/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */
/* ***************************************************** 

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    list-style: none;
    background-color: rgb(233, 236, 239);
    border-radius: 0.25rem;
}

.master-breadcrumb {
    background-color: rgb(233, 236, 239);
}


footer.footer {
    font-family: xxxxxxx;
    margin: 0px;
    padding: 50px 0px 80px;
    background-color: #xxxxxx;
    color: #xxxxxxx;
    font-size: 0.9rem;
}

as for the font for the entire theme, you need to change the font in the includes/head,

<!-- Styling -->
<link href="https://fonts.googleapis.com/css?family=XXXXXXXX:100,300,400,500,700,900&subset=latin-ext" rel="stylesheet">

and then replace the font name in the CSS file.

[indieben]

Thanks ever so much for this. I'm absolutely shattered, setting up the business has took it out of me so I'll try and look into this tomorrow. Please would you be kind enough to look out for replies, maybe by following this?

This will also likely be a great deal of help to other WHMCS customers too. 

Thanks again and Kind Regards 🙂

[Ioannis Chatzinikolakis]

Hello,

I tried this CSS for the footer:

footer.footer {
    font-family: xxxxxxx;
    margin: 0px;
    padding: 50px 0px 80px;
    background-color: #xxxxxx;
    color: #xxxxxxx;
    font-size: 0.9rem;
}

But it's not working in all the screen sizes. It's working only for the mobiles, but is not working for large screens, and tablets.

What can we do about it?

[indieben]

Its worse than that for me: 

On Google chrome for Linux- latest version

On Mozilla Firefox - latest version for Linux

Linux Mint - latest version

WHMCS last and current version affected 

WHMCS Staffers have logged in and looked at it - 

 

In changing CSS for child template:

- Persisting for me and also showing to me (but not others) on main template.  

- hard reset and clear cache and clearing WHMCS template does not fix the problem. 

At a loss but seriously considering going over to an alternative to WHMCS as they don't offer template support and, to me, for the price, they should at least publish guides of how to call various elements of the CSS. 

 

[bear]

On 1/28/2022 at 12:13 AM, Sjen87 said:

If your custom CSS file has anything like the example below, make sure you haven't typed it anywhere in between the  * * *  * even though that's what it instructs you to do. Whoever wrote that must have been half asleep, it's misleading and causes so many people trouble. As for the changes you want to make, I think changing the following may help.

/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */
/* ***************************************************** 

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    list-style: none;
    background-color: rgb(233, 236, 239);
    border-radius: 0.25rem;
}

.master-breadcrumb {
    background-color: rgb(233, 236, 239);
}


footer.footer {
    font-family: xxxxxxx;
    margin: 0px;
    padding: 50px 0px 80px;
    background-color: #xxxxxx;
    color: #xxxxxxx;
    font-size: 0.9rem;
}

 

Actually, it won't. The first /*  */ comment pair is closed, but then it's reopened just before the parts you added (/* ***************************************************** ). Anything following that line up to and including a */ will be ignored. 😉

[Ioannis Chatzinikolakis]

The problem for my site is just for the footer. 

I used the CSS:

/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */
header.header {
    background-color: #000338;
}

for the header and it's working in all the devices, and all the screen sizes. No problem for customizing the header.

I'm using the CSS:

footer.footer {
    background-color: #000338;
}

and it's working only in mobiles. The large screens and the tablets are not responding at the changes. The footer background color still remain the same boring grey. 

Is't something to do with something else like theme.min.css ?

Mobiles display the footer with the updated color and the laptops with the original grey color. Why? 

 

[Ioannis Chatzinikolakis]

The same problem is also with the languages  pop-up  on the footer.

I used 

.modal-localisation .modal-content {
    background-color: #000338;
}

And with mobiles works fine, but not in other devices. 

Have a look at the attached pictures. What is wrong?

[bear]

On 2/13/2022 at 4:41 PM, Ioannis Chatzinikolakis said:

The footer background color still remain the same boring grey. 

You're missing a closing } in the media query just above it. 

@media (max-width: 767px) {
    .navbar-nav .open .dropdown-menu > li > a {
        color: #fff;
}
    .navbar-nav .open .dropdown-menu > li > a:hover {
        color: #fff;
}
<<<< Missing 
footer.footer {
    background-color: #000338;
}

 

Edited March 1, 2022 by bear

[Ioannis Chatzinikolakis]

Hi bear,

Yes,  I did forget the closing 

}

Now it works!!!!

Thanks a lot for the help.