MyBB Community Forums

Full Version: change font of h1 tag and add background image?
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Im kinda noob at this,and would appreaciate help to change from default font to some stylish one and add background image behind h1 tag in header,any help? The point is to make logo out of it Smile

Regards Angel
[just my 2 cents]
common font families are used for websites (eg. Verdana, Arial, Sans-Serif) and the specific
stylish font may not be available in users computer to render the header text as you like ...

it might be better to get the logo image designed by an expert with the stylish font AND use it !!
(2011-07-19, 04:54 PM)ranjani Wrote: [ -> ][just my 2 cents]
common font families are used for websites (eg. Verdana, Arial, Sans-Serif) and the specific
stylish font may not be available in users computer to render the header text as you like ...

it might be better to get the logo image designed by an expert with the stylish font AND use it !!


Could you atleast tell me how to add a background image behind h1 tag,the code is located in headear template on 1st line
<center><h1>Xtreme Portal</h1></center>
Use CSS:

h1 {
	background: url(images/example.gif);
	color: #FFF;
	font-family: Verdana;
}

And by the way don't use the <center> tag. It has been deprecated.
(2011-07-19, 05:10 PM)faviouz Wrote: [ -> ]And by the way don't use the <center> tag. It has been deprecated.
Exactly.
In Templates and Themes, open up your theme, and choose global.css. Click advanced, and put this at the very bottom of the textarea:
h1 {
	background: url(images/example.gif);
	color: #FFF;
	font-family: Verdana;
	text-align: center;
}

(It's faviouz's, but tweaked for centering xD)
Edit : not seen above responses ... Smile - so IGNORE below
________________________________________________

use this code
<div class="mylogoimage">Xtreme Portal</div>

AND add below code in global.css at the top OR at the bottom

/* custom logo - background image */
.mylogoimage {
text-align : center;
font-family:verdana, arial, sans-serif;
margin:0;
font-size: 14px;
font-weight: bold;
display: inline;
background: url(images/backgroundimagename.gif);
}


That doesn't use the <h1> tag, which the op clearly wants to use. Toungue
Thank you guys very much Smile Love ya all Big Grin