The Joomla! Forum ™



Forum rules


Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.



Post new topic Reply to topic  [ 20 posts ] 
Author Message
PostPosted: Sun Sep 23, 2007 5:57 pm 
Joomla! Apprentice
Joomla! Apprentice
Offline

Joined: Thu Aug 30, 2007 8:11 pm
Posts: 26
hey,

First of all, I am sorry about the length of thius post - most of it is the code from my css file, sorry!

I need a bit of help editing a template.. I am trying to insert a flashbanner instead of a img one, the css looks like this:

EDIT: The template I am using is called JA_Merucury

Code:
/* HEADER */
#ja-header-outer {
   background: url(../images/header-bg.gif);
   height: 119px;
   border-bottom: 1px solid #990000;
}

#ja-header {
   background: url(../images/image01.jpg) no-repeat center;
   height: 119px;
   margin: 0px auto;
}

#ja-gray-bar {
   background: url(../images/gray-bar.gif) top repeat-x;
   height: 14px;
}

/* TOP MODULES */


and the index like this, with my code (everything between the center tags I added)

Code:
<!-- BEGIN: HEADER -->
   <div id="ja-header-outer">
      <div id="ja-header">
    <center>
      <object
        classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
        codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,79,0"
        id="Movie1"
        width="770" height="119"
      >
        <param name="movie" value="Movie1.swf">
        <param name="bgimg" src="../images/image01.jpg">
        <param name="quality" value="high">
        <param name="allowscriptaccess" value="samedomain">
        <embed
          type="application/x-shockwave-flash"
          pluginspage="http://www.macromedia.com/go/getflashplayer"
          name="Movie1"
          width="760" height="114"
          src="Movie1.swf"
          bgcolor="#FFFFFF"
          quality="high"
          swliveconnect="true"
          allowscriptaccess="samedomain"
        >
          <noembed>
          </noembed>
        </embed>
      </object>
    </center>
      </div>
   </div>
   <!-- END: HEADER -->
and the result can be viewed at http://www.mrsir.com/tretton, as you can see its just a white box for some reason.. Does anyone know how to make this work?

Also, I have been trying to change the menu to rollover img buttons such as explained here http://www.tutorio.com/tutorial/pure-cs ... -rollovers

I have No idea where to enter this code, what to remove etc. If anyone could help me I would be Very grateful! Here is the complete CSS (I am guessing this is what needs to be edited)

[rtl]
Code:
/* CSS Document */

html {
   height: 100%;
}

body {
   height: 100%;
   margin-bottom: 1px;
}

.clr {
   clear: both;
}

.outline {
  border: 1px solid #ffffff;
  background: #ffffff;
   padding: 2px;
}

#buttons_outer {
   width: 635px;
     margin-bottom: 2px;
   margin-right: 2px;
   float: left;

}

#buttons_inner {
   border: 1px solid #ffffff;
   height: 21px !important;
   height: 23px;
}

#pathway_text {
  overflow: hidden;
   display: block;
   height: 25px;
   line-height: 25px !important;
   line-height: 22px;
   padding-left: 4px;
   border: 1px solid #ccc;
   margin-bottom: 2px;
}

#pathway_text img {
   margin-left: 5px;
   margin-right: 5px;
   margin-top: 6px;
}

#buttons {
   float: left;
   margin: 0px;
   padding: 0px;
   width: auto;
}


ul#mainlevel-nav
{
   list-style: none;
   padding: 0;
   margin: 0;
   font-size: 0.8em;
}

ul#mainlevel-nav li
{
   background-image: none;
   padding-left: 0px;
   padding-right: 0px;
   float: left;
   margin: 0;
   font-size: 11px;
   line-height: 21px;
   white-space: nowrap;
   border-right: 1px solid #ffffff;
}

ul#mainlevel-nav li a
{
   display: block;
   padding-left: 15px;
   padding-right: 15px;
   text-decoration: none;
   color: #333333;
   background: transparent;
}

#buttons>ul#mainlevel-nav li a { width: auto; }

   ul#mainlevel-nav li a:hover
{
   color: #fff;
   background: #36384f;
}


#search_outer {
   float: left;
   width: 165px;
}

#search_inner {
  border: 1px solid #cccccc;
   padding: 0px;
  height: 21px !important;
  height: 23px;
  overflow: hidden;
}

#search_inner form {
  padding: 0;
  margin: 0;
}

#search_inner .inputbox {
   border: 0px;
   padding: 3px 3px 3px 5px;
   font-family: arial, helvetica, sans-serif;
   font-size: 11px;
   color: #36384f;
}

#header_outer {
   text-align: left;
   border: 0px;
   margin: 0px;
}

#header {
   float: left;
   padding: 0px;
   margin-right: 2px;
   width: 635px;
   height: 150px;
   background: url(../images/header_short.jpg) no-repeat;
}

#top_outer{
   float: left;
   width: 165px;
}

#top_inner {
  border: 1px solid #ffffff;
   padding: 2px;
  height: 144px !important;
  height: 150px;
  overflow: hidden;
  float: none !important;
  float: left;
}

#left_outer {
  float: left;
   margin-top: 2px;
   width: 165px;
}

#left_inner {
  border: 1px solid #ffffff;
   padding: 2px;
  float: none !important;
  float: left;
}

#content_outer {
   padding: 0px;
   margin-top: 0px;
   margin-left: 2px;
   /** border: 1px solid #ffffff; **/
   float: left;
   width: 635px;
}

#content_inner{
  float: none !important;
  float: left;
  padding: 0;
  padding-top: 2px;
  margin: 0;
}

table.content_table {
  width: 100%;
   padding: 0px;
   margin: 0px;
}

table.content_table td {
   padding: 0px;
   margin: 0px;
}


#banner_inner {
   float: left;
   padding: 0px;
   height: 70px;
}

#poweredby_inner {
   float: right;
   padding: 0px;
   margin-left: 0px;
   height: 70px;
}

#right_outer {
   margin-left: 2px;
   width: 165px;
}

#right_inner {
  float: none !important;
  float: left;
  border: 1px solid #ffffff;
  padding: 2px;
}


.user1_inner {
   border: 1px solid #ffffff;
  float: none !important;
  float: left;
   margin: 0px;
   padding: 2px;
}

.user2_inner {
   border: 1px solid #ffffff;
  float: none !important;
  float: left;
   margin: 0px;
   padding: 2px;
}

table td.body_outer {
   padding: 2px;
   border: 1px solid #ffffff;
}

.maintitle {
   color: #ffffff;
   font-size: 40px;
   padding-left: 15px;
   padding-top: 20px;
}

.error {
  font-style: italic;
  text-transform: uppercase;
  padding: 5px;
  color: #cccccc;
  font-size: 14px;
  font-weight: bold;
}

/** old stuff **/

.back_button {
   float: left;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 3px double #cccccc;
  width: auto;
  background: url(../images/button_bg.png) repeat-x;
  padding: 0px 10px;
  line-height: 20px;
  margin: 1px;
}

.pagenav {
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 3px double #ffffff;
  width: auto;
  background: url(../images/button_bg.png) repeat-x;
  padding: 0px 10px;
  line-height: 20px;
  margin: 1px;
}

.pagenavbar {
   margin-right: 10px;
   float: right;
}

#footer {
   text-align: center;
   padding: 3px;
}

ul
{
margin: 0;
padding: 0;
list-style: none;
}

li
{
line-height: 15px;
padding-left: 15px;
padding-top: 0px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
background-position: 0px 2px;
}


td {
   text-align: left;
   font-size: 11px;
}



body {
   margin: 15px;
   height: 100%;
   padding: 0px;
   font-family: Arial, Helvetica, Sans Serif;
   line-height: 120%;
   font-size: 11px;
   color: #333333;
   background: #ffffff;
}

/* Joomla core stuff */
a:link, a:visited {
   color: #36384f; text-decoration: none;
   font-weight: bold;
}

a:hover {
   color: #900;   text-decoration: none;
   font-weight: bold;
}

table.contentpaneopen {
  width: 100%;
   padding: 0px;
   border-collapse: collapse;
   border-spacing: 0px;
   margin: 0px;
}

table.contentpaneopen td {
   padding-right: 5px;
}

table.contentpaneopen td.componentheading {
   padding-left: 4px;
}



table.contentpane {
  width: 100%;
   padding: 0px;
   border-collapse: collapse;
   border-spacing: 0px;
   margin: 0px;
}

table.contentpane td {
   margin: 0px;
   padding: 0px;
}

table.contentpane td.componentheading {
   padding-left: 4px;
}

table.contentpaneopen fieldset {
   border: 0px;
   border-bottom: 1px solid #eee;
}

.button {
  color: #36384f;
  font-family: Arial, Hevlvetica, sans-serif;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 3px double #cccccc;
  width: auto;
  background: url(../images/button_bg.png) repeat-x;
  padding: 0px 5px;
  line-height: 18px !important;
  line-height: 16px;
  height: 26px !important;
  height: 24px;
  margin: 1px;
}

.inputbox {
   padding: 2px;
   border:solid 1px #cccccc;
   background-color: #ffffff;
}

.componentheading {
   background: url(../images/subhead_bg.png) repeat-x;
   color: #cccccc;
   text-align: left;
   padding-top: 4px;
   padding-left: 4px;
   height: 21px;
   font-weight: bold;
   font-size: 10px;
   text-transform: uppercase;

}

.contentcolumn {
   padding-right: 5px;
}

.contentheading {
   height: 30px;

   color: #36384f;
   font-weight: bold;
   font-size: 14px;
   white-space: nowrap;
}



.contentpagetitle {
   font-size: 13px;
   font-weight: bold;
   color: #cccccc;
   text-align:left;
}

table.searchinto {
   width: 100%;
}

table.searchintro td {
   font-weight: bold;
}

table.moduletable {
   width: 100%;
   margin-bottom: 5px;
   padding: 0px;
   border-spacing: 0px;
   border-collapse: collapse;
}

div.moduletable {
   padding: 0;
   margin-bottom: 2px;
}

table.moduletable th, div.moduletable h3 {
   background: url(../images/subhead_bg.png) repeat-x;
   color: #cccccc;
   text-align: left;
   padding-left: 4px;
   height: 21px;
   line-height: 21px;
   font-weight: bold;
   font-size: 10px;
   text-transform: uppercase;
   margin: 0 0 2px 0;
}

table.moduletable td {
   font-size: 11px;
   padding: 0px;
   margin: 0px;
   font-weight: normal;
}

table.pollstableborder td {
  padding: 2px;
}

.sectiontableheader {
  font-weight: bold;
  background: #f0f0f0;
  padding: 4px;
}

.sectiontablefooter {

}

.sectiontableentry1 {
   background-color : #ffffff;
}

.sectiontableentry2 {
   background-color : #f9f9f9;
}

.small {
   color: #999999;
   font-size: 11px;
}

.createdate {
   height: 15px;
   padding-bottom: 10px;
   color: #999999;
   font-size: 11px;
}

.modifydate {
   height: 15px;
   padding-top: 10px;
   color: #999999;
   font-size: 11px;
}

table.contenttoc {
  border: 1px solid #cccccc;
  padding: 2px;
  margin-left: 2px;
  margin-bottom: 2px;
}

table.contenttoc td {
  padding: 2px;
}

table.contenttoc th {
  background: url(../images/subhead_bg.png) repeat-x;
  color: #cccccc;
   text-align: left;
   padding-top: 2px;
   padding-left: 4px;
   height: 21px;
   font-weight: bold;
   font-size: 10px;
   text-transform: uppercase;
}

a.mainlevel:link, a.mainlevel:visited {
   display: block;
   background: url(../images/menu_bg.png) no-repeat;
   vertical-align: middle;
   font-size: 11px;
   font-weight: bold;
   color: #ccc;
   text-align: left;
   padding-top: 5px;
   padding-left: 18px;
   height: 20px !important;
   height: 25px;
   width: 100%;
   text-decoration: none;
}

