Nm my question... have used bowser (v1.x) before... wasn't getting any result with v2.x - but tried a bit more...
For any one wanting browser detection and be able to add some classes to body to add some conditional css... wha I did...
In gantry just made a JS snipped for src and a js snippet for the actual use:
The src = https://cdn.jsdelivr.net/npm/bowser@2.11.0/es5.js
The usage is:
window.addEventListener("load", function() {
// PARSE USER AGENT
var result = bowser.getParser(navigator.userAgent).getResult();
// BROWSER INFO
console.log(result.browser.name);
console.log(result.browser.version);
console.log(result.engine);
// BROWSER ADD TO BODY
jQuery('body').addClass(result.browser.name);
// OPERATING SYSTEM
console.log(result.os.name);
jQuery('body').addClass(result.os.name);
console.log(result.os.version);
console.log(result.os.versionName);
// PLATFORM
console.log(result.platform.type);
jQuery('body').addClass(result.platform.type);
});
of-course you can remove the console.log items, but was helpful in seeing what it'll show
@HarisAKabara_twitter
Something other than the snippet I sent across yesterday must have changed on the site.
Ok, you have a class of 'Sticky' in your #g-navigation block tag, but there is no CSS linked to it! Yesterday the navbar was sticky and adding the flex statements wouldn't have changed this.
I see you're using Joomlead JL Brighton as a base design, are you also using the Joomlead UIKIT3 Atom in your Layouts?
If so, open your Base Outline, remove the 'Sticky' class, leave the 'center' class in place. Then, Open the Navigation Block section settings (the cog icon on the Section - not the Particle/Menu Block) and add this as a Tag Attribute 'key'
jl-sticky
This will use the UIKIT3 version of the sticky navbar
If, you're using the standard UIKIT Atom and jl-sticky does not work, then try this value in the same field instead:
uk-sticky
I've mentioned this before but I notice you are using CK PageBuilder, and RS Pagebuilder as well as Gantry5 and the extensions brought in by Joomlead Brighton template. This does make for a crowded and hybrid environment. You may have specific requirements of each component, but the amount of libraries being loaded in does make it difficult to recommend and apply a known Gantry5 solution. So, a known 'fix' in a G5 only template may not apply to your current site build.
In my experience, it is best to build the page layouts from the top down. Get the basic site layout header and navigation working as you want and then add in the content and side modules. Add in and turn on each extension as required one by one and see how it affects the base design.
A lot of the effects you are trying to achieve can be done within Gantry5 and it's sibling UIKIT. It took me years to realise that I had to learn javascript properly (and this is an ongoing process). HTML, CSS and Javascript is what every site projects onto the browser. Learn these 3 and it will help enormously :)
For example you may wish to style the Joomla module and not the Section or the particle, or you may wish to apply several font sizes and colours within a Custom Module or style a Particle or Section class. Then, you start to see how general settings like font sizes could get 'messy' if they were added as style attributes. So anything that needs specificity is left as a preference to add manually, and you CSS will be more readable too.
@marvays a rem value makes sense, you can check the body font size in Chrome Inspector. Do you use Inspector or some equivalent developer browser extension?
Always, always, always add the new values to your custom.scss :) never be tempted to overwrite system css
If you use the browser dev tools then you can paste the selector and statement into your custom.scss file directly from the Inspector Pane
I am having difficulty in changing the tooltip background color in the Hydrogen template.
I added the following code to the custom.scss file:
/* change background color on JCE tooltip
.tooltip .tooltip-inner {
background-color: #800000 !important;
border-color: #800000 !important;
}
.tooltip .tooltip.top .tooltip-arrow {
border-top-color:#800000 !important;
}Yes, I recompile the temmplates and cleared the website cache! :)
It didn't change it.
So I created a templates/g5_hydrogen/custom/assets/css/ folder and copied the media/gantry5/assets/css/bootstrap-gantry.css into that folder. I directly changed the #000000 to #800000 in the tooltip styles but it didn't work.
Here is the website page link: https://bamadenver.com/game-schedule/2020-football
Any suggestions?
@marvays This is Chrome Inspector in use
I took a shot of the issue on he site by @LukeDouglas2
So, open your site in Chrome and press F12 for Chrome Inspector, is this familiar to you @marvays ?
Problem: I have a Joomla based G5 custom template site that reports a 403 error in the console when trying to access /templates/[template_name]/custom/css-compiled
I also tested and verified this using webpagetest.org
Observation: the folder in question is writable (0755 permission) and contains recent css files. BUT it does not contain any .MAP versions of the css. If I look at other sites I've built they all contain several .css.map versions
Does anyone know if the missing .map.css files are important (it looks like they are) and based on the above info can anyone suggest a fix?
