Hi All:

 

I've just created a CSS Style Sheet for one our Groups as test/experiment.  I'm a beginner with creating and using CSS. 

 

I had no problems in uploading the projection code with the .css file to the group page text box.  However, I ran into some problems with the navigation bar, bottom foot bar and comment buttons with existing Urban Tek Theme.  I cannot change the colour of the headers to match my theme!

I must have missed something in my style sheet.   Attached is the .css file.

 

 Information Box - Group Page

I also can't seem to be able to control the Introduction box, i.e. text is below the logo rather than beside it.

 

 

 

 

 

 

 

 

 

 

 

Many thanks, WW

 

attachments

Views: 66

Attachments:

Replies to This Discussion

Did you try putting an !important behind the CSS settings .

 

For example :

element{

     background:#000 !important;

}

Hi elsodev:

I've tried that as well, e.g.

 

/***NAVIGATION BAR***/

#xg_navigation {
background: url (none) left repeat;
background-color:#ddafb9 !important;
height:40px;
background-position:top !important;
padding-top:0px;
padding-left:1px;
border-top: 4px ridge #6ebeb5;
border-bottom: 4px ridge #6ebeb5;
}

#xg_navigation ul {
margin:0 0;
}

#xg_navigation ul li {
margin:0 0 0 0;
}

and

/***FOOTER SECTION***/

#xg_foot,
#xg_foot a {
text-color:#FFFFFF;
background-image: transparent (image link);
background-color:#ddafb9 !important;
border:0px solid #000000;
}

#xg_foot {
border-left:0px solid #FFFFFF;
border-right:0px solid #FFFFFF;
width:955px;
}

 

I know that the mistake is there somewhere but I'm not seeing it! 

Thanks, WW

Go to your site CSS and remove the !Important for the xg_navigation (if you had added !Important in it)

BUT don't remove the !important in this stylesheet for your group . 

 

Try see and let me know it work out or not . :D

Hi elsodev:

 

Many thanks for the help.  I went back to my style sheet and changed the following:

 

/***NAVIGATION BAR***/

#xg_navigation {

 

background:#6ebeb5 url(none) !important; (removed left repeat and combined colour and url together.

 


height:40px; (forced height)


background-position:top !important;
padding-top:0px;
padding-left:1px;
padding-right:1px;
border-top: 4px ridge #6ebeb5;
border-bottom: 4px ridge #6ebeb5;

}

#xg_navigation ul {
margin:0 0; (added this as well)
}

#xg_navigation ul li {
font-famil:Georgia, Avant Garde;
font-size:14px;
text-aligh:right;
text-transform:normal;
margin:0 0 0 0;  (add extra instructions for fonts)

}

 

/***FOOTER SECTION***/

#xg_foot,
#xg_foot a {

background:#6ebeb5 url(none) !important;
text-color:#FFFFFF;
border:0px solid #000000; (added these two for footer)

}

#xg_foot {
border-left:0px solid #FFFFFF;
border-right:0px solid #FFFFFF;
width:945px;
}

 

Both of these corrections has finally changed the background colour of my navigation bar and footer.  My typeface colour is still not correct for the footer but I'll work on that one.

What command works for the "commnet buttons and other small links".

The layout for Groups is different from My Page.  How do I give instructions for the Information box.  If you notice the text is under the logo within the Information about the Group.  It should be to the right of the logo.  My text for the entire body is too large  and I can't seem to change that either.

 

Thanks, WW

 

Thanks Elson!

 

Hi WW,

Not sure what all is still not working. But, I wanted to let you know, my first glance: you have some errors in the CSS. This will often prevent all CSS below it from executing.

See your code block:

#xg_navigation ul li {
font-famil:Georgia, Avant Garde;
font-size:14px;
text-aligh:right;
text-transform:normal;
margin:0 0 0 0;  (add extra instructions for fonts)

}

 

You need to change font-famil TO font-family

and text-aligh:right TO align:right

 

Also, I'm assuming you do not actually have comments in your CSS like the (add extra instructions for fonts). If by chance you do, this will also return an error. Enclose your comments with /* Comment Here */

Best,

Jen

Hi Jen:

 

Many thanks for all the help. 

 

Yes, I did see those mistakes and corrected them.  However, I'm still having problems applying different themes to the Group Areas.  I have another theme that I've tried to apply.  I've been over the code looking for typos, brackets, etc.  Compared it to other codes and it looks fine.  But when I upload the code to the group page our header sits across the top of the page.  I've used the "display none" within the code.  The other area that I can't seem to over-ride with the new page code is the bottom footer.  There are few other small details which I'll place in a separate thread for everyone to find, e.g. icons, dates, border around video player, etc.

 

Jen, is it possible for use newbies to run through a basic CSS Styling Code Sheet for Ning.  May be have it set-up as a sticky note. 

 

Thanks, WW

 

 

 

No sorry, I don't have time to create such a sheet. Maybe we can someday, really good idea.

 

Have you seen this Help Page for that sort of thing?

http://developer.ning.com/notes/HTML_and_CSS_Guidelines

 

Best,

Jen

Hi Jen:

 

These guidelines are a great visual and written reference for us beginners.  Thanks so much for the link and all the great tips.

 

WW

 

 

RSS

Members

© 2022   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips