vb.org Archive - Forum Home Enhancements

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 4.x Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=246)

- - Forum Home Enhancements - Newsbar/Announcements (https://vborg.vbsupport.ru/showthread.php?t=300609)

Fatal Hazard

07-29-2013 10:00 PM

Newsbar/Announcements

1 Attachment(s)

What is it?

This is a simply yet very effective newsbar that you can display at the top of your forum. You can display 1 or as many as you like and change the colour and border of each one.

How to Install?

1. Go to AdminCP --> Styles & Templates --> Your Style --> Edit Templates --> Forum Home Templates --> FORUMHOME
2. Find:

Code:

{vb:raw headinclude}

    <title>{vb:raw vboptions.bbtitle}</title>

    <script type="text/javascript" src="clientscript/vbulletin_read_marker.js?v={vb:raw vboptions.simpleversion}"></script>

and below place:

Code:

<styletype="text/css">

.newsbar {    background: #D6ECA6;    border-top: 2px solid #8DC93E;    border-bottom: 2px solid #8DC93E;    text-align: center;    margin: 10px auto;    padding: 5px 20px;    font-weight: bold;} </style>

Additionally you can instead add this code to the end of your additional CSS by going to your AdminCP --> Templates & Styles --> YOUR STYLE --> Edit Templates --> Additional CSS. If you decide to do this please make sure you remove the <style> tags so the code would look:

Code:

.newsbar {    background: #D6ECA6;    border-top: 2px solid #8DC93E;    border-bottom: 2px solid #8DC93E;    text-align: center;    margin: 10px auto;    padding: 5px 20px;    font-weight: bold;}

If you put the CSS in the FORUMHOME you do not put it in the additional.css. The same goes for if you put the CSS in the additional.css you do not put it in the FORUMHOME.
3. Find (in FORUMHOME):

Code:

<p id="welcomemessage" class="description">{vb:rawphrase welcome_to_the_x, {vb:raw vboptions.bbtitle}}</p>

    </div>

and below place:

Code:

<p class="newsbar"><strong>Latest News:</strong> <a href="http://yoursitehere.com/THREADURL" target="_blank">Your Important Announcement Here</a></p>

4. Save and enjoy

If you want to have multiple just repeat step 3 by placing the same code below. If you want to have multiple that are different colours then you'll need to duplicate the CSS with different class names (say .newsbar_red) and change the CSS colours accordingly.

https://vborg.vbsupport.ru/external/2013/07/7.png

If you use this please mark as installed :)
Support (if any) will be prioritized to those who have this modification marked as installed.
Thanks and Enjoy :)

dandanch

07-30-2013 08:08 PM

Thanks, I added the style to my additional.css and not forumhome :)

Fatal Hazard

07-30-2013 08:57 PM

Okay, it should work either way, for this tutorial I put it in the FORUMHOME :)

joeychgo

07-30-2013 10:23 PM

Quote:

Originally Posted by dandanch (Post 2436168)

Thanks, I added the style to my additional.css and not forumhome :)

Could you explain how please

dandanch

07-30-2013 11:14 PM

Quote:

Originally Posted by Fatal Hazard (Post 2436178)

Okay, it should work either way, for this tutorial I put it in the FORUMHOME :)

The only reason I put it in additional.css is when I tried forumhome for what ever reason it wouldn't work for me.

Just add the style code to the bottom of additional.css with out the tags:

Code:

