integrate a new button/function into vanilla.css

trash · October 2008

Hi,

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?

SubJunk · 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?

trash · October 2008

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.

SubJunk · October 2008

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.

trash · October 2008

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 : /

SubJunk · October 2008

If you add display:block; to the style does that fix it?

trash · October 2008

not really...

http://h4xr.org/qdjd

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?

SubJunk · October 2008

Oh woops, I think this will work:

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

trash · October 2008

one little letter with such a big effect

thank you so much

SubJunk · October 2008

Glad I could help mate

integrate a new button/function into vanilla.css

Comments