[TUTORIAL] News Ticker example

This is an article by lupocreative and branched off code from Bentheo - I did not write this article to any questions refer it to them members.
This is more a tutorial then a hack since we're trying to integrate a javascript into CuteNews. You might just as well use some other ticker script as many well written javascript can be used to make something beautifull when combined with CuteNews.



OK, it took me a while to get there too, but don't panic!

1. First, log in to your server's CuteNews admin panel - http://yourserver/path/to/cutenews/index.php

2. Click "Options" in the header navigation.

3. Click "Edit Templates".

4. Click "create new template".

5. Create a new template based on HEADLINES with name "ticker" (without quotes) - click "Create Template".

6. Now you need to go and edit that new ticker template. If you click "go back" from that last screen, it will take you back to the Edit Templates screen. In the pull-down, Switch to Template: "ticker" and click "Go".

7. The template editor will switch to the ticker template. In the bottom half of this screen, under "Edit Template Parts", click "Active News" and an editor will show underneath. Type this code into the editor:


- actually add in around 20-30 of the space characters rather than the four you've just added above - trust me, the ticker looks better with a load of spaces after each news item. Also note that you cannot simply use your spacebar to add in spaces - html will only render the first spacebar inserted space, after which you need to specify additional spaces with the ascii code - for a space, that's ampersand n b s p semicolon.

8. Click "Save Changes". Please note that if you go and edit this template ever again, you will need to replace the spaces with the ascii code for spaces. The system automatically converts the ascii code to spacebar inserted spaces when you open the template up in the editor.

9. You're done with all the edits in CuteNews.

10. You now need to insert the javascript into your site pages (NOT CuteNews) where you want the ticker to be shown. Find the point in your html where you want to insert it and paste:



11. Now adjust the settings at the top of the script to suit your site - marqueewidth, marqueeheight, marqueespeed, marqueebgcolor.

12. This is the MOST IMPORTANT thing: check that your entire "var marqueecontent" statement is on ONE line, that's from the start apostrophe to the end apostrophe. It will not work unless it is.

13. In order to adjust the number of headlines shown, you can change "$number = 5" to whatever number you wish.

14. If your CuteNews installation is in a relative directory different to the one shown above in the var marqueecontent example, adjust it appropriately. Eg: ../../path/to/installationdirectory/show_news.php

14. Publish your web page. You MUST preview your site using the http address, not a file address, otherwise the javascript won't render in the browser.

15. Providing none of your headlines contain any apostrophes, it should work just fine. If it still isn't working, and you're sure there's no apostrophes, double check your var marqueecontent statement - it MUST be all on one line and must start and end with a single apostrophe.

16. Once you have got a working ticker, you might need to play with the formatting of the text in the ticker. In my example above, it uses the default paragraph p style set for the page (so if you're using CSS it will inherit from that), and the text is bold. It will also use your default hyperlink a formatting. You may wish to adjust all of that. To change the formatting of the hyperlinks in the ticker, I think you will need to do it within a div tag, as I don't think you can stipulate a class directly in the CuteNews template editor. Add a hyperlink class to your CSS then in the javascript, change the var marqueecontent to:



17. Similarly, you may need to adjust the padding. In my example above, I stipulate a 2px padding at the top to lower the scrolling text a little. It is stipulated in two places: under the "if (iedom)" argument and "else if (document.layers)" argument toward the bottom of the script.

18. You may wish to add a PHP_SELF element if you want to redirect your visitors to another page. For example, I wanted visitors to land up on html/announcements.php where the CuteNews served news usually resides. To do that, change your var marqueecontent statement to:



Hope this all helps. And once again, it would be wrong of me not to say thanks to Bentheo. He put this together, I have simply made it a bit easier to follow - HOPEFULLY!

Simon

[FAQ] CuteNews Gallery

I'll do this article to help people, its going to be quite excessive so please try to follow me as best you can (even if your HTML/CSS is not very good, rely on common knowledge for this!):

CSS can work in divs, layers and floats.
Floats can be classes, classes can be set as specific widths.

So, your float must be left or right, pick one, preferrably left.
Your container can be a class (for XHTML validity).
You can style this "container" class in CSS, I recommend you do.

The first thing you need is your container. This will be your "Box" so you do:



Inside this container, you will be using the float: left; commands found in CSS, please look them up if you are not very familiar with how they work. Here is your first example:



You see i added a specific template here. Let's make that template called "left".
If you're done, put everything from the active news subtemplate part inside


Now for four columns you need to specify the width of each class inside the container. The class "left" will begin to look like this:

CSS is not added in the templates but in the file that contains the CN include code.
If you don't know how to add css to a file, google for it as there are different ways to do it and everyone has his own preference.

Ok your code as ouputed by the browser should now look like:



See how there is 4 news and each one is beside another?... Now becuase you have specified a WIDTH in each of the class="left" above when you add a FIFTH news item, it will drop down BELOW the first, a SIXTH will be below the second, a SEVENTH will be below the third and so on so forth.

Hope thats KINDA helped you guys out


For 4 columns on 5 rows
You just need to put $number = "20"; in your cutenews include code!

[HACK] Show news Over X amount of days/weeks/months/years

Name: Show news Over X amount of days/weeks/months/years
Author: John/Will
CuteNews Compatibility: 1.3.6 - * (no incompatibility reported yet)
Description: Adds the ability to use an additional variable with your CN include code. So post will show for a set amount of time. This is not the same as individual expiration date.
Instructions:
open shows.inc.php
:::::::::::::::::::::::::::::::::::::::::::::::::::

Find:
:::::::::::::::::::::::::::::::::::::::::::::::::::



add below:
:::::::::::::::::::::::::::::::::::::::::::::::::::



USEAGE
:::::::::::::::::::::::::::::::::::::::::::::::::::

in the cutenews include code use:
:::::::::::::::::::::::::::::::::::::::::::::::::::

[HACK] Show message when no comments posted

Name: message when article has no comments
Author: Jetski
CuteNews Compatibility: 1.3.6 - * (no incompatibility reported yet)
Description: Like the title says.
Instructions:
1. Open up shows.inc.php in the inc folder of cutenews for editing and find:



3. Above the code shown above paste in the code below



4. Now save the file and upload to your server or wateva.

Note: You can edit the style of the DIV Tag to your needs.

[HACK] Count all articles in a Category

Name: Count all articles in a Category
Author: John/Will
CuteNews Compatibility: 1.3.6 - 1.4.1
Description:
Do you want a way to show your users how many articles you have in a single or multiple categories ? Thought it was impossible? NOT ANYMORE!
Instructions:

Post this at the place where you want the output to appear on your site

Now we'll actually show our article count
Replace

For multiple categories:
For single categories:

Now to dissect the code (My favourite part, drools)


This tells you the directory your cutenews is (news) the data folder (data) and the news.txt file.... all this line does is read.
Be sure that path to CuteNews is correct!.

all you need to do, on both the accounts above, is replace "xxx" with the category(ies) numbers of your choice that you want the articles to count.

So for example.......If using the multiple category hack..... You choose:

Category 1 and Category 5.

Category 1 has 4 articles in it
Category 5 has 2 articles in it

The final value will be 6 articles present because the script counts 4+2=6.

For the single category, it counts articles for that category ONLY.