-
- What is DG3
- The different components
- Requirements for running DG3
- Installation of DG3
- Additional installation steps
- Select which web server to use
- Hello World application
- Intro to CMS
- Setting up DG3 as a CMS
- Editing pages
- More about pages and urls
- Structuring a page using the grid
- Adding menu to pages
- Add images to the application
- More formating
- Sending email from contact us
- Adding menu to template
- Deploy the web site
- Storing the pages in database
- Create record
- Auto fill field
- Field validation
- Enable save button validator
- Add new button to template
- View document
- List documents
- Fix selection in menus in template
- CRUD Create Read Update Delete
- Intro to blogs
- Add user authentication
- Bootstrap authentication
- Let user change their passords
- Add reset password
- Login dialog box
- Extending the CMS to a blog
- Extend table for blogging
- Edit blog entry
- View blog entry
- User registration
- User password validation
- User field validation
- User auto login
- User extra registration fields
Adding menu to pages
Adding a simple menu to the pages we are going to create
One last thing add to the pages is a menu for navigating the site. We will use the navbar that comes with Bootstrap for that. You can add it in several ways just by changing the classes. The basic structure is the same for all. You create a <nav> or <div> tag with the navbar classes and add a <ul> containting <li> elements for the menu. The menu it self, contains links for navigation. You can set one of them active (stand out) by adding the class "active".
That's the theory, and here is the code as found in the about page:
<nav class="navbar navbar-default" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/">DG3 by Example</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="/landing/">Home</a></li> <li class="active"><a href="/about/">About</a></li> <li><a href="/contact/">Contact</a></li> </ul> </div> </div> </nav>
The nice thing about using the bootstrap components, are that they already works for all from mobile to big desktop. A nav menu will show as a dropdown on a phone, but will stick to the top and show all menus when there are enough room in the web browser.
This is how it looks in medium desktop:
And this on mobile phone both collaped and expanded versions:
The well
To make something stand out, you can use add the class well as used for the field below the heading.
<div class="well"><p>4ThePeople Limited is a new vehicle that was set up to fund the development of the next generation of DataEase products - DataEase Generation 3. The project that is now called DataEase Generation 3 - DG3 for short - was started in 2007 under the "code name" DataEase4Web. In the early years, this was funded by the Nefines Group, but a special vehicle was set up in 2010 to focus 100% on DG3.</p></div><br>
Pull right
To add elements to the right on the screen outside the grid, you can add the class "pull-right". There are several helpers to move elements like this. If you look at the code for the contact us section, you will find that it comes before the body text describing the company. We want to add it to a side panel where the rest of the text float around. To do this you simply use the pull-right helper class and the framework do the rest. Here is the code:
<div class="pull-right panel panel-primary" style="margin-left:10px;"> <div class="panel-heading">Contacting Us</div> <div class="panel-body"> If you have any questions or queries please contact 4ThePeople at:<br/><br/> 4ThePeople Limited<br/> 8 High Street<br/> Ivinghoe<br/> LU7 9EX<br/><br/> Registered in England & Wales registration number: 07226697<br/><br/> Contact: desales@dataease.com Phone: +44 (0) 203 28 666 28 </div> </div> <div> <p>4ThePeople had the first version of DG3 ready in April 2011 <br>
We add a little in-line style to add a little margin to the left of the box. As long as it is a one of and note used on a lot of elements,this is not a bad thing to do. If you add each and every small adjustment to you css, this will make just make it large and hard to read. Cheat if that is what it takes to get your site ready on time. The colour on the heading comes from the colour set for primary elements. You will find the same colours for buttons as well.
Copy the menu to all the other pages
Later we will look at a better way, but for now, you only get the menu on the about page.To get it on all pages, just copy the menu code into each page and change the active to the right page.