Support ⇒ Themes ⇒ Opinions on modified viewtopic template ⇒ Community Forums ⇒ CPG Dragonfly™ CMS
Forum IndexThemes

Opinions on modified viewtopic template Reply to topic

Go to page Previous 1, 2, 3, 4 Next

and the links work? I've done one on my site but it displays the information instead of links. Yours is better. I would be interested in getting the code for it.

I don't like the buttons on the right though. They should be placed where the old contact buttons were. You are always at a premium for horizontal space especially with fixed width themes. I'm glad you got rid of the contact buttons in favor of a link. That's something I've wanted to do for years. Nice job.

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Linux/1.3.33/4.4/4.3.11


Hey djdevon,

excuse the messy code and what not.

Following intructions from the other thread and using that javascript file...

place the anylink.js file in the includes/javascript folder.

then I added this to my style.css file. Changed it a tad for colors and width from what was originally posted in the other thread.

.anylinkcss{ position:absolute; visibility: hidden; border:1px solid black; border-bottom-width: 0; font:normal 10px Verdana; line-height: 18px; z-index: 100; background-color: #FFFFFF; width: 200px; } .anylinkcss a{ width: 100%; display: block; text-indent: 1px; border-bottom: 1px solid black; padding: 1px 0; text-decoration: none; font-weight: bold; text-indent: 1px; } .anylinkcss a:hover{ /*hover background color*/ background-color: black; color: white; }

So, then I go into posts_list.html template file.

Remember I am using Forums Pro 2. I have no idea if that changes anything or not.

Regardless, this is what I have to make the drop down menu work.

Added this of course to the top of the posts_list.html page

<script type="text/javascript" src="includes/javascript/anylink.js"> <!-- * AnyLink CSS Menu script-Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code --> </script>

Starting around line #48 or so you will see...

<span class="name"> <a name="{post.S_POST_ID}" title="{post.S_POSTER_NAME_HTML}"></a> <strong> {post.S_POSTER_NAME} </strong> </span>

I changed it to:

<span class="name"> <a name="{post.S_POST_ID}" title="{post.S_POSTER_NAME_HTML}"></a> <strong> <a href="" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu1')">{post.S_POSTER_NAME}</a> <div id="anylinkmenu1" class="anylinkcss"> <!-- BEGIN user_details --> <a href="{post.user_details.U_LINK}" title="{post.user_details.L_TITLE}" <!-- IF post.user_details.B_TARGET -->target="_blank" <!-- ENDIF -->> {post.user_details.L_TITLE}</a> <!-- END user_details --> </div> </strong> </span>

Once again, sorry for how sloppy it is, I didn't get a chance to clean it really, just wanted it to work.

The nice tidbit is that the drop down menu populates itself. The titles will already be there depending on what the user has filled out in their information. And the links of course will all be there as well. It is pretty dang close to plug and play on this one. People should be able to get a kick out of this one.

And btw, I moved the buttons underneath because it was petty beat being over there on the right. Still can't really find a good place for user joined date and location. I don't want to clutter that left side of the box, but I might need to, I don't think i like it underneath now with the buttons down there.

I also attached a little screenie showing that as well as the drop down menu auto populating itself when users might fill in more information.
Attachment: example2.gif
Description Extended Drop down / Button moved below instead of on the right
Filesize 49.17 KiB
Viewed 81 Time(s)
You are not allowed to view/download this attachment

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Linux | Apache[1.3.37] (Unix) | MySQL[4.1.21] | PHP[4.4.5] | DF[9.1.2.1]


Just noticed a little issue.

When one user (testing in this case) fills in all the contact fields in their profile..and the drop down box is populated for that when you roll over their name, when you roll over another user (sulli in this case) then the options are still populated regardless of what that user has selected.

I'll have to fiddle around with it a bit.

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Linux | Apache[1.3.37] (Unix) | MySQL[4.1.21] | PHP[4.4.5] | DF[9.1.2.1]


Love how there is no edit on this forum. Actually, I need to change some of the script above for the rollover I believe, because only one set of user options are displaying for all users. So I must have left something out. Obviously some sort of IF statement or what not. I'll fiddle around with it later, sorry to get all your hopes up at this point.

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Linux | Apache[1.3.37] (Unix) | MySQL[4.1.21] | PHP[4.4.5] | DF[9.1.2.1]


Yea, looked it over just to actually diagnose what was going on, and basically when you load the page, I think the first user name controls which menu options appear.

So, either in the js file or however the info is called in

<!-- BEGIN user_details -->
				<a href="{post.user_details.U_LINK}" title="{post.user_details.L_TITLE}" <!-- IF post.user_details.B_TARGET -->target="_blank" <!-- ENDIF -->><img src="{S_THEME_PATH}/images/forumspro/{S_LANGUAGE}/user/{post.user_details.U_IMAGE}.gif" alt="{post.user_details.L_TITLE}" title="{post.user_details.L_TITLE}" border="0" /></a><!-- IF post.user_details.B_IMAGE_2 --><a href="{post.user_details.U_LINK_2}" title="{post.user_details.L_TITLE_2}" <!-- IF post.user_details.B_TARGET_2 -->target="_blank" <!-- ENDIF -->><img src="{S_THEME_PATH}/images/forumspro/{S_LANGUAGE}/user/{post.user_details.U_IMAGE_2}.gif" alt="{post.user_details.L_TITLE_2}" title="{post.user_details.L_TITLE_2}" border="0" /></a><!-- ENDIF -->
				<!-- END user_details -->


Minus the images of course. So close I can taste it. I would put my money on the way the javascript calls it. I will have to look over that file later.

I would appreciate it if anybody else took a look and perhaps it will stick out like a sore thumb and you can save me and some others some time.

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Linux | Apache[1.3.37] (Unix) | MySQL[4.1.21] | PHP[4.4.5] | DF[9.1.2.1]


<!-- BEGIN user_details --> <a href="{post.user_details.U_LINK}" title="{post.user_details.L_TITLE}" <!-- IF post.user_details.B_TARGET -->target="_blank" <!-- ENDIF -->><img src="{S_THEME_PATH}/images/forumspro/{S_LANGUAGE}/user/{post.user_details.U_IMAGE}.gif" alt="{post.user_details.L_TITLE}" title="{post.user_details.L_TITLE}" border="0" /></a><!-- IF post.user_details.B_IMAGE_2 --><a href="{post.user_details.U_LINK_2}" title="{post.user_details.L_TITLE_2}" <!-- IF post.user_details.B_TARGET_2 -->target="_blank" <!-- ENDIF -->><img src="{S_THEME_PATH}/images/forumspro/{S_LANGUAGE}/user/{post.user_details.U_IMAGE_2}.gif" alt="{post.user_details.L_TITLE_2}" title="{post.user_details.L_TITLE_2}" border="0" /></a><!-- ENDIF --> <!-- END user_details -->

the code that was supposed to be above

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Linux | Apache[1.3.37] (Unix) | MySQL[4.1.21] | PHP[4.4.5] | DF[9.1.2.1]


So you are building this for a new wow theme huh...?
I have been trying to rebuild my forum viewtopic as well but also using data from the wowrosterdf module and moving the email, pm , online/offline icons around the members avatar. as seen here wow-deception.com/Foru....html#1077
Which most of this idea came from midnightcartel.com which was built around phpBB.


cwells.net | FC7/Apache2/MYSQL5/PHP5/9.2
secret-order.us | FC7/Apache2/MYSQL5/PHP5/9.2RC
wowroster.net | FC8/Apache2+lighttpd/MYSQL5/PHP5/9.2

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
FC/Apache2/MYSQL5/PHP5/9.2


No, the OP was building a wow theme...however I am not, I was just changing around the post's looks. More importantly, I wanted to try and make the drop down menu for the user info work but as of right now, I am stuck at the point, once the rollover is used or the OP, there user info is now showing up under everyone's user name instead of each user having there own populated options.

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Linux | Apache[1.3.37] (Unix) | MySQL[4.1.21] | PHP[4.4.5] | DF[9.1.2.1]


Well, I don't think it's the javascript.

Taking out the images and putting this code into the a href for the submenu works, but it only works for the Original Poster. I assume it works for the first user name loaded I suppose...But theoretically, I just took out the images, so it should populate each one individually, because it does normally with the images.

Probably somethign terribly complicated with teh way teh javascript is interpreting it, or somethign terribly simple that I am missing.

Once again, anybody with some javascript knowledge, or knowledge of this posted code, if they would want to chime in, i know there are a few people that would appreciate it.

<!-- BEGIN user_details --> <a href="{post.user_details.U_LINK}" <!-- IF post.user_details.B_TARGET -->target="_blank" <!-- ENDIF -->> {post.user_details.L_TITLE}</a> <!-- IF post.user_details.B_IMAGE_2 --> <a href="{post.user_details.U_LINK_2}" <!-- IF post.user_details.B_TARGET_2 -->target="_blank" <!-- ENDIF -->>{post.user_details.L_TITLE_2}</a><!-- ENDIF --> <!-- END user_details -->

_D

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Linux | Apache[1.3.37] (Unix) | MySQL[4.1.21] | PHP[4.4.5] | DF[9.1.2.1]


Alright, tried a bunch of variations of what I thought could have been borking it...no joy yet.

Still can't even narrow it down to whether or not the "show" function is messing with something.

I just can' tseem to get why it works just fine later on the page (for each user) yet, even given several different variations, the submenu does not want to populate with each user, no matter what I do.

Hopefully something with extensive knowledge of this section of the forums, or with javascript can help me out.

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Linux | Apache[1.3.37] (Unix) | MySQL[4.1.21] | PHP[4.4.5] | DF[9.1.2.1]


Even dumbed down the Javascript to somethign terribly simple like,

<script type="text/javascript"> function show(cur,element) { var el = document.getElementById(element); el.style.left = cur.offsetLeft+"px"; el.style.top = cur.offsetTop+cur.offsetHeight+"px"; el.style.display = "block"; document.onclick = function(e) { var obj = document.all ? event.srcElement : e.target; if (obj != el && obj != cur) { el.style.display = "none"; } } } </script>

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Linux | Apache[1.3.37] (Unix) | MySQL[4.1.21] | PHP[4.4.5] | DF[9.1.2.1]


Oh I didn't know it was done with js. I'm trying to do it with CSS.

Here's what I've done with CSS

template/forums/viewtopic_body.html
<!-- BEGIN postrow --> <tr> <td width="150" align="left" valign="top" class="{postrow.ROW_CLASS}"> <span class="name"><a name="{postrow.U_POST_ID}"></a></span> <div class="tooltip"> <table border="0" cellpadding="2" cellspacing="2" width="100%"><tr><td class="toolbox" align="center"> <a style="POSITION: relative" href="index.php?name=Your_Account&amp;profile={postrow.POSTER_NAME}"><b>{postrow.POSTER_NAME}</b> <span style="text-align:left; DISPLAY: none; LEFT: 100px; TOP: 0px"> <b>About {postrow.POSTER_NAME}:</b> <br /> <img src=images/blocks/CPG_Main_Menu/icon_unselect.gif border="0" alt="" />&nbsp;{postrow.POSTER_RANK}<br /> <img src=images/blocks/CPG_Main_Menu/icon_unselect.gif border="0" alt="" />&nbsp;{postrow.POSTER_JOINED}<br /> <img src=images/blocks/CPG_Main_Menu/icon_unselect.gif border="0" alt="" />&nbsp;{postrow.POSTER_POSTS}<br /> <!-- IF postrow.POSTER_FROM --> <img src=images/blocks/CPG_Main_Menu/icon_unselect.gif border="0" alt="" />&nbsp;{postrow.POSTER_FROM}<br /> <!-- ENDIF --> </span> </a> </td></tr></table>

/*DJDEVON3 FORUM NAME PROFILE HOVER TOOLTIP*/ .tooltip A:hover { BACKGROUND-COLOR: #D1D1D1; TEXT-DECORATION: none } .tooltip .toolbox A:hover span { DISPLAY: block! important; BORDER: black 1px solid; WIDTH: 200px; COLOR: white; POSITION: absolute; background:#D1D1D1 url(/themes/TCD_Natural/images/TDbg.gif); }

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Linux/1.3.33/4.4/4.3.11


Cool! Glad this topic was dug up! I've been working on the same thing with one of my new themes - trying to "de-clutter" the viewtopic template.
I've also been trying to do it with CSS and your code helped me Devon - thanks!

What is the "DISPLAY: block! important;" property? that seemed to be about the only difference with our code.

Admin - Great Lakes Web Designs
Theme Designer - WebSite Guru Designs
Site Admin - Families with Food Allergies

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Linux 2.6.27-grsec/Apache 2.2.11/MySQL 5.0.67-community-log/PHP 5.2.8/DF 9.2.1


djdevon3 wrote
Oh I didn't know it was done with js. I'm trying to do it with CSS.

Here's what I've done with CSS


I originally set out to do an autopopulating one (just like the images down below) I saw that the script was there, and why not just use that, but apparently it just doesn't want to work.

I believe that coding in the links themselves and calling them out is the best way of doing it. Can do it long hand, or even define them as a link, but I felt defining them as a link ( like {U_USERACCOUNT} ) would be a bit redundant as the definition already seem to exist.

And like I said. I already have everything that populates and the links and titles all work. Just only for the first username on the page.

I really wish someone with some extensive knowledge of javascript could help out here, or even someone who knows teh forums system well, could step up and maybe explain why this problem may be occuring for me. I just don't see why you can't use the auto populating images in a submenu and have it work seperately (as it does already).

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Linux | Apache[1.3.37] (Unix) | MySQL[4.1.21] | PHP[4.4.5] | DF[9.1.2.1]


Alright, for those of you still browsing this thread.

It was incredibly simple and I can't believe I missed the logic.

You just needed to define a separate "menu" for each dropdown so therefore you would use an id of 'anylinkmenu{post.S_POST_ID}'

Hence, it would then create a different submenu for each post.

Regardless, it works as intended and auto-populates with whatever the user has available. Screenshots will be attached to show a few options that have filled out or all.

Right now, as it stands it is a rollover. I have already made a onclick one..and of course through CSS and some template changes, you could make it all pretty like the Invision or vB drop downs.

So I will post what I did. And remember this is for ForumsPro2. There are only a few changes that need to occur for the regular forums. I will post those after, I haven't tested them, but only a couple paths need to be changed.

The javascript file is from this THREAD

Download that puppy and put it in your /includes/javascript folder

Then in the list_posts.html file in the /template/forumspro. you would put this line at the top:

<script type="text/javascript" src="includes/javascript/anylink.js"> <!-- * AnyLink CSS Menu script-Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code --> </script>

Also on that page around line 41

Replace:

<span class="name"> <a name="{post.S_POST_ID}" title="{post.S_POSTER_NAME_HTML}"></a> <strong> {post.S_POSTER_NAME} </strong> </span>

With:

<span class="name"> <a name="{post.S_POST_ID}" title="{post.S_POSTER_NAME_HTML}"></a> <strong> <a href="" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu{post.S_POST_ID}')">{post.S_POSTER_NAME}</a> <div id="anylinkmenu{post.S_POST_ID}" class="anylinkcss"> <!-- BEGIN user_details --> <a href="{post.user_details.U_LINK}" <!-- IF post.user_details.B_TARGET -->target="_blank" <!-- ENDIF -->> {post.user_details.L_TITLE}</a> <!-- IF post.user_details.B_IMAGE_2 --> <a href="{post.user_details.U_LINK_2}" <!-- IF post.user_details.B_TARGET_2 -->target="_blank" <!-- ENDIF -->>{post.user_details.L_TITLE_2}</a><!-- ENDIF --> <!-- END user_details --> </div> </strong></span>

Once again, this is for forumspro2

I will change the code for the regular forums and hopefully post that in a bit.

Screenies:
Attachment: example3.gif
Description
Filesize 24.52 KiB
Viewed 76 Time(s)
You are not allowed to view/download this attachment
Attachment: example4.gif
Description
Filesize 27.73 KiB
Viewed 73 Time(s)
You are not allowed to view/download this attachment

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Linux | Apache[1.3.37] (Unix) | MySQL[4.1.21] | PHP[4.4.5] | DF[9.1.2.1]

All times are UTC
Go to page Previous 1, 2, 3, 4 Next


Jump to: