I am learning web development and I am trying to use the COREui 4.0.1 Bootstrap admin template in an existing Symfony 5.3 project instead of standard Bootstrap 5 components and utilities. I am trying to get the page to look like https://coreui.io/demo/free/3.4.0/.
The project was created using symfony new my_project_name --full. I added Bootstrap CSS with https://getbootstrap.com/docs/5.0/getting-started/introduction/#css and JS with https://getbootstrap.com/docs/5.0/getting-started/introduction/#bundle to my base.html.twig.
Steps that I took:
Create a new controller
Create an associated view using a twig template
Replaced the Bootstrap JS with https://coreui.io/docs/4.0/getting-started/introduction/#bundle and CSS with https://coreui.io/docs/4.0/getting-started/introduction/#css in my base.html.twig
What I was expecting:
When accessing the controller/view I would see https://coreui.io/demo/free/3.4.0/
The actual result:
Minor styling changes (from COREui rather than original Bootstrap) but no layout changes
The CoreUI CSS and JS that you have added to your project is to be used in the same way that you would use Bootstrap components and utilities i.e. adding to existing HTML elements.
Viewing the page source at the demo you provided at https://coreui.io/demo/free/3.4.0/ shows the HTML elements that you would need to have in your own project, that would then have CoreUI (in this case) CSS and JS components applied to them.
Using that demo https://coreui.io/demo/free/3.4.0/, if you wanted a side navigation bar you would need to have a HTML element like:
<div class="c-sidebar c-sidebar-dark c-sidebar-fixed c-sidebar-lg-show" id="sidebar">
<div class="c-sidebar-brand d-lg-down-none">
...
Related
My Directmail template works like a charm when viewing it in frontend. All css classes loads and styles the content perfectly.
The problem occurs when opening the HTML emails in various web clients (Gmail etc.). Some of them removes the classes completely while other renames them.
Most of it I can solve by making the styling inline in the HTML template but content created with CKEditor in TYPO3 backend gets classes assigned to it like..
<p class="text-center">
I know I can create custom inline styles in CKEditor but I just want my editors to keep using the default ways of styling content in CKEditor.
Is there anyway to have Directmail or CKEditor to make all styling inline in TYPO3 >10.4.*?
I would suggest using something like https://packagist.org/packages/tijsverkoyen/css-to-inline-styles and just inline the css before adding the template to directmail.
Haven't used directmail for ages but there might be a hook/event/signal or I just would xclass that into the extension.
Since Angular uses view encapsulation is it possible to support multiple themes in Angular 2? I mean the user should be able to click on a button and change the color theming of the whole application.
PS: I am using Angular 4 with angular-cli with SASS support.
Currently I am able to generate static themes with a _variable.scss file which is imported in each component's sass based stylesheet.
But, my requirement is end user should be able to choose his own color theme.
Ideally in non-angular websites I would just add a new compiled css file to the <head> tag using javascript. Since shadow DOM generates separate style for each component and adds them in to the <head> how I change the style for each component dynamically?
you can try the css method var(), for more details can read this blog
i'm busy with a Nativescript app, i'm using the core dark theme but would like to add some font-awesome glyphicons and custom css. I import the core dark theme in my global app.css but don't seem to be able to do anything more in that file after importing the theme... I've tried to add page-specific css by adding a component-common.css to a specific page but when I add the styleUrls: [...] declaration to the component declaration I always get a runtime error... Is it possible at all to use custom css ontop of the core Nativescript theme? If so how would I go about it (using css files not inline in the xml)?
Yes, it is possible to use both a theme and custom CSS files.
For example, check this sample where in the same time theme has been applied to the top CSS file.
Better check (and/or post) your runtime error - it might show you the reason why the app is throwing. Perhaps due to non-existing paths for your styleeUrls !?
I am creating a joomla module which uses bootstrap to style the various input fields. In my module's default.php file, I have incorporated bootstrap via the normal css link <link type="text/css" src="http://mylink.com/modules/mod_mymodule/css/bootstrap.min.css">. This works well with a non-bootstrap template but with a template which does use bootstrap, certain elements of the template do not display properly as a result of the bootstrap css file I have linked in my module. If I unlink the bootstrap file in my module, the input elements in my module are not responsive and the display of the module is just horrible.
My question is, how will I be able to incorporate bootstrap to my module without distorting the display of a bootstrap enabled template and also have my module displaying perfectly in a non-bootstrap template?
I realized the Joomla site I am using uses Bootstrap 2.3.2. Simply had to style my form to match the existing bootstrap file
I am using Handlebars and my templating engine but when I am working in a partial view the css files referenced in the main layout view are not being populated in the autocomplete dropdown.
Is there a way to have project based css files so the files dont have to be included on each individual view?
The example I have is that I am using bootstrap and it is include on the main layout view. When I create an individual page view I no longer have the classes in bootstrap available in the dropdown when i start typing.
If I have
<button class="bt
the bootstrap classes .btn, .btn-default etc. do not show up