a.mainlevel:hover {
   background-position: 0px -25px;
   text-decoration: none;
   color: #fff;
}

a.mainlevel#active_menu {
   color:#fff;
   font-weight: bold;
}

a.mainlevel#active_menu:hover {
   color: #fff;
}

a.sublevel:link, a.sublevel:visited {
   padding-left: 1px;
   vertical-align: middle;
   font-size: 11px;
   font-weight: bold;
   color: #36384f;
   text-align: left;
}

a.sublevel:hover {
   color: #900;
   text-decoration: none;
}

a.sublevel#active_menu {
   color: #333;
}

.highlight {
   background-color: Yellow;
   color: Blue;
   padding: 0;
}
.code {
   background-color: #ddd;
   border: 1px solid #bbb;
}

form {
/* removes space below form elements */
   margin: 0;
    padding: 0;
}

div.mosimage {
  border: 1px solid #ccc;
}

.mosimage {
  border: 1px solid #cccccc;
  margin: 5px
}

.mosimage_caption {
  margin-top: 2px;
  background: #efefef;
  padding: 1px 2px;
  color: #666;
  font-size: 10px;
  border-top: 1px solid #cccccc;
}

span.article_seperator {
   display: block;
   height: 1.5em;
}
[/rtl]


Last edited by martinjonson on Sun Sep 23, 2007 6:00 pm, edited 1 time in total.

Top
 Profile  
 
PostPosted: Mon Sep 24, 2007 12:00 pm 
User avatar
Joomla! Ace
Joomla! Ace
Offline

Joined: Thu Sep 21, 2006 3:35 pm
Posts: 1533
Location: Amsterdam
Hi,
I think mainly you have a path problem
your CSS doesn't seem to exist check the paths in your headcode http://mrsir.com/tretton/templates/ja_m ... te_css.css

More than likely your swf doesn't exist either in the path you provide Movie1.swf which would put it in the root of your template folder.

_________________
Klikstudio New media workshops
http://www.klikstudio.net


Top
 Profile  
 
PostPosted: Mon Sep 24, 2007 1:51 pm 
Joomla! Apprentice
Joomla! Apprentice
Offline

Joined: Thu Aug 30, 2007 8:11 pm
Posts: 26
Hi!

Thank you for your answer. :) The movie is actually in the root of my template folder (mrsir.com/tretton/templates/ja_mercury) i put it there while trying to gt it working just to simplify things. Whats weird is, I tried the website in FireFox and it loaded the swf - but IE did not (tried on 2 comps). Ireplaced it with a banner picture for now, but ideally I would like to have my SWF. Thanks you!


Top
 Profile  
 
PostPosted: Mon Sep 24, 2007 2:02 pm 
User avatar
Joomla! Ace
Joomla! Ace
Offline

Joined: Thu Sep 21, 2006 3:35 pm
Posts: 1533
Location: Amsterdam
Hi,
The object code is what ie uses, the embed is voor mozilla browsers.
http://kb.adobe.com/selfservice/viewCon ... &sliceId=1
If it doesnt show in explorer than the problem is most likely in your object code
I can't really spot it, try putting the full path to the flash file 

_________________
Klikstudio New media workshops
http://www.klikstudio.net


Top
 Profile  
 
PostPosted: Mon Sep 24, 2007 4:23 pm 
Joomla! Apprentice
Joomla! Apprentice
Offline

Joined: Thu Aug 30, 2007 8:11 pm
Posts: 26
You are King! It works, thank you! :)


Top
 Profile  
 
PostPosted: Mon Sep 24, 2007 6:01 pm 
User avatar
Joomla! Apprentice
Joomla! Apprentice
Offline

Joined: Tue Mar 13, 2007 1:35 pm
Posts: 20
Location: UK
Did you get the css rollovers working martin? I have a similar problem, haven't got mine working yet.


Top
 Profile  
 
PostPosted: Tue Sep 25, 2007 9:59 am 
Joomla! Apprentice
Joomla! Apprentice
Offline

