how to add a picture where you have scrolling announcements?

by theego August 20th 2015, 6:54 pm

I have announcements activated (Scrolling up and pausing for 4/5 seconds) I wish to add an image for the text to fit into (maybe a scroll?) So how do I go about it? what is this part of the site called? I know the bit above is the main forum image for instance, but what is this part called?

Here's my site www.theclaretandbluearmy.com You'll notice the announcements, it's there I wish to add an image to capture my text.

by **SLGray** August 20th 2015, 7:09 pm

So you want to add an image to the background of the announcement area?

by theego August 20th 2015, 9:10 pm

SLGray wrote:So you want to add an image to the background of the announcement area?

Yes haha! thank you for explaining it in a simple way. So how? Very good

by **SLGray** August 20th 2015, 9:16 pm

Is your forum private? I only see an message at the top.

by theego August 20th 2015, 9:31 pm

SLGray wrote:Is your forum private? I only see an message at the top.

Ah we launch tomorrow to the public, can you not see the header?

by **SLGray** August 20th 2015, 9:33 pm

Is that message in the homepage message area or in the announcement area?

by theego August 20th 2015, 9:34 pm

SLGray wrote:Is that message in the homepage message area or in the announcement area?

That's in the homepage area. The announcement area is directly below the main header. The message is where the body of the forum is.

by theego August 20th 2015, 9:36 pm

SLGray wrote:Is that message in the homepage message area or in the announcement area?

I've just opened the site briefly so you can see it all

by YoshiGM August 20th 2015, 9:55 pm

Hello @theego,
You can try adding this CSS:

Code:: .module { background-image: url("YOUR BG LINK HERE"); background-repeat: no-repeat; background-position: bottom; }

ACP > Display > Colors > CSS Stylesheet.

If not works, change ".module" to "div#fa_ticker" and edit the caps text for the url of your background image.

by theego August 20th 2015, 9:57 pm

YoshiGM wrote:Hello @theego,
You can try adding this CSS:

Code:
.module { background-image: url("YOUR BG LINK HERE"); background-repeat: no-repeat; background-position: bottom; }

ACP > Display > Colors > CSS Stylesheet.

If not works, change ".module" to "div#fa_ticker" and edit the caps text for the url of your background image.

Thank you, I'll try that now. I did try a CSS code, I think an fa_ticker start to it that I found on here. Can it go anywhere in my CSS Stylesheet?

by YoshiGM August 20th 2015, 10:00 pm

div#fa_ticker is the "ID" for the space in the scrolling announcements.
Try with ".module", it will change all widgets background.

If you want to change ONLY the background of the announcements, use the second code.

Example:

Code:: div#fa_ticker { background-image: url("YOUR BG LINK HERE"); background-repeat: no-repeat; background-position: bottom; }

Regards,
YoshiGM

by theego August 20th 2015, 10:48 pm

YoshiGM wrote:div#fa_ticker is the "ID" for the space in the scrolling announcements.
Try with ".module", it will change all widgets background.

If you want to change ONLY the background of the announcements, use the second code.

Example:

Code:
div#fa_ticker { background-image: url("YOUR BG LINK HERE"); background-repeat: no-repeat; background-position: bottom; }

Regards,
YoshiGM

Thanks for that, it's really helped. Now the image I have in the announcement area is about 5mm short either side of the length of the header? Plus can announcement font colour be altered? I've tried adding it in the modify box, but it doesn't make any difference, although it adds Bold, changes px size etc any ideas?

by **SLGray** August 20th 2015, 10:54 pm

Code:: TEXT

by YoshiGM August 20th 2015, 10:58 pm

And also, you can add color, size and more in the font tag:

Code:: YOUR CONTENT

If you want to have a bold text, you can use:

Code:: BOLD TEXT HERE

And combine both:

Code:: YOUR CONTENT

by theego August 20th 2015, 11:04 pm

YoshiGM wrote:And also, you can add color, size and more in the font tag:

Code:
YOUR CONTENT

If you want to have a bold text, you can use:

Code:
BOLD TEXT HERE

And combine both:

Code:
YOUR CONTENT

Is that in the announcement modify area?

Oh and any idea re the size? I took away the no-repeat and just added repeat so it's taken the colour along the top of the page, but stops short of 4/5mm either side of the screen.

by YoshiGM August 21st 2015, 6:21 pm

Yup.
You should add all the tags to create a good announcement.
All you need is a knowledge about HTML Tags in Google Wink

The size should be more big to get a good position in the announcement.

Here's a example that i use in my forum, you only need to edit all the content, the color, size,etc: