With My Navigation Bar Is Messed Up [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Need help with the text on my navigation bar. The items in it are all messed up, and jumbled I know my code is really sloppy I am new to coding. This is the link with JS bin here http://jsbin.com/cibuvozido/edit?html,output

Here you can see the new code with the navbar corrected already, but I recommend that you use a framework starting can be bootstrap or foundation 6 which is also very good.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<title> Contact Us Legacy's Web-Design</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
.home, .security, .contact, .about, .portfolio {
display: inline-block;
text-align: center;
padding: 10px;
}
a {
text-decoration: none !important;
}
.all {
margin-top:0px;
position:absolute;
margin:none;
border-style:solid;
border-color:#008000;
border-width:4px;
}
#aside {
color:#0ddde7;
text-align:center;
padding-top:20px;
margin:none;
}
nav {
border-bottom:solid;
border-right:solid;
border-left:solid;
border-radius:10px;
border-color:#0ddde7;
border-width:4px;
/* padding-top:20px; */
font-size:1.5em;
background-color:#0f171b;
z-index:0;
}
h2 {
text-align:center;
color:#0ddde7;
padding: 0 0 0 50px;
}
h3 {
text-align:center;
color:#0ddde7;
padding: 0 0 0 330px;
}
.imgg {
margin-top:24px;
margin-left:40px;
border-style:solid;
border-color:#0ddde7;
border-width:2px;
border-radius:18px 18px 18px 18px;
}
.img {
padding: 14px 0 0 1220px;
pointer-events: none;
position:absolute;
}
#search {
padding: 0 0 0 1105px;
height:0;
}
.jwery {
margin-left: auto;
margin-right: auto;
display: table;
}
.jwery a {
-webkit-transition:width 2s;
transition: 2s;
}
.jwery a:hover {
font-size: 1.1em;
}
body {
margin:0;
padding:0;
background-color:#a4a4a4;
}
a:link {color:#0ddde7; text-decoration: underline; }
a:active {color: #0000ff; text-decoration: underline; }
a:visited {color: #008000; text-decoration: underline; }
a:hover {color: #ff0000; text-decoration: none; }
</style>
</head>
<div id="Header">
<div id="search">
<form>
<form id="img" method="get" action="http://www.google.com">
<input type="text" class="tftextinput" name="q" size="18" maxlength="120">
<input type="submit" value="" style="border-style:
none; background: url('searchbutton3.gif') no-repeat; width: 13px; height: 15px;">
</form>
</div>
<img class="img" src="images/search.png" height="19.4">
<nav>
<div class="jwery">
<a class="home" href="Home.html">Home</a>
<a class="security" href="Security.html">Security</a>
<a class="FAQ" href="Portfolio.html">Portfolio</a>
<a class="about" href="About.html">About Us</a>
<a class="contact" href="Contact Us.html">Contact Us</a>
</div>
</nav>
<body>
<img class="imgg" src="images/legacy.png" align=left width=300>
<div id="aside">
<p>You Can Also Email Me At LegacyWebCreations#gmail.com Or Call/Text 252-207-
6688</p>
<p>Feel Free To Leave Me A Message, Question, Comment, Or Recommendation.</p>
<h2>Follow Me! Please Share My Site! </h2>
<h3>Instagram Account: LegacyWebDesign</h3>
<h3>Personl Account: Surfskateskim57</h3>
<h3>Facebook Account: Ryan Miller</h3>
<h3>Group Name: LegacyWebDesign</h3>
<h3>Twitter Account:LegacyWebDesign</h3>
<h3>LinkedIn Account: LegacyWebCreations</h3>
</div>
<div class="all">
<a id="foxyform_embed_link_747752" href="http://www.foxyform.com/">Questions?
Comments?</a>
</div>
<script>
(function(d, t){
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.src = "http://www.foxyform.com/js.php?id=747752&sec_hash=fd11cc5da35&width=380px";
s.parentNode.insertBefore(g, s);
}(document, "script"));
</script>
</body>
</html>
tell me if this good and only touch the css that I recommend that you
place it in the tab that says css which is best practice that placed
it directly in the html See Ya!! and keep on hacking

Related

Animated/ Slide Side-Menu doesn't slide left-ward?

How can I solve the problem of a Side-Menu that doesn't slide out-and-in from the left (Leftward)? I got it from YouTube Video. Backtrack to the YouTube presenter without feedback.
It consists of HTML, CSS and JavaScript.
Index File
The Index file is the file invokes or synchronize with CSS file and JavaScript files
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="toggleMenu.css" type="text/css" rel="stylesheet">
<script link="toggleMenu.js"></script>
</head>
<body>
<div id="sidebar">
<div class="toggle-btn" onclick="toggleSidebar()">
<span></span>
<span></span>
<span></span>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
CSS File:
The CSS file defines various class with defined attributes
* {
margin:0px;
padding:0px;
font-family: sans-serif;
}
#sidebar {
position:fixed;
width:200px;
height:100%;
background:#151719;
left:-200px;
transition: all 500ms linear;
}
#sidebar.active{
left:0px;
}
#sidebar ul li {
color:rgba(230, 230, 230, 0.9);
list-style:none;
padding:15px 10px;
border-bottom: 1px solid rgba(100, 100, 100, 0.3);
}
#sidebar .toggle-btn {
position:absolute;
left:230px;
top:20px;
}
#sidebar .toggle-btn span {
display: block;
width:30px;
height:5px;
background:#151719;
margin: 5px 0px;
}
JavaScript
JavaScript handling the sliding effect when user click on the Toggle Button (toggle-btn)
function toggleSidebar() {
document.getElementByID("sidebar").classlist.toggle("active");
}
You have a couple of typos in your toggle function, it should be:
function toggleSidebar() {
document.getElementById("sidebar").classList.toggle("active");
}
Here's a working version, click on run snippet below:
function toggleSidebar() {
document.getElementById("sidebar").classList.toggle("active");
}
* {
margin:0px;
padding:0px;
font-family: sans-serif;
}
#sidebar {
position:fixed;
width:200px;
height:100%;
background:#151719;
left:-200px;
transition: all 500ms linear;
}
#sidebar.active{
left:0px;
}
#sidebar ul li {
color:rgba(230, 230, 230, 0.9);
list-style:none;
padding:15px 10px;
border-bottom: 1px solid rgba(100, 100, 100, 0.3);
}
#sidebar .toggle-btn {
position:absolute;
left:230px;
top:20px;
}
#sidebar .toggle-btn span {
display: block;
width:30px;
height:5px;
background:#151719;
margin: 5px 0px;
}
<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.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div id="sidebar">
<div class="toggle-btn" onclick="toggleSidebar()">
<span></span>
<span></span>
<span></span>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
There are 2 points you need to fix
script should be using src attributes instead of link, so it will be
<script src="toggleMenu.js"></script>
And the classList should be written with capital L, so instead of document.getElementById("sidebar").classlist.toggle("active"); it
should be
document.getElementById("sidebar").classList.toggle("active");
https://codepen.io/divided7/pen/PoPrwPe I made you a codepen, with the fixed result.
Also, change link to src in your code for the script tag, and the typo (classlist to classList)

Underlining links

I am writing a site to order. But I ran into the problem for the first time - I can not remove the underscores from the bottom of the link. Already tried through
a: hover {text-decoration: none}
as well as on another.
From below I will provide HTML code as well as CSS code
I ask to help to correct such unexpected error
body{background: #efefef
url("images/geometry2.png");
margin: 0; padding: 0;
font: 16px/24px Arial, Tahoma, Sans-serif;
}
div.mid{
width: 1000px; margin: 0 auto;
}
a:hover {
text-decoration: none;
}
div.header{
background: #101417;
}
/*Шапка сайта*/
div.topmenu{float: right;height: 70px; line-height: 70px;}
div.topmenu a{margin: 0 0 0 10px; color: #0000FF;}
div.topmenu a:hover{color: #fff}
div.afisha {padding: 20px 50px 0 50px; background: #f2f2f2 url("images/headline.png") top repeat-x;}
div.afisha img {float: left; }
div.afisha h3 {font-size: 24px; font-weight: normal; text-align: center; color: #830000;}
div.afisha p{text-align: center;}
div.afisha a{font-size: 20px; color: #fff; font-weight: bold; background: #b23600; border: 1px solid #862900;}
div.clear{clear: both;}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Мой сайт</title>
<link rel="shortcut icon" type="image/x-icon" href="images/logomin.png">
<link rel="stylesheet" href="style.css" media="all">
</head>
<body>
<div class="header">
<div class="mid" >
<header>
<div class="topmenu" style='float:right;height: 70px; line-height: 70px'
</div>
<aside>
Главная
Тренинг
Шаблоны
Контакты
</aside>
</div>
<img src="images/logo.png" alt="Логотип сайта" title="Логотип сайта">
<div class="afisha"</div>
<img src="images/v5.jpg" alt="Обложка тренинга" title="Обложка тренинга">
<h3>Стань профессиональным верстальщиком<br>всего за 2 месяца<br> и зарабатывай по 30 000 рублей!</h3>
<p>Смотрите здесь<p>
<div class="clear"></div>
</header>
</div>
</div>
<div class="menu">
<div class="mid" >Привет мир</div>
</div>
<div class="conten">
<div class="mid" ></div>
</div>
<div class="footer">
<div class="mid" ></div>
</div>
</body>
</html>
try with
div.mid{
width: 1000px; margin: 0 auto;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
also clear caches before checking results..
With :hover you can set CSS properties when the link in hovered(i.e. mouse is over the link).
It seems you want to remove the default underline property of the link. To do so you need to apply CSS directly to the a tag:
a{text-decoration: none}

Image behind text on hover CSS HTML

I am trying to get an image to show up behind the text as a hover effect.
It is just a simple splash page for now, but I can't seem to figure out how to get this to work.
Here is the current page. The words below the logo are links.
https://gyazo.com/8fac5b310ed8febd80032cc19b57d76e
Here is the image I want behind the text when a user hovers.
https://gyazo.com/67852dd57789458942952b1dd3b3cb55
It is like a scribble effect in different colors. They wouldn't all show up at one, but just the different one behind each word as you hover.
Here is the html:
<!DOCTYPE html>
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,800,600,300' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<title>Lira.net</title>
<link rel="stylesheet" href="css/style.css">
<script src="script.js"></script>
</head>
<body>
<div id="middlegroup">
<div id="topimage">
<img src="images/LiraLogo325.png">
</div>
<div id="links">
<p>
Liquidation -
<a href="#">Monetization<a> -
Brokerage
</p>
</div>
</div>
</body>
<footer>
<p>© 2016 Lira.net </p>
</footer>
</html>
and here is the CSS:
h1 {
font-family: "Open Sans" , serif;
color: #FFFFFF;
text-shadow: 2px 2px 3px #4d4d4d;
font-size: 5vw;
text-align: center;
}
body {
margin: 0;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
#topimage{
width: 100%;
text-align:center;
size: 1vw;
}
#links{
width: 100%;
list-style-type:circle;
}
#middlegroup{
width:600px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-125px 0 0 -300px;
}
a:link{
color:#01197d;
text-decoration: none;
}
a:visited{
color:#01197d;
text-decoration: none;
}
a:hover{
text-decoration: none;
}
a:active{
color:#01197d;
text-decoration: none;
}
p {
font-family: "Open Sans" , serif;
font-weight: 600;
font-size:15px;
text-align:center;
}
ul {
font-family: "Open Sans" , serif;
font-weight: 400;
font-size:20px;
text-align:center;
list-style-type:circle;
}
footer p{
font-family: "Open Sans" , serif;
font-weight: 400;
font-size:14px;
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
}
Any help would be greatly appreciated!
The easiest way to get this done is to use background images
You can try something like this:
.class1:hover {
background-image: url("paper.gif");
}
.class2:hover {
background-image: url("paper.gif");
}
.class3:hover {
background-image: url("paper.gif");
}
Just replace the class names for the ones that suits your links, and obviously play with sizing, something like display inline-block to the links will be enough. Here you have everything you will need for this task
You'll just have to add a background image on hover. Here's a fiddle : https://jsfiddle.net/rd7zbytc/
and here's the code:
#links p a:hover {
background-image:url("https://images.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");
background-size:100px;
}
Is this what you are talking about?
http://codepen.io/xkurohatox/pen/qbPXOb
HTML changes:
<div id="links">
<p>
<a id="a1" href="#">Liquidation</a> -
<a id="a2" href="#">Monetization<a> -
<a id="a3" href="#">Brokerage</a>
</p>
</div>
CSS changes:
#a1:hover {
background-image:url("http://previews.123rf.com/images/pzaxe/pzaxe1104/pzaxe110400016/9242659-Seamless-monochrome-square-texture-scribble--Stock-Vector-pattern- scribble-background.jpg");
background-size:100%;
}
#a2:hover {
background-image:url("http://st.depositphotos.com/1466799/1121/v/950/dep_11211843-Full-color-abstract-scribble-background.jpg");
background-size:100%;
}
#a3:hover {
background-image:url("http://thumbs.dreamstime.com/z/child-scribble-12020973.jpg");
background-size:100%;
}
/* images above are not my own and only being used for demo purposes */
Hope this helps!

jquery colorbox isn't working with mootools v1.1

I wanna use colorbox for 'join us menu' but it isn't working.
and I also tried fancybox, and got a same result..
actually colorbox performed well until I add mootools v1.1 to my jsp code.
I dont know what is mootools v1.1. I just copy some source that from
some awesome website for
using scroll view effect(I dont know exactly what this effect's name) on my page
scroll view effect is working well. you can see that when you clicked 'append1,2,3'
sorry for my poor english skill.
here is my code
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Spring Builder : append your heart </title>
<link rel="stylesheet" href="colorbox.css" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="colorbox.js"></script>
<script type="text/javascript" src="mootools.v1.1.js"></script>
<script type="text/javascript">
$(function(){
$('.joinus').colorbox({
});
});
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Times New Roman', serif;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
img {
border: 0;
}
#main_header{
width:1280px;
padding-left: 10px;
line-height:60px;
background: #59DA50;
color:#FFFFFF;
}
#main_bar{
overflow: hidden;
background: #EAEAEA;
}
#main_bar>ul.main_bar_left{
overflow: hidden;
float: left;
}
#main_bar>ul.main_bar_right{
overflow: hidden;
float: right;
}
#main_bar>ul.main_bar_left>li{
float:left;
}
#main_bar>ul.main_bar_right>li{
float:left;
}
#main_bar a{
display: block;
padding: 5px 20px;
border-right: 1px solid #BDBDBD;
}
#main_bar a:HOVER{
background: #CEF279;
}
#main_bar input{
margin:5px;
width: 80px;
}
#main_footer{
width:1280px;
margin:0 auto;
margin-bottom: 10px;
background: #353535;
color: #FFFFFF;
text-align: center;
padding: 10px;
}
#main_content {
margin:0px;
overflow:hidden;
/*height:387px;
width:99,9%;*/
border:none;
position:relative;
}
#main_content_bg {
width:5000px;
height:600px;
background-image:url(http://placehold.it/5000x600);
background-position:top left;
background-repeat:no-repeat;
background-color:#E6E6E4;
position:relative;
}
.section_content {
width:990px;
height:380px;
position:absolute;
}
#section1 {
left:0px;
top:0px;
}
#section2 {
left:1570px;
top:0px;
}
#section3 {
left:2880px;
top:0px;
}
</style>
</head>
<body>
<header id="main_header">
<h1>Spring Builder</h1>
</header>
<nav id="main_bar">
<ul class="main_bar_left">
<li><a id="append1" href="#">append1</a></li>
<li><a id="append2" href="#">append2</a></li>
<li><a id="append3" href="#">append3</a></li>
</ul>
<ul class="main_bar_right">
<li><input type="text" value="id" id="id" name="id"/></li>
<li><input type="password" id="pw" name="pw"/></li>
<li>Login</li>
<li>Join us</li>
</ul>
</nav>
<div id="main_content">
<div id="main_content_bg">
<div id="section1" class="section_content">
<h1>section1</h1></div>
<div id="section2" class="section_content">
<h1>section2</h1></div>
<div id="section3" class="section_content">
<h1>section3</h1></div>
</div>
</div>
<footer id="main_footer">
</footer>
<script src="scrollstyle.js" type="text/javascript"></script>
</body>
</html>
It's probably happen a conflict between Mootools and jQuery because both libraries are using $ sign, try to convert $ to jQuery for your jQuery code:
jQuery(function(){
jQuery('.joinus').colorbox({
});
});
or wrap your code inside:
jQuery(function($) {
$('.joinus').colorbox({
});
});

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.

Categories