I recently inherited a website with a horrible file structure. I need to update some content (text) but I can’t find where it is being defined. The database table does not have the information, so I'm guessing the text is being defined elsewhere. Is there a tool or "trick" in Chrome Dev Tools to find the content source? Your help is much appreciated!
***Snippet from PHP File:
<div id="product_wrapper" class="add-bottom30">
<div class="columns sixteen">
<div class="columns twelve add-bottom60 catalogue">
<!-- Pager -->
<?php include('sql-' . $_SESSION['lang'] . '/promos.php');?>
</div>
<div class="columns four side">
<h5 style="margin-bottom:25px;">FLYERS</h5>
<ul>
<li style="background-color:#0065a4;">
<?php echo flyer_jet_2016; (where the text I need to change lives) ?>
</li>
</ul>
</div>
<div class="clear"><!-- ClearFix --></div>
</div>
</div>
*** Snippet from source code ("View Source" in Chrome):
<div class="columns four side">
<h5 style="margin-bottom:25px;">FLYERS</h5>
<ul>
<li style="background-color:#0065a4;">
<span class="icon" data-icon="(" style="color:#fff;margin-bottom:15px;"></span><br>Tool Storage<br>Solutions 2016
</li>
</ul>
</div>
<div class="clear"><!-- ClearFix --></div>
</div>
Related
I created a blog category from the menu. In Joomla 4 -> In Blog Layout -> Columns ، I can give a value to the column, but if we increase the value by one, the displayed contents are not balanced. And the "" did not close properly. After a general search, I realized that the contents are arranged as follows :
HTML :
<div class="blog-items">
<div class="blog-item">
<div class="content">1</div>
<div class="blog-item">
<div class="content">2</div>
</div>
<div class="blog-item">
<div class="content">3</div>
<div class="blog-item">
<div class="content">4</div>
<div class="blog-item">
<div class="content">5</div>
</div>
<div class="blog-item">
<div class="content">6</div>
</div>
<div class="blog-item">
<div class="content">7</div>
</div>
</div>
</div>
</div>
</div>
HTML The right way to be :
<div class="blog-items">
<div class="blog-item"><div class="content">1</div></div>
<div class="blog-item"><div class="content">2</div></div>
<div class="blog-item"><div class="content">3</div></div>
<div class="blog-item"><div class="content">4</div></div>
<div class="blog-item"><div class="content">5</div></div>
<div class="blog-item"><div class="content">6</div></div>
<div class="blog-item"><div class="content">7</div></div>
</div>
Note: When I disable "loadTemplate", the loop is displayed correctly and the divisions are closed correctly.
I also checked the information inside the "$this->loadTemplate('item')" but found no problem.
PHP :
<div class="blog-items">
<?php foreach ($this->intro_items as $key => &$item) : ?>
<div class="blog-item">
<?php
$this->item = & $item;
echo $this->loadTemplate('item'); //Included <div class="content">value</div>
?>
</div>
<?php endforeach; ?>
</div>
it's true,fixed.
All content had a tag before page break,
You cannot insert it inside a div. The closing tag will be missing. Close the tag before inserting Read More.
Little did I know that using before page break can be so destructive, and I've been looking for problems with PHP code for about a week now.
**Using Laravel 5.8.31 & Bootstrap 4. Browser: Chrome v. 76.0.3 and Opera 62.0.33 **
I was testing my CRUD functions by deleting a post. After deletion, the controller redirects back to my post index page. When the page loaded, the bootstrap side bar wrapped down below the other posts, rather than being on the right. Was fine before the post deletion.
I tried altering the cols and floating elements to no avail. Using Chrome dev tools, I see that the sidebar is nested in an em tag that isn't in the code. Tried clearing application cache. No effect.
I suspect this has something to do with the blade templating language and parsing the html, although if it is, I have no idea how to fix this other than manually installing the sidebar on every page.
How do I fix this??
Code can be found here: https://github.com/gkennedy87/Hillcrest/tree/master/resources/views
(It seems that laravel is also wrapping the footer in an em tag. Although this is a non-issue at the moment)
// views/posts/index.blade.php
#extends('layouts.app')
#section('content')
#include('inc.navbar')
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-8">
<h1>Our Blog</h1>
#if (count($posts) > 0)
#foreach ($posts as $post)
<div class="card mb-4">
<img class="card-img-top" src="http://placehold.it/750x300" alt="Card image cap">
<div class="card-body">
<h2 class="card-title">{{$post->title}}</h2>
<p class="card-text">{!! str_limit($post->body,200,'...')!!}</p>
Read More →
</div>
<div class="card-footer text-muted">
Posted on {{$post->created_at}} by
Start Bootstrap
</div>
</div>
#endforeach
{{$posts->links()}}
#else
<p>No Posts Found</p>
#endif
</div>
#include('inc.sidebar')
<!--end row -->
</div>
<!--end container -->
</div>
#include('inc.footer')
#endsection
// views/inc/sidebar.blade.php
<!--sidebar start -->
<div class="col-md-4 col-lg-4">
<div class="sticky">
<!-- Search Widget -->
<div class="card my-4">
<h5 class="card-header">Search</h5>
<div class="card-body">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
</div>
</div>
<!-- Categories Widget -->
<div class="card my-4">
<h5 class="card-header">Categories</h5>
<div class="card-body">
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
Web Design
</li>
<li>
HTML
</li>
<li>
Freebies
</li>
</ul>
</div>
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
JavaScript
</li>
<li>
CSS
</li>
<li>
Tutorials
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Side Widget -->
<div class="card my-4">
<h5 class="card-header">Side Widget</h5>
<div class="card-body">
You can put anything you want inside of these side widgets. They are easy to use, and feature the new Bootstrap 4 card containers!
</div>
</div>
</div>
</div>
<!-- sidebar end -->
I setup the app on a local environment, the sidebar always stays on the right even after deleting a post. The response also doesn't contain any em tags. Could you try clearing the cache:
php artisan cache:clear
php artisan view:clear
php artisan config:clear
I have been working on a job-listing website during the last few weeks as a self taught CS student. I finished the front end of the website in July and now I am learning mySQL and PHP to produce the back-end.
So, on the current "job listing" page search.html, there is currently 4 listing in the page but I typed those directly on the html when I was making the front-end just to see how it will look like.
I have build my database like this and added few examples:
I also made a back-end page to let the user add a a new listing and it is working.
I am not sure it was a good idea to start with the front-end. I am now trying to display three columns (title, location, type) of eachrowbased on my specific front-end layout. I won't display thedate` yet since I have not created it on mySQL.
search.html
<div class="job-listing">
<div class="container">
<div class="job-number">
<h2>We Found <span id="number-jobs-total" class="text-secondary"></span> Offers For <span>You</span> </h2>
</div>
<ul class="job-board">
<li class="job job-1">
<div class="job-title">
<h2>Process Engineer</h2>
</div>
<div class="job-location">
<p>Location: Naypyitaw</p>
</div>
<div class="job-type">
<p>Type: Full-Time</p>
</div>
<div class="job-date">
<p>Published on 07/19/2019</p>
</div>
<div class="job-industry">
<p>Engineering</p>
</div>
<ul class="job-keywords">
<li>Engineering</li>
<li>Science</li>
</ul>
</li>
<li class="job job-2">
<div class="job-title">
<h2>Chief Financial Officier</h2>
</div>
<div class="job-location">
<p>Location: Naypyitaw</p>
</div>
<div class="job-type">
<p>Type: Full-Time</p>
</div>
<div class="job-date">
<p>Published on 07/18/2019</p>
</div>
</li>
<li class="job job-3">
<div class="job-title">
<h2>Assistant CEO</h2>
</div>
<div class="job-location">
<p>Location: Naypyitaw</p>
</div>
<div class="job-type">
<p>Type: Part-Time</p>
</div>
<div class="job-date">
<p>Published on 07/18/2019</p>
</div>
</li>
<li class="job job-4">
<div class="job-title">
<h2>Front-End Developer</h2>
</div>
<div class="job-location">
<p>Location: Naypyitaw</p>
</div>
<div class="job-type">
<p>Type: Part-Time</p>
</div>
<div class="job-date">
<p>Published on 07/18/2019</p>
</div>
</li>
</ul>
<nav class="pagination-container">
<ul class="pagination">
<li>Previous</li>
<li>Next</li>
</ul>
</nav>
</div>
</div>
Things I will do later:
I need to protect my PHP code against injections
The pagination button is not working
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>
I am currently displaying content from my database using a foreach loop within a boostrap panel. However the layout is not behaving as I expected it too, I have tried resolving this using breaks which had fixed the layout from being worse than it is at the present. However it is still off if you take a look at the image below :-
In addition to this I also have bootstrap dropdown menu's that are not working at all embedded within a div.
This is my code -
<div class="parabox">
<!-- Collect the nav links, forms, and other content for toggling -->
<!-- Search -->
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search For Comics">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<strong><p class="navbar-text">Sort Comics By : </p></strong>
<ul class="nav navbar-nav">
<li class="dropdown">
Order Comics<span class="caret"></span>
<ul class="dropdown-menu">
<li>Ascending Order</li>
<li>Descending Order</li>
<li>Numerical Order</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
Universe<span class="caret"></span>
<ul class="dropdown-menu">
<li>Dark Horse Comics</li>
<li>DC</li>
<li>IDW</li>
<li>Image</li>
<li>Marvel</li>
<li>Valiant</li>
</li>
</ul>
</div>
</div>
</br>
<!-- Start of Col Div -->
<div class="col-md-12">
<!--/.Panel for Comics -->
<!-- Count for Comics -->
<?php
if(count($comics)){
?>
</br>
<div class="panel panel-default">
<div class="panel-heading panel-heading-green">
<h3 class="panel-title">My Comics</h3>
</div>
<div class="panel-body">
<div class="row">
<!--/.row1 -->
<!-- Display each comic by id -->
<?php foreach($comics as $list): ?>
</br>
<div class="col-md-3 comic">
<a href="#">
<?= ($list['image'] <> " " ? "<img style='max-width:200px; max-height:250px;' src='Images/{$list['image']}'/>" : "") ?>
</a>
<div class="comic-title">
<?= ($list['name'] <> "" ? $list['name'] : "") ?> #<?= ($list['issue'] <> "" ? $list['issue'] : "") ?>
</div>
<div class="comic-add">
</div>
</div>
<!-- End of Foreach Statement for Comics -->
<?php endforeach; ?>
<!-- Else show this message if user has no entries -->
<?php
}else {
?>
<p><b>You haven't posted any comic yet!</b></p>
<?php } ?>
</div>
</div>
</div>
<!--/.row1-collapse -->
</div>
<!-- /.container -->
</div>
I am using MVC format which is why the code may seem short or missing pieces which is in header and footers within my template part of my application. Any ideas on what I can do to sort the layout out and get the dropdown menu's to work as they do seem a little related ?
As far as I know, bootstrap requires you to always have a markup like:
<div class="container">
<div class="row">
<div class="col-*">…</div>
<!-- many more cols -->
</div>
</div>
So this:
container
row
col
col
col
row
…
structure should always be give, whereby this structure can be nested.
This way the layout has all the negative margin magic applied
UPDATE
According to the posted image I guess that the resulting markup is corrupted (if the »container > row > col« structure exists). I recommend to have a a look at the browser console and compare the resulting dom tree with the expected. It is also very helpful to search the page source, in Firefox corrupted elements (missing closing tag, wrong attributes etc) are shown in red, so this helps to find the bug.
*Create a wrapper div to hold the image, title etc. Then for that div add a css with the style as display:inline-block; So if it is not able to accomodate with in the view in browser, it will get automatically wrapped into the next line. Follow this example see teh working sample code created by some one: http://jsfiddle.net/ajruk60t/3/*
You must break your line after the number of columns your row can contain. For instance, if you use col-3, then you must not define more than 4 columns. At this point, you recreate a row and carry on.
<div class="row">
<?php
$i = 1;
foreach($comics as $list) { ?>
<div class="col-md-3">
...
</div>
<?php
if ($i % 4 == 0) {
?></div><div class="row"><?php
}
$i++;
?>
<?php } ?>
</div>
Alternatively, you can create the same effect adding manual breakpoints rather than recreating a row. I have not tried this solution myself, but read it here:
<div class="clearfix visible-md-block"></div>
Thank you for your help it steered me to the answer which was the foreach loop had to start after the break.
<?php require('template/header.phtml') ?>
<div class="container">
<div class="row">
<!-- Start of Col Div -->
<div class="col-md-12">
<!--/.Panel for Comics -->
<!-- Count for Comics -->
<?php
if(count($comics)){
?>
</br>
<div class="panel panel-default">
<div class="panel-heading panel-heading-green"><h3 class="panel-title">My Comics</h3></div><!-- End of Panel Heading -->
<div class="panel-body">
<div class="row">
<!--/.row1 -->
<!-- Display each comic by id -->
</br> <?php foreach($comics as $list): ?>
<div class="col-md-3 comic">
<a href="#">
<?= ($list['image'] <> " " ? "<img style='max-width:200px; max-height:250px;' src='Images/{$list['image']}'/>" : "") ?>
</a>
<div class="comic-title">
<?= ($list['name'] <> "" ? $list['name'] : "") ?> #<?= ($list['issue'] <> "" ? $list['issue'] : "") ?>
</div>
<div class="comic-add">
</div>
</div> <!-- End of Col-MD-3 Comic -->
<!-- End of Foreach Statement for Comics -->
<?php endforeach; ?>
<!-- Else show this message if user has no entries -->
<?php
}else {
?>
<p><b>You haven't posted any comic yet!</b></p>
<?php } ?>
</div><!-- end of row -->
</div> <!-- end of panel body -->
</div> <!-- end of panel panel-default -->
<!--/.row1-collapse -->
</div> <!-- end of col-md-12 -->
</div> <!-- End of Row -->
</div> <!-- /.container -->
<?php require('template/footer.phtml') ?>