We Keep Coding

How to change hover action to click action?

Hello people I created two divs and when i hover to h3 shows me something. I want display this only when i click on h3. How i can do this?
How to change hover to click? When i do this doesn't working.
Sorry for my bad language.
$(document).ready(function () {
$('li.requirement').hover(function () {
$(this).find('span').show();
}, function () {
$(this).find('span').hide();
});
});
#wrap {
background: #e7e7e7;
padding: 0px;
text-align: center;
width: 100%;
}
#left, #right {
background: #ccc;
display: inline-block;
padding: 20px;
}
li {
list-style-type: none;
padding: 0px;
margin: 0px;
}
span.lewy {float:right; background:red; padding:20px;}
span.prawy {float:left; background:red; padding:20px;}
h3 {text-align:center;}
h3.praw {float:left;}
h3.lew {float:right;}
.calosc {max-width:500px; margin: 0 auto; border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<div id="left"><div class="lef">
<li class="requirement" id="requirement_1">
<h3 class="lew">SPR</h3>
<span class="fr drag lewy" style="display:none;">1 kontakt</span>
</li>
</div></div>
<div id="right"><div class="praf">
<li class="requirement" id="requirement_2">
<h3 class="praw">SPR 2</h3>
<span class="fr drag prawy" style="display:none;">2 kontakt</span>
</li>
</div></div>
</div>

You can use .on('click', function(){}); and then inside this function you check to see if it's already visible or not. Take a look here
EDIT
As you want to be just the <h3> clickable, i made an adjustment in the code below, and now you need to cehck for the visibility of the h3 parent, because now the context of this is now h3 and no more the li
$(document).ready(function () {
$('.clickableH3').on('click', function () {
if ($(this.parentElement).find('span').is(":visible")){
$(this.parentElement).find('span').hide();
}else{
$(this.parentElement).find('span').show();
}
});
});
#wrap {
background: #e7e7e7;
padding: 0px;
text-align: center;
width: 100%;
}
#left, #right {
background: #ccc;
display: inline-block;
padding: 20px;
}
li {
list-style-type: none;
padding: 0px;
margin: 0px;
}
span.lewy {float:right; background:red; padding:20px;}
span.prawy {float:left; background:red; padding:20px;}
h3 {text-align:center;}
h3.praw {float:left;}
h3.lew {float:right;}
.calosc {max-width:500px; margin: 0 auto; border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<div id="left"><div class="lef">
<li class="requirement" id="requirement_1">
<h3 class="lew clickableH3">SPR</h3>
<span class="fr drag lewy" style="display:none;">1 kontakt</span>
</li>
</div></div>
<div id="right"><div class="praf">
<li class="requirement" id="requirement_2">
<h3 class="praw clickableH3">SPR 2</h3>
<span class="fr drag prawy" style="display:none;">2 kontakt</span>
</li>
</div></div>
</div>

Well you see, in your js code, where you have "hover" ? Well you type "click" there instead ...

The jQuery hover function can have 2 parameters, which is your case. The first one for the hover, the second is for the unhover
So if you want to be able to close and hide on click I advise to use some css and use toggleClass. But if you wan to keep only javascript you can do like this:
$(document).ready(function () {
$('li.requirement').click(function () {
var $elm = $(this);
if( $elm.hasClass('showed') ){
$elm.find('span').removeClass('showed').hide();
}else{
$elm.find('span').addClass('showed').show();
}
});
});

How to display a new webpage in html by using inputs from both dropdown list and checkbox?

I am new to CSS and java script coding.
I have created a webpage that displays hotels according to the place selected in dropdown list.
I have a preference section in my web page that has a number of checkbox preferences.
I want it to work as when a user selects a place from the dropdown list then he must select any checkbox preference that he wants and then the new webpage should get displayed.
In my code the input (place selected) in the dropdown list is not connected to the preferences.
How can I achieve this implementation?
Below is my html code:
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript">
function is_checked()
{
var Pool= document.getElementById('Pool').checked;
var Gym= document.getElementById('Gym').checked;
var Beach= document.getElementById('Beach').checked;
if(Pool==false && Gym==false && Beach==false)
{
alert('Please check a category')
return false;
}
else if(Pool==true)
{
alert(http://http://localhost/reviews/codeReviews.php)
return true;
}
}
function formaction(checkbox)
{
document.getElementById("myForm").action = checkbox.value;;
}
</script>
</head>
<body background="Tring.jpg">
<div class="wrapper">
<div class="heading">
<h1>Hi</h1>
</div>
<ul class="navigation">
<li>HOME</li>
<li>LOGIN</li>
<li>SIGN UP</li>
</ul>
<div id="container">
<div id="banner">
<img src="mtp.png">
<font color="#00e6ac"</font>
</div>
</div>
<div id="content">
<div id="stay"
<h1>STAY</h1>
<select onchange="location = this.options[this.selectedIndex].value;">
<option>Select a place</option>
<option value="http://localhost/dubai/codeDubai.php">Dubai (UAE)</option>
<option value="http://localhost/canberra/Code.php">CANBERRA (AUS)</option>
<option value="http://localhost/newyork/Code.php">NEWYORK (NEW)</option>
</select>
<br>
<p2>Preferences</p2>
<form action="demo_form.asp" method="get" onsubmit="return is_checked()">
<input type="checkbox" name="hotel" value="Pool" id="pool"> Pool <br>
<input type="checkbox" name="hotel" value="Gym" checked="checked"> Gym <br>
<input type="checkbox" name="hotel" value="Beach" id="Beach"> Beach <br>
<input type="submit" value="Submit">
</div>
</body>
</html>
My css code is:
body{
padding:0;
margin:0;
background-image: url("Tring.jpg");
background-repeat: no-repeat;
}
wrapper{
width:600px;
background:#eee;
margin: 0 auto 0 auto;
}
.navigation{
float:right;
position:relative;
top:-150px;
}
li{
list-style:none;
float:left;
margin-right:50px;
font-size: 14;
font-family: serif;
color:white;
}
.heading{
height:100px;
background:lightblue;
padding:20px;
}
.navigation a{
color:white;
text-decoration: none;
font-size: 14px;
font-family: serif;
}
.navigation a:hover{
color:black;
}
.container{
width:1000px;
height:400px;
}
.banner{
background: url(mtp.png);
background-size: cover;
width: 1000px;
height:400px;
position: fixed;
float:center;
top:300px;
}
.content{
}
.stay{
min-height: 500px;
background: rgba(33, 33, 33, .9);
width: 300px;
float: left;
position: relative;
}
.dine{
min-height: 500px;
background: rgba(33, 33, 33, .9);
width: 300px;
float: left;
position: relative;
}
.shop{
min-height: 500px;
background: rgba(33, 33, 33, .9);
width: 300px;
float: left;
position: relative;
}
.attract{
min-height: 500px;
background:#ddd;
width: 300px;
float: left;
position: relative;
}
.sidebar{
width: 300px;
float:right;
background:#ddd;
min-height: 400px;
}
.footer{
clear:both;
background:black;
height:20px;
color:white;
text-align:center;
padding:10px;
}

I see two problems but I'm not sure whether either of them will get your form to work correctly.
function formaction(checkbox)
{
document.getElementById("myForm").action = checkbox.value;;
}
The formaction function needs a corresponding div with the id "myForm" in your HTML order to work.
<div id="content">
<div id="stay"
<h1>STAY</h1>
The id="stay" div needs to be closed.

Jquery add checked radio parent div class

I have one question about add class.
I have created this DEMO from codepen.io .
In this demo you can see there are tree radio button. When you click blue button after checked radio button then the .checkedWrap text will be changing.
I want to add also some class in this .checkedWrap .
So when you click
<div class="row demo">
<input type="radio" id="checked" name="checkit" class="cbx hidden"/>
<label for="checked" class="lbl"></label>TExt 1
<div id="1" class="addthisClassone"></div>
</div>
there is also <div id="1" class="addthisClassone"></div> i want to add addthisClassone from the .checkedWrap also like this:
<div class="checkedWrap addthisClassone"></div>
<div class="checkedWrap addthisClasstwo"></div>
<div class="checkedWrap addthisClasstree"></div>
How can i do that after clicking blue button. Anyone can help me in this regard.
CSS
<div class="container">
<div class="checkedWrap addthisClassone"></div>
<div class="checkList">
<div class="row demo">
<input type="radio" id="checked" name="checkit" class="cbx hidden"/>
<label for="checked" class="lbl"></label>TExt 1
<div id="1" class="addthisClassone"></div>
</div>
<div class="row demo">
<input type="radio" id="checked1" name="checkit" class="cbx hidden"/>
<label for="checked1" class="lbl"></label>fdsaf asdfasd fasdf
<div id="2" class="addthisClasstwo"></div>
</div>
<div class="row">
<input type="checkbox" id="unchecked_disabled" class="cbx hidden" disabled/>
<label for="unchecked_disabled" class="lbl">fdsafasf</label>
<div id="3" class="addthisClasstree"></div>
</div>
</div>
<div class="Click">Click ok to add checked radio text from the red div</div>
</div>
JS
$('body').on('click', '.Click', function(){
var checked_radio_text = $('input[name=checkit]:checked').parent().text();
$('.checkedWrap').text(checked_radio_text);
});

I suggest to add an extra general class instead of ids and data attributes to store the classes you want to change on every radio button, check the example bellow.
Note : To add class you can use addClass() function but that will append classes so every time you click new class will be added, you could reset class attribute using removeClass() on every click and add default class checkedWrap plus the new class :
$('.checkedWrap').removeClass().addClass('checkedWrap '+additional_class);
Hope this helps.
Snippet
$(document).ready(function() {
$('body').on('click', '.Click', function(){
var checked_radio_text = $('input[name=checkit]:checked').parent().text();
var additional_class = $('input[name=checkit]:checked').parent().find('.global-class').data('additional-class');
$('.checkedWrap').text(checked_radio_text);
$('.checkedWrap').removeClass().addClass('checkedWrap '+additional_class);
});
});
.container {
width:400px;
height:auto;
box-shadow:rgba(0, 0, 0, 0.2) 0 13px 13px 0;
-webkit-box-shadow:rgba(0, 0, 0, 0.2) 0 13px 13px 0;
-moz-box-shadow:rgba(0, 0, 0, 0.2) 0 13px 13px 0;
margin:0px auto;
margin-top:10px;
}
.checkedWrap {
width:100% !important;
float:left;
padding:15px;
background-color:#b71c1c;
box-sizing:border-box;
}
.checkList {
width:100%;
padding:10px;
box-sizing:border-box;
float:left;
}
.lbl {
float:left;
position: relative;
display: block;
height: 10px;
width: 34px;
background: #898989;
border-radius: 100px;
cursor: pointer;
transition: all 0.3s ease;
}
.lbl:after {
position: absolute;
left: -2px;
top: -5px;
display: block;
width: 20px;
height: 20px;
border-radius: 100px;
background: #fff;
box-shadow: 0px 3px 3px rgba(0,0,0,0.05);
content: '';
transition: all 0.3s ease;
}
.lbl:active:after { transform: scale(1.15, 0.85); }
.cbx:checked ~ label { background: #6fbeb5; }
.cbx:checked ~ label:after {
left: 20px;
background: #179588;
}
.cbx:disabled ~ label {
background: #d5d5d5;
pointer-events: none;
}
.cbx:disabled ~ label:after { background: #bcbdbc; }
.container {
position: absolute;
top: 250px;
left: 50%;
transform: translate(-50%, -50%);
}
.demo {
padding:30px;
width:100%;
overflow:hidden;
padding:5px;
box-sizing:border-box;
text-indent:10px;
}
.hidden { display: none; }
.Click {
float:left;
margin-top: 30px;
color: #fff;
height:30px;
background-color:#0288d1;
color:#ffffff;
width:100%;
box-sizing:border-box;
text-align:center;
line-height:30px;
font-family: helvetica, arial, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
cursor:pointer;
}
.addthisClassone {
width:10px;
height:10px;
background-color:blue;
}
.addthisClasstwo {
background-color:green;
width:10px;
height:10px;
}
.addthisClasstree {
background-color:black;
width:10px;
height:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="checkedWrap addthisClassone"></div>
<div class="checkList">
<div class="row demo">
<input type="radio" id="checked" name="checkit" class="cbx hidden"/>
<label for="checked" class="lbl"></label>TExt 1
<div data-additional-class='addthisClassone' class="global-class"></div>
</div>
<div class="row demo">
<input type="radio" id="checked1" name="checkit" class="cbx hidden"/>
<label for="checked1" class="lbl"></label>fdsaf asdfasd fasdf
<div data-additional-class='addthisClasstwo' class="global-class"></div>
</div>
<div class="row">
<input type="checkbox" id="unchecked_disabled" class="cbx hidden"/>
<label for="unchecked_disabled" class="lbl">fdsafasf</label>
<div data-additional-class='addthisClasstree' class="global-class"></div>
</div>
</div>
<div class="Click">Click ok to add checked radio text from the red div</div>
</div>

addClass Adds the specified class(es) to each element in the set of
matched elements.
Try out this
$('body').on('click', '.Click', function(){
var checked_radio_text = $('input[name=checkit]:checked').parent().text();
$('.checkedWrap').text(checked_radio_text);
$("#checkedWrap").addClass("addthisClasstree");
});

If you want to add a class with JavaScript, you can use jQuery, it has a function for that.
Check addClass(). It adds a new class to a particular jQuery DOM Element.

How to make a cross close sign in popup

I have used a popup script so that popup appear on my screen when I load my html file now I want a close sign on the top right corner on the popup screen like in the picture shown below
The code I have used is
("jsfiddle.net/sGeVT/10/")
this script code is an example of my code I have further modified it but the basic of the popup is same.
Hope you understand and can give solution.

(1) Add a span with a x inside, × the best looking one IMO.
<span class="deleteMeetingClose">×</span>
(2) Set up some styles for it.
.deleteMeetingClose {
font-size: 1.5em;
cursor: pointer;
position: absolute;
right: 10px;
top: 5px;
}
(3) Add it to the jQuery code along with other close triggers.
$('#overlay, .deleteMeetingCancel, .deleteMeetingClose').click(function () {
//close action
});
Updated demo: http://jsfiddle.net/zj0yL9me/
$('.deleteMeeting').click(function () {
$('#overlay').fadeIn('slow');
$('#popupBox').fadeIn('slow');
$('#popupContent').fadeIn('slow');
});
// added .deleteMeetingClose into the selectors
$('#overlay, .deleteMeetingCancel, .deleteMeetingClose').click(function () {
$('#overlay').fadeOut('slow');
$('#popupBox').fadeOut('slow');
$('#popupContent').fadeOut('slow');
});
$('.deleteMeetingButton').click(function () {
$('#popupContent').fadeOut('slow');
$('#deleteMeetingConfirmDeleted').fadeIn('slow');
$('#overlay').delay(1300).fadeOut('slow');
$('#popupBox').delay(1300).fadeOut('slow');
$('#deleteMeetingConfirmDeleted').fadeOut('slow');
});
#overlay {
display:none;
opacity:0.5;
background-color:black;
position:fixed;
width:100%;
height:100%;
top:0px;
left:0px;
z-index: 999;
}
#popupBox {
display:none;
position: relative;
margin-left:auto;
margin-right:auto;
margin-top:100px;
width:600px;
height: 500px;
color: #000000;
border:5px solid #4E93A2;
-moz-border-radius:8px;
-webkit-border-radius:8px;
background-color:#FFFFFF;
z-index: 1000;
}
#popupContent {
display:none;
font-family:Arial, Helvetica, sans-serif;
color: #4E93A2;
margin-top:30px;
margin-left:30px;
margin-right:30px;
}
.deleteMeetingButton {
clear:both;
cursor:pointer;
width:90px;
height:30px;
border-radius: 4px;
background-color: #5CD2D2;
border:none;
text-align:center;
line-height:10px;
color:#FFFFFF;
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
}
.deleteMeetingCancel {
clear:both;
cursor:pointer;
width:90px;
height:30px;
border-radius: 4px;
background-color: #5CD2D2;
border:none;
text-align:center;
line-height:10px;
color:#FFFFFF;
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
content:"XXXX";
}
#deleteMeetingConfirmDeleted {
display:none;
}
/* added code below */
.deleteMeetingClose {
font-size: 1.5em;
cursor: pointer;
position: absolute;
right: 10px;
top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="content">Content Obscured By Overlay
<button class="deleteMeeting">Delete</button>
</div>
<div id="overlay"></div>
<div id="popupBox">
<div id="popupContent">
<i>Are you sure you want to delete this meeting?</i>
<br />
<span style="text-align:center;color:black;font-size:40px;">YO</span>
<br />
<button class="deleteMeetingButton">Delete</button>
<button class="deleteMeetingCancel">Cancel</button>
</div>
<div id="deleteMeetingConfirmDeleted">Meeting Deleted</div>
<span class="deleteMeetingClose">×</span> <!-- <= added this line -->
</div>

First, put in image element in your popup div
<img id="ClosePopup" src="insert-image-url-here"/>
Then, style it with position:absolute. Also, make sure the popup div has position:relative
#ClosePopup{
position: absolute;
right:0px;
}
Finally, attach your click handler
$('#ClosePopup').click(function(){
$('#overlay,#popupBox,#popupContent').fadeOut('slow');
});
See it working in this fiddle
If you want a pure css solution without images, see
Pure css close button

Simply create a span element containing × char for the x, put some style and bind the click event to the popup close action:
HTML
<span class="cancel-icon" >×</span>
CSS:
.cancel-icon{
float:right;
cursor:pointer;
}
JS
$('.cancel-icon').click(function () {
//Close the popup
});
Using your Fiddle: http://jsfiddle.net/sGeVT/118/

Editing tumblr theme html to remove some elements

This is my tumblr url(custom domain):
http://intchauhan.com/
I want to remove "Follow intchauhan" and "tumblr." buttons that are on the right side.
This is the html of the theme
:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="color:Background" content="#ffffff"/>
<meta name="color:Title" content="#000000"/>
<meta name="color:Text" content="#202020"/>
<meta name="color:Minor text" content="#999999"/>
<meta name="color:Line" content="#EEEEEE"/>
<meta name="color:Link" content="#49D28D"/>
<meta name="color:Link hover" content="#3FB67A"/>
<meta name="color:Top line" content="#eeeeee"/>
<meta name="color:Bottom line" content="#eeeeee"/>
<meta name="color:Notes background" content="#f7f7f7"/>
<meta name="if:Center all" content="0"/>
<meta name="if:Center links" content="1"/>
<meta name="if:Large Photoset" content="0"/>
<meta name="font:Heading" content="Futura"/>
<meta name="image:Header" content="0">
<meta name="if:Show notes on permalink pages" content="1">
<meta name="if:Ask Link" content="0" />
<meta name="if:Submit Link" content="0" />
<meta name="if:Stretch small images" content="0" />
<meta name="text:Caption size" content="14px"/>
<meta name="text:Title size" content="20px"/>
<meta name="text:Header size" content="85px"/>
<meta name="font:Description" content="Georgia"/>
<meta name="font:Body" content="Georgia"/>
<meta name="text:Disqus Shortname" content=""/>
<title>{Title}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
{block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
<link rel="shortcut icon" href="{Favicon}"/>
<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>
<style type="text/css">
body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,dl,dt,dd,ul,ol,li,th,td,form,fieldset,legend,input,textarea{margin:0;padding:0;}
html{font-size:{text:Caption size};}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}
h1,h2,h3,h4,h5,h6{font-size:12px;font-weight:normal; padding:5px 0;}
abbr,acronym{border:0;}
body {background:{color:Background}; color:{color:Text}; font:1em/1.5 {font:Body}; margin:0 0 0 0;}
h1, h3 {font-family:{font:Heading};}
pre,code {font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif}
a:link, a:visited {color:{color:Link}; text-decoration:none;}
a:hover, a:active {color:{color:Link hover};}
#header {color:{color:Minor text}; position:relative; margin:-49 auto; padding-top:40px; width:875px;}
#header h1 {color:{color:Title}; font-weight:bold; text-align:center; font-size:{text:Header size}; line-height:90%; margin-bottom:30px; margin-top:-30px;
letter-spacing:-1px;}
#header h1 a:link, #header h1 a:visited {color:{color:Title}; display:block;}
#header h1 a:hover, #header h1 a:active {color:{color:Link hover};}
#description {font-family:{font:Description}; font-size:{text:Caption size}; text-align:center; line-height:autopx; margin-bottom:20px; margin-top:-5px;}
#header form {margin-bottom:20px;}
#header form input {width:630px;}
#header ul {margin:0 -0.25em 1.5em;}
#header li {list-style:none; text-transform:lowercase;}
#header li a {background:{color:Background}; display:block; padding:0 0.25em;
text-decoration:none;}
#header li a:hover {background:none;}
#container {background-color:{color:Container}; margin:30px auto; padding-top:5px; width:875px}
#container .box img {
max-width: 100%;
}
.logo {
border:0;
margin-bottom:5px;
max-width:875px;
}
.single { width:875px; margin-bottom:10px;}
#posts {background-color:{color:Background}; border-top:1px solid {color:Top line};
border-bottom:1px solid {color:Bottom line}; margin:0px; padding:0px; {block:IfCenterall}text-align:center;{/block:IfCenterall}font-size:{text:Caption size};}
#posts .post {list-style:none; padding-bottom:10px; max-width:875px;
clear:both;}
#posts .content {color:{color:Text}; padding:0; margin-left:0px;}
#footer {margin:0 auto; max-width:875px; padding-bottom:30px;}
#pagination p {font-size:{text:Caption size}; min-width:150px; line-height:autopx; margin:0 0 10px;
white-space:nowrap;}
#pagination p.back {display:inline; text-align:right; float:right; margin-left:20px;}
#pagination p.forward {display:inline; float:left; margin-right:1.5em;}
#pagination a {font-style:italic;}
#pagination .page {text-align:center; font:12px {font:Body};
margin-bottom:20px; text-transform:lowercase;}
#credits {clear:both; display:inline; text-align:center; font-size:12px; color:{color:Minor text}; margin:0; padding:1.5em 0;}
#footer a:hover, #footer a:active {text-decoration:none;}
p {margin-bottom:25px;}
form .submit {height:0; overflow:hidden; display:block;}
.meta {float:left; clear:left; {block:IfCenterall}width:875px{/block:IfCenterall}; font-size:14px; text-align:left; line-height:10px;}
.meta h2 {font-size:14px; margin-bottom:5px; border-bottom:1px solid {color:Line};}
.meta h2 a {text-decoration:none; display:block; padding:0px 0px;}
.meta h2 a:hover {background:none;}
.meta p {color:{color:Minor text}; font-style:italic; margin:0 0 0 1em;
text-indent:-0.75em; text-transform:lowercase;}
p.meta {color:{color:Minor text}; font-style:italic; margin:0;
width:150px; text-indent:-0.75em; text-transform:lowercase;}
.meta a {font-style:normal; white-space:nowrap;}
.meta .plays {font-weight:bold; font-style:normal;}
h3 {font-size:{text:Title size}; line-height:autopx; padding-bottom:20px; font-weight:bold;}
.content a {border-bottom:1px solid {color:Line};}
.content a:hover {border-bottom-width:2px;}
.content .photo a {border:none !important;}
.content ul, .content ol {margin:20px;}
.content ul li {list-style:square;}
blockquote {margin:0 20px 20px; font-style:italic;}
blockquote i, blockquote em, blockquote [lang="ja"] {font-style:normal;}
pre, code {font-size:10px; line-height:12px;}
pre {background:#e1e1e1; margin:15px; padding:10px;
overflow-x:auto;}
pre code {display:block;}
pre i, code i {font-style:normal; color:{color:Minor text};}
ins {text-decoration:none; font-style:italic;}
blockquote ins, em ins, ins em {font-style:normal;}
abbr, acronym, .caps {font-size:12px; letter-spacing:0.1em; word-spacing:0.1em;}
abbr, acronym {text-transform:uppercase;}
.caps {text-transform:uppercase;}
.text {margin-bottom:20px;}
.caption {margin-bottom:20px;}
.nocaption {margin-bottom:-20px;}
.vidcaption {margin-top:120px;}
.post img, .post object, .post embed {max-width:100%; {block:IfStretchsmallimages}
width: 875px;
{/block:IfStretchsmallimages}}
.link-post h3 {padding:0; margin-bottom:18px;}
.photo-post .photo {margin-bottom:19px; margin-top:20px; }
.video-post .video {margin-bottom:0px; margin-top:20px; }
.quote-post .quote {font-family:{font:Body};}
.quote-post .source, .cite
{float:right; margin:0 0 35px 0; text-indent:-1.5em;}
.quote-post .source a:first-child, .cite
{letter-spacing:0;}
.short-quote .quote, .medium-quote .quote, .long-quote .quote
{font-size:{text:Title size}; line-height:autopx; margin:10px 40px 20px 0;}
.audio-post .audio {
display: block;
width:875px;
margin-bottom: 20px;
padding: 0px;
-moz-border-radius: 5px;
border-radius: 5px;}
.chat-post ol {list-style:none; margin:15px 0;}
.chat-post li {margin-left:1.5em; text-indent:-1.5em;}
.chat-post .label {font-weight:bold; padding-right:0.125em;}
.chat-post .speaker {font-style:italic;}
.chat-post .speaker2 .label, .chat-post .speaker4 .label,
.chat-post .speaker6 .label, .chat-post .speaker8 .label
{color:{color:Minor text};}
.chat-post .speaker3 .label, .chat-post .speaker4 .label,
.chat-post .speaker7 .label, .chat-post .speaker8 .label
{text-transform:uppercase; letter-spacing:0.1em;}
.chat-post .speaker5 .label, .chat-post .speaker6 .label,
.chat-post .speaker7 .label, .chat-post .speaker8 .label
{font-family:{font:Heading};}
.day .month {text-transform:uppercase;}
{block:DayPage}.day {font-weight:bold;}{/block:DayPage}
.content.text-post img {
max-width: 100%;
}
.multi {margin-bottom:30px; margin-right:15px; {block:IfCenterall}margin-right:10px; margin-left:10px;{/block:IfCenterall};}
.video embed, .video object, .video iframe {width:875px; height:500px; margin-bottom:-100px;}
.wide_audio iframe {width:875px; }
#comment {
font-size: 10px;
text-align: left;
line-height: 18px;
margin: 0px 0px 0px 0px;
}
#comment a {
text-decoration: none;
color: {color:Caption};
}
#comment a:hover {
text-decoration: none;
color: {color:Link Hover};
}
#dsq-content {
background: rgba(0, 0, 0, .30);
background: url(' ');
padding: 5px 20px 20px 20px;
margin-top: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
a.single_links:last-child { margin-right:0px; }
a.single_links
{display: inline-block; list-style-type: none; margin-right:20px;}
{block:PermalinkPage}
p.answer_form_container { width: 512px; }
ol.notes { width: 875px; list-style-type: none; margin:20px auto; padding: 0; }
ol.notes li.note { background: {color:Notes background}; margin: 0 0 0px 0; padding: 0 4px; }
ol.notes a { color: {color:Links In Notes}; }
ol.notes img.avatar { display: none; }
ol.notes blockquote { margin: 0; }
ol.notes blockquote a { text-decoration: none; }
{/block:PermalinkPage}
a.install {
width: 96px;
height: 20px;
background: url(http://static.tumblr.com/thpaaos/dHHkt0jor/install_theme.png);
display: block;
position: absolute;
top: 26px;
right: 3px;
}
a {
outline: none;
}
{CustomCSS}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
{block:IfLargePhotoset}
<script>
$(document).ready(function(){
$(".photoset").each(function() {
$(this).width('875px');
var newSrc = $(this).attr("src").replace('700','875');
$(this).attr("src", newSrc);
});
$(function(){
var iFrames = $('.photoset');
function iResize() {
for (var i = 0, j = iFrames.length; i < j; i++) {
iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
}
if ($.browser.safari || $.browser.opera) {
iFrames.load(function(){
setTimeout(iResize, 0);
});
for (var i = 0, j = iFrames.length; i < j; i++) {
var iSource = iFrames[i].src;
iFrames[i].src = '';
iFrames[i].src = iSource;
}
} else {
iFrames.load(function() {
this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
});
}
});
});
</script>
{/block:IfLargePhotoset}
</head>
<body>
<div id="container">
<div id="header">
<a href="/">
{block:IfHeaderImage}<h1><img src="{image:Header}" class="logo" /></h1>{/block:IfHeaderImage}
{block:IfNotHeaderImage}<h1>{Title}</h1>{/block:IfNotHeaderImage}</a>
{block:Description}<p id="description">
{Description}
</p>{/block:Description}
<p>
{block:IfCenterlinks}<center>{/block:IfCenterlinks}
{block:HasPages}{block:Pages}
<a class="single_links" href="{URL}">{Label}</a>
{/block:Pages}{/block:HasPages}
{block:SubmissionsEnabled}{block:IfSubmitlink}
<a class="single_links" href="/submit">{SubmitLabel}</a><br>
{/block:IfSubmitlink}{/block:SubmissionsEnabled}
{block:AskEnabled}{block:IfAskLink}
<a class="single_links" href="/ask">{AskLabel}</a>
{/block:IfAskLink}{/block:AskEnabled}
{block:IfCenterlinks}</center>{/block:IfCenterlinks}</p>
</div>
<ol id="posts"><br>
{block:Posts}
<li class="post" id="post{PostID}">
{block:Text}
<div class="meta">
{block:IfCenterall}<center>{/block:IfCenterall}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a>
</h2>{block:IfCenterall}</center>{/block:IfCenterall}
</div><br><br>
<div class="content text-post">
{block:Title}<h3><span>{Title}</span></h3>{/block:Title}
<div class="text">{Body}</div>
</div>
{/block:Text}
{block:Photo}
<div class="meta">
{block:IfCenterall}<center>{/block:IfCenterall}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a>
</h2>{block:IfCenterall}</center>{/block:IfCenterall}
</div><br>
<div class="content photo-post">
<div class="photo">
{block:IndexPage}<a href="{Permalink}">{/block:IndexPage}
{block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage}
<img src="{block:IndexPage}{PhotoURL-HighRes}{/block:IndexPage}{block:PermalinkPage}{PhotoURL-HighRes}{/block:PermalinkPage}" alt="{PhotoAlt}">
{block:IndexPage}</a>{/block:IndexPage}
{block:PermalinkPage}{LinkCloseTag}{/block:PermalinkPage}
</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
</div>
{/block:Photo}
{block:Photoset}
<div class="meta">
{block:IfCenterall}<center>{/block:IfCenterall}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a>
</h2>{block:IfCenterall}</center>{/block:IfCenterall}
</div><br>
<div class="content photo-post">
<div class="photo">
{block:IfLargePhotoset}{Photoset-700}{/block:IfLargePhotoset}
{block:IfNotLargePhotoset}{block:Photos} <div class="single"><img src="{PhotoURL-HighRes}"/></div>{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:Photos}{/block:IfNotLargePhotoset}
</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
</div>
{/block:Photoset}
{block:Quote}
<div class="meta">
{block:IfCenterall}<center>{/block:IfCenterall}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a>
</h2>{block:IfCenterall}</center>{/block:IfCenterall}
</div><br><br>
<div class="content quote-post {Length}-quote">
<blockquote class="quote">"{Quote}"</blockquote>
{block:Source}<div class="source">— {Source}</div>{/block:Source}
</div>
{/block:Quote}
{block:Link}
<div class="meta">
{block:IfCenterall}<center>{/block:IfCenterall}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a>
</h2>{block:IfCenterall}</center>{/block:IfCenterall}
</div><br><br>
<div class="content link-post">
<h3 class="link">{Name}&nbsp&nbsp»</h3>
{block:Description}<div class="caption">{Description}</div>{/block:Description}
</div>
{/block:Link}
{block:Chat}
<div class="meta">
{block:IfCenterall}<center>{/block:IfCenterall}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a>
</h2>{block:IfCenterall}</center>{/block:IfCenterall}
</div><br><br>
<div class="content chat-post">
{block:Title}<h3>{Title}</h3>{/block:Title}
<ol class="chat">
{block:Lines}<li class="{Alt} speaker{UserNumber}">
{block:Label}<span class="label">{Label}</span>{/block:Label}
<span class="line">{Line}</span>
</li>{/block:Lines}
</ol>
</div>
{/block:Chat}
{block:Video}
<div class="meta">
{block:IfCenterall}<center>{/block:IfCenterall}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a>
</h2>{block:IfCenterall}</center>{/block:IfCenterall}
</div><br>
<div class="content video-post">
<div class="video">{VideoEmbed-700}</div>
<div class="vidcaption">{block:Caption}{Caption}{/block:Caption}<div class="nocaption"> </div></div>
</div>
{/block:Video}
{block:Audio}
<div class="meta">
{block:IfCenterall}<center>{/block:IfCenterall}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a>
</h2>{block:IfCenterall}</center>{/block:IfCenterall}
</div><br><br>
<div class="content audio-post">
{block:IfCenterall}<center>{/block:IfCenterall}
<div class="audiobox">
<div class="audio">
{block:AudioEmbed}<div class="wide_audio">{AudioEmbed-640}</div>{/block:AudioEmbed}
</div></div> {block:IfCenterall}</center>{/block:IfCenterall}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
</div>
{/block:Audio}
<div class="clear"> </div>
</li>
{/block:Posts}
{block:IfDisqusShortname}
{block:Permalink}
<div id="disqus">
<div id="disqus_thread"></div><script type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/embed.js"></script><noscript>View the discussion thread.</noscript>
</div>
{/block:Permalink}
<script type="text/javascript">
//<![CDATA[
(function() {
var links = document.getElementsByTagName('a');
var query = '?';
for(var i = 0; i < links.length; i++) {
if(links[i].href.indexOf('#disqus_thread') >= 0) {
query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
}
}
document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/get_num_replies.js' + query + '"></' + 'script>');
})();
//]]>
</script>
{/block:IfDisqusShortname}
</div> <!-- .box -->
{/block:Posts}
</div> <!-- .posts -->
<div style="clear: both"></div>
{block:PermalinkPage}
{block:IfShownotesonpermalinkpages}
{PostNotes}
{/block:IfShownotesonpermalinkpages}
{block:PermalinkPage}
<div style="clear: both;"></div>
</ol>
<div id="footer">
<div id="pagination">
{block:Pagination}
<p class="back"> {block:NextPage}
{lang:Next} >>>
{/block:NextPage}</p>
<p class="forward">{block:PreviousPage}
<<< {lang:Prev}
{/block:PreviousPage} </p>
{/block:Pagination}
{block:PermalinkPagination}
{block:PreviousPost}<p class="back">
{lang:Next} >>>
</p>{/block:PreviousPost}
{block:NextPost}<p class="forward">
<<< {lang:Prev}
{/block:NextPost}</p>
{/block:PermalinkPagination}
{block:DayPagination}
{block:PreviousDayPage}<p class="back">
{lang:Next} >>>
{/block:PreviousDayPage}</p>
{block:NextDayPage}<p class="forward">
<<< {lang:Prev}
</p>{/block:NextDayPage}
{/block:DayPagination}
</div>
<br><br />
<center>
<!--{lang:Archive} //
{lang:Random post} //
{lang:RSS}
<br />
<font size="2"><i>{lang:Powered by Tumblr 2} -
Quite Big theme by George Dunkley</i></font></center>-->
</div>
</div>
</body>
<div style=" opacity:0.0;">
</html>
Suggest changes to be done to remove the 2 buttons.
I'm not into web designing.

Disable Tumblr Controls
To disable the top right controls ( follow abc / user ) you can disable the promotion option on the customise screen.
Log in to Tumblr
Click Settings
Click Customise
On the left hand pane, click Advanced
Uncheck Promote Tumblr
This will disable the Tumblr Controls for none Tumblr users, however, Tumblr users will still get the controls.
The reason, these controls are really a short cut for a logged in user, and I would advise against hiding them, however this is possible. If you add the following to your Custom CSS box:
#tumblr_controls, .controls {
display: none !important;
}
Normally I wouldn't condone using !important but the Tumblr embed really does some funky things, so in this case brute force is needed.
Hope that helps.