Announcement CSS

Just a quick question.

What is the CSS code to change the appearance of the announcement box, like for example make the background of it transparent.

http://m3rcs.forummotion.com/
As you can see the image-slider in the announcement section, but i like the announcement box background transparent.

I tried these, just in case i could guess it out of the blue but none worked

Code:


.announcement {
background: transparent;
}

.fa_ticker {
background: transparent;
}

.fa_ticker_container {
background: transparent;
}

.fa_ticker_content {
background: transparent;
}

Bump Anyone know the code for this?

can you post a screen shot pointing out what part you mean?

Looks like you have the log in popup transparent.

It's not the login pop up, it's the box that the image slider is in.

Hi,

Try adding the following code to the javscript code management for all pages...

Code:

$(function(){$('#fa_ticker_container').parent().parent('.module').css('background' , 'transparent');});

Hope it helps

Hi CatherinaAndrea,
in your css there should be a code beginning with .modules. That pertains to both your announcement and widgets. Changing the bg color within that code will change both the widgets and announcements.
The javascript code ankillien provided works, and is the way to go if you want to change "only" the announcement bg.

after looking at your site(very nice ) I'm wondering if the bg color in question is actually part of your banner?

ankillien wrote:Hi,

Try adding the following code to the javscript code management for all pages...

Code:

$(function(){$('#fa_ticker_container').parent().parent('.module').css('background' , 'transparent');});

Hope it helps

That helped indeed, Thank You but there is still a shadow present from the box, i would try to do it myself if it were css, but java is way over my head so i don't know what code to add to get the shadow away.

WHITESABBATH wrote:Hi CatherinaAndrea,
in your css there should be a code beginning with .modules. That pertains to both your announcement and widgets. Changing the bg color within that code will change both the widgets and announcements.
The javascript code ankillien provided works, and is the way to go if you want to change "only" the announcement bg.

after looking at your site(very nice ) I'm wondering if the bg color in question is actually part of your banner?

Thank you that is my "testing and template making" webby, and then i transfer it to the actual webby that it's made for.
That was partially an image and color in the announcement box, and it's not supposed to be part of the banner, it just so happens that it aligns with it

I am not sure what the problem is

I looked at your forum and it looks fine. Using Firefox 8.0.

EDIT: Also looks fine in Chrome

The shadow bits around the transparent background are still present.

It is in your code.

Before

Code:

.module {
    background-color: #0F1216;
    background-image: url("http://i40.servimg.com/u/f40/14/90/77/10/module14.jpg");
    background-repeat: repeat-x;
    border: 1px solid #000000;
    box-shadow: 0 0 2px #000000;
    font-size: 10px;
    margin-bottom: 4px;
    overflow: hidden;
    padding: 0 8px;
}

After

Code:

.module {
    background-color: #0F1216;
    background-image: url("http://i40.servimg.com/u/f40/14/90/77/10/module14.jpg");
    background-repeat: repeat-x;
    font-size: 10px;
    margin-bottom: 4px;
    overflow: hidden;
    padding: 0 8px;
}

Yes i am aware that the modules and announcement box react to those codes as WhiteSabbath explained earlier. That is why the code Ankillien provided works only for the announcement box, but i will need a little adjustment to the JavaScript code for the shadow to go away as well.
This is the code that needs a little tweaking

Code:

$(function(){$('#fa_ticker_container').parent().parent('.module').css('background' , 'transparent');});

Ahh well I don't know then. The CSS code I posted worked for me on Firefox.

I don't know any bit of JS but this is a guess of mine? Doubt it is right but decided to take a stab at it.

Code:

$(function(){$('#fa_ticker_container').parent().parent('.module').css('background' , 'transparent')+('border' , '0')+('box-shadow' , '0'); });

Nope didn't work, but Thank you for your time and trouble anyways

LOL figured it wouldn't. I don't know JS but someone will get back to you on it

Hi!

Please try adding this to your CSS code:

Code:

.module {
    border: medium none !important;
    box-shadow: none !important;
}

Perfect!! That's done it nicely Thank you so much!

This topic can now be Locked -Solved-

Problem Solved:

Glad your problem is solved; topic marked as solved and archived.