The Arcive of Official vBulletin Modifications Site.

fernandezp27 · #1 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 · #2 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 · #3 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 · #4 02-23-2011, 08:39 PM

Quote:

Originally Posted by fernandezp27

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.

Code:

<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:

Code:

#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 · #5 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 [DATE]1298508041[/DATE] at [TIME]1298508041[/TIME] ---------------

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 [DATE]1298508391[/DATE] at [TIME]1298508391[/TIME] ---------------

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 · #6 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.

Code:

#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 · #7 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 [DATE]1298563166[/DATE] at [TIME]1298563166[/TIME] ---------------

What code would you like to see. Here is my Header/Headerinclude code and Additional CSS Definitions:

HTML Code:

<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&amp;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>&nbsp;&nbsp;&nbsp;&nbsp;<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">&nbsp;&nbsp;<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">&nbsp;&nbsp;
		  <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

HTML Code:

<!-- / 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&amp;forumids=$foruminfo[forumid]" />
	</if>
</if>

HTML Code:

#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 [DATE]1298593094[/DATE] at [TIME]1298593094[/TIME] ---------------

played around with the code a little to my dismay, it got worse (see travelchronicles.org).

HTML Code:

#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;
    }

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.04137 seconds Memory Usage 2,273KB Queries Executed 11 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (1)ad_showthread_firstpost (1)ad_showthread_firstpost_sig (1)ad_showthread_firstpost_start (3)bbcode_code (4)bbcode_html (1)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)navbar (3)navbar_link (120)option (7)post_thanks_box (7)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (7)post_thanks_postbit_info (7)postbit (7)postbit_onlinestatus (7)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end fetch_musername postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_display_complete post_thanks_function_can_thank_this_post_start tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!