Back to vBulletin 3.8 Template Modifications

[CM] RSS Button On All Forums (Hightlights When Hover)
Mod Version: 1.00, by ChiNa

vB Version: 3.8.7 Rating: (1 vote - 5.00 average) Installs: 5
Released: 03 Aug 2012 Last Update: Never Downloads: 0
Not Supported Template Edits Additional Files Re-usable Code Translations  

For vBulletin 4.2, CLICK HERE!

Spoiler (click to open)


This was brought to you by ChiNa-Man

First of all I am a free soul, So if one of you guys decided to post this on another forum or a website, I would be appreciated if you give some CREDITs to the Developer simply typing his name: Credits to: ChiNa-Man, and do not CHANGE or DELETE the ORIGINAL CONTENT! Thank you!

:::::::::::::::::::::::::::::::::::::::::::::

I made this Modification for vB 3.8! I then tried to make a one for vB 4.2! And finally made it...

This modification is different than others, because the RSS FEED icon
HIGHLIGHTS when you hover the mouse over it. So lets get started!

Only 2 Template Edits

For vBulletin 3.8, Click HERE!

Example Image 1


Example Image 2


Extra RSS Feed icon if you decided to replace to Original one!

Lets Get Started:

Befor we start, you need to be sure that your RSS FEED SYNDICATION is enabled on your vBulleton 4.x! So first you login to your ADMINCP, Then go to "Settings" and then "Options", now on your right side find "External Data Provider"! Now look for the line / text where it says "Enable RSS Syndication", click and mark it as YES!!

Click and SAVE!

Now take a look on your forum home, and you will see that the RSS FEED icon is enabled! And you will see it on in front of your Forum Titles! Like the image below:


RSS When Its Enabled

::::::::::::::: Modification Starts Here :::::::::::::::

Step 1: Go to your ADMINCP. Then Styles & Templates, click on Style Manager.

Now in the dropdown to you right, choose Edit Template, and then look for CSS Templates! In your CSS Templates look for additional.css

Step 2: In the additional.css add the following code below, at the bottom of all the other codes (If you have some, Else its an empty Template)!

Code to Add in additional.css:
PHP Code:
.icon {
        
vertical-alignmiddle;
        
margin-top: -4px;
        
margin-right2px;

Step 2: Now in the dropdown, choose Edit Template, and look for Forum Home Templates. Scroll down and click / choose the forumhome_forumbit_level2_post
template.

This is where we should add the RSS BUTTON CODE!

Step 3:
Find the the following lines in forumhome_forumbit_level2_post:

Code to find:
PHP Code:
<li class="forumactionlink rsslink"><a href="external.php?{vb:raw session.sessionurl}type=RSS2&amp;forumids={vb:raw forum.forumid}" title="{vb:rawphrase view_forum_rss_feed}">{vb:rawphrase view_forum_rss_feed}</a></li


Replace with:

PHP Code:
<span style="float: right;"><a href="external.php?{vb:raw session.sessionurl}type=RSS2&amp;forumids={vb:raw forum.forumid}">
<
img src="images/misc/rss.png" class="icon" alt="View this forum's RSS feed"  style="margin-top: -2px; opacity:0.5;filter:alpha(opacity=50)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" />
</
a></span

Make sure to replace the EXACT, code as showen, and nothing else!
Click Save, and your DONE!

::::::::::::::: Modification Ends :::::::::::::::

Extra & Optional

If you wanted to replace the original RSS icon with this , then the icon should be added in your root "images/misc/rss.png" folder and replace the old! Just Right Click to copy the icon!

Thanks..

Notice: If you use this modification, then please click on Installed for the purpose of later support. Thank you !

Close


Works for all vB 3.8.x

This is my 2nd Modification this week ever, for vBulletin! I hope you will like it! If so, I will make many other simple tuts later on!

Lets get started.

Well I have seen a few modifications like this, but this one is a bit different than other "RSS Feed Syndication" mods! This modification will show the opacity, and it HIGHLIGHTS the button when you hover the mouse over it. Many forum and site owners does not know the importance of having a RSS Feed Syndication added in their forums or websites. But after I understood what it means for a forum and its users to follow up on the subscribed Feeds, then I decided to add one on each of my forums!

Only 2 Template Edits

Image 1 Below: (Hover With No Opacity, No Highlight)



Image 2:(Hover With Opacity and Highlighted)




Example of the mod, when its finished:



======================== Tutorial Starts Here ==========================

Step 1: Go to your ADMINCP. Then Styles & Templates, click on Style Manager. Now click on the the template NAME that you use! And in the dropdown menu click on "Main CSS"!

In "Main CSS" scroll all the way down till you find the "Additional CSS Definitions" section! In there below all the other codes, add the following code below:
Add the following in Additional CSS Definitions:
PHP Code:
.icon {
        
vertical-alignmiddle;
        
margin-top: -4px;
        
margin-right2px;



Step 2:
Now go back to your Style Manager, and click on the the template NAME that you use!

Now find the "Forum Home Templates"! After you found it you will need to search for "forumhome_forumbit_level2_post", and click to get access inside the "forumhome_forumbit_level2_post"!

Now this is where we should add the RSS BUTTON CODE!

Step 3:
Find the the following line in forumhome_forumbit_level2_post:

Code to find:
PHP Code:
<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]"><strong>$forum[title]</strong></a
Add the code below ON TOP of it

Add this code:
PHP Code:
<span style="float: right;"><a href="external.php?type=rss2&forumids=$forum[forumid]">
<
img src="images/rss.png" class="icon" alt="RSS"  style="margin-top: -2px; opacity:0.5;filter:alpha(opacity=50)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"  onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" />
</
a></span


Step 4:
(Last step)Now copy the "rss.png" (RSS
Button Image) from the attachments below, or copy it from the image I have linked! And upload the "rss.png" in the root of your "FTP", inside the "images" folder! So your icon will be placed like this code "images\rss.png"

Right Click to copy the button, or pick the one in the attachments!

Thats it, We are DONE!

Finished Example:



========================== Tutorial Ends Here =========================

Notices & Troubleshoots:

This modification works an almost any vBulletin versions! But remember for vBulletin 4.x you will need to find the exact code in your forumhome_forumbit_level2_post template, and then add the codes needed for the mod to work, its Because the codes are a bit more different in vB 4.x templates, but def works !
Some Extra / Optional Modification:

1) (How to change Hover Text)
If you wanna change the HOVER TEXT, which says "RSS"! Then go to STEP 3, and change the text on the line, where it says alt="RSS" . Change the text "RSS" to what ever you want to call it, when hover!

2) (How to add a button without Opacity & Highlight):

If you want the button to be simple, without the Opacity and Highlight, then add the code below instead of the real code:

Code to Add:
PHP Code:
<span style="float: right;"><a href="external.php?type=rss2&forumids=$forum[forumid]">
<
img src="images/rss.png" class="icon" alt="RSS" />
</
a></span


Please notice, if you use this modification, then make sure to click on Installed. Its only for the later support purpose! Thank you !

Download

No files for download.

Screenshots

Similar Mods

Miscellaneous Hacks [DMC]CSS Button Hover for All vB Default Button vBulletin 3.8 Template Modifications
Add RSS button at bottom of page vBulletin 3.5 Template Modifications

vblts.ru supports vBulletin®, 2022-2024