I am working on a new project on React JS. I decide to use a HTML & CSS free theme template for my project. I found the two best theme templates for the frontend (visible to the public) and the admin panel (CMS). I add both the css and js script link to my React project. When I start the project, the design of the frontend becomes buggy. I cannot get the actual design of the template. It has completely changed my design. When I commented the admin theme css & js, then i get actual output of the frontend and vice versa. If I activate css & js for both the frontend and the admin then the design get buggy. Can anyone please suggest me how to solve this issue?
index.html
Frontend CSS
<link rel="stylesheet" href="%PUBLIC_URL%/frontend/assets/socicon/css/socicon.min.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/frontend/assets/slick/slick.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/frontend/assets/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/frontend/assets/unicore/css/style.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/frontend/assets/dropdown-menu/style.light.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/frontend/assets/mob-slider/style.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/frontend/assets/mob/css/mbr-additional.css" type="text/css" />
Frontend JS
<script src="%PUBLIC_URL%/frontend/assets/web/assets/jquery/jquery.min.js"></script>
<script src="%PUBLIC_URL%/frontend/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="%PUBLIC_URL%/frontend/assets/smooth-scroll/SmoothScroll.js"></script>
<script src="%PUBLIC_URL%/frontend/assets/bootstrap-carousel-swipe/bootstrap-carousel-swipe.js"></script>
<script src="%PUBLIC_URL%/frontend/assets/slick/slick.js"></script>
<script src="%PUBLIC_URL%/frontend/assets/unicore/js/script.js"></script>
<script src="%PUBLIC_URL%/frontend/assets/dropdown-menu/script.js"></script>
<script src="%PUBLIC_URL%/frontend/assets/formoid/formoid.min.js"></script>
Backend CSS
<link rel="stylesheet" href="%PUBLIC_URL%/backend/assets/vendors/mdi/css/materialdesignicons.min.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/backend/assets/vendors/css/vendor.bundle.base.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/backend/assets/css/style.css" />
Backend JS
<script src="%PUBLIC_URL%/backend/assets/vendors/js/vendor.bundle.base.js"></script>
<script src="%PUBLIC_URL%/backend/assets/vendors/chart.js/Chart.min.js"></script>
<script src="%PUBLIC_URL%/backend/assets/js/off-canvas.js"></script>
<script src="%PUBLIC_URL%/backend/assets/js/hoverable-collapse.js"></script>
<script src="%PUBLIC_URL%/backend/assets/js/misc.js"></script>
<script src="%PUBLIC_URL%/backend/assets/js/dashboard.js"></script>
<script src="%PUBLIC_URL%/backend/assets/js/todolist.js"></script>
Can anyone provide me the solution for this? How can i manage both template theme for my single project?
Related
<link rel="stylesheet" href="jQuery/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="jQuery/jquery-ui-1.13.1/jquery-ui-1.13.1/jquery-ui.min.css">
<link rel="stylesheet" href="mileTracker.css">
<script src="jQuery/jquery-3.6.0.min.js"></script>
<script src="jQuery/jquery-ui-1.13.1/jquery-ui-1.13.1/jquery-ui.min.js"></script>
<script src="jQuery/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css"></script>
<script src="mileTracker.js"></script>
<header data-role="header" data-theme="b">
<h1>Tracker</h1>
</header>
This is code that I have and I just can't seem to get the theme to be applied to the html code.
I have found a solution that allows for the set-up to work, the css links were added after the jQuery mobile css link.
Also when using the jQuery links, the mobile css file was placed first followed by the 2 javascript files, first the jquery.min.js then the jquery.mobile.1.4.5.min.js.
With the js files they were added after the css and in the order listed below.
Also I used a local deployment.
<link rel="stylesheet" type="text/css"
href="jQuery/jquery.mobile-1.4.5/demos/css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" type="text/css" href="jQuery/jquery-ui-1.13.1/jquery-ui-1.13.1/jquery-ui.min.css">
<script src="jQuery/jquery.mobile-1.4.5/demos/js/jquery.min.js"></script>
<script src="jQuery/jquery.mobile-1.4.5/demos/js/jquery.mobile-1.4.5.min.js"></script>
<script src="jQuery/jquery-ui-1.13.1/jquery-ui-1.13.1/jquery-ui.min.js"></script>
Error I recieve:
0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'modal'
The minute I apply the links for the fullcalendar, modals break.
Any reason for this?
I also did verify modals only broke when the javascript/stylesheets were added [I tested the calendar without and modal ran]
<link href='fullcalendar.min.css' rel='stylesheet' />
<link href='fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='lib/moment.min.js'></script>
<script src='lib/jquery.min.js'></script>
<script src='fullcalendar.min.js'></script>
If I define my calendar links before all my bootstrap it breaks the calendar saying it isn't supported as well.
So something with bootstrap and the fullcalendar either fights or overwrites each other.
My other local files
<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css"/>
<script src="CSS/font-awesome-free-5.0.6/on-server/js/fontawesome-all.js"></script>
<link href="CSS/bootstrap-theme.css" rel="stylesheet" />
<link href="CSS/bootstrap-theme.min.css" rel="stylesheet" />
<link href="CSS/bootstrap.css" rel="stylesheet" />
<link href="CSS/bootstrap.min.css" rel="stylesheet" />
<link href="CSS/maxcdn.bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/ajax.jquery.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/JavaScript.js"></script>
<link href="CSS/Main.css" rel="stylesheet" />
<script src="Scripts/Splitter.js"></script>
<link href="CSS/Oxygen.css" rel="stylesheet" />
<link href="CSS/passionOne.css" rel="stylesheet" />
<link href="CSS/netdna_3.2.0_bootstrap.min.css" rel="stylesheet" />
<link href="CSS/4.2.0_font-awesome.min.css" rel="stylesheet" />
I think i remember having this issue a long time ago. I actually went into my conflicting file and looked for similar words. I think I would try naming everything in full calendar that is named modal, to modaltwo. Just a find and replace on the entire file. See if that works for you.
So a warning to people like me who like to call modal.show() from vb.net code... the required lib jquery file can't be referenced with fullcalendar.
The bootstrap jquery files are all you need.
At this very moment I can't determine why the lib jquery file caused this bootstrap modal javascript break.
so I did the following links for fullcalendar [plus all my bootstrap files]:
<link href='fullcalendar.min.css' rel='stylesheet' />
<link href='fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='lib/moment.min.js'></script> <!-- need to calendar title -->
<%--<script src='lib/jquery.min.js'></script>--%>
<script src='fullcalendar.min.js'></script>
so that I could use a javascript function call to show a modal like so
<script type="text/javascript">
function openmodal() {
$('#myModal').modal('show');
}
</script>
I wonder what kind of url I should choose for local javascript and stylesheet files.
In Asp.net masterpage:
works:
<link href="../Content/Style/site.css" rel="stylesheet" />
works:
<link href="/Content/Style/site.css" rel="stylesheet" />
works:
<script src="/Scripts/javascript.js"></script>
this doesn't work correctly
<script src="../Scripts/javascript.js"></script>
Whats the difference between:
<link href="../Content/Style/site.css" rel="stylesheet" />
and:
<script src="../Scripts/javascript.js"></script>
I have a Vb.net MVC application that utilises Kendo UI (in the Bootstrap theme). I was told I had too many/conflicting css and js files declared but I'm struggling to figure out what my minimum requirements are. I'm also aware I may have some in the wrong order. I tried to fix this but have now managed to cause all dropdowns to display object [object] instead of the selected value.
I have the following declared...
<link href="#Url.Content("~/Content/kendo/2016.1.112/kendo.common-bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2016.1.112/kendo.bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2016.1.112/kendo.mobile.common.min.css")" rel="stylesheet" />
<link href="#Url.Content("~/Content/kendo/2016.1.112/kendo.bootstrap.mobile.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2016.1.112/kendo.dataviz.bootstrap.min.css")" rel="stylesheet" />
<script src="#Url.Content("~/Scripts/jquery-2.1.4.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2016.1.112/jszip.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2016.1.112/kendo.all.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2016.1.112/kendo.mobile.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2016.1.112/kendo.aspnetmvc.min.js")"></script>
Any help appreciated as I have no backup of the file before I started 'messing' and now do not know what was there originally and in which order. :(
All the help you need is here : http://www.telerik.com/blogs/which-css-files-to-use-in-your-kendo-ui-project
After reading the article, I am still not sure that if you use kendo.mobile, you still need kendo.common for the css and kendo.all.min for the js if your application is also desktop.
I an unable to access the few of CSS and JS files in my SPring MVC project. Below are the code in jsp page.
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<link rel="stylesheet" type="text/css" href="/css/demopage.css" />
<link rel="stylesheet" type="text/css" href="/css/demo_table.css" />
<link rel="stylesheet" type="text/css" href="/css/demo_table_jui.css" />
<link rel="stylesheet" type="text/css" href="/css/jquery-ui-1.8.24.custom.css" />
<script src="/javascript/jquery.js" type="text/javascript"></script>
<script src="/javascript/jquery_dataTables.js" type="text/javascript"></script>
It is able to access style.css and jquery.js files where as other files are not found but they have been kept with the these files only.
Recheck your paths. if it's dynamic, you probably need spring MVC specific linking.