View Full Version : Trying to import custom title image and 2 more images
fernandezp27
02-23-2011, 06:46 PM
I am using skyblue template. How do I replace the default title with my custom title image (centered) and 2 images (1 at left top and 1 at right top) i.e. where and how in the css code do I add these 3 png files (or is there an interface)?
center image - 504X360 pixels
top left image - 610X472 pixels
top right image - 610X472 pixels
My site is - www.travelchronicles.org
ImNotKibs
02-23-2011, 07:11 PM
It should be in the header template, you can find that through the AdminCP > Styles & Templates > Style Manager > All Style Options
Or Style Manager > Edit Templates > Header
Once there just search out the image :)
fernandezp27
02-23-2011, 08:23 PM
I added my left image "tell.png" like this.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div align="left"><a name="top" href="index.php"><img src="$stylevar[imgdir_misc]/tell.png" alt="" border="0"></a></div></td>
</tr>
</table>
It increased my padding (I believe) 10 fold. How do I reel it back in so, my header spacing is not gigantor? Also, how would I add my center and right image as these don't already exist in the css header.
ImNotKibs
02-23-2011, 08:39 PM
I added my left image "tell.png" like this.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div align="left"><a name="top" href="index.php"><img src="$stylevar[imgdir_misc]/tell.png" alt="" border="0"></a></div></td>
</tr>
</table>
It increased my padding (I believe) 10 fold. How do I reel it back in so, my header spacing is not gigantor? Also, how would I add my center and right image as these don't already exist in the css header.
You can set an ID or Class for their divs to give them custom CSS.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div id="headerleft" align="left"><a name="top" href="index.php"><img src="$stylevar[imgdir_misc]/tell.png" alt="" border="0"></a></div>
<div id="header" align="center"><a name="top" href="index.php"><img src="$stylevar[imgdir_misc]/tell.png" alt="" border="0"></a></div>
<div id="headerright" align="right"><a name="top" href="index.php"><img src="$stylevar[imgdir_misc]/tell.png" alt="" border="0"></a></div>
</td>
</tr>
</table>
Then to the CSS parts at the bottom of the "all style options" section:
#headerleft
{
padding: INSERT PADDING HERE ;
}
#header
{
padding: INSERT PADDING HERE ;
}
#headerright
{
padding: INSERT PADDING HERE ;
}
and whatever CSS you may need, since now the only CSS that will apply to those 3 images will be whatever you put in the second bit of code.
This is what I'd do, I'm sure there might be other, better ways to do it, though :P
fernandezp27
02-23-2011, 10:32 PM
You lost me. Can you give me an example how you would code it and where would you put the code?
--------------- Added 1298508041 at 1298508041 ---------------
okay, i see the code now (I was logged out). I added the divs in the header and the padding in the additional css definitions block. Now how do I get my padding to shrink up?
--------------- Added 1298508391 at 1298508391 ---------------
I changed my padding but it did not take:
#headerleft
{
padding:1px 1px 1px 1px;
}
#header
{
padding:1px 1px 1px 1px;
}
#headerright
{
padding:1px 1px 1px 1px;
}
ImNotKibs
02-24-2011, 12:08 AM
firstly, if it's all just going to be 1px, you don't need to denote all 4.
If you think something else is affecting your CSS, you can add !important to the tag, which tells the browser to ignore every other style but this for this item.
#headerleft
{
padding:1px; !important
}
#header
{
padding:1px; !important
}
#headerright
{
padding:1px; !important
}
Though I don't really know how your code is set up, so I can't really see what's going on :P
Also, sorry, I think you should add <td> wrapping to all 3 images, I may have forgotten that
fernandezp27
02-24-2011, 01:09 PM
I modified those 3 things and it brought the images from diagonal to side by side, but just still need to get them closer. This is a fresh install of 3.8.6, brand new.
--------------- Added 1298563166 at 1298563166 ---------------
What code would you like to see. Here is my Header/Headerinclude code and Additional CSS Definitions:
<table width="95%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div id="headerleft" align="left"><a name="top" href="index.php"><img src="$stylevar[imgdir_misc]/tell.png" alt="" border="0"></a></div></td>
<td><div id="header" align="center"><a name="top" href="index.php"><img src="$stylevar[imgdir_misc]/travel.png" alt="" border="0"></a></div></td>
<td><div id="headerright" align="right"><a name="top" href="index.php"><img src="$stylevar[imgdir_misc]/santorini.png" alt="" border="0"></a></div></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="width: 24px;"><img src="$stylevar[imgdir_misc]/login_left.gif" alt=""></td>
<td style="background-image:url($stylevar[imgdir_misc]/login_bg.gif);"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="whitelinks" style="background-image:url($stylevar[imgdir_misc]/login_bg.gif); width: 215px;">
<if condition="$show['member']">
<div class="smallfont" align="center"><a href="search.php?$session[sessionurl]do=getnew"><strong>View New Posts</strong></a> | <a href="forumdisplay.php?$session[sessionurl]do=markread&markreadhash=$bbuserinfo[securitytoken]" rel="nofollow"><strong>Mark Forums Read</strong></a></div>
<else />
<div class="smallfont" align="center"><a href="register.php">No Account? <strong>Register Now!</strong></a></div> </if>
</td>
<td style="width: 46px;"><img src="$stylevar[imgdir_misc]/login_divider.gif" alt=""></td>
<td style="background-image:url($stylevar[imgdir_misc]/login_bg.gif);" class="whitelinks">
<if condition="$show['member']">
<div align="right" class="smallfont">
<strong><phrase 1="$bbuserinfo[username]">$vbphrase[welcome_x]</phrase></strong><br />
You Last Visited: $pmbox[lastvisitdate] $pmbox[lastvisittime]
<if condition="$show['pmstats']"><br /><phrase 1="$vbphrase[unread_x_nav_compiled]" 2="$vbphrase[total_x_nav_compiled]" 3="$session[sessionurl_q]">$vbphrase[private_messages_nav]</phrase></if>
<if condition="$show['pmwarning']"><br /><strong><phrase 1="$vbphrase[pmpercent_nav_compiled]">$vbphrase[your_pm_box_is_x_full]</phrase></strong></if>
</div>
<else />
<!-- login form -->
<form action="login.php?do=login" method="post" onSubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, $show[nopasswordempty])">
<script type="text/javascript" src="clientscript/vbulletin_md5.js?v=$vboptions[simpleversion]"></script>
<table align="center" cellpadding="0" cellspacing="$stylevar[formspacer]" border="0">
<tr>
<td><input type="text" class="bginput" style="font-size: 11px" name="vb_login_username" id="navbar_username" size="20" accesskey="u" tabindex="101" value="$vbphrase[username]" onFocus="if (this.value == '$vbphrase[username]') this.value = '';" /></td>
<td> <input type="password" class="bginput" style="font-size: 11px" name="vb_login_password" id="navbar_password" size="20" tabindex="102" /></td>
<td class="smallfont" colspan="3"> <label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c" />$vbphrase[remember_me]</label></td>
<td colspan="2"><div align="center">
<input type="submit" class="button" value="Log In Now!" tabindex="104" title="$vbphrase[enter_username_to_login_or_register]" accesskey="s" />
</div></td>
</tr>
</table>
<input type="hidden" name="s" value="$session[sessionhash]" />
<input type="hidden" name="do" value="login" />
<input type="hidden" name="vb_login_md5password" />
<input type="hidden" name="vb_login_md5password_utf" />
</form>
<!-- / login form -->
</if>
</td>
</tr>
</table></td>
<td style="width: 24px;"><img src="$stylevar[imgdir_misc]/login_right.gif" alt=""></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="width: 22px;"><img src="$stylevar[imgdir_misc]/links_left.gif" alt=""></td>
<td style="background-image:url($stylevar[imgdir_misc]/links_bg.gif);"><table width="650" border="0" align="center" cellpadding="0" cellspacing="0">
<tr id="menu">
<td><div align="center"><a href="index.php">Home</a></div></td>
<td><div align="center"><a href="usercp.php">User CP </a></div></td>
<td><div align="center"><a href="register.php">Register</a></div></td>
<td><div align="center"><a href="memberlist.php">Members List </a></div></td>
<td><div align="center"><a href="calendar.php">Calendar</a></div></td>
<td><div align="center"><a href="faq.php">FAQ</a></div></td>
<td><div align="center"><a href="search.php$session[sessionurl_q]">Search</a></div></td>
</tr>
</table></td>
<td style="width: 22px;"><img src="$stylevar[imgdir_misc]/links_right.gif" alt=""></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" style="background-image:url($stylevar[imgdir_misc]/sidebar_shadow_left.gif); background-repeat: repeat-x; padding-left: 6px; background-color:#FFFFFF;">
<div style="padding-top: 25px; padding-left: 10px;">
<!-- content table -->
$spacer_open
$_phpinclude_output
<!-- / CSS Stylesheet -->
<script type="text/javascript" src="$stylevar[yuipath]/yahoo-dom-event/yahoo-dom-event.js?v=$vboptions[simpleversion]"></script>
<script type="text/javascript" src="$stylevar[yuipath]/connection/connection-min.js?v=$vboptions[simpleversion]"></script>
<script type="text/javascript">
<!--
var SESSIONURL = "$session[sessionurl_js]";
var SECURITYTOKEN = "$bbuserinfo[securitytoken]";
var IMGDIR_MISC = "$stylevar[imgdir_misc]";
var vb_disable_ajax = parseInt("$vboptions[disable_ajax]", 10);
// -->
</script>
<script type="text/javascript" src="clientscript/vbulletin_global.js?v=$vboptions[simpleversion]"></script>
<if condition="$show['popups']"><script type="text/javascript" src="clientscript/vbulletin_menu.js?v=$vboptions[simpleversion]"></script></if>
<if condition="$vboptions['externalrss']">
<link rel="alternate" type="application/rss+xml" title="$vboptions[bbtitle] RSS Feed" href="external.php?type=RSS2" />
<if condition="$show['foruminfo'] OR $show['threadinfo']">
<link rel="alternate" type="application/rss+xml" title="$vboptions[bbtitle] - $foruminfo[title_clean] - RSS Feed" href="external.php?type=RSS2&forumids=$foruminfo[forumid]" />
</if>
</if>
#menu a {
display: block;
padding-top: 14px;
padding-bottom: 15px;
font-family: arial;
font-size: 11px;
color: #2e85e4;
font-weight: bold;
text-decoration: none;
background: url("skyblue/misc/links_bg.gif") 0 0;
}
#menu a:hover {
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
background: url("skyblue/misc/links_bg2.gif") 0 0;
}
.whitelinks {
color: #ffffff;
}
.whitelinks a {
color: #ffffff;
text-decoration: none;
}
.whitelinks a:hover {
color: #ffffff;
text-decoration: underline;
}
#headerleft
{
padding: 1px; !important
}
#header
{
padding: 1px; !important
}
#headerright
{
padding: 1px; !important
}
--------------- Added 1298593094 at 1298593094 ---------------
played around with the code a little to my dismay, it got worse (see travelchronicles.org).
#headerleft
{
margin: 5px 10px 10px;
padding: 8px 10px 12px 10px;
height: 200px;
width: 200px;
}
#header
{
margin: 5px 10px 10px;
padding: 8px 10px 12px 10px;
height: 200px;
width: 200px;
}
#headerright
{
width: 355px;
height: 175px;
margin-top:7px;
}
vBulletin® v3.8.12 by vBS, Copyright ©2000-2025, vBulletin Solutions Inc.