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;
}


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?

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.

kirk
Forumaster

Male Posts : 11037
Reputation : 651
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.


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

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?

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

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

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.


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;
}

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

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

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

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

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

Base
Forumaster

Male Posts : 10386
Reputation : 1687
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-

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

Base
Forumaster

Male Posts : 10386
Reputation : 1687
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