I am using a custom theme in Drupal and the jquery and bootstrap version in pretty outdated. Old pages in are in that version but I want to design few new pages where I want to include the latest version of bootstrap and jquery. Now whenever I design a new page, Drupal itself adds certain wrappers to it and includes the previous bootstrap, jquery version in the aggregate js file. I just want it to be plain html and not include any other css/js files or make any other modifications.
I have added CSS, JS files in link and script tags. And few elements also have inline css. I just want it to render as a simple HTML page
Currently this is my theme.inc file
foreach ($stylesheets as $stylesheet) {
drupal_add_css($stylesheet, array('group' => CSS_THEME, 'every_page' => TRUE, 'media' => $media));
}
I want to restrict this for certain pages. Any leads?
You could try hook_css_alter() and hook_js_alter() like it is suggestsed here:
Drupal 7 override jquery js file in custom theme
In your node preprocess function in template.php in your theme. But I don't know if you could limit this to just some nodes, or pages.
Related
I'm using a site that only lets me create new pages by editing them in an iframe. I want to use bootstrap in these, but the main site itself seems to be hosting (much) older versions of bootstrap that are overriding styles in my iframe.
After some googling, I used this method to block the main sites bootstrap CSS file:
<script>$('link[rel=stylesheet][href~="URL of the main sites bootstrap.min.css file"]').remove();</script>
This worked at first, but then a different version of bootstrap (still very old) started overriding again. Instead of playing whack-a-mole, is there a way to simply block the entire folder that houses the main site's CSS files, instead of just a specific file?
I know I will probably get too many down votes for this question, but I just could not find a tutorial to my problem.
I have created a ASP .Net MVC project in Visual Studio 2013 (New Project -> ASP.NET Web Application -> MVC) and I am trying to change the default bootstrap for this project, I have downloaded bootstrap templates from different websites but I just can not use them in my project. I have followed a few questions on SO and some tutorials but all I could was change some styling, not entirely use the template I want to use.
Tutorial that I read:
http://www.mytecbits.com/microsoft/dot-net/bootstrap-with-asp-net-mvc-4-step-by-step
http://www.mytecbits.com/microsoft/dot-net/bootstrap-3-with-asp-net-mvc-5
SO Questions:
bootstrap 3 template change mvc5
Bootstrap Jumbotron not becoming full width of Body
After reading above questions and a few more tutorials here and there, I was able to change the theme but not the template, I want to use a parallax theme like this one
I copied the css into bootstrap.css, javascript into bootstrap.js and HTML into my page Home page but then _Layout.cshtml is messing up the display...
My Questions:
1.) Am I doing this the wrong way?
2.) What changes should I make to the _Layout.cshtml file to display the template properly?
3.) I read that there are different versions of bootstraps, the default version that is used in the project when I created it is V3.0.0 and some templates that I downloaded are V3.1.1, Will they be compatible? I followed this to upgrade the bootstrap version of my project to V3.1.1 after that some more .js and .css files were added to my project and things got more complicated.
4.) What will be the _Layout.cshtml file if I use bootstrap V3.0.2 ?
Any help will be appreciated...
EDIT:
I am trying to use this template:
Template
Template
Integrating Bootstrap Template into ASP .Net MVC 5:
First of all create a new Project:
Web Application -> MVC
Run your Project by pressing F5, it will look like:
Now check that your downloaded Bootstrap Template Folder contains following:
css (Folder):
bootstrap.css
bootstrap.min.css
js (Folder):
bootstrap.js
bootstrap.min.js
Note: Sometime bootstrap.css may be named as style.css and bootstrap.js may be named as style.js
You will be making changes to following files in ASP .Net MVC Project:
bootstrap.css
boostrap.min.css
bootstrap.js
bootstrap.min.js
Open your all the files mentioned above in code editor:
Now do the following:
Copy all of the code from bootstrap.css (Template css Folder) to bootstrap.css (Content Folder)
Copy all of the code from bootstrap.min.css (Template css Folder) to bootstrap.min.css (Content Folder)
Copy all of the code from bootstrap.js (Template js Folder) to bootstrap.js (Scripts Folder)
Copy all of the code from bootstrap.min.js (Template js Folder) to bootstrap.min.js (Scripts Folder)
Now its time to adjust your _Layout.cshtml according to the Theme. We will be splitting the index.html file from the Theme folder into two parts, one part will go into _Layout.cshtml and one part will go into 'Index.cshtml`:
Replace your _Layout.cshtml code with the code below:
_Layout.cshtml
Replace your Index.cshtml code with the code below:
Index.cshtml
Now run your Project it will be like:
Link
This is how I solved my problem.
Bootstrap is just the basis. A template may also add additional features in order to be rendered correctly. Things that may or may not be based upon bootstrap. It could also be an older version of Boostrap, or a newer as Boostratp has been at 3.2 for a while.
Usually, you include the main bootstrap.css first, then the css file(s) that the theme uses. Before you reference the bootstrap.js file, load jQuery. There is no set way to make your _layout.cshtml look good without
1) knowing what is wrong. We have to see the rendered code to really understand what is missing
2) What template you are attempting to apply since you may be missing the css or some elements that it uses.
There's a great and simple way to get everything you need to get going. Use Chrome and hit F12 to open the developer tools. Right-click over the area that displays the rendered layout and choose "Inspect Element". It will open the DOM for the entire page but will select an item within an iframe. Find the element immediately within the iframe and right-click and select "Copy as HTML". This will give you the layout as well as script css and script order.
The css that shows in the bootply editor window doesn't go into the bootstrap.css file. It's rendered inline into the code that I showed you how to get at but you can place it into it's own CSS file. Just make sure that CSS file is loaded after the bootstrap css file.
Just for reference, the template appears to be using Bootstrap 3.0.2, which isn't too old but isn't the most current.
I am developing a new web site, for which I installed the latest version of Joomla, 3.1.1.
I created a template from scratch, using the Twitter Bootstrap. I downloaded the latest version of Bootstrap, and loaded the related javascript in the index.php of my template.
While creating a carousel on one of my pages, I encountered a bug with the carousel indicators that were not reflecting the current picture. By investigating with Firebug, I realised that the bootstrap.min.js that was loaded on the page was not the one that I placed in /template/xxx/js, but another one in /media/jui/js, loaded by Joomla itself. And the one loaded by Joomla was an older version.
So I copied the latest version of bootstrap.min.js to /media/jui/js, and my carousel is now working perfectly. But (there is always a but), I now have some menus that don't work on the admin side of the site, using the default Isis template. If I put back the older version of bootstrap.min.js, they work again...
I would like to do one of these 2 things:
find a way to have Joomla load a different version of bootstrap.min.js for the admin side and the user side of the site
find a way to override the javascript loaded by Joomla from my template index.php
Any idea on how to achieve one or the other?
Thanks,
Patrick
Joomla ships with a slightly modified version of Bootstrap, so you cannot exchange it with a newer version.
The best thing for you to do is to find a version of that carousel script for the Bootstrap version shipped with Joomla. Otherwise you'll get problems on any update.
You can override the media by placing a file at templates/<your_template>/js/jui/bootstrap.min.js. But as warned by nibra, there are some modifications in the JS that you'll need to apply in your environment to keep things working. As well, you'd then be using a version of the JS that isn't intended for what we're shipping in the core currently.
So, it's possible to cleanly do it, but there's a fair amount of risk involved.
I found a solution that seems to be acceptable: I inserted a <script src=" line in the index.php of my template, to load the latest version of the bootstrap template.
As a result, both versions of the bootstrap javascript are loaded, but the most recently loaded is used, and my carousel is working.
I don't expect this to create problems with other modules in Joomla, as I use only basic ones or new modules that I created myself. In any case, the menu module of Joomla was not compatible with bootstrap navbar, and I had to add a few jQuery lines to add the needed classes.
Rgds,
Patrick
remove JHtml::_('bootstrap.framework'); from your index.php of your template and add any version of bootstrap you want manually, no big deal....except you prolly have to change your entire template markup...
I would like to inject, via a bookmarklet, my own code into a web page.
That code needs jQuery, jQuery UI and some plugins to be added too in the web page.
I read about noConflict but what about if some jQuery plugins (with different version) are also loaded by the web page and they uses the same CSS class names or ids.
how must I proceed to inject all my code?
What kind of bookmarklet are you trying to inject. If you can open an iframe using your bookmarklet and show your content there like RTM, Springpad etc then I believe you won't have a problem.
When editing JSPs in Eclipse, the contents of <script> tags - i.e. Javascript code - is properly color coded and formated.
For reasons that go beyond the scope of this question, I have created a custom javascript tag, let's call it <sj:script>. The body of this type is pure javascript as you would have in a regular <script> tag.
However, when I have Javascript code within my custom tag, it is treated as simple text (no color coding, no proper indentation, etc).
My question is, how do I make Eclipse use a specific editor within custom JSP tags?
You can try MyEclipse or Aptana Studio. They offer much better editors for web development.
But a much better approach is to put the JS into a different file and reference that with <script src="...">:
You can use a better editor
The browser can cache the JavaScript (instead of downloading it every time with the rest of the page)
You can write tests for the JavaScript (next to impossible when the JS is held hostage in a JSP file).
[EDIT] Eclipse is open source. Download the code for the WTP project, look for the text editor parts and search for "script". In all places that you find, add "sj:script", too.
Have you included the Tag Library Descriptor file in the jsp where you are using the custom tag?
I have a list of plugins for eclipse which enable eclipse to edit JS files:
http://www.delicious.com/powtac/javascript+eclipse
Just go trough the links and see the different descriptions how to install them.
AFAIK, editors are chosen based on file extension, and there's no mechanism to customize this based on particular content inside the file.
I see 2 options
Creating a custom text editor to take into account your custom script tag (probably not worth the effort)
Put your javascript snippet in an external file, use the include directive inside your custom script tag.
<%# include file="javascript.js" %>
Eclipse has a template feature where in you can add specific tag ,which can be made available for all JSP pages.
Ensure you have installed Eclipse WTP ( Web Tools Platform )
1.Open Preferences window [ Select Window > Preferences ]
2.Expand Web Option from the menu, upon which you can see [ CSS Files,HTML Files etc..
3.Select JSP Files
4.Select Editor
5.Select Templates
6.In the corresponding pane , click New and from there rest can be easily done.