Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Options

Change login link with an image

edited January 2009 in Vanilla 1.0 Help
Hi.
In these days i'm searching to use an image instead of the login link in home page but i don't know wich file and wich part of code i need to change. I'll use a rollover png file downloaded with the css code from a guide. It uses the class button to specify the function for the button and i think is it to make mistakes in the code. I'm using the theme delbat with basecamp style.
The piece of code i'm searching to use is the following linked here (the pages 1 and 2 of the guide).

http://css.html.it/articoli/leggi/2256/bottoni-con-rollover-flessibili/1/

And where may i add (wich folder) the image .png?
Thanks a lot.
Phebo

Comments

  • Options
    The guide you're looking at uses a <span> to accomplish its button so you'll need to modify a theme file. Take a look at themes/delbat/menu.php and add a <span> to the lines that look like this (I've added the span in here):<?php // ... $this->Context->GetDefinition('SignedInAsX')).' (<a href="'.$this->Context->Configuration['SIGNOUT_URL'].'"><span>'.$this->Context->GetDefinition('SignOut').'</span></a>)'; // ... echo $this->Context->GetDefinition('NotSignedIn').' (<a href="'.AppendUrlParameters($this->Context->Configuration['SIGNIN_URL'], 'ReturnUrl='.GetRequestUri()).'"><span>'.$this->Context->GetDefinition('SignIn').'</span></a>)'; // ...
    Then for your CSS in the tutorial you'll need to replace "a.button" selectors with "#Session a".
  • Options
    Thank you very much sirlancelot. Some problems more: the new code in menu.php of delbat template is now: $this->Context->GetDefinition('SignedInAsX')).' (<a href="'.$this->Context->Configuration['SIGNOUT_URL'].'"><span>'.$this->Context->GetDefinition('SignOut').'</span></a>)'; } else { echo $this->Context->GetDefinition('NotSignedIn').' (<a href="'.AppendUrlParameters($this->Context->Configuration['SIGNIN_URL'], 'ReturnUrl='.GetRequestUri()).'"><span>'.$this->Context->GetDefinition('SignIn').'</span></a>)'; and the new code in css becomes: a#Session{float: left;height: 35px;padding-left: 18px; font: bold 150%/35px "Trebuchet MS",Arial,sans-serif; background: url(bottone.png) no-repeat top left; text-decoration: none;color: #286C98} a#Session span{display: block;padding-right: 18px; background: url(bottone.png) no-repeat top right} a#Session:hover{background-position: bottom left;color: #6B9828} a#Session:hover span{background-position: bottom right} but nothing appears. Could it be due to the path of the image? It's in the folder of basecamp style (the one in use). Or may i insert anything else? Thank you so much.
  • Options
    edited January 2009
    Your CSS Selector is wrong. It should be #Session a {} and #Session a span {}.
  • Options
    Dear sirlancelot i followed your instructions but nothing:

    #Session a {float: left;height: 35px;padding-left: 18px;
    font: bold 150%/35px "Trebuchet MS",Arial,sans-serif;
    background: url(bottone.png) no-repeat top left;
    text-decoration: none;color: #286C98}

    #Session a span {display: block;padding-right: 18px;
    background: url(bottone.png) no-repeat top right}

    #Session a:hover{background-position: bottom left;color: #6B9828}
    #Session a:hover span{background-position: bottom right}
  • Options
    I should've also mentioned that url() commands in CSS are relative to the css file being executed. So if you have theme/style.css and your images are in theme/images/button.png, your CSS should be background: url(images/button.png);
  • Options
    Ok... i'm sorry... i founded in my css style sheet another selector (forgotten) about #session. Now i see the image even if divided into two lines.
  • Options
    edited January 2009
    I encounter into an error of probable repetition or something similar: look please: [url=http://www.freeimagehosting.net/image.php?9ef85d7c76.png][/url] using this code: #Session { width:100%; position: absolute; height: 35px; top:20px; right:140px; padding-left: 18px; text-align:right; font: bold 150%/35px "Trebuchet MS",Arial,sans-serif; font-size:18px; background: url(bottone.png) no-repeat top left; text-decoration: none; color: #286C98 } #Session a span { display: block; padding-right: 18px; background: url(bottone.png) no-repeat top right } #Session a:hover{ background-position: bottom left; color: #6B9828 } #Session a:hover span{ background-position: bottom right } div.button-cont{float: left;width: 100%;margin: 1.5em 0} and html code: $this->Context->GetDefinition('SignedInAsX')).' (<a href="'.$this->Context->Configuration['SIGNOUT_URL'].'"><span>'.$this->Context->GetDefinition('SignOut').'</span></a>)'; } else { echo $this->Context->GetDefinition('NotSignedIn').' (<div class="button-cont"><a href="'.AppendUrlParameters($this->Context->Configuration['SIGNIN_URL'], 'ReturnUrl='.GetRequestUri()).'"><span>'.$this->Context->GetDefinition('SignIn').'</span></a></div>)';
Sign In or Register to comment.