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.

integrate a new button/function into vanilla.css

edited October 2008 in Vanilla 1.0 Help

I do really like vanilla and the way you guys are in touch with the community. For me its, nearly perfect. There's individualism I'm lookin for ... so here's my question:

I need a button with the simple function for switching to the next page of comments/discussions. I know there are always addons like "Nuggets" or "Page Management" but I need a little more tricky technique (at least I think so). The button should be integrated into the vanilla.css file so I can customize it the way I want. What means I have to write some php actions ... and I dont have a clue.

is it possible to realize without two hours of headache?


  • SubJunkSubJunk ✭✭
    edited October 2008
    Well we can help you but can't promise it won't take 2 hours, 2 hours isn't really a lot of time at all with code ;)
    But ok, here is my disclaimer (I need to save this in a text file so I don't keep writing it out XD):
    Keep a record of the code changes you're about to make, because when/if you upgrade Vanilla in the future, that upgrade will erase these changes and they will need to be re-applied.
    Now that you have that in mind, here is how to make it so that you can control the next and previous buttons with CSS:

    Open Framework.Class.PageList.php and replace lines 187 to 247 with this: $sReturn .= ' <li id="previousPageButtonOn"><a href="'.str_replace('$$1', $iTmpPage, $Url).'">'.Iif($this->PreviousImage != '', '<img src="'.$this->PreviousImage.'" alt="'.$this->PreviousText.'" />', $PreviousText).'</a></li> '; } else { $sReturn .= ' <li id="previousPageButtonOff">'.Iif($this->PreviousImage != '', '<img src="'.$this->PreviousImage.'" alt="'.$this->PreviousText.'" />', $PreviousText).'</li> '; } // Display first page & elipsis if we have moved past the second page if ($FirstPage > 2) { $sReturn .= ' <li><a href="'.str_replace('$$1', 1, $Url).'">1</a></li> <li>...</li> '; } elseif ($FirstPage == 2) { $sReturn .= ' <li><a href="'.str_replace('$$1', 1, $Url).'">1</a></li> '; } $Loop = 0; for ($Loop = 1; $Loop <= $PageCount; $Loop++) { if (($Loop >= $FirstPage) && ($Loop <= $LastPage)) { if ($Loop == $CurrentPage) { $sReturn .= ' <li class="CurrentPage">'.$Loop.'</li> '; } else { $sReturn .= ' <li><a href="'.str_replace('$$1', $Loop, $Url).'">'.$Loop.'</a></li> '; } } } // Display last page & elipsis if we are not yet at the second last page if ($CurrentPage < ($PageCount - $MidPoint) && $PageCount > $this->PagesToDisplay - 1) { $sReturn .= '<li>...</li> <li><a href="'.str_replace('$$1', $PageCount, $Url).'">'.$PageCount.'</a></li> '; } else if ($CurrentPage == ($PageCount - $MidPoint) && ($PageCount > $this->PagesToDisplay)) { $sReturn .= '<li><a href="'.str_replace('$$1', $PageCount, $Url).'">'.$PageCount.'</a></li> '; } if ($CurrentPage != $PageCount) { $iTmpPage = $CurrentPage + 1; $sReturn .= '<li id="nextPageButtonOn"><a href="'.str_replace('$$1', $iTmpPage, $Url).'">'.Iif($this->NextImage != '', '<img src="'.$this->NextImage.'" alt="'.$this->NextText.'" />', $NextText).'</a></li> '; } else { $sReturn .= '<li id="nextPageButtonOff">'.Iif($this->NextImage != '', '<img src="'.$this->NextImage.'" alt="'.$this->NextText.'" />', $NextText).'</li>
    That may look like it's all complicated but the only changes I made were very simple, I have allowed the creation of 4 CSS entities you can now play with.
    They are IDs called:
    previousPageButtonOff (non-linked previous page button)
    previousPageButtonOn (linked previous page button)
    nextPageButtonOff (non-linked next page button)
    nextPageButtonOn (linked next page button)

    So now you can manipulate those IDs in vanilla.css however you want, place them wherever you want. Is that what you wanted?
  • first ... thank you for your time. I really appreciate that. It sounds great.

    I dont have enough time for a big test atm, I just paste this

    #nextPageButtonOn {
    background-image: url(button.png);
    position: absolute;
    top: 68px;
    left: 10px;
    width: 100px;

    at the end of the css. Only for a quick flight. I got the Image but its not clickable. Even with an another ID.
  • You're welcome :)
    I'll have a play with the code soon and post here when I find how to make it work.
    Oh, and did you remember the } at the end? That can make the CSS not work properly.
  • Found it. Its the bg-image. For some reason it doesnt work with it.
    Without it there are symbols like "< >" which are full functional.
    Want to change them into images : /
  • If you add display:block; to the style does that fix it?
  • edited October 2008
    not really...

    this should be my button. you see the symbol on the right - the image itself is not clickable (...but it should be)

    #nextPageButtonOn {
    background: #d9d9d9 url(bg2.gif);
    position: absolute;
    top: 68px;
    left: 10px;
    width: 50px;
    display: block;

    any other ideas?
  • Oh woops, I think this will work:

    #nextPageButtonOn a {
    background: #d9d9d9 url(bg2.gif);
    position: absolute;
    top: 68px;
    left: 10px;
    width: 50px;
    display: block;
  • one little letter with such a big effect

    thank you so much
  • Glad I could help mate :)
This discussion has been closed.