Index Page Modification Help Requested - Fisubice Theme

Regular Joined: Feb 24, 2009 Posts: 81 Location: UK

I'm using 2.5 Ravennuke, and the Fisubice theme. I'd like to add a large image to the index page on my site, I'd like it to be displayed under the navigation bar but ABOVE the side blocks and center module. (I've modified the fisubice theme so that it is 980px in width, and my image is also that width too) I tried to add it to the header.html, and although that worked, I soon realised that it was also showing on all of the other pages too, but I only want it to display on the main INDEX page, even when someone is logged in to the system. I've given it alot of thought and tried a few things, but as yet not been able to work it out, so please can anyone help me with this and tell me how to achieve this?

Thank you in advance for any help with this Smile

Site Admin Joined: Aug 22, 2007 Posts: 1775

Open theme.php and found in function themeheader:

Code:

$public_msg = public_message();

add after:

Code:

    if (is_user($user) && defined('HOME_FILE')) {


       $myimage = '<tr valign="top"><td align="center"><img src="themes/fisubice/images/logo.gif" border="0" alt="" /></td></tr>';


    } else {


       $myimage = '';


    }

Open the header.html and found:

Code:

   <tr valign="top">


      <td align="center">$public_msg</td>


   </tr>

add after:

Code:

$myimage

save and close the files - done!

Posted: Thu Oct 18, 2012 8:25 am

Thank you for your help, its much appreciated Smile

The code you gave worked if a User is logged in but didn't seem to work if the User was logged out, and as I really wanted the image to show on the index page whether the User was logged in or out, I found I had to add to the code to make it work as I wanted it to.

Just in case anyone else wants to do this, here's the altered code.

ALTER THIS PART OF THE CODE THAT NERALEX POSTED ABOVE

Code:

if (is_user($user) && defined('HOME_FILE')) { 


       $myimage = '<tr valign="top"><td align="center"><img src="themes/fisubice/images/logo.gif" border="0" alt="" /></td></tr>';


     } else { 


       $myimage = ''; 


    }

TO THIS

Code:

if ($username == 'Anonymous' && defined('HOME_FILE')) { 


       $myimage = '<tr valign="top"><td align="center"><img src="themes/fisubice/images/indigo.gif" border="0" alt="" /></td></tr>';


     } else 


        if (is_user($user) && defined('HOME_FILE')){ 


       $myimage = '<tr valign="top"><td align="center"><img src="themes/fisubice/images/indigo.gif" border="0" alt="" /></td></tr>';


     } else { 


       $myimage = ''; 


    }

Posted: Thu Oct 18, 2012 8:48 am

ok, then you can write it a little bit shorter...

Code:

     if (defined('HOME_FILE')) {


       $myimage = '<tr valign="top"><td align="center"><img src="themes/fisubice/images/indigo.gif" border="0" alt="" /></td></tr>';


     } else {


       $myimage = '';


     }

Posted: Fri Oct 19, 2012 3:47 am

Thats great, thank you Smile

Posted: Fri Oct 19, 2012 4:00 am

I now have another question that relates to this, if I wanted to have the image as a background image and be able to input text on it later at anytime, how do I input the - $myimage - code on the header.html to enable me to do that?

Thank you Smile

Posted: Fri Oct 19, 2012 10:18 am

You can work with css classes. For example open your styles/style.css and create a new class with a width and height value. You need the values to get the free place to write your text.

Code:

.myimagebg {width:100%; height:160px; background:url('../themes/fisubice/images/indigo.gif') no-repeat top center;}

After that add the new class on your td with the image inside and remove the img-tag.

Code:

$myimage = '<tr valign="top"><td align="center" class="myimagebg"><p class="thick">Your headline!</p><span class="text-left">Here you can write your long text.</span></td></tr>';

Posted: Mon Oct 22, 2012 4:52 am

Thank you very much for the reply, but unfortunately, the code didn't work - for some reason the image would not show at all, it seemed like the CSS wasn't being read, so I played with it a bit and got it working using this in the css. What I didn't like about this was that it created a bigger space above the image than was there when just using an image on its own.

CSS

Code:

.myimagebg {


    width:960px; 


    height:230px;


    background:url(../../../themes/fisubice/images/indigo.gif);


    background-repeat: no-repeat;


    align:center;


    valign:top;


}

Posted: Mon Oct 22, 2012 6:42 am

jane65 wrote:

Thank you very much for the reply, but unfortunately, the code didn't work - for some reason the image would not show at all, it seemed like the CSS wasn't being read....

You have called me no values of your image. How would I know which values have your picture? The height:160px; was an example. Make the value bigger. This value is the height of the table not of your picture, because you use that as background.

In CSS exists no atrributes like align:center; or valign:top; !

Code:

.myimagebg {


    width:960px;


    height:230px;


    background:url(../../../themes/fisubice/images/indigo.gif) no-repeat top center;


    vertical-align:top;


    overflow:hidden;


}

look here: http://jsfiddle.net/JPhQJ/

http://www.w3schools.com/css/css_background.asp
http://www.w3schools.com/css/default.asp