Removing Text From Header (CSS)

[quatro]

Hi, I'm having problems removing the text from the header of my template. Here is a screenshot of the text and the css that came with the template. Any help would be very much appreciated.

CSS Code: (It's not the full code as it is too big.)

/**
body,html {height:100%;}
body{background:#ffffff;font: 400 12px/1.3em Arial, Tahoma, Verdana, Helvetica;color:#777;margin:0;padding:0}
.clr{clear:both;overflow:hidden;font-size:0;line-height:0;}
ul{list-style:none;margin:0;padding:0}
a,img{outline:none;margin:0;padding:0;border:none;}
a:link, a:visited { color:#777;text-decoration:none;}
a:hover, a:active, a:focus { color:#3385AB; }
form { padding:0;margin:0; }
header, nav, menu, section, aside, article, footer { display:block; }

h1,h2,h3,h4,h5,h6 { margin:0 0 20px;font-family: 'Droid Serif', serif; color:#666;line-height:normal; }

h1 { font-size:24px;}
h2 { font-size:20px; color:#3385ab;}
h3 { font-size:18px; color:#3385ab;font-family: 'PT Sans Narrow', serif;}
h4 { font-size:14px;}
h5 { font-size:12px;}
h6 { font-size:11px;}


iframe {border:none;}
dl dd {
	padding:0 0 0 10px;
	margin:0;
}

fieldset { border:none;margin:0;padding:0;}
input, textarea, button { border: 1px solid #D5D5D5;color: #666666;background:#fff;}
button { background:#f8f8f8; }

p { margin:0 0 10px; }

.page_bg { background: #f8f8f8 url(../images/bg.png) repeat-x top center; }
.page { min-height: 100%; }

.wrapper { padding-bottom: 140px; }

.main { width:960px;margin:0 auto; }
.top { margin:0 auto;width:960px;height:38px}
.top .menu { height:26px;padding:6px 0;}
.top .menu li { float:left;height:26px;margin:0 10px 0 0;font-size:12px;}
.top .menu a { float:left;background: transparent url(../images/top_menu_r_bg.png) no-repeat top right;text-decoration:none;}
.top .menu a span { float:left;height:26px;padding:0 10px;color:#fff;line-height:25px;background: transparent url(../images/top_menu_l_bg.png) no-repeat top left;cursor:pointer;}

header { background: transparent url(../images/header.jpg) no-repeat top center;}
header div.logo { width:960px;height:220px;margin:0 auto;position:relative;}

header h1 { position:absolute;top:56px;left:30px;padding:4px;font-family: 'Chewy', serif;color:#f2f2f2; font-size: 60px; font-style: normal; font-weight: 400; text-shadow: 1px 1px #000; line-height: 1.2;margin:0;}
.twitter_icon { position:absolute;top:20px;right:0;width:220px;height:150px;background: transparent url(../images/twitter_icon.png) no-repeat top left;}
.followers { position:absolute;top:28px;left:17px;font-family: 'Chewy', serif;color:#f7ebf9; font-size: 30px; font-weight: 400; text-shadow: 1px 1px #7f368a;width:80px;line-height:normal;text-align:center;}

#breadcrumbs { position:absolute;bottom:30px;left:0;}

.leftcol { float:left;width:202px;margin:0 20px 0 0;overflow:hidden; }
.maincol { float:left;width:738px;overflow:hidden; }

.leftcol .first_mod div div div { background: transparent url(../images/module_t_bg_first.png) no-repeat top center; }
.leftcol div div div .custom { background:none;padding:0 20px; }

.separator { font-size:12px;padding:20px 0 0;display:block;color:#505050;font-size:12px;font-weight:700; }

.module_menu,
.module { float:left;width:100%;margin:0 0 20px;}

.module_menu div,
.module div
{ background: transparent url(../images/module_bg.png) repeat-y top center;}

.module_menu div div,
.module div div
{ background: transparent url(../images/module_b_bg.png) no-repeat bottom center; }

.module_menu div div div,
.module div div div
{ padding:10px 0 20px;background: transparent url(../images/module_t_bg.png) no-repeat top center; }

.module_menu div div div div,
.module div div div div
{ background:none;margin:0;padding:0;}

.module_menu div div div h3,
.module div div div h3
{ margin:0;padding:0 20px 10px;color:#505050;font-size:14px;font-weight:700;line-height:20px;font-family: 'Droid Serif', serif;}

 

[CaldwellYSR]

If that is part of the image then you're not going to get it off. If it's not part of the image then it's in the html you need to delete it, not the CSS

 

[retaingain]

I would recommend using Firefox and downloading a plugin called Firebug. You'll be able to use Firebug to see exactly where the text is located in the code.

 

[quatro]

It's not part of the image. It must be in the HTML somewhere.. I should also point out that it's a joomla template.

I used Firebug and this is what it returned:

<!DOCTYPE html>
<html lang="en-gb" dir="ltr" xml:lang="en-gb" xmlns="http://www.w3.org/1999/xhtml">
<head>
<body class="page_bg">
<div class="page">
<div class="wrapper">
<div class="top"> </div>
<header>
<div class="logo">
<h1>Quatrotech Computing</h1>
<div id="breadcrumbs">
</div>
</header>
<div class="main">
</div>
</div>
<footer>
</body>
</html>

I had a look in my HTML directory and there is just index.html and it's a very small file.

Also here is the path of the HTML: /html/body/div/div/header/div/h1

 

[CaldwellYSR]

Delete that part in bold and the words will magically disappear

 

[quatro]

Lol yeah only for me.. I changed "h1 { font-size:24px;}" in the css to "h1 { font-size:0px;}" and that fixed the problem.

 

[Phreaddee]

...or not.
just by making the font size 0px doesnt actually remove it from the webpage, as it is still there in the html.

 

[kayla]

...or not.
just by making the font size 0px doesnt actually remove it from the webpage, as it is still there in the html.

I think the person just wants it gone, visually. Since most visitors won't view the HTML, it's "gone".

I have minimal experience with Joomla but I know I had that issue as well. It's in one of the settings somewhere... along the right-hand side I think... but without actually logging into a Joomla site I wouldn't be able to tell you exactly. But if you're fine with this 0px solution, then I won't bother setting up Joomla and finding where it is for ya.

 

[CaldwellYSR]

Lol yeah only for me.. I changed "h1 { font-size:24px;}" in the css to "h1 { font-size:0px;}" and that fixed the problem.

If this is sufficient for you then congratulations it's "gone" but I would warn against doing this. For this one header it's not a huge deal but you're making your page load the text. Even if it's not there visually you're taking a hit to the load time if you do this with everything you need to delete.

 

[PixelPusher]

Remember, declaring a style for simply the h1 tag will adjust all h1 tags in your site. You might want to be more specific if that is not your intention. Also i'm not a big advocate of { font-size:0px }. I think your better solution would be:

div.logo h1 {
   text-indent:-999em;
}

 

[Brian Angel]

Hola, while I'm not overly familiar with joomla, I'm pretty adept at wordpress. Odds are that call to the H1 is being made in the PHP code, or styled with java. Using firebug and looking in HTML won't find that for you as html will load in the call to the server from PHP and display it as html, you'll have to open code view and look there. Being said, from an SEO standpoint, removing your H1 is not a good idea and doing a text-indent is my preferd choice but everyone has different ideas about image replacement so find one that works best for you.