I wanted to take a free template to start my RolePlay forum with a "good looking" homepage; and I found this one: Template preview
The template himself is working fine, if I'm openning the given downloaded index.html there no problem.
Then I "translated" that page to work with my Symfony.
Here is what I got:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>
{% block title %}Way Of Shogun {% endblock %}
</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('css/main.css') }}" />
<link rel="stylesheet" href="{{ asset('css/style.css') }}"/>
{% endblock %}
</head>
<body>
<div id="container">
<div id="header">
<div id="nav">
<ul>
<li>
Home
</li>
<li>
Game Guide
</li>
<li>
Interactive
</li>
</ul>
<ul>
<li>
Account
</li>
<li>
Support
</li>
<li>
Media
</li>
</ul>
</div>
</div>
<div id="content1">
<div id="text1">
<img src="{{ asset('images/cap-night-elf.gif') }}" alt="Caption" />
<div class="heading">BEST RELEASE OF THIS MONTH</div>
<br />
<p>Don't forgot to check free website templates every day, because we add at least one free website template daily.</p>
<p>This is a template designed by free website templates for you for free you can replace all the text by your own text. This is just a place holder so you can see how the site would look like.</p>
<p>You can remove any link to our websites from this template you're free to use the template without linking back to us. Don't want your boss to know you used a free website template ;).</p>
<p>If you're looking for beautiful and professionally made templates you can find them at Template Beauty.</p>
<p>
<div class="heading">MORE GAMES</div>
</p>
<p>
<span class="flt-lft"><img src="{{ asset('images/image-1.gif') }}" alt="More Games" /></span>
<span class="flt-lft"><img src="{{ asset('images/image-2.gif') }}" alt="More Games" /></span> <strong>Gnome mage by Someone</strong><br />
<br />
Etiam ullamcorper mi eu libero bibendum consequat. Cras volutpat .<br />
<span class="flt-rgt">...more</span>
</p>
</div>
</div>
<div id="pagebottom">
<div id="left">
<div id="text2"> <img src="{{ asset('images/cap-community-news.gif') }}" alt="Community News" />
<p>
<div class="heading2">THUNDGOT, AEUS, & VANERUS, 19/10/2006</div>
</p>
<p>Don't forgot to check free website templates every day, because we add at least one free website template daily.</p>
<p>This is a template designed by free website templates for you for free you can replace all the text by your own text. This is just a place holder so you can see how the site would look like.</p>
<p>You can remove any link to our websites from this template you're free to use the template without linking back to us. Don't want your boss to know you used a free website template ;).</p>
<p>If you're having problems editing the template please don't hesitate to ask for help on the forum.</p>
<p>If you're looking for beautiful and professionally made templates you can find them at Template Beauty.</p>
<p>To find great hosting providers visit Web Hosting Zoom</p>
</div>
</div>
</div>
</div>
{% block body %}{% endblock %}
<div id="right">
<div class="heading2">QUICK LINKS</div>
<div id="quicklinks">
<ul>
<li>Home</li>
<li>Realms Status</li>
<li>Account Creation</li>
<li>Account Management</li>
<li>Cetrieve Passward</li>
</ul>
</div>
<div class="heading2">SCREENSHOT OF THE DAY</div>
<img src="{{ asset('images/screenshot.jpg') }}" alt="Screenshot" /> <br />
Cross Realm Battlegrounds<br />
World PvP <br />
Rogue Talents revamped
</div>
<div id="footer">
Home | Game Guide | Interactive | Community | Account | Support | Media
<p>
Legal Documents |
Game Policies
<br/>©2006
WorldofWarcraft.com. All rights reserved. | designed by
free website templates
</p>
</div>
</div>
<div align=center>This template downloaded form <a href='http://all-free-download.com/free-website-templates/'>free website templates</a></div>
</body>
</html>
Sorry, for the bad indentation, it's crazy to clean a code like that :(
Anyway, as I said, I've just translated to replace the images by the asset link.
But as a results, the frontend isn't the same and I can't see what's wrong.
Hope you can help me on this ;) Thanks.
Here is a screen of what I'm getting.
To be more specific, I checked the networks calls and all the images and css and well found
How it is suppose to be:
Thanks again
Related
I am going to include the full code, since I am not sure where the problem is but the element I'm trying to target is the <h1>PC Lee</h1>, I am trying to change the font color to white but it is not working:
{% extends 'core/base.html' %}
{% load static %}
{% block head %}
<link rel="stylesheet" type="text/css" href="{% static 'core/style/index2.css' %}" />
<!--links specific to style sheet 2 -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">{% endblock %}
{% block body %}
<div id="jumbotron">
<ul>
<li class="align_left">PCLee</li>
<li class="align_right">Repairs/Upgrades</li>
<li class="align_right">Networking</li>
<li class="align_right">Remote Backups</li>
<li class="align_right">Data Recovery</li>
</ul>
<div id="h1_div"><h1>PC Lee</h1>
<img id="image" src="{% static "core/images/logo.png" %}" alt="My image" height="400" width="200"/>
</div>
</div>
<h1>dafs</h1>
<div id="grid">
<div id="content">
<h1>About Us</h1>
<img src="{% static "core/images/first_img.jpeg" %}" alt="My image"/>
<p>PCLee Computer has been dedicated to providing outstanding technical support to the New York Tri-State area for over 10 years. Specializing in computer sales, repair services, and networking. We have grown our business with individualized attention, honest diagnosis and fast turn-around. PCLee Computer prides itself on customer satisfaction. </p>
<p>Our technicians can assist your home or office computer repairs, computer setup, software and operating system upgrades, internet connection problems, wireless networking, peripherals (cameras, scanners, printers, iPods,), spyware and virus removal, and all other frustrating computer problems.</p>
</div>
<div id="contact_form">
<h2>Contact Us</h2>
<form role="form" action="" method="post">
{% csrf_token %}
<p>Full Name: <input type="text"></p>
<p>Email:<input type="text"></p>
Inquiry:<textarea></textarea>
<button type="submit">Submit</button>
</form>
</div>
</div>
{% endblock %}
and the css:
h1{
font-family: 'Open Sans Condensed', sans-serif;
color: white !important;
font-size: 1em;
}
none of these css statements are effecting the h1 element, but the css file is properly linked because all of the other css statements are working. Thanks for any help
Have you tried this
#h1_div h1 {
color: white;
}
Make sure your CSS file loaded. If it is loaded it can be overwritten by below CSS file.
Keep your custom CSS file below the CSS file you referenced.
You may have a CSS file being loaded after your custom one, overriding the desired properties.
I have wordpress website, I have applied custom HTML on Home page for footer. It appears well but on the post page the footer is not appearing like it should as on the Home page.
I think there is some CSS which is missing. I am not able to figure this out. Please help.
Home page Screen shot : https://ibb.co/f5wZxx
POst page screen shot : https://ibb.co/mz6Zxx
I have made some changes on the code below as I cant reveal the brand name.
Code :
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="footer, address, phone, icons" />
<title>Footer With Address And Phones</title>
<link rel="stylesheet" href="wp-content/themes/oblique/inc/class/class-customizer-theme-info-control/css/style.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css">
<body>
<footer class="footer-distributed">
<div class="footer-left">
<p class="footer-links">
Home
·
About
·
Contact
</p>
<p class="footer-company-name">2018 | All Rights Reserved</p>
</div>
<div class="footer-center">
<div>
<i class="fa fa-globe"></i>
<p>Official website - Español</p>
</div>
<div>
<i class="fa fa-globe"></i>
<p>Official website - English</p>
</div>
<div>
<i class="fa fa-envelope"></i>
<p></p>
</div>
</div>
<div class="footer-right">
<p class="footer-company-about">
<span>About </span>
</p>
<div class="footer-icons">
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
</div>
</div>
</footer>
</body>
For the given below webpage,
<!DOCTYPE html>
<html lang="en">
<head>
<title>xyz</title>
<meta charset="utf-8" />
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'personal/css/bootstrap.min.css' %}" type = "text/css"/>
<meta name="viewport" content = "width=device-width, initial-scale=1.0">
<style type="text/css">
html,
body {
height:100%
}
</style>
</head>
<body class="body" style="background-color:#f6f6f6">
<div class="container-fluid" style="min-height:95%; ">
<div class="row">
<div class="col-sm-2">
<br>
<center>
<img src="{% static 'personal/img/profile.jpg' %}" class="responsive-img" style='max-height:100px;' alt="face">
</center>
</div>
<div class="col-sm-10">
<br>
<center>
<h3>My blog</h3>
</center>
</div>
</div><hr>
<div class="row">
<div class="col-sm-2">
<br>
<br>
<!-- Great, til you resize. -->
<!--<div class="well bs-sidebar affix" id="sidebar" style="background-color:#fff">-->
<div class="well bs-sidebar" id="sidebar" style="background-color:#fff">
<ul class="nav nav-pills nav-stacked">
<li><a href='/'>Home</a></li>
<li><a href='/blog/'>Blog</a></li>
<li><a href='/contact/'>Contact</a></li>
</ul>
</div> <!--well bs-sidebar affix-->
</div> <!--col-sm-2-->
<div class="col-sm-10">
<div class='container-fluid'>
<br><br>
{% block content %}
{% endblock %}
</div>
</div>
</div>
</div>
<footer>
<div class="container-fluid" style='margin-left:15px'>
<p>Contact | LinkedIn | Twitter | Google+</p>
</div>
</footer>
</body>
</html>
<img src="{% static 'personal/img/profile.jpg' %}" class="responsive-img" style='max-height:100px;' alt="face"> is loaded using Django templating.
Above page uses bootstrap css framework, for responsive design
Image size/resolution impacts utilisation of network bandwidth.
Appropriate image size helps in creating responsive UI design.
In real time, we get images from client(customer) based on the size/resolution that we request to client(customer). Images can be IP property of client, until the website goes in production.
Question:
Amidst development process, for requesting to client(customer), How to decide the final size/resolution of an image to embed in web page, for any given layout of web page?
One way to do this is to put images of a different size in the template and then make sure that browser renders the appropriate image. You can use picture html tag for this:
<picture class="responsive-img" style='max-height:100px;' alt="face">
<!-- low-res, default -->
<source src="{% static 'personal/img/profile.jpg' %}">
<!-- med-res -->
<source src="{% static 'personal/img/profile.medium.jpg' %}"
media="(min-width: 400px)">
<!-- high-res -->
<source src="{% static 'personal/img/profile.large.jpg' %}"
media="(min-width: 800px)">
<!-- Fallback content -->
<img src="{% static 'personal/img/profile.jpg' %}" alt="face">
</picture>
I've been putting this site together, and the series of six images (graphic1.jpg, graphic2.jpg etc) I would like to put into a sort of frame, like the attached image, so that the text always stays under the image, even on mobile if the images were squeezed down single file, and also to give some visual clarity to which bit of text goes to what image.
I'm also having trouble with the two buttons at the bottom of the page centering, despite the fact that I'm using the center code.
Also, is there a resource I can be pointed to to set the width of the nav-bar to a maximum, so that the site can have edges and a background behind/outside of that? I think there's something up with my code there.
Thanks for any help you can provide!
Brookes
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tribal Droid Studio</title>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="twelve columns centered">
<nav class="top-bar">
<ul class="title-area">
<li class="name"><h1>Tribal Droid Studio</h1></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li>Visual Development</li>
<li>Sign Work</li>
<li>Our Process</li>
<li>Contact Us</li>
<li>About Tribal Droid</li>
</ul>
</section>
</nav>
<div class="row">
<div class="row">
<div class="large-5 columns">
<h2>Tribal Droid Studio</h2>
<p> asdf asd fasdfasdf asfghwgreqtrgafdbsfgqeth asdf gqfad </p>
</div>
<div class="large-7 columns">
</div>
<div class="large-12 columns">
<img src="img/tribalhead3.jpg"/>
</div>
<hr />
<div class="row">
<h2>Why Tribal Droid Studio?</h2>
<div class="large-12 columns">
<ul class="large-block-grid-3">
<li><img src="img/graphic1.jpg" />Graphic Design, Logo Design, and Branding all go into creating a visual identity.</li>
</panel>
<li><img src="img/graphic2.jpg" />But it can be hard to get noticed in a sea of things demanding attention.</li>
<li><img src="img/graphic3.jpg" />You may find developing one of your own to be lacking in professionalism or soul.</li>
<li><img src="img/graphic4.jpg" />At the heart of your visual identity is a story.</li>
<li><img src="img/graphic5.jpg" />Tribal Droid Studio is a team of artists and storytellers determined to turn your visions into visuals.</li>
<li><img src="img/graphic6.jpg" />Once your identity is ready, we have the signmaking tools and experience to bring it to life.</li>
</div>
<div class="row">
<divclass="small-8 small-centered columns">
<a class="button round"="contact.html">Contact us to get started!</a>
<a class="button round"="#">View our gallery of work</a>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.your-class').slick({
setting-name: setting-value
});
});
</script>
<script>
$(document).foundation();
</script>
</body>
</html>
![what I'd like the images and text to do together (font unimportant)][1]
First I'd go through and check your syntax... <divclass="small-8... is invalid. This can cause a break in the layout. Also... check your divs with "row" classes as it seems there are a lot of extras in this example...
I count 9 open <div> tags and only 6 close /div> tags...
For your image issues, set up some sort of css for the images to position them as you need, and then place that image, and the text for it, within a block element on the page. Right now your text is free to flow within the <li> tag and the image is free to float as well. Without some sort of container around them you are going to get separation.
I'm working on this website.
www.firmtechnologysolutions.us
I'm having a bizarre problem. I'm doing some fixes for css and navs right now. Whenever I click the navs like #services or #about it causes my divs to shift. I suspect its because I have them set up relative to each other. Is there some way to correct this problem?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Firm Technology Solutions</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css.css">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="home main" style="display: block;">
<div class="content">
<ul class="nav-links">
<li>Home</li>
<li>Services</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div id ="mainContainer" class ="home-slide slide">
<div id = "Logo">
<img src="images/ftslogo.png">
<h1>Managed Information Services for Small Business</h1>
<h2>Simple & Affordable IT Solutions to get you up and running</h2>
<div class ="contactButton">
<img src="images/contactButton.png">
</div>
</div>
<div id ="mainContainer2"></div>
<div id = "mainContainer3"></div>
<div id ="about" class ="about-slide slide">
<h1>At Firm Technology Solutions, we are all about customer service. <br> We know that our customer's time is valuable.<br> Waiting around all day to get a fix on a minor problem on your email or server means you lose money. <br>Our service creed is: efficency.<br> We get on your problem as soon as you report it and try to resolve it ASAP.</h1>
<p>Simple Solutions</p>
<h2>We determine with our clients what kind of technology would fit <br>
their business best by creating an action plan.
</h2>
<p>Affordable Solutions</p>
<h2>After we create our action plan we determine where we can cut costs for <br> deployment, overhead, and matainence costs. </h2>
<p>The Firm Gauruntee</p>
<h2>We gaurntee our work 100%. <br> As a locally based New Jersey business we understand that our clients don't want to talk to someone 2000 miles away.<br> On top of our remote administration service. <br>We offer full in person consultations to handle everything from A to Zip.</h2>
</div>
<div ="services" class ="services-slide slide" >
<h1>Services</h1>
</div>
<div id = "serviceIcons">
<div class = "icon1">
<img src="images/icon1.png">
<p>Managed Information Services</p>
</div>
<div class ="icon2">
<img src="images/icon2.png">
<p>Networking</p>
</div>
<div class ="icon3">
<img src="images/icon3.png">
<p>Remote Services</p>
</div>
<div class="icon4">
<img src="images/icon3.png">
<p>Web Design</p>
</div>
</div>
<div id = "contacts" class ="contact-slide slide">
<h3>Contact us for more information!</h3>
<form id="form1" name="form1" method="post" action="">
<p>
<label for="Name">Name</label>
<input name="Name" type="text" id="Name" size="40" />
</p>
<p>
<label for="Email">Email</label>
<input name="Email" type="text" id="Email" size="40" />
</p>
<p>
<label for="Discription">Tell us about the job<br />
</label>
<textarea name="Discription" id="Discription" cols="50" rows="10"></textarea>
</p>
</form>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="http://www.elli.nu/potatis/js/jquery.backstretch.min.js"></script>
<script>
$.backstretch("http://www.wallpapersmood.com/uploads/2010-09/green-plants-nature-wallpaper/1285552282-AE04VJ2.jpg");
</script>
</body>
</html>
thanks!