.newsbar {    background: #D6ECA6;    border-top: 2px solid #8DC93E;    border-bottom: 2px solid #8DC93E;    text-align: center;    margin: 10px auto;    padding: 5px 20px;    font-weight: bold;}

joeychgo

07-31-2013 02:37 AM

oh, I misread the instructions - my mistake.

Fatal Hazard

07-31-2013 09:12 AM

Quote:

Originally Posted by dandanch (Post 2436199)

The only reason I put it in additional.css is when I tried forumhome for what ever reason it wouldn't work for me.

Just add the style code to the bottom of additional.css with out the tags:

Code:

.newsbar {    background: #D6ECA6;    border-top: 2px solid #8DC93E;    border-bottom: 2px solid #8DC93E;    text-align: center;    margin: 10px auto;    padding: 5px 20px;    font-weight: bold;}

I'm glad you managed to get it working and I am going to add this to the tutorial so if others get the same issue (custom style) then they can hopefully resolve it.

Thanks.

Fatal Hazard

07-31-2013 09:13 AM

Quote:

Originally Posted by joeychgo (Post 2436211)

oh, I misread the instructions - my mistake.

No problem, if you have successfully installed it don't forget to mark as installed :)

Fatal Hazard

07-31-2013 09:15 AM

Quote:

Originally Posted by joeychgo (Post 2436188)

Could you explain how please

I've added the additional CSS option to the tutorial.

stevieb

07-31-2013 10:33 AM

all over the shop in vB4.2.0 lol

* uninstalled

Fatal Hazard

07-31-2013 02:14 PM

Quote:

Originally Posted by stevieb (Post 2436264)

all over the shop in vB4.2.0 lol

* uninstalled

Okay, are you using a custom style?
Did you place the code in the correct place?
Have you made any previous modifications to the required templates?

stevieb

07-31-2013 06:41 PM

I added the code to alternative CSS and added the p class where directed.

All original files on standard vB 4.2.0 template.

I dunno lol. It just didn't work. Nothing there at all at one point then just got code in top left above logo.

Cheers

Fatal Hazard

07-31-2013 07:39 PM

Quote:

Originally Posted by stevieb (Post 2436338)

When you added the CSS code to the additional.CSS template did you remove the <style> tags?
So the code should be:

Code:

.newsbar {    background: #D6ECA6;    border-top: 2px solid #8DC93E;    border-bottom: 2px solid #8DC93E;    text-align: center;    margin: 10px auto;    padding: 5px 20px;    font-weight: bold;}

stevieb

08-01-2013 12:31 AM

Yes I did :)

ahobilam

08-01-2013 04:07 AM

Good work!
Lot of improvements required in instructions.

Item 2 is not required for custom styles and the style included in the additional.cs is enough.

In Item 3.
Mentioned Find and not given where to find?
and in the replacement code should add clear instructions to change the url of the users site otherwise 404 error will occur.
Also can suggest some good location for that.

Fatal Hazard

08-01-2013 09:28 AM

Quote:

Originally Posted by ahobilam (Post 2436454)

Thanks but I don't know what you are talking about when you say item 2 is not needed. I am not saying to put the code in the additional.css and the FORUMHOME, you can do either. And I just thought it was common sense that if I say find code in the FORUMHOME then do not mention another template from that it would still be the same template, but that's just me. I don't want you to think that I was saying you put the CSS in 2 templates, it was your choice, either in the additional.css or FORUMHOME, Then the class in the FORUMHOME. So the CSS in either the additional.css or FORUMHOME and the class in the FORUMHOME. Oh and I think that:

Code:

http://yoursite.com/THREADURL

is pretty clear as to what you put there. If you want you don't even have to put the URL in, it can just be an announcement.

Fatal Hazard

08-01-2013 09:37 AM

Quote:

Originally Posted by stevieb (Post 2436425)

Yes I did :)

Instead of putting the CSS in the additional.css put it in the FORUMHOME instead. Remember to add the <style> tags to the CSS when adding it to the FORUMHOME. Please read the instructions as to where you need to put the CSS in the FORUMHOME template.

MahdyE23

08-08-2013 03:22 AM

Can you help me? This is whats showing for me: (All this was edited in the FORUMHOME template)

http://prntscr.com/1k17hc

And these are the codes I have added, like you said to. First I added:

Code:

<styletype="text/css">

.newsbar {    background: #D6ECA6;    border-top: 2px solid #8DC93E;    border-bottom: 2px solid #8DC93E;    text-align: center;    margin: 10px auto;    padding: 5px 20px;    font-weight: bold;} </style>

Then I added this:

Code:

<p class="newsbar"><strong>Welcome To RebellionX!</strong> <a href="http://rebellionx.org/forums/showthread.php?2-Welcome-to-RebellionX&p=12#post12" target="_blank">Welcome to RebellionX!</a></p>

But it doesn't even display. What did I do wrong?

Fatal Hazard

08-08-2013 03:12 PM

Quote:

Originally Posted by MahdyE23 (Post 2437756)

Can you help me? This is whats showing for me: (All this was edited in the FORUMHOME template)

http://prntscr.com/1k17hc

And these are the codes I have added, like you said to. First I added:

Code:

<styletype="text/css">

.newsbar {    background: #D6ECA6;    border-top: 2px solid #8DC93E;    border-bottom: 2px solid #8DC93E;    text-align: center;    margin: 10px auto;    padding: 5px 20px;    font-weight: bold;} </style>

Then I added this:

Code:

<p class="newsbar"><strong>Welcome To RebellionX!</strong> <a href="http://rebellionx.org/forums/showthread.php?2-Welcome-to-RebellionX&p=12#post12" target="_blank">Welcome to RebellionX!</a></p>

But it doesn't even display. What did I do wrong?

Okay, first off did you add the codes to the correct place?
If you did then add the CSS to the additional.css template but remove the <style> tags. So the code for the additional.css would be:

Code:

.newsbar {    background: #D6ECA6;    border-top: 2px solid #8DC93E;    border-bottom: 2px solid #8DC93E;    text-align: center;    margin: 10px auto;    padding: 5px 20px;    font-weight: bold;}

Remember to remove the CSS from the FORUMHOME and just leave the class there.

nizzie

02-23-2014 02:37 AM

Any way to make this so that users can make it collapse?

thetechgenius

06-19-2014 12:39 AM

If I may suggest something?

Well, this is a really nice idea, I am using it on my forum. However, can I give you some advice about your CSS?

I edited the CSS a bit, and I think it looks a lot better like this:

Code:

/* Newsbar Announcements - Begin */

.newsbar {    background: #D6ECA6;  border: 2px solid #8DC93E;  border-radius: 5px;  text-align: center;    margin: 10px auto;    padding: 5px 20px;   font-size: 11px; font-weight: bold; }

/* Newsbar Announcements - End */

This way adds a border around the entire thing. Your CSS adds a border just on the top and bottom. This also makes the font just a bit smaller, and it also adds rounded corners for a more professional look.

If you like my CSS Edits, your more then welcome to add them to your post.

Here is a screenshot:

https://vborg.vbsupport.ru/external/2014/06/41.png

All times are GMT. The time now is 05:36 PM.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01225 seconds Memory Usage 1,806KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (15)bbcode_code_printable (10)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (21)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: