I was looking at making some small changes to the Over Rides and a completely. new css "red" has taken over.
I'm struggling to find out how, where and what the process is for doing overrides and customizations on the JA techniques. My "LIGHT" Theme is now over written with a red theme?

I now have so many new files i have no idea what's going on!

Hi

Could you tell me a sample of the css rule that you override so I can check?

i finally managed to rewrite the css for the files and uploaded them and then went to the T3 Framework area

and pressed </> LESS to CSS

again...all my work is gone and back to red. ok, i'm thinking i saved most of my changes to this file...

templates/ja_aiga/local/css/themes/light/template.css

I am reading this page to try to resolve some of the errors I've been making!
https://www.t3-framework.org/documentation/customization.html

I was hoping that the Template Overrides would take care of this. Is there anything i need to know why the </> LESS to CSS over writes that file?

    AzimuthDesigns Hi

    You only need to click LESS to CSS button when you update LESS files.

    When you update LESS file for that 'light' theme and compile LESS, the equivalent css files will be overwritten: templates/ja_aiga/local/css/themes/light/template.css

    If you're familiar with CSS, you can simply add into 'custom.css' file - which will not be affected when you compile less or update new version of template.

      Thank you!
      I've bee targeting this file for my custom updates.

      .../templates/ja_aiga/css/custom.css

      Is that the correct file?

      I'm finding that the T3 Framework area doesn't seem to have the edited/custom/original interface it used to have.

        AzimuthDesigns I'm finding that the T3 Framework area doesn't seem to have the edited/custom/original interface it used to have.

        It's available in T4 based templates only.

        For T3, you can edit that custom.css file directly: /templates/ja_aiga/css/custom.css

          I have tried 3 of the different methods for embedding or calling a Google Font "Roboto" across different platforms to no luck.

          Currently the only platform that works is on a machine that has Roboto active, on mac and in the most recent Firefox. Not on any other devices.

          My edited file at the location:
          edit that custom.css file directly: /templates/ja_aiga/css/custom.css

          ...has failed to work as of yet. any suggestions?

            From the cheap seats in the sidelines, it sounds like you are styling in custom.css to use the Robato font if it is available on the machine, but you are not putting in the code from Google that loads a copy of the font into the web browser.
            The code that I suspect you have already in custom.css looks something like this:
            @font-face {
            font-family: 'Robato';
            font-style: ...

            What's missing is the URL to load a google font in one call that looks something like:

            <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900' rel='stylesheet' type='text/css'>

            Adjust it to load only the weights and styles you actually use to reduce loading time. This line goes in the HEAD before the CSS that calls for it.

            In the alternative, you can download the font files into your server and load them using local links (in case Google is offline). In that case code similar to this will load files downloaded into the same folder as the css that calls it:
            @font-face {
            font-family: 'Roboto';
            src: url('roboto.eot'); /* IE9 Compat Modes **/
            src: url('roboto.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 **/
            url('roboto.woff') format('woff'), /* Modern Browsers **/
            url('roboto.ttf') format('truetype'), /* Safari, Android, iOS **/
            url('roboto.svg#svgFontName') format('svg'); /* Legacy iOS **/
            }

            All code segments are just untested examples - look up on Google the actual syntax you need for your purposes.

            To your original issue - LESS is a great tool to simplify writing updates to CSS, but you have to realize that if LESS is being used by the template designer, anything you put in a css file WILL BE LOST as you experienced whenever someone clicks to compile LESS to CSS, including when downloading template updates. The only file that is safe in just about any template from any Joomla designer is their version of custom.css.

              AzimuthDesigns You can tell us which text / section that are not displaying with Roboto font family so we can take a look.

                8 days later

                duke3d

                What i think was the problem was i had a css conflict in my file where i was calling: "Roboto Thin" instead of just "Roboto".

                I think that was confusing google on 3 browsers (Chrome, Brave, Safari) but not Firefox. I primarily dev for Firefox.

                i saved the updated and will review what Dominic did to comment out the extra row i had in there. once i figure out what the full problem is i'll know exactly what the issue was.

                that's what i think was happening!

                Here is the link to the fixed css file/page

                https://www.joomlart.com/forums/d/46576-font-family-roboto-thin-not-embedded-in-the-template/6

                    Write a Reply...
                    You need to Login to view replies.