Joined: Thu Aug 30, 2007 8:11 pm
Posts: 26
I am sorry to say that I did not. :(


Top
 Profile  
 
PostPosted: Tue Sep 25, 2007 10:02 am 
User avatar
Joomla! Ace
Joomla! Ace
Offline

Joined: Thu Sep 21, 2006 3:35 pm
Posts: 1533
Location: Amsterdam
Hi,
Which rollovers are you trying to get working?
Mainmenu, different menu or standard links?

_________________
Klikstudio New media workshops
http://www.klikstudio.net


Top
 Profile  
 
PostPosted: Tue Sep 25, 2007 3:44 pm 
Joomla! Apprentice
Joomla! Apprentice
Offline

Joined: Thu Aug 30, 2007 8:11 pm
Posts: 26
Hi again!

Main menu, top menu already has them. Thank you!


Top
 Profile  
 
PostPosted: Tue Sep 25, 2007 4:00 pm 
User avatar
Joomla! Ace
Joomla! Ace
Offline

Joined: Thu Sep 21, 2006 3:35 pm
Posts: 1533
Location: Amsterdam
This is the CSS code for the mainmenu, you can add it to the css of your template and style it the way you want.

/* the mainlevel menu */

a.mainlevel:link, a.mainlevel:visited {

}

a.mainlevel:hover {

}

a.mainlevel#active_menu:hover {
       
     
}


a.mainlevel#active_menu {

}

_________________
Klikstudio New media workshops
http://www.klikstudio.net


Top
 Profile  
 
PostPosted: Tue Sep 25, 2007 7:41 pm 
Joomla! Apprentice
Joomla! Apprentice
Offline

Joined: Tue Sep 25, 2007 7:33 pm
Posts: 46
Location: South Africa
Hey. I have been having a similar problem, but having tried to go through some of the options I have found online, most not really relevant to Joomla templating, I have spent most of my time pulling my hair out. I have a header image for a template called js_lunar_eclipse which a client wants me to use. I have never before had to embed a flash movie into css, and so I am a little lost. Any help would me more than welcome.

Oh, the header image (currently is a jpg) is included as a background image in the css like follows:

#header {
position: relative;
float: left;
padding: 0px;
margin-right: 2px;
width: 735px;
height: 150px;
background: url(../images/header_short.jpg) no-repeat;
}

When I try and change this to ".../images/header_short.swf) no-repeat; the whole site loses its css styling. Then when I tried to remove the "background:" reference in the css and add the image into the index.php file in the html, all I get is a blank space where the movie should be. Any pointers?

Dom


Top
 Profile  
 
PostPosted: Tue Sep 25, 2007 7:47 pm 
User avatar
Joomla! Ace
Joomla! Ace
Offline

Joined: Thu Sep 21, 2006 3:35 pm
Posts: 1533
Location: Amsterdam
Its not possible to embed a flash file in CSS!
You need the object and embed code which can only be embedded in HTML.
You have to find the header div in your html and fill it with your flash file.
Good Luck.

_________________
Klikstudio New media workshops
http://www.klikstudio.net


Top
 Profile  
 
PostPosted: Tue Sep 25, 2007 8:07 pm 
Joomla! Apprentice
Joomla! Apprentice
Offline

Joined: Tue Sep 25, 2007 7:33 pm
Posts: 46
Location: South Africa
Thanks Salty. Love your work on your site.

Pity that I am going to have to do what I need to do.... but thanks for that. Is there not a Joomla module that I can install which would allow me to use a flash movie, or would that only be in the content side of things, like the "stories" images, or random images, or banners...?


Top
 Profile  
 
PostPosted: Tue Sep 25, 2007 9:21 pm 
User avatar
Joomla! Ace
Joomla! Ace
Offline

Joined: Thu Sep 21, 2006 3:35 pm
Posts: 1533
Location: Amsterdam
Hi
Thanks!.
You can use JCE editor for flash files but that is only on the content side of things, if you have problems putting in the flash into the template, get the html code that flash outputs and post the html of your template (and a link to the site if its online) I'll have a look.
You can use flash in banner components check out the extensions.

_________________
Klikstudio New media workshops
http://www.klikstudio.net


Top
 Profile  
 
PostPosted: Tue Sep 25, 2007 9:30 pm 
Joomla! Apprentice
Joomla! Apprentice
Offline

Joined: Tue Sep 25, 2007 7:33 pm
Posts: 46
Location: South Africa
strange that it seems like such a run around.... One would think that Dreamweaver would have this as a function.

I actually know the developer of JCE. I use his wireless broadband connection, since he lives 2 houses away from me... Small world eh?

Thanks for your input. The template is not yet online, and I'm not entirely sure I know what you mean by "the html that flash outputs". The html in my template file is currently as follows:

defined( '_VALID_MOS' ) or die( 'Restricted access' );
// needed to seperate the ISO number from the language file constant _ISO
$iso = explode( '=', _ISO );
// xml prolog
echo '';
?>








if ( $my->id ) {
initEditor();
}

?>










 
   
 
 


















if ( mosCountModules( 'top' ) ) {
mosLoadModules ( 'top', -2 );
} else {
?>
Top Module Empty
}
?>
   


etc etc......

Would it be better if I used an absolute link, rather than the relative link?

Top
 Profile  
 
PostPosted: Tue Sep 25, 2007 10:13 pm 
User avatar
Joomla! Ace
Joomla! Ace
Offline

Joined: Thu Sep 21, 2006 3:35 pm
Posts: 1533
Location: Amsterdam
The world is getting smaller and smaller, tell your neighbor he's doing a very good job!
Ie definitely prefers absolute paths, (don't ask me why) so try the absolute path in the object
this is part of the very dispersed documentation
http://kb.adobe.com/selfservice/viewCon ... &sliceId=1

Is it working with the embed  in mozilla browsers?

_________________
Klikstudio New media workshops
http://www.klikstudio.net


Top
 Profile  
 
PostPosted: Tue Sep 25, 2007 10:17 pm 
Joomla! Apprentice
Joomla! Apprentice
Offline

Joined: Tue Sep 25, 2007 7:33 pm
Posts: 46
Location: South Africa
He is probably pulling his hair out right now trying to get the mambot sorted out for 1.5... hehehe

It does the same thing in Mozilla and in firefox as it does in IE... just blank. I will carry on trying different things, otherwise I will have to change the animation slightly and revert back to gif animated header...  ???

Thx


Top
 Profile  
 
PostPosted: Tue Sep 25, 2007 10:24 pm 
User avatar
Joomla! Ace
Joomla! Ace
Offline

Joined: Thu Sep 21, 2006 3:35 pm
Posts: 1533
Location: Amsterdam
Join the club, theres a bit off 1.5 hairpulling here!
No, don't put in a gif, its not that difficult to get Flash running! Get the html code from flash, When you choose 'save as html'.
put this code into the html of the template, upload the flash file and play around with the paths.
(If you had a link I could solve it faster:)

_________________
Klikstudio New media workshops
http://www.klikstudio.net


Top
 Profile  
 
PostPosted: Tue Sep 25, 2007 10:46 pm 
Joomla! Apprentice
Joomla! Apprentice
Offline

Joined: Tue Sep 25, 2007 7:33 pm
Posts: 46
Location: South Africa
Thanks for all your help. Managed to get things sorted out with a little playing around with absolute and relative links. It appeared as though DW had gone and changed a couple of the relative links to absolute, and since I am editing in JSAS, it didn't like it! Thanks though, you have been a great help!


Top
 Profile  
 
PostPosted: Tue Sep 25, 2007 10:52 pm 
User avatar
Joomla! Ace
Joomla! Ace
Offline

Joined: Thu Sep 21, 2006 3:35 pm
Posts: 1533
Location: Amsterdam
Glad to help :)

_________________
Klikstudio New media workshops
http://www.klikstudio.net


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 20 posts ] 



Who is online

Users browsing this forum: No registered users and 39 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group