I've created a file called menu.php to be my universal nav/menu file. The way it was created using bootstrap though, I have a div called article at the bottom which serves as the main body of the app, since the sidebar in my menu is expandable/responsive.
I really want to have one global menu file. I'm currently including it in all of my content pages like so:
<?php include("menu.php")?>
This works but it breaks my formatting. What I'm trying to do is make all of my main pages such as index.php have the html formatted so that it will always sit inside the tag in my code below which shows card classes.
<header>
<div class="branding">
<div class="menu-button menu-toggle nav">
<i class="material-icons">menu</i>
</div>
<img src="" />
</div>
<div class="page-details">
</div>
<div class="settings">
<div class="menu-button profile">
<i class="far fa-user-circle fa-2x"></i>
</div>
<div class="menu-button menu-toggle aside">
<i class="material-icons">chat</i>
</div>
</div>
</header>
<div class="app">
<nav>
<div class="title-block">
<img src="" />
</div>
<ul>
<li><a href="#"><i class="material-icons">home</i>
<span>Home</span></a></li>
</ul>
</nav>
<!--This following article section is the main body of the page, that I want each additional page to take up-->
<article>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</article>
</div>
Example:
Menu.php is my global menu/nav file but it makes the page/app act as a wrapper for all the other pages (index.php, editor.php, etc.)
menu.php
<div class="app">
<nav>
Nav menu content
</nav>
<article>
This will be the main page article for index.php, editor.php,etc.
</article>
</div>
example with index.php (the start and end are just hypothetical to show the endpoints)
<body>
<?php include("menu.php");?>
<?php start('article') ?>
<!--Everything from here to the end() call would be inserted in the article tags on menu.php-->
<div class="app">
<div id="content">
<div>
<h1 style="text-align: center; color: #A9BD50; ">Content Management Editor</h1>
</div>
<form method="post">
<textarea id="mytextarea"></textarea>
</form>
<div>
<h1 style="text-align: center; color: #A9BD50; ">Preview</h1>
</div>
</div>
</div>
<?php end() ?>
</body>
Related
I want to redirect the user to a particular section of an html page.
// javascript for owl
$(document).ready(function(){
$('.owl-two').owlCarousel({
loop:true,
margin:10,
nav:true,
autoplay:true,
responsive:{
0:{
items:1
},
600:{
items:2
},
1000:{
items:3
}
}
});
});
<!-- nav-->
<ul class="dropdown-menu">
<li>Hair</li>
<li>Nail</li>
<li>Wax</li>
</ul>
<!-- owl carousel in salon services page-->
<div id="nail" class="row" >
<br>
<br>
<h3 class="text-center">Our Nail Services</h3>
<br>
<!-- nail carousal-->
<div class="owl-two owl-carousel owl-theme">
<div class="item"><img src="images/n1.jpg" alt="Image" class=" img-thumbnail">
<h4 class="text-center">Manicure</h4>
</div>
<div class="item"><img src="images/n2.jpg" alt="Image" class=" img-thumbnail">
<h4 class="text-center">Pedicure</h4>
</div>
<div class="item"><img src="images/n3.jpg" alt="Image" class=" img-thumbnail">
<h4 class="text-center">Nail Painting and Design</h4>
</div>
<div class="item"><img src="images/n4.jpg" alt="Image" class=" img-thumbnail">
<h4 class="text-center">Nail Extensions</h4>
</div>
</div>
I want to redirect the user directly from nav dropdown to another page's div containing that content. The page to which I want to redirect has 3 owl carousels.
I have already tried the html id redirect. <a href="#id">, but it does not works completely. The page redirects briefly to the section but scrolls automatically to the top of the page.
I am using the owl carousel and think that owl javascript is the responsible factor for this as I have tested it with removing owl and it works, also the id redirect works fine when done from the same page (i.e.services page ).
I have 3 carousels 1.hair 2.nail 3.wax
Kindly help I want to keep owl and the section redirect function. Thanks.
.sec {
width: 100%;
height: 100vh;
background-color: #ccc;
margin-bottom: 12px;
}
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
<div id="one" class="sec">
<h1>One</h1>
</div>
<div id="two" class="sec">
<h1>Two</h1>
</div>
<div id="three" class="sec">
<h1>Three</h1>
</div>
<div id="four" class="sec">
<h1>Four</h1>
</div>
Let me just give you a brief introduction to the question, I'm going to be having about 20 pages on my website once a user logs in, I need to organise these pages to use the same header, so I've come to the decision to use a layout as I'm using Laravel framework, it seemed stupid to have the same header spread across the 20 pages, if I wanted to make a change it would be hell.
In Bootstrap, I didn't add any kind of active class to any of the selected pages, it was just a navigation bar, I've recently upgraded to the Bulma framework where it requires an active class on the parent tab to show the child tabs, sort of a parent and sub categorys system going on.
I'm not sure how to handle this in the Layout, I need to add an active class and I also need to choose which sub navigation to show.
I've added my code below, I was wondering if anyone could tell me how I can approach this?
The below code is my whole page, including the header (the <section class="hero is-danger inside-header">)
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<title>{{ config('app.name') }} - Login</title>
<link rel="stylesheet" href="assets/public/1.0/frontend/css/bulma.css?id={{ time() }}" type="text/css">
<link rel="stylesheet" href="assets/public/1.0/frontend/css/override.css?id={{ time() }}" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body class="inside">
<section class="hero is-danger inside-header">
<div class="hero-body">
<div class="container">
<div class="columns is-vcentered">
<div class="column is-5">
<p class="title header-title">Introducing {{ config('app.name') }}</p>
<p class="subtitle">Interacting with others...</p>
</div>
<div class="column is-3"></div>
<div class="column is-4">
<a class="button is-danger is-large is-disabled join-game-button">
<i class="fa fa-sign-in"></i> Join Game
</a>
<a class="button is-success is-large is-disabled users-online-button">
<i class="fa fa-users"></i> 10
</a>
<br><br>
<a class="button is-success is-large is-disabled platform-button">Platform: Closed Beta</a>
</div>
</div>
</div>
</div>
<div class="hero-foot">
<div class="container">
<nav class="tabs is-boxed">
<ul>
<li class="is-active">
<a href="/documentation/overview/start/">
<i class="fa fa-user"></i> {{ Auth::user()->username }}
</a>
</li>
<li>
<a href="http://bulma.io/documentation/modifiers/syntax">
<i class="fa fa-university"></i> Business
</a>
</li>
<li>
<a href="http://bulma.io/documentation/columns/basics">
<i class="fa fa-user-secret"></i> Gangs
</a>
</li>
<li>
<a href="http://bulma.io/documentation/elements/box/">
<i class="fa fa-users"></i> Community
</a>
</li>
<li>
<a href="http://bulma.io/documentation/components/breadcrumb/">
<i class="fa fa-shopping-cart"></i> Store
</a>
</li>
</ul>
</nav>
</div>
</div>
</section>
<nav class="navbar has-shadow">
<div class="container">
<div class="navbar-tabs">
<a class="navbar-item is-tab is-active" href="http://bulma.io/documentation/overview/start/">Home</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/start/">Profile</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/customize/">Education</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/classes/">Skills</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/modular/">Housing</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/modular/">Security</a>
</div>
</div>
</nav>
<div class="container holorp-container-fixed">
<br>
<div class="columns is-desktop">
<div class="column is-8">
<div class="message is-danger">
<div class="message-body">
<p>not sure what can even go here...</p>
</div>
</div>
</div>
<div class="column is-4">
<div class="message is-success">
<p class="message-header">Change Log <span class="is-pulled-right"><i class="fa fa-user"></i></span></p>
<div class="message-body">
<span class="tag is-dark">26/09/17</span> <code>Updates the platform with a fresh design</code><br>
<span class="tag is-dark">26/09/17</span> <code>Upgraded from Laravel 5.4 to 5.5</code><br>
<span class="tag is-dark">26/09/17</span> <code>Added core features to the admin panel</code><br>
<span class="tag is-dark">26/09/17</span> <code>Did something, can't even remember</code><br>
<br>
<p><a class="modal-button" data-target="#modal-forgotPassword" id="forgot-pw-modal">View all recent changes</a></p>
</div>
</div>
</div>
</div>
</div>
</body>
If I understand well, you need "the same header" on every page. Laravel comes with Blade Template Engine, it has a set of methods to help us.
Using the template engine, you can create your app template in resources/views/layouts/app.blade.php
using #yield you can inform what part is dynamic:
<div class="container">
#yield('content')
</div>
To reuse the template in others views, for example using two pages:
The content of file resources/views/layouts/pages/one.blade.php
#extends('layouts.app')
#section('content')
<div class="row">
<h1>Page 1</h1>
</div>
#endsection
The content of file resources/views/layouts/pages/two.blade.php
#extends('layouts.app')
#section('content')
<div class="row">
<h1>Page 2</h1>
</div>
#endsection
Using #yield, #extends and #section you can reuse any HTML template in your Laravel Application.
We can create any #yield that we need:
<div class="container">
#yield('content')
</div>
#yield('scripts')
And reuse in our pages:
#extends('layouts.app')
#section('content')
<div class="row">
<h1>More than one #yield</h1>
</div>
#endsection
#section('scripts')
<script type="text/javascript" />
console.log('using Blade Template Engine');
</script>
#endsection
There is the #include method, that includes the content of another file if you need.
#extends('layouts.app')
#section('content')
<div class="row">
<h1>Page 2</h1>
#include('forms.form2')
</div>
#endsection
UPDATE:
Knowing these things above, we can do:
#extends('layouts.app')
#section('content')
<div class="row">
<h1>You are in Item B</h1>
<ul>
<li id="liA">Item A</li>
<li id="liB">Item B</li>
<li id="liC">Item C</li>
</ul>
</div>
#endsection
#section('scripts')
<script type="text/javascript" />
var d = document.getElementById("liB");
d.className += " is-active";
</script>
#endsection
This will add the CSS class in the element with id "liB", we need to use something to identify the element, I'm using "id" property but you can use anyone, just need to check what JS method to use to get it in "d" variable. You can check this for more information Element.className
I don't use Bulma, but I believe that will do what you want.
I'm modifying my Wordpress template to show an excerpt just below the header with some text, social sharing buttons and a image (kind of a biography).
I have almost all the code but the image doesn't appear. I guess is a pretty simple mistake and someone can help me easily.
Here's my code. Most of the code is copied and adapted to my own theme because I don't know pretty anything about web oriented lenguages like PHP or HTML.
<!-- BEGIN .sixteen columns -->
<div class="sixteen columns">
<!-- BEGIN .featured-page -->
<div class="featured-page">
<div itemscope itemtype="http://data-vocabulary.org/Person">
<!-- BEGIN .eleven columns -->
<div class="eleven columns">
**<div class="feature-img iphone-profile" style="background-image: url(http://www.example.png);"></div>**
<div class="article">
<h2 class="title">About me</h2>
<p>*Some text here*.</p>
</div>
<div class="home-social">
<div class="title">Follow Me</div>
<ul class="social-icons">
<li><a class="link-twitter" href="https://twitter.com" target="_blank"><span aria-hidden="true" class="organicon-twitter"></span></a></li>
<li><a class="link-linkedin" href="http://pl.linkedin.com/in/" target="_blank"><span aria-hidden="true" class="organicon-linkedin"></span></a></li>
<li><a class="link-google" href="http://plus.google.com/1" target="_blank"><span aria-hidden="true" class="organicon-googleplus"></span></a></li>
<li><a class="link-email" href="example" target="_blank"><span aria-hidden="true" class="organicon-envelop"></span></a></li>
</ul> </div>
<!-- END .eleven columns -->
</div>
<!-- BEGIN .five columns -->
<div class="five columns">
**<div class="feature-img desktop-profile" style="background-image: url(http://www.example.png);"></div>**
<!-- END .five columns -->
</div>
<span style="display: none;" itemprop="name">Example</span>
<span style="display: none;" itemprop="organization">Example</span>
<span style="display: none;" itemprop="role">Example</span>
<img style="display: none;" itemprop="image" src="http://example.png" />
</div>
<!-- END .featured-page -->
</div>
</div>
<!-- END .sixteen columns -->
The first thing you should try is deleting the style="display: none;" in your
<img style="display: none;" itemprop="image" src="http://example.png" />
It should look like:
<img itemprop="image" src="http://example.png" />
I am trying to include different php files in the index.php file
on my webpage
http://www.e-lang.de/index.php
but the contents are included as simple text. What I want is that they should be proper DOM elements not the text.
here is my index.php
<div class="container">
<div class="navbar mt10">
<div class="navbar-inner">
اردو ایڈیٹر
<ul class="nav">
<li class="active">صفحۂ اول</li>
<li>رابطہ</li>
</ul>
</div>
</div>
<?php include_once "editor.php"; ?>
<!-- hidden inline form -->
<?php include_once "emailform.html"; ?>
</div>
and editor.php looks like
<div class="well widget">
<div class="widget-header">
<h3 class="title">اُردوھے جس کا نام</h3>
</div>
<div class="row">
<div class="span7">
<form method="post" action="save.php" id="text-container">
<input type="hidden" name="save" value="0" id="savetext">
<textarea rows="22" id="text-urdu" name="text" class="span7" dir="rtl" style="font: normal 25px Arial"></textarea>
</form>
<div class="rel">
<div id="counter"></div>
</div>
</div>
<div class="span4" id="help-wrapper">
</div>
</div>
<div class="row">
<div class="span11">
<div class="well widget" id="buttons-listing">
<ul class="listing">
<li>Print</li>
<li>Save</li>
<li>pdf</li>
<li></li>
<li><a href="#" class="button" id="btn_email" >E-Mail</a></li>
</ul>
</div>
</div>
</div>
</div>
There is no actual PHP in editor.php. Please remove the first line (containing the PHP open tag, <?php) from the editor.php file, as that should only surround PHP code. For standard HTML, you don't need to use the <?php tag.
I am having problem with the placing of header part above my container part using thesis theme for wordpress as i am unable to do so.
<body class=" customize-support">
<div id="logo"> </div>
<div id="container">
<div id="header">
<h1 id="site_title">
Example
</h1>
<p id="site_tagline"></p>
</div>
<ul id="menu-main-navigation" class="menu">
<div class="columns">
<div class="footer">
</div>
you can do that by adjusting css according to your need.