I'm making a blog. I have couple of pages on it:
-Home
-New post
etc.
So i want titles to be different size on those pages. To be specific i want "Home" font-size to be 45 and "New post" font-size to be 24 if the page is "index" and if the page is "new" i want it to be reverse. How to do that? Maybe specify somehow in "base" file? Or i have to somehow alter it in "new" file?
Pictures of the web-site:
Here's the code:
__base.html
$def with (page)
<html>
<head>
<title>S. Gera | Vision</title>
<style>
#menu {
width: 200px;
float: right;
}
</style>
</head>
<body>
<ul id="menu">
<li><a style="font-size: 45; text-decoration: none" href="/">Home</a></li>
<li><a style="font-size: 24; text-decoration: none" href="/new">New Post</a></li>
</ul>
$:page
</body>
</html>
__index.html
$def with (posts)
<html>
<h1 style="color: Grey; font-family: Georgia; text-align: Left">Blog posts</h1>
<ul>
$for post in posts:
<li>
<strong> <a style="color: Black; text-decoration: none; font-size: 18" href="/view/$post.id">$post.title</a> </strong>
<a style="color: Blue; font-size: 15">| $datestr(post.posted_on)</a>
<a style="color: Red; font-size: 11; font-family: Arial; text-decoration: none" href="/edit/$post.id">(Edit)</a>
</li>
</ul>
</html>
__new.html
$def with (form)
<html>
<h1 style="color: Grey; font-family: Georgia; text-align: Left">New Blog Post</h1>
<form action="" method="post">
$:form.render()
</form>
<html>
__view.html
$def with (post)
<h1>$post.title</h1>
$datestr(post.posted_on)<br/>
$post.content
__edit.html
$def with (post, form)
<html>
<h1>Edit $form.d.title</h1>
<form action="" method="post">
$:form.render()
</form>
<h2>Delete post</h2>
<form action="/delete/$post.id" method="post">
<input type="submit" value="Delete post"/>
</form>
</html>
If you want to use a common base, yet do different things based on which template is being used, you'll want to parameterize base, and set the value you want in the template file & have it used in the base.
For example, consider having base be altered such that each menu item will take a class. If page.selected_menu matches, then it sets the class to active, otherwise, the class is set to "".
=== base.html ===
...
<ul id="menu">
<li>
<a class="$('active' if page.selected_menu == 'home' else '')"
href="/">Home</a></li>
<li>
<a class=$('active' if page.selected_menu == 'new' else '')"
href="/new">New Post</a></li>
</ul>
...
Use css to display ul>li>a.active differently from ul>li>a.
Then, in your templates, set the value for the menu you'd like to be set to "active". For example:
=== new.html ===
$var selected_menu: new
=== home.html ===
$var selected_menu: home
var variables defined in templates are available as attributes within the base template.
Related
I would like to make the form on my web page larger on my screen. I have searched up ways to do this but none of the properties I set work. HTML:
{% block body %}
<div id='title'>
<h1>
VISUALIZER2D
</h1>
</div>
<div id='subheading'>
<h2>
Enter a YouTube URL below to start!
</h2>
</div>
<form action='/' method='post'>
<div id='input'>
<input name='link' placeholder='Enter YouTube URL' type ='text'>
</div>
<div>
<button type='submit'>Next</button>
</div>
</form>
{% endblock %}
CSS:
{% block style %}
body
{
background-color: #252C3E;
text-align: center;
font-family: 'Courier';
}
#input
{
font-size: 20px;
}
#title
{
color: white;
font-size: 40px;
}
#subheading
{
color: white;
}
{% endblock %}
What am I missing? If I set a height to me #input tag the invisible box around the form gets larger but not the form itself.
You can simply use textarea instead of an input field. It work the same way as input works
Also, you can increase the number of rows and col to increase it size as you want to.
Run snippet below
body {
background-color: #252C3E;
text-align: center;
font-family: 'Courier';
}
#title {
color: white;
font-size: 40px;
}
#subheading {
color: white;
}
<div id='title'>
<h1>
VISUALIZER2D
</h1>
</div>
<div id='subheading'>
<h2>
Enter a YouTube URL below to start!
</h2>
</div>
<form action='/' method='post'>
<div id='input'>
<textarea placeholder='Enter YouTube URL' id="link" rows="4" cols="50">
</textarea>
</div>
<div>
<button type='submit'>Next</button>
</div>
</form>
I am trying to get a similar look like Reddit or HackerNews voting where up/down arrows are get stacked. What I tried rather gives me following look:
My Code is given below:
HTML
<ul class="list-unstyled">
<li class="entry">
<div class="row">
<div class="col-sm-2 entry__rank">
<span class="pull-left">1.</span>
<i class="fa fa-icon fa-caret-up fa-2x pull-left"></i>
<i class="fa fa-icon fa-caret-down fa-2x pull-left"></i>
</div>
<div class="col-md-9">
<span class="entry__title">
This is a great billboard
</span>
</div>
</div>
</li>
</ul>
CSS
.entry {
padding: 5px;
margin-bottom: 20px;
}
.entry__rank {
font-size: 20px;
font-weight: bold;
color: grey;
padding: 5px 0 5px 0;
margin-top: -10px !important;
}
.entry__title {
font-weight: bold;
font-family: Helvetica Neue, Helvetica, Arial;
font-size: 16px;
}
.entry__title a {
color: #285ddf !important;
}
Desired Look
Event something like Stackover flow voting would work.
Edited to provide a better plugin:
Using the following will probably be a better and less bloated solution:
https://github.com/janosgyerik/upvotejs
Reddit actually has their code available for people to take and basically create their own Reddit clone if they wanted:
https://github.com/reddit/reddit
Look through this and you'll probably find exactly what you're looking for.
U can use html button and any javascript variable to display the count.
In the button tag add onclick property and call a JavaScript method which increases the variable value on click of button
Similar approach for down count just decrease the value in the method
https://codeshare.io/Xv5xB
Use bootstrap lib [http://getbootstrap.com/] which has more features & follow this code.
<div className = "row">
<div className = "u-full-width u-cf link-item">
<div className = "u-pull-left link-vote">
<div className = "u-pull-left vote-buttons">
<div className = "arrow-up upvote" onClick={this._onVoteUp}></div>
<div className = "arrow-down downvote" onClick= {this._onVoteDown}></div>
</div>
<span className="points">{this.state.points}</span>
</div>
<div className="u-pull-right link-content" onClick={this._onLineClick}>
{this.props.title}
<span className="u-pull-right info">{domain}</span>
</div>
</div>
</div>
Write method for UpVote , DownVote & etc.
I have a simple index.html file which have the code like following:
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Fruktur' rel='stylesheet' type='text/css'>
<style type="text/css">
.container {
background-color: #022e3a;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
font-style: normal;
color: #ffffff;
}
#header {
font-family: 'Fruktur', cursive;
font-size: 36px;
color: #ffffff;
background-color: #065e76;
}
</style>
<head>
<body class="container">
<div id="header">
<p>DaamJani.com</p>
</div>
<div>
<form method="GET">
Ask for price(e.g.Onion)
<input type="text" name="search">
<input type="submit" value="Submit" />
</form>
</div>
<br/>
<div>No. of elements : {{ prices|length }}</div>
<div>
<table border='1'>
<tr>
<td>Item</td><td>Price</td><td>Per Amount</td><td>Where</td>
</tr>
{% for price in prices %}
<tr>
<td>{{price.name}}</td><td>{{price.price}}</td><td>{{price.quantity}}</td><td>{{price.source}}</td>
</tr>
{% endfor %}
</table>
</div>
</body>
</html>
Though I have added this line recently: <div>No. of elements : {{ prices|length }}</div> the app doesn't seem to change once I run the server. I tried clearing the cache and reloading it.
I tried removing the entire div containing the table but it shows the same view as before.
What's wrong with this?
I'm not sure if this is possible, but I'm attempting to set up an ordered list with checkboxes in front of each list item, something like this:
I would like this to have a checkbox to the left of the item number and wrap to the first word in the sentence, not to the item number.
Same deal as item number 1, want a checkbox to the left of the item number and wrap to first word in sentence.
I've figured out the indenting stuff using this question, but haven't been able to get the checkboxes to show up on the same line as the <li>. Is there any way to do this?
Here's a jsFiddle I've been messing with.
http://jsfiddle.net/9v97V/2/
You can do something like this. You put the input inside the list item, then absolute position it so it appears before the list item.
Most relevant CSS:
li input
{
position: absolute;
margin-left: -40px;
margin-top: 5px;
}
I've made a new jsFiddle based on yours: http://jsfiddle.net/3VESY/1/
Basicly I've put the text in a span (could also be a div) and a float on the input. The span has a padding-left to create the indent.
Hope that's what you needed?
ol {
list-style-type:decimal;
margin-left:20px;
}
ol li span {
display:block;
padding-left:30px;
}
input
{
float:left;
}
edit updated fiddle: http://jsfiddle.net/3VESY/1/ to add numbers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
form{
border: 2px solid #f1f1f1;
text-align: left;
}
ol{
margin-left:40%;
font-weight:bold;
}
</style>
</head>
<body>
<div class="container">
<form action="/action.php">
<ol type="A" style="color: red" >
<li><p >CSE</p></li>
<ol type="i" style="margin-left:-13%; color: blue">
<li>
<input type="checkbox" id="cb1" name="op1">
<label for="cb1"> Artificial Intelligence</label>
</li><br>
<li>
<input type="checkbox" id="cb2" name="op2">
<label for="cb2">Machine Learning</label>
</li>
</ol><br>
<li><p>ECE</p></li>
<ol type="A" style="margin-left:-13%; color: blue">
<li>
<input type="checkbox" id="cb3" name="op3">
<label for="cb3">Embedded Systems</label>
</li><br>
<li>
<input type="checkbox" id="cb4" name="op4">
<label for="cb4">IOT</label>
</li><br>
</ol>
</ol>
</form>
</div>
</body>
</html>
As my title says I have no clue why the CSS will work on everything but the label tag.
Here is my code for file register:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<center> <b> Registration Page </b> </center>
</head>
<br>
<body>
<img src = "website_demo_pic_1.jpg" />
<ul class = "SiteMap">
<li> <a href = "index.html" >Home Page</a>
<br>
<li><a href = "register.html" >Register</a>
<br>
<li><a href = "login.html" >Log In</a>
<br>
</ul>
<form id = "Form1" action = "submit.php" method = "post">
<p class="whitetext"><label for = "username">Username :</label>
<input type = "text" name = "Username" id="username"></p>
<p class="whitetext"><label for = "password">Password :</label>
<input type = "password" name = "Password" id="password"></p>
</form>
</body>
</html>
Here is my code for login:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<center> <b> Log In Page </b> </center>
</head>
<br>
<body>
<img src = "website_demo_pic_1.jpg" />
<ul class = "SiteMap">
<li> <a href = "index.html" >Home Page</a>
<br>
<li><a href = "register.html" >Register</a>
<br>
<li><a href = "login.html" >Log In</a>
<br>
</ul>
<form id = "Form2" action = "submit.php" method = "post">
<label for = "username2">Username :</label>
<input type = "text" name = "Username" id="username2">
<br>
<label for = "password2">Password :</label>
<input type = "password" name = "Password" id="password2">
<br>
</form>
</body>
</html>
Here is my CSS file:
img
{
width: 100%;
}
body
{
background-color: black;
}
label
{
width: 4em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block
}
p.whitetext
{
color: white;
}
ul.SiteMap
{
float: left;
}
As far as I can tell the code is right yet the text boxes wont line up meaning that something weird is going on with label.
Here's a jsFiddle with your code, slightly modified: http://jsfiddle.net/MzsWH/
<img src = "website_demo_pic_1.jpg" />
<ul class = "SiteMap">
<li> <a href = "index.html" >Home Page</a>
<br>
<li><a href = "register.html" >Register</a>
<br>
<li><a href = "login.html" >Log In</a>
<br>
</ul>
<form id = "Form2" action = "submit.php" method = "post">
<label for = "username2">Username :</label>
<input type = "text" name = "Username" id="username2">
<br>
<label for = "password2">Password :</label>
<input type = "password" name = "Password" id="password2">
<br>
</form>
<STYLE>
img{
width: 100%;
border:1px solid #333;
height:40px;
}
body{
background-color: #CCC;
}
label {
/*width: 4em;*/
width:6em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block
}
p.whitetext{
color: white;
}
ul.SiteMap{
float: left;
border:1px solid #666;
}
</STYLE>
The only thing I see regarding your LABEL attribute is that your width for the labels are too small. The text inside the label is longer the width, which is causing it to wrap, and make everything look weird.
All I did was change the width from 4em to 6em.
Second of all, your HTML has some issues. There's a CENTER tag in your HEAD tag, did you mean TITLE? Also, there are line break BR tags between list element (LI) tags. I would recommend as Shaquin said in his comment, run your page through the W3C validator so you can help update your HTML.
I hope that helps!
Cheers!