Is it possible to have the same nav bar on all pages, without coping and pasting the code. Basically I want to have this:
<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Login</li>
<li>Register</li>
</ul>
</nav>
On all three pages(Home, Login, Register). Without coping and pasting the code.
You can use Javascript frameworks to help you achieve this.
Javascript frameworks such as Angular JS provide functionality to help you do this.
A lot of template systems allow you to nest or inherit templates. For example, you'd put your navbar in a master template, and then simply inherit said template on all your pages. Jade and Jinja are two that come to mind.
If you're not using any type of template system, you could still piece together HTML files with whatever language you're using, but it's going to be a bit messy. For instance, read in multiple HTML files, concatenate them, and then serve them to the client.
Last but not least, you could dynamically add the navbar to the page, and simply include the same script on all the pages you want the navbar to appear.
Ultimately, your best option is to use a template system, as it handles things like this for you extremely efficiently and cleanly, but even without a template system you can still manage, just not as cleanly.
Related
I have a menu bar that links to local webpages that is working fine except that when I click on the link on the menubar it goes to the webpage in question leaving the webpage with the menubar, but I wish to load the page below the menubar so the user can this use the menubar to navigate. Should I be using iframes? sorry haven't used HMTL5 in quite some time any help is much appreciated.
Neil.
<div class="menu">
Home
Index of Services
Schedule
Examples
</div>
<div class="content">
This page is to help you organise
</div>
Yes, you need frames. Or, the most common, to have the same menu code on all htmls, because with frames your url won't change unless you do some tricks.
If you don't want to duplicate code you could use PHP. Then you could create an index.php with the menus and with includes to the page content.
Edit:
You can also do it with some JavaScript but it also has the same problems with the url. The site will also not work if JavaScript is disabled.
Edit2:
The tricks for frames and javascript I said before can be achieved without url rewrites and with plain HTML+CSS+JS is with anchors.
Basically you change your urls to anchors with the page name, and when the page is first loaded you check this hash so the correct frame opens when someone enters your url like http://mypage.com/#examples. You can access and set the hash with window.location.hash.
So your code would look like:
<div class="menu">
Home
Index of Services
Schedule
Examples
</div>
<div class="content">
This page is to help you organise
</div>
For both with or without frames you need a JavaScript event attached to each menu item.
With frames the JS basically changes the frame url when the user clicks on the menu.
Without frames you use xhr to download the html, and then, if you successfully downloaded the html, you delete everything inside div.content and replace with what you downloaded with innerHtml.
For both solutions you need to add a JS that checks the hash when you first load the page to update the displayed page accordingly.
As for PHP or other server-sided "script" any beginners tutorial will explain how to do it.
I'm trying to get the Gumby.js library to work with Meteor, but cant get it to work.
I've tried both installing it manually in /client/lib folder and using 'mrt add gumby'.
The CSS part seems to work pretty fine with the grid working perfectly, but the JS modules dont work.
I'm setting a responsive Navbar just like this
<template name="nav">
<div class="row navbar centered" id="nav1">
<!-- Toggle for mobile navigation, targeting the <ul> -->
<a id="nav-toggle" class="toggle" gumby-trigger="#nav-ul" href="#"><i class="icon-menu"></i></a>
<ul id="nav-ul" class="eight columns">
<li>Quienes somos</li>
<li>Marcas</li>
<li>Servicios</li>
<li>Laboratorios</li>
<li>Contacto</li>
<li>Otros</li>
</ul>
</div>
</template>
but the menu just does not popup on mobile width. And other modules like Folders and skip dont work at all when defined.
you can see a sample here
any idea on how to get it up and running?
Not sure about the real situation, because the js files are packed in the website and it's hard for me to tell from the source code. However, there is some clue you may find useful.
I assume you want to run the js script after the template is rendered. In this case, you need to write like this.
Template.nav.rendered = function() {
// Run the js to render the dropdown or whatever.
}
This is the Meteor programming paradigm. If you simply run the js files directly, the template may not be ready when you run that part of the code. The "rendered" callback is the place you need to place some actions after this template is ready.
In addition, you can refer the official document here http://docs.meteor.com/#template_rendered
I need to remove Sitefinity's out of the box styling for all elements on a master page that we create. I've poured over tons of documents but they all leave me wanting more, a cleaner, more simplistic way to achieve this. CSS overrides seem bulky, and removing it from the config file will destroy my business users ability to work within the CMS and update quickly. Also, I have tried the custom widget overrides on the User Control level, and still am not a fan of the results.
So, how does one do this, keep clean code, and make it easy for business users?
Sean's right - if you don't use the default theme, no styling will be added to your template by Sitefinity.
Given your forum thread on sitefinity.com, you're not so much running into trouble because of Sitefinity, but because of using the default RadControls.
If you replace those with a custom solution, not only will there be no styling added, the html markup itself will be much cleaner.
You could for instance use one of the Marketplace navigation controls or use KendoUI in combination with a sitemapdatasource, which would give you something like this:
<ul id="sitepanelnav" class="sitepanelnav k-group" data-role="treeview" >
...
<li class="k-item">
<div class="k-mid">
<span class="k-in">
linktext
</span>
</div>
</li>
...
</ul>
But if you're really adament about clean markup and clean styling, you can use the API to render out a 100% clean ul/li and take it from there with 100% control.
If you're still set on using the RadControls, start with the Stylebuilder to visually build out the basics of your design, then manually tweak/integrate & optimize the generated .css files.
The name you enter as a skin, is the name you should add as 'designer skin' in the widget options.
In a nutshell: Yes it can be done, but it either takes some coding or some styling effort, which one you prefer is up to you of course.
I am setting up my first drupal (6) site and so far I like the system.
I've now run into a problem however: to give the content more space I want to hide the right-sidebar (with the navigation menu etc.) on every page from a specific module (or also fine: for a specific node/view from the module)
The only way I've come up with is to add some CSS to the module CSS files, but this doesn't seem very clean to me since I would need to redo it on every update (also the module uses 5 CSS files for different views)
Is there a better way to do it?
To be clear: I don't want to just hide a block, I want to hide the whole sidebar
Hmmm. Is this a custom module or something commonly available? Some modules allow you to create custom tpl.php files (see the theming guide) for them. This might quickly solve your problem.
If you are theming a node, then it is significantly easier. You can theme a specific type of node by naming convention (again via .tpl.php files in your theme). You can check out how to do that here.
Definitely check out the theming guide, since you will probably want to create your own theme instead of hacking on one of the core themes (not recommended). Typically you can copy /themes/garland into /sites/all/themes/my_garland, switch your site's theme to that and then make whatever changes you need (otherwise you'll have to reapply changes every time you update core).
Finally, you can check for path arguments (which seemed weird to me at first) if you want to do things in PHP that are more complex (see the arg function). If this is your first Drupal site, you may also need to know how to include css programatically.
Good luck! Drupal is a fun and interesting product.
You can configure the block visibility for each individual block and path in your website (admin/build/block). Under 'Configure'/'Page specific visibility settings'/'Show block on specific pages' you can set the navigation menu block not to be displayed for some specific routes. If a sidebar has no blocks to display it will hide itself allowing more space for the content.
You could use the Context module, with it you can, among other things, set rules for each block/menu where and when i should be shown (or not). You could also do this the way Josep explained but with Context you get more options.
And as Josep said when there are no blocks active in the sidebar it should disappear automatically, if not check your page.tpl.php it should have something like this in it:
<?php if ($right): ?>
<div id="sidebar-right">
<div id="sidebar-right-inner"> <?php print $right; ?> </div>
</div>
<?php endif; ?>
So if there is nothing in the Right region it doesn't display the sidebar. Maybe you have to change the name of the region, depending how they are called in you template.
I believe you already got the answer or a way to fix your problem.
There is a simple way to fix your problem. Here's a link.
I am working on an Ubercart installation on a Drupal site we are producing. Everything is going smoothly, but I am now trying to setup the order page template (uc_order module), so that the frontend developers can style it up.
The page is the one you view when you go to user/[UID]/order/[ORDER-ID].
I understand how to use hooks, preprocess, theming and template functions within Drupal, but currently I cannot see a way of changing any of the markup on the "order panes" that make up the page. It goes without saying that I don't want to touch any of the module's code.
So, one of the pages is the 'Bill To' address pane:
<div class="order-pane pos-left">
<div class="order-pane-title">Bill to: </div>
Name<br>
Address<br>
Town<br>
Postcode<br>
</div>
Essentially I would like to put a class in the div, so that it looks like this:
<div class="order-pane pos-left bill-to">...</div>
<div class="order-pane pos-left ship-to">...</div>
<div class="order-pane pos-left payment">...</div>
<div class="order-pane pos-left comments">...</div>
...
I just cannot see a way of doing this.
Any help would be much appreciated.
Have you checked the latest version of UC? The release note states:
The biggest change, though, is that order invoice templates now use the theme system to allow customizations. Instead of altering the module files directly, it is now correct to override them in the theme, just like node and page templates.
...and if I am not mistaken (a few months have passed by since I worked with UC), the invoice IS the page displayed by the URL you provided.
If my memory failed me (I haven't a UC installation handy to verify myself), a possible workaround (admittedly far from elegant, but still allowing you not to change the module's code) would be to alter the HTML with jQuery once the page has been loaded.
A more hack-ish workaround would be to maintain your own page callback for that URL, and just alter the menu definition in the UC code [yes, it's still hacking the code, but in this case you just need to modify one line in the UC code, and can maintain your code in a separate module].
HTH,
Mac.
You can create youre own panes or a single pane for everything, look up hook_pane, or you can insert the classes using jquery.