After changing website template into drupal images don't load - html

I'm changing a site template into the drupal theme.
I put the header in html.tpl.php and body in page.tpl.php and also set .info file but the page doesn't load properly and image of the site don't show in browser.
it seems to me with these settings and Since I still haven't changed the static content. it should work same as static version if so what would be the problem?
HTML code:
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../js/modernizr.js"></script>
</head>
<body>
<div id="wrapper">
<div class="header-wrapper header-alt2">
<div class="works-thumb">
<img src="../img/works/works-8.jpg" alt="Project Name">
<div class="works-title">
<h4>
Project Name
</h4>
</div>
<i class="icon-play"></i>
<div class="overlay">
<h4></h4>
<p>Project Name Description</p>
<div class="overlay-icons">
<i class="icon-eye"></i>
<i class="icon-link"></i>
<i class="icon-play"></i>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.info file:
package, core and ..
stylesheets[all][] = css/style.css
scripts[] = js/modernizr.js
and region
html.tpl.php file:
?><!DOCTYPE html>
<html class="no-js" lang="en">
<head profile="<?php print $grddl_profile; ?>">
<?php print $head; ?>
<title><?php print $head_title; ?></title>
<?php print $styles; ?>
<?php print $scripts; ?>
</head>
<body class="<?php print $classes; ?>" <?php print $attributes;?>>
<?php print $page_top; ?>
<?php print $page; ?>
<?php print $page_bottom; ?>
</body>
</html>
page.tpl.php file:
<div id="wrapper">
<div class="header-wrapper header-alt2">
<div class="works-thumb">
<img src="../img/works/works-8.jpg" alt="Project Name">
<div class="works-title">
<h4>
Project Name
</h4>
</div>
<i class="icon-play"></i>
<div class="overlay">
<h4></h4>
<p>Project Name Description</p>
<div class="overlay-icons">
<i class="icon-eye"></i>
<i class="icon-link"></i>
<i class="icon-play"></i>
</div>
</div>
</div>
</div>
</div>

Copy your all images in to
/sites/all/themes/yourthemename/images
folder.
Then change the image path in page.tpl.php like this:
/sites/all/themes/yourthemename/works-8.jpg
instead of using:
../img/works/works-8.jpg

Related

convert figma to html and css

I'm using Figma to design my web page but when I try to convert it into HTML and CSS the text appears without style, although I tried to embed the CSS with HTML or link it with the external file it doesn't work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<title>Desktop - 21</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Almarai%3A300%2C400%2C700"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro%3A300%2C400%2C700"/>
<link rel="stylesheet" href="./styles/desktop-21.css"/>
</head>
<body>
<div class="desktop-21-Su8">
<div class="auto-group-ntce-Q5G">
<div class="auto-group-4ge6-XQn">
<div class="auto-group-bez8-T3Y">
<img class="image-11-NgJ" src="./assets/image-11-4SW.png"/>
<div class="auto-group-jkh4-gwt">
<div class="image-2-pHQ">
</div>
<p class="item--kRx">الدخول</p>
<img class="lock-02-SZg" src="./assets/lock-02-zCr.png"/>
</div>
<p class="item--n7k">المساعدة والدعم</p>
<p class="item--Fn2">الاسئلة المتكررة</p>
<p class="item--YFL">
<span class="item--YFL-sub-0">
تعرف على
<br/>
</span>
<span class="item--YFL-sub-1">حصيف</span>
</p>
<img class="image-10-o4n" src="./assets/image-10-hop.png"/>
</div>
<div class="line-6-7rA">
</div>
<p class="item--rYr">حصيف</p>
</div>
<p class="item--N1Q">الخدمات العدلية الالكترونية</p>
<div class="auto-group-u3mu-E3c">
<img class="chevron-left-vx2" src="./assets/chevron-left-wR4.png"/>
<p class="item--rqg">الدخول</p>
</div>
</div>
<div class="auto-group-nyy8-jea">
<div class="frame-2-fHL">
<p class="item--C2N">حصيف</p>
<p class="item-920072390-79L">920072390</p>
</div>
<p class="item-1444-2020--cbt">جميع الحقوق محفوظة لحصيف ,المملكة العربية السعودية 1444 ه -2020 م</p>
<div class="auto-group-vefu-2fc">
<p class="item--xZG">مواقع التواصل الاجتماعي</p>
<div class="auto-group-wyye-EWn">
<div class="auto-group-m8ae-xhg">
<img class="image-16-usp" src="./assets/image-16-HBY.png"/>
<img class="image-15-3z2" src="./assets/image-15-8pS.png"/>
</div>
<img class="image-14-PY6" src="./assets/image-14-Mjp.png"/>
</div>
</div>
<p class="item--dSS">
<span class="item--dSS-sub-0">
المساعدة والدعم
<br/>
<br/>
</span>
<span class="item--dSS-sub-1">
الاسئلة الشائعة
<br/>
<br/>
دليل المسخدم
<br/>
</span>
</p>
</div>
</div>
</body>
I tried using anima and other plugins in Figma but didn't work for me, function12.io helped me with extracting the code but it appears as a text without style
Try
Builder.io - Figma to HTML, React, and more
TeleportHQ - Figma to Code - Export HTML, CSS, React & Vue
In the Function12, once you export the code, you can check the styles over here.

bootstrap images inside columns not displaying properly in for loop php

i have a bootstrap page where i am trying to display images inside bootstrap columns, i did the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<?php for($i=1;$i<=19;$i++){?>
<div class="col-sm-12 col-lg-4" style="text-align:center">
<img src="n<?=$i?>.jpg" class="img-responsive">
</div>
<?php } ?>
</div>
</body>
</html>
there are 19 images, everything is coming fine except the 7th image which is coming in a single row in large screens. this is the live link:enter link description here
can anyone please tell me what is wrong in here?
Since your code uses bootstrap 3, so flexbox is not used by default.
Bootstrap V3:
<div class="row" style="display:flex; flex-flow:row wrap;">
<?php for($i=1;$i<=19;$i++){?>
<div class="col-sm-12 col-lg-4" style="text-align:center">
<img src="n<?=$i?>.jpg" class="img-responsive">
</div>
<?php } ?>
</div>
Better to use bootstarp v4 or v5 with flexbox support so there is no need for the extra CSS.
Bootstrap V4 and V5:
<div class="row">
<?php for($i=1;$i<=19;$i++){?>
<div class="col-sm-12 col-lg-4" style="text-align:center;">
<img src="n<?=$i?>.jpg" class="img-fluid">
</div>
<?php } ?>
</div>

QATester weird Error: clickable element "ADD" was not found by text|CSS|

Now... the App runs smoothly and fulfill every functionalities, thing is when I try to run the QATest, everyone pass through, except one:
Error: clickable element "ADD" was not found by text|CSS|xpath
This error its driving me nuts, as ADD button runs OK on the remaining test. Here is my Index.php:
<?php include("db.php"); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TEST ASSESMENT</title>
<!--- Bootstrap CSS --->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="header"style="margin-top:50px;">
<form action="delete_product.php" method="post">
<div class="alignButton" style="display:flex; justify-content:space-between">
<a style="margin-left:30px;text-decoration:none;color:black;font-size:30px;" href="index.php">Product List</a>
<div class="alignButtons" style="display:flex; justify-content:flex-end">
<button style="margin-right:50px;" id="add" type="button" class="btn btn-primary" name="add" onclick="window.location.href='product_add.php'">ADD</button>
<button style="margin-right:50px;" id="delete-product-btn" type="submit" name="mass_delete" class="btn btn-danger">MASS DELETE</button>
</div>
</div>
<hr/>
</div>
<div class="py-5">
<div class="container">
<div class="row hidden-md-up">
<!--Get all products from DB-->
<?php
$query = "SELECT * FROM products";
$result_products = mysqli_query($conn, $query);
while($row = mysqli_fetch_array($result_products)) { ?>
<!-- <?php
if(isset($_SESSION['status'])){
echo "<h4>".$_SESSION['status']."</h4>";
unset($_SESSION['status']);
}
?> -->
<div class="col-sm-4">
<div class="card" style="margin:10px;padding:10px;width:250px;">
<input class="delete-checkbox" type="checkbox" name="check_list[]" value="<?php echo $row['id']; ?>">
<label><?php echo $row['sku']; ?> : <?php echo $row['prod_type']; ?></label>
<h5><?php echo $row['name']; ?></h5>
<p>$<?php echo $row['price']; ?></p>
<!--Conditional rendering depending on product type-->
<?php if ($row['prod_type'] == 'DVD'): ?>
<p>Size: <?php echo $row['dvd']; ?>MB</p>
<?php elseif ($row['prod_type'] == 'BOOK'): ?>
<p>Weight: <?php echo $row['book']; ?> Kgs.</p>
<?php elseif ($row['prod_type'] == 'FUR'): ?>
<p> H:<?php echo $row['fur_h']; ?>x W:<?php echo $row['fur_h']; ?>x L:<?php echo $row['fur_l']; ?></p>
<?php endif ?>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
</form>
</div>
<!--- Bootstrap JS --->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>
And here is the QATester issue:
Check homepage basic requirements
951ms

Error: Clickable element "ADD" was not found by text|CSS|XPath
Error: Clickable element "ADD" was not found by text|CSS|XPath
at new ElementNotFound (node_modules/codeceptjs/lib/helper/errors/ElementNotFound.js:14:11)
at assertElementExists (node_modules/codeceptjs/lib/helper/WebDriver.js:2835:11)
at WebDriver.click (node_modules/codeceptjs/lib/helper/WebDriver.js:917:7)
at processTicksAndRejections (internal/process/task_queues.js:97:5)
I }) => {
I.amOnPage('/');
I.click('MASS DELETE');
I.click('ADD');
The 11th following test passes OK. Even the button MASS DELETE on the same test.I have tried to Switch button order ( Mass Delete & Add), declare them with class/id; Rename button to add, Add, ADD; moved the button outside container div... Can't figure out what's the problem or what I have missing. I would really appreciate any help/clue/tip about it.
Answer: Just add the text ADD in the add button. it will pass. If you have multiple navigation for different page. type the exact 'ADD' text inside the button tag.
This is my navigation and it worked: it is in react, but similar with the html
<header>
<nav className="nav px-3 m-auto d-flex justify-content-between align-items-center border-bottom">
<h3 className="nav-title">
<Link to="/">Product {isProductListPage ? "List" : "Add"}</Link>
</h3>
<div className="nav-list d-flex align-items-center">
<Link to="/add-product">
<button className="nav-list-add btn me-3">
ADD
</button>
</Link>
<button id="delete-product-btn" onClick={handleDelete} className="btn btn-danger">MASS DELETE</button>
</div>
</nav>
</header>
I had the same problem. Just put bigger margin between buttons :)

why the font awesome doesn't work in this html code?

I want to use font awesome in my html code. The following is my code. But it doesn't get applied.. I've saved the font awesome dir within my project folder as well..
<?php
include '../config/sessionhandling.php';
//print_r($_SESSION['userrow']);
$role_id=$userrow['role_id'];
include '../config/dbconnection.php';
include '../model/user_model.php';
$obu=new user_model();
$resultu=$obu->viewUsers();
$nou=$resultu->rowCount();
$resultud=$obu->viewUsersDe("Deactive");
$noud=$resultud->rowCount();
$noua=$nou-$noud;
$to=date('Y-m-d');
$resultday=$obu->viewLogPerDay($to);
$noday=$resultud->rowCount();
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Faculty Management System</title>
<link rel="stylesheet" type="text/css"
href="../css/layout.css"/>
<link rel="stylesheet" type="text/css"
href="../bootstrap/css/bootstrap.min.css" />
<!-- <link rel="stylesheet" href="path/to/bootstrap/css/bootstrap.min.css">-->
<link rel="stylesheet" href="../fontawesome-free-5.12.0-web/css/font-awesome.min.css">
</head>
<body>
<div id="main">
<?php
include '../templates/header.php'; ?>
<?php
include '../templates/userrole.php'; ?>
<div id="navigation">
<div>
<ul class="breadcrumb">
<li class="active">
Dashboard
</li>
</ul>
</div>
</div>
<div id="content">
<div class="row">
<div class="col-md-3">
<ul style="list-style: none">
<li>
<i class="fas fa-user-graduate"></i>
User</li>
<li>
<!-- <i class="glyphicon glyphicon"></i>-->
Faculty</li>
<li>
<!-- <i class="glyphicon glyphicon-bold"></i>-->
Department</li>
<?php //}
//if ($role_id!=3) { ?>
<li>
<!-- <i class="glyphicon glyphicon-credit-card"></i>-->
Course</li>
<li>
<?php //} ?>
<!-- <i class="glyphicon glyphicon-barcode"></i>-->
Appointment</li>
<li>
<i class="fas fa-bells"></i>
Notification</li>
<?php //if($role_id==1 || $role_id==2) { ?>
<li> <i class="glyphicon glyphicon-filter"></i>
Feedback</li>
<li> <i class="glyphicon glyphicon-record"></i>
Report</li>
<?php //if($role_id==1) { ?>
<li> <i class="glyphicon glyphicon-backward"></i>
Backup</li>
<?php //} ?>
</ul>
</div>
<div class="col-md-9">
<div class="row">
<?php if($role_id==1){ ?>
<div class="col-md-4"> <!--Grid technique is used -->
<div class="panel panel-success"> <!-- panel-success gives green colour to the panel-->
<div class="panel panel-heading">
User and Login
</div>
<div class="panel-body">
<p>No.of Users:<span class="badge"><?php echo $nou; ?></span></p>
<p>Active Users:<span class="badge"><?php echo $noua; ?></span></p>
<p>Deactive Users:<span class="badge"><?php echo $noud; ?></span></p>
<p>No. of Login(<?php echo date ('Y-m-d');?>): <span class="badge"><?php echo $noday; ?></span></p>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
</div>
<?php include '../templates/footer.php'; ?>
</div>
</body>
</html>
I want to display some of the icons in my dashboard and is there a better way to accomplish this? Please help me to sort this out.....Or is there a better way to use font awesome??
Try adding a type attribute to your link element:
<link rel="stylesheet" href="../fontawesome-free-5.12.0-web/css/font-awesome.min.css" type="text/css" />
Try and check your font awesome css link like this
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800' rel='stylesheet' type='text/css'>
Use CDN:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/css/all.min.css" crossorigin="anonymous">
First of all, font awesome has a cdn you should be using as part of your account. That way you don't have to manage its updates.
Second, review this thread. This is a better way to include files in a site for your users. Remember, PHP is a server-side rendering language. When you are including links directly in your head, it is up to the user (the browser) to render your file which essentially slows down the page-load. This isn't a big deal for a single file, but if you're doing this with multiple files you're unnecessarily slowing down your site. PHP is efficient at running scripts on the server and you're maximizing the usage you pay for in your server.
The crux of that thread teaches you to:
Define your stylesheet and it's variable(s)
Lookup how to use output buffering to get it to load correctly
If you're using wordpress, it has a custom "hook" called "enqueue" that you can include in functions.php that will achieve the same effect. FAQ on Wordpress wp_enqueue_style() functions.
Try the snippet. Changed the fas fa-github to fab fa-github.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">
<div class="jumbotron">
<h1 class="display-4">Henrique Borges</h1>
<p class="lead">Programador experiente e Web Designer.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<i class="fab fa-github btn btn-dark btn-lg" href="#" role="button"> Github</i>
</p>
</div>
Use the CDN link in the head tag :
<link type='text/css' href='the font link' >
Note : You should attach the config files of your framework or the CDN link in your html in every project . Don't forget.

link is not coming on hover

This is my simple code in html..
<p class="backto">
<a href="http://saisukamal.com">
<img src=<?php echo base_url()."images/img_top1.gif";?>><br/>
<span style="margin-right: -5px;">Home</span></a>
</p>
<p class="backto1">
<a href="http://saisukamal.com/contactus.html">
<img src=<?php echo base_url()."images/img_top3.gif";?>><br/>
<span style="margin-right: -5px;">Contact</span></a>
</p>
First link is working but second is not. When I remove p class, then it works. It may be overriding. So what will be the solution for that??
I believe it's the way you've built your image tags. The quotes are not created properly because the existing quotes are for the string in your echo which could throw off your HTML.
<p class="backto">
<a href="http://saisukamal.com">
<img src="<?php echo base_url()."images/img_top1.gif";?>"><br/>
<span style="margin-right: -5px;">Home</span></a>
</p>
<p class="backto1">
<a href="http://saisukamal.com/contactus.html">
<img src="<?php echo base_url()."images/img_top3.gif";?>"><br/>
<span style="margin-right: -5px;">Contact</span></a>
</p>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hover demo</title>
<script>
</script>
<style type="text/css">
a{
cursor: pointer;
}
</style>
</head>
<body>
<p class="backto">
<a href="http://saisukamal.com">
<img src="<?php echo base_url()?>images/img_top1.gif"><br/>
<span style="margin-right: -5px;">Home</span></a>
</p>
<p class="backto1">
<a href="http://saisukamal.com/contactus.html">
<img src="<?php echo base_url()?>images/img_top1.gif"><br/>
<span style="margin-right: -5px;">Contact</span></a>
</p>
</body>
</html>