[HTML] Two Questions...

Mike

Mike

Canadian
Loyal Member
1000 Posts Trophy Point Collector 10 Happy Years
Joined
Dec 4, 2007
Messages
1,935
Reaction score
96
1) If I have a stylesheet in the <head> section of my website, but I only want it to affect the top part of my page (so a certain part of it), is there any way to end the stylesheet so it doesn't affect the rest of the page?

2) If I want to play music without a radio application thing on the site... Can I have a "Play" button, and "Stop" button on my website, and when you click "Play", it starts playing the file in "http://www.trasion.com/forum/music/music.mp3", and if you click "Stop", it stops playing it.

Thanks :thumbup1:
 
It is for a vBulletin site actually, which uses HTML.

Here is my FORUMHOME template...

Code: 
$stylevar[htmldoctype]
<html xmlns="http://www.w3.org/1999/xhtml" dir="$stylevar[textdirection]" lang="$stylevar[languagecode]">
<head>
	<!-- no cache headers -->
	<meta http-equiv="Pragma" content="no-cache" />
	<meta http-equiv="Expires" content="-1" />
	<meta http-equiv="Cache-Control" content="no-cache" />
	<!-- end no cache headers -->
	$headinclude
	<title><phrase 1="$vboptions[bbtitle]">$vbphrase[x_powered_by_vbulletin]</phrase></title>

  <link href="http://demo.yootheme.com/apr08/templates/yoo_ambient/favicon.ico" rel="shortcut icon" type="image/x-icon" />



</head>

<body>

$header
$navbar

<if condition="$show['guest']">
<!-- guest welcome message -->
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>
	<td class="tcat"><phrase 1="$vboptions[bbtitle]">$vbphrase[welcome_to_the_x]</phrase></td>

That's what template I want the code to show up on, notice the $header, that means it includes everything from the header template there. Here is the header template...

Code: 
<head>
	<!-- no cache headers -->
	<meta http-equiv="Pragma" content="no-cache" />
	<meta http-equiv="Expires" content="-1" />
	<meta http-equiv="Cache-Control" content="no-cache" />
	<!-- end no cache headers -->
	$headinclude
	<title><phrase 1="$vboptions[bbtitle]">$vbphrase[x_powered_by_vbulletin]</phrase></title>

  <link href="http://demo.yootheme.com/apr08/templates/yoo_ambient/favicon.ico" rel="shortcut icon" type="image/x-icon" />
  <link rel="stylesheet" href="http://demo.yootheme.com/apr08/plugins/system/yoo_effects/lightbox/shadowbox.css" type="text/css" />
  <link rel="stylesheet" href="http://demo.yootheme.com/apr08/templates/yoo_ambient/css/template.css.php" />
  <link rel="stylesheet" href="http://demo.yootheme.com/apr08/modules/mod_yoo_slider/mod_yoo_slider.css.php" type="text/css" />
  <link rel="stylesheet" href="http://demo.yootheme.com/apr08/modules/mod_yoo_drawer/mod_yoo_drawer.css.php" type="text/css" />
  <link rel="stylesheet" href="http://demo.yootheme.com/apr08/modules/mod_yoo_login/mod_yoo_login.css.php" type="text/css" />
  <link rel="stylesheet" href="http://demo.yootheme.com/apr08/modules/mod_yoo_accordion/mod_yoo_accordion.css.php" type="text/css" />

  <link rel="stylesheet" href="http://demo.yootheme.com/apr08/modules/mod_yoo_carousel/mod_yoo_carousel.css.php" type="text/css" />
  <link rel="stylesheet" href="http://demo.yootheme.com/apr08/modules/mod_yoo_toppanel/mod_yoo_toppanel.css.php" type="text/css" />
  <script type="text/javascript" src="http://demo.yootheme.com/apr08/templates/yoo_ambient/lib/js/mootools.js.php"></script>
  <script type="text/javascript" src="http://demo.yootheme.com/apr08/media/system/js/caption.js"></script>
  <script type="text/javascript" src="http://demo.yootheme.com/apr08/modules/mod_yoo_slider/mod_yoo_slider.js"></script>
  <script type="text/javascript" src="http://demo.yootheme.com/apr08/modules/mod_yoo_drawer/mod_yoo_drawer.js"></script>
  <script type="text/javascript" src="http://demo.yootheme.com/apr08/modules/mod_yoo_accordion/mod_yoo_accordion.js"></script>
  <script type="text/javascript" src="http://demo.yootheme.com/apr08/modules/mod_yoo_carousel/mod_yoo_carousel.js"></script>
  <script type="text/javascript" src="http://demo.yootheme.com/apr08/modules/mod_yoo_toppanel/mod_yoo_toppanel.js"></script>
  <script type="text/javascript">
var YtSettings = { tplurl: 'http://demo.yootheme.com/apr08/templates/yoo_ambient', color: 'lighting', layout: 'left', fontDefault: 'font-medium', widthDefault: 'width-wide', widthThinPx: 790, widthWidePx: 990, widthFluidPx: 0.9 };
  </script>
  <script type="text/javascript">var YOOeffects = { url: 'http://demo.yootheme.com/apr08/plugins/system/yoo_effects/lightbox/' };</script>
<script type="text/javascript" src="http://demo.yootheme.com/apr08/plugins/system/yoo_effects/yoo_effects.js.php?lb=1&re=1&sl=1"></script>
  <script type="text/javascript" src="http://demo.yootheme.com/apr08/templates/yoo_ambient/lib/js/template.js.php"></script>


</head>





<body id="page" class="yoopage font-medium width-wide left showright default yootools-black">






<div id="absolute">
		<div class="transparent">
	<div id="yoo-toppanel-1" class="yoo-toppanel">

		<div class="panel-container" style="top: 0px;">
			<div class="panel-wrapper">
				<div class="panel" style="height: 340px; margin-top: -340px;">





					<div class="content" style="width: 600px;">
												





																		<div class="article">
<div><strong>Message from Trasion Administrator(s):</strong><br /> Please invite all of your friends to Trasion, and get them active! We will always be having competitions on getting more member(s), so just visit the <a href="http://trasion.com/forum/forumdisplay.php?f=2">News and Announcements</a> board to view the latest competitions.</div>	</div>										




		<div class="article">
	<div class="width50 float-left">

  <div style="width: 250px; height: 180px; border: 10px solid #282828; background: url('images/toppanel/trasionlogin.gif')">
  </div>
</div>
<div class="width50 float-left">
  <div style="float: right; width: 250px; height: 150px; padding: 20px 10px 10px 10px; border: 10px solid #282828; background: url('images/toppanel/trasionloginbox.gif')">
    
<form action="login.php?do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, $show[nopasswordempty])">

<span class="default" style="display: block;">
	<span class="yoo-login">
	
				
				
		<span class="login"><if condition="$show['member']">
	<td class="alt2" nowrap="nowrap"><font color="black"><strong>
	<div class="smallfont">
		<strong><phrase 1="$bbuserinfo[username]" 2="member.php?$session[sessionurl]u=$bbuserinfo[userid]">$vbphrase[welcome_x_link_y]</phrase></strong><br /><br />
		

		
			<div><phrase 1="$vbphrase[unread_x_nav_compiled]" 2="$vbphrase[total_x_nav_compiled]" 3="$session[sessionurl_q]">$vbphrase[private_messages_nav]</phrase></div>
		



		<if condition="$show['pmwarning']"><div><strong><phrase 1="$vbphrase[pmpercent_nav_compiled]">$vbphrase[your_pm_box_is_x_full]</phrase></strong></div></if>


<span id="notifications"><a href="usercp.php$session[sessionurl_q]">New Notifications</a><strong>: You have $notifications_total.</strong></span>


<br /><br />
<td class="vbmenu_control"><a href="login.php?$session[sessionurl]do=logout&logouthash=$bbuserinfo[logouthash]" onclick="return log_out('$vbphrase[sure_you_want_to_log_out]')">Logout of Trasion</a></td>:<br />
Click the link above.</strong></font>

	</div>
	</td>
<else />
	<td class="alt2" nowrap="nowrap" style="padding:0px">
		<!-- 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 cellpadding="0" cellspacing="$stylevar[formspacer]" border="0">
		<tr>
			<td class="smallfont" style="white-space: nowrap;"><label for="navbar_username">$vbphrase[username]</label></td>
			<td><input type="text" class="bginput" style="font-size: 11px" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="$vbphrase[username]" onfocus="if (this.value == '$vbphrase[username]') this.value = '';" /></td>
			<td class="smallfont" nowrap="nowrap"><label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c" /> Stay On</label></td>
		</tr>
		<tr>
			<td class="smallfont"><label for="navbar_password">$vbphrase[password]</label></td>
			<td><input type="password" class="bginput" style="font-size: 11px" name="vb_login_password" id="navbar_password" size="10" tabindex="102" /></td>
			<td><input type="submit" class="button" value="$vbphrase[log_in]" tabindex="104" title="$vbphrase[enter_username_to_login_or_register]" accesskey="s" /></td>
		</tr>
		</table>
		<input type="hidden" name="s" value="$session[sessionhash]" />
		<input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" />
		<input type="hidden" name="do" value="login" />
		<input type="hidden" name="vb_login_md5password" />
		<input type="hidden" name="vb_login_md5password_utf" />
		</form></if>
		<!-- / login form -->
									
			
											
						
						
			<input type="hidden" name="option" value="com_user" />
			<input type="hidden" name="task" value="login" />
			<input type="hidden" name="return" value="aHR0cDovL2RlbW8ueW9vdGhlbWUuY29tL2FwcjA4Lw==" />
			<input type="hidden" name="c88491b62d3c408e14d10d09536eb85b" value="1" /><br />
		</span>
		
				
	</span>

</span>
</form>
  </div>
</div>	</div>											</div>
				</div>
			</div>
								
			<div class="trigger" style="left: 50%;">
				<div class="trigger-l" style=""></div>
				<div class="trigger-m">Login Box</div>

				<div class="trigger-r" style=""></div>
			</div>
		</div>
			
	</div>		
</div><script type="text/javascript">
// <!--
var panelFx1 = new YOOtoppanel('yoo-toppanel-1', { offset: 340, transition: Fx.Transitions.expoOut, duration: 500 });
panelFx1.addTriggerEvent('#yoo-toppanel-1 .trigger')
panelFx1.addTriggerEvent('#yoo-toppanel-1 .close');
// -->
</script>
<div style="position: absolute;	z-index: 20; top: 0px; left: 0px; width: 135px; height: 135px;">
	
</div>
	</div>




	<td align="$stylevar[left]"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a></td>
	<td align="$stylevar[right]" id="header_right_cell">
		<if condition="$ad_location['ad_header_logo']">$ad_location[ad_header_logo]<else /> </if>
	</td>
</tr>
</table>
<!-- /logo -->

<!-- content table -->
$spacer_open

$_phpinclude_output

$ad_location[ad_header_end]

</body>

I want the header template to be the only thing the CSS affects, but since it's included to FORUMHOME, it's on the whole homepage...

How can I make it stick to $header?
 
You can just copy the <links> used in other pages and leave these which you don't want to show up in the template.

Example: Let's say in $header there's 123.css
Open it and copy all the settings you want to be shown in your template.
In the template, between <head> tags put something like this:


Code: 
<head>
<title>Shit here bla bla</title>
<style type="text/css">
               CODE HERE
</style>
</head>

You'll be ok, if I understood what you want exactly.

Also stylesheets affect only the things we say to, unless you use some global commands as Foxx said.You can affect specific things:

Code: 
<div name="name1">Affected</div>
<div id="name2">Affected 2</div>

CSS :

div.name1 or .name1
{
           background-image: .....
};
and..
div#name2 or just #name2
{
          settings here...
};

Hope you got it :)
-Blane
 
Blane said:
You can just copy the <links> used in other pages and leave these which you don't want to show up in the template.

Example: Let's say in $header there's 123.css
Open it and copy all the settings you want to be shown in your template.
In the template, between <head> tags put something like this:


Code: 
<head>
<title>Shit here bla bla</title>
<style type="text/css">
               CODE HERE
</style>
</head>
You'll be ok, if I understood what you want exactly.

Also stylesheets affect only the things we say to, unless you use some global commands as Foxx said.You can affect specific things:

Code: 
<div name="name1">Affected</div>
<div id="name2">Affected 2</div>

CSS :

div.name1 or .name1
{
           background-image: .....
};
and..
div#name2 or just #name2
{
          settings here...
};
Hope you got it :)
-Blane
Click to expand...

You're telling me to put my code in the <head></head> tags? I thought you can't do that?
 
it already has a style, so you want it to have same background as the rest of the page or what?
PHP: 
div.transparent div.yoo-toppanel div.trigger-m 
background:transparent url(styles/transparent/images/trigger_m.png) repeat-x scroll 100% 0;
color:#FFFFFF;
float:left;
font-size:85%;
height:19px;
line-height:18px;
overflow:hidden;
text-align:center;
width:80px;
}
 
Probably easiest if you do
Code: 
<style type="text/css">
@import "jLogin.css";
<style>
and have a new style called jLogin.css, then add something like
Code: 
#jLogin {
             border: 1px solid #ffffff;
}

Then give the jLogin ID to the drop down input forms only, not the default ones on the right of screen.
Code: 
<!-- login form -->
		<form action="login.php?do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, 0)">
		<script type="text/javascript" src="clientscript/vbulletin_md5.js?v=374"></script>
		<table cellpadding="0" cellspacing="3" border="0">

		<tr>
			<td class="smallfont" style="white-space: nowrap;"><label for="navbar_username">User Name</label></td>

			<td><input type="text"  style="font-size: 11px" name="vb_login_username" id="jLogin" size="10" accesskey="u" tabindex="101" value="User Name" onfocus="if (this.value == 'User Name') this.value = '';" /></td>
			<td class="smallfont" nowrap="nowrap"><label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c" /> Stay On</label></td>
		</tr>
		<tr>
			<td class="smallfont"><label for="navbar_password">Password</label></td>
			<td><input type="password" style="font-size: 11px" name="vb_login_password" id="jLogin" size="10" tabindex="102" /></td>
			<td><input type="submit" class="button" value="Log in" tabindex="104" title="Enter your username and password in the boxes provided to login, or click the 'register' button to create a profile for yourself." accesskey="s" /></td>

		</tr>
		</table>
		<input type="hidden" name="s" value="" />
		<input type="hidden" name="securitytoken" value="guest" />
		<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 -->

That will/should work.
 
You must log in or register to reply here.

RaGEZONE Sponsor

    HyperFilter

About RaGEZONE

RaGEZONE® is the top forum for MMO, MMORPG, and mobile game development. We provide binaries, source codes, and tutorials for your favorite games, making it the go-to resource for developers and fans. You can also find and share private servers, fostering a vibrant gamer community.

Forum Statistics

Members online
839
Guests online
3,470
Total visitors
4,309
Totals may include hidden visitors.

RaGEZONE Partners

    nongamstopbets.com UK sites not on GamStop Casino Deps NZ
Back