insert custom css file

in my custom template I want to inclue a custom css file, like newtheme.css , so i can generally chage the css and i know exactly where i have made chages ect. However in the old dolphin i would stick a link to that css in some header php some where if i remember correctly, but i cannot find a place to anchor my css file in the new platform thats inside my template. How have you guys been doing this? I can chage the css in the current css files, but I want to make my own. How would I go about doing this?

  • View
    1741
  • More
Replies (13)

    • Hello Little Pockets 

      Now you may insert the whole content of your CSS file into Studio->Your template->Styles->Custom Styles area. It is the easiest way.

      • i can't find a way to do this. I can't find styles or custom styles

        • I am not using the portean template, I am using a variation of the ocean template and there is no styles in this template. I tried to duplicate the portean template and alter the css to make my own styles and generally learn how things are done. but unfortunatley all the new template I created kept doing was  'duplicated error'. So i chose the ocean template that i could duplicate and create new templates/modules from. So that the orignal template would be untouched and the only thing i could break is my own template. That is why I need a way to insert my own CSS file so the template I am making is stand alone and does not mess up the orignal templates.

          • btw why is there no automatic spell checker on this chat system, all modern chat systems have spell checkers, i have to keep going back and editing my post, or stick it into a google document to check the spelling when i can be bothered.

            • You may find here how to operate with Protean (or other non-Ocean templates) Styles https://github.com/unaio/una/wiki/Protean . The keyword is "mix".

              If you need to have the to work with Ocean then you may add the necessary "global" CSS file via Studio->Designer->Injections area, "Head injection". Or add the content of your CSS file to the one file of this template in modules/boonex/ocean/data/template/system/css/general.css.

              • Please specify which one did you mean?

                • ok i don't want to just change the portain template, the object is to create a new template. the ocean template gives me the oppertunity to make a new template that stands alone, because I can copy the entire ocean template, chage the details and make an entrely new template which i can install and alter the css to make it individual to whatever i want, and i can make a few this way. The portain template seems to be make so its more difficult to do this, it just gives errors that is why i scrapped the idea of modifying portain. 

                  so i have created my ocean copy, named it something else. i can easily change the css as you say by altering the current css in general/common.css i know this. But i would like to be able to include a different css file, where i know where all my changes are. but i can't find a way to, normally i would find a header.php or something like that and ancor the css file there, so the question being, there must be a way you guys have linked your css files so your template can see them an apply the css, where would this be? in the ocean template,


                  • image_transcoder.php?o=bx_froala_image&h=4009&dpx=1&t=1600205714image_transcoder.php?o=bx_froala_image&h=4010&dpx=1&t=1600205729see i alreay have my new template installed and have been chaging things, but i would like to know how to anchor a new css file, so all my changes are together. My brain functions better if i know where all my changes are. plus it stops me breaking the orginal template.

                    • its ok i anchored it into    _header_js_custom.html and its now being picked up by the template. I would love to know how all the other css files are anchored tho, I have routed through the files from top to bottom and can't find it.

                      • In the code the additional CSS can be added via the following construction:

                        $this->_oModule->_oTemplate->addCss(array(

                                    BX_DIRECTORY_PATH_PLUGINS_PUBLIC . 'photo-swipe/|photoswipe.css',

                                    BX_DIRECTORY_PATH_PLUGINS_PUBLIC . 'photo-swipe/default-skin/|default-skin.css',

                                ));

                        • where would you put this code?

                          • Usually, it is added to own _addJsCss method of the module. And this method is called in the getCode method which "draws" the final content of the page. See for example template/scripts/BxBasePage class.

                            • Spell checker in chat can be frustrating because for mobile phones there's already an auto correct. If you're on UNA using a PC you can just use a regular spell check program 

                              Login or Join to comment.