The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Announcement CSS

View previous topic View next topic Go down

Solved Announcement CSS

Post by CatherinaAndrea on November 15th 2011, 11:50 pm

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 Wink but none worked Crying or Very sad

Code:

.announcement {
background: transparent;
}

.fa_ticker {
background: transparent;
}

.fa_ticker_container {
background: transparent;
}

.fa_ticker_content {
background: transparent;
}

avatar
CatherinaAndrea
Forumember

Female Posts : 230
Reputation : 19
Language : English, Russian, Dutch

http://www.nailphanatic.com/

Back to top Go down

Solved Re: Announcement CSS

Post by CatherinaAndrea on November 16th 2011, 4:35 pm

Bump Wink Anyone know the code for this?
avatar
CatherinaAndrea
Forumember

Female Posts : 230
Reputation : 19
Language : English, Russian, Dutch

http://www.nailphanatic.com/

Back to top Go down

Solved Re: Announcement CSS

Post by kirk on November 16th 2011, 4:41 pm

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

Looks like you have the log in popup transparent.
avatar
kirk
Forumaster

Male Posts : 11037
Reputation : 652
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

Solved Re: Announcement CSS

Post by CatherinaAndrea on November 16th 2011, 4:48 pm

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

avatar
CatherinaAndrea
Forumember

Female Posts : 230
Reputation : 19
Language : English, Russian, Dutch

http://www.nailphanatic.com/

Back to top Go down

Solved Re: Announcement CSS

Post by ankillien on November 17th 2011, 11:20 am

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 Smile
avatar
ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

Solved Re: Announcement CSS

Post by WHITESABBATH on November 17th 2011, 4:48 pm

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 thumleft ) I'm wondering if the bg color in question is actually part of your banner?
avatar
WHITESABBATH
Active Poster

Male Posts : 1198
Reputation : 119
Language : English, F-Bombs
Location : Chicago

Back to top Go down

Solved Re: Announcement CSS

Post by CatherinaAndrea on November 18th 2011, 7:58 pm

@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 Smile

That helped indeed, Thank You Wink 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 thumleft ) I'm wondering if the bg color in question is actually part of your banner?

Thank you Very Happy 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 Razz
avatar
CatherinaAndrea
Forumember

Female Posts : 230
Reputation : 19
Language : English, Russian, Dutch

http://www.nailphanatic.com/

Back to top Go down

Solved Re: Announcement CSS

Post by blindbat1457 on November 18th 2011, 8:04 pm

I am not sure what the problem is scratch

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

EDIT: Also looks fine in Chrome
avatar
blindbat1457
Forumember

Male Posts : 667
Reputation : 6
Language : English
Location : Santa Clarita, CA

Back to top Go down

Solved Re: Announcement CSS

Post by CatherinaAndrea on November 18th 2011, 8:10 pm

The shadow bits around the transparent background are still present.

avatar
CatherinaAndrea
Forumember

Female Posts : 230
Reputation : 19
Language : English, Russian, Dutch

http://www.nailphanatic.com/

Back to top Go down

Solved Re: Announcement CSS

Post by blindbat1457 on November 18th 2011, 8:23 pm

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;
}
avatar
blindbat1457
Forumember

Male Posts : 667
Reputation : 6
Language : English
Location : Santa Clarita, CA

Back to top Go down

Solved Re: Announcement CSS

Post by CatherinaAndrea on November 18th 2011, 8:29 pm

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');});
avatar
CatherinaAndrea
Forumember

Female Posts : 230
Reputation : 19
Language : English, Russian, Dutch

http://www.nailphanatic.com/

Back to top Go down

Solved Re: Announcement CSS

Post by blindbat1457 on November 18th 2011, 8:36 pm

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'); });
avatar
blindbat1457
Forumember

Male Posts : 667
Reputation : 6
Language : English
Location : Santa Clarita, CA

Back to top Go down

Solved Re: Announcement CSS

Post by CatherinaAndrea on November 18th 2011, 8:41 pm

Nope didn't work, but Thank you for your time and trouble anyways Wink
avatar
CatherinaAndrea
Forumember

Female Posts : 230
Reputation : 19
Language : English, Russian, Dutch

http://www.nailphanatic.com/

Back to top Go down

Solved Re: Announcement CSS

Post by blindbat1457 on November 18th 2011, 9:12 pm

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

Male Posts : 667
Reputation : 6
Language : English
Location : Santa Clarita, CA

Back to top Go down

Solved Re: Announcement CSS

Post by Base on November 18th 2011, 9:29 pm

Hi!

Please try adding this to your CSS code:

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

Smile
avatar
Base
Forumaster

Male Posts : 10386
Reputation : 1693
Language : English and French
Location : United Kingdom, England

http://forumotionhub.net

Back to top Go down

Solved Re: Announcement CSS

Post by CatherinaAndrea on November 18th 2011, 10:23 pm

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

This topic can now be Locked -Solved-
avatar
CatherinaAndrea
Forumember

Female Posts : 230
Reputation : 19
Language : English, Russian, Dutch

http://www.nailphanatic.com/

Back to top Go down

Solved Re: Announcement CSS

Post by Base on November 18th 2011, 10:34 pm

Problem Solved:Glad your problem is solved; topic marked as solved and archived. Smile
avatar
Base
Forumaster

Male Posts : 10386
Reputation : 1693
Language : English and French
Location : United Kingdom, England

http://forumotionhub.net

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum