Question on How to adjust Title Display Name on Groups 3.0

[mobile.ning.com]

Bekah Carman had given this TIP

/* Adjust font size and line height for group title and info in Hub Page Listings */
.groupHub-groupTitle > span {font-size:1.2em; height:auto; line-height:auto; }
.groupHub-groupTitleContainer {height:auto; }
.groupHub-groupInfo {font-size:0.8em; line-height:auto; height:100%; text-align:center; }

And Titles of Grups were displaying full until the release of Formal Groups last week. Now Group titles are chopped at my http://mobile.ning.com/communities

No idea how to make the FULL text of Groups Title appear. Can anyone give a tip of what parameter to change? of piece of code lacking?

Regards, Justino Mora

[mobile.ning.com]

This was the original Bekah Carman reference

https://creators.ning.com/group/ning-3-0-groups-beta-testers/forum/t...

[mobile.ning.com]

I modify Font Size to 1.0em but still the full title does not get shown? .groupHub-groupTitle > span {font-size:1.2em; height:auto; line-height:auto; } 

There is need for change in another parameters. But not clue.

[Kos]

Hi Justino.  OK there's a few things I believe that need to be done.  First let's make the area where the title display, taller

*enlarge groups title area*/
.groupHub-groupTitle > span {
    max-height: 5em;
}

Secondly the box holding the titles needs to be enlarged from 35px to 80px so that it's large enough for your long titles.

.groupHub-groupTitle {
    height: 80px;
}

Then I would definitely go with that 1.0em font size in your code for .groupHub-groupTitle

Here's another idea.  You can lighten your transparency and make the background photos look this way if you like.   Kind of a slick look.  It takes the small box that the was partially transparent, enlarges it to full size of the pic and lightens it so the pic comes through behind the text.

.groupHub-groupTitle > span {
    background-color: rgba(0, 0, 0, 0.4);
    height: 130px;
}

Let me know how it goes........

[mobile.ning.com]

Thanks Kos. The following did the Job.

.groupHub-groupTitle > span {
    max-height: 5em;
} 

I have been trying to learn CSS, and now I least I am able to follow instructions. Before this type of Instructions were like reading CHINESE.

I recommend to those neophytes like me, to give some time to attempt learning the minimum on CSS in order to benefit from the TIPS or being able to ask decent questions.

[Kos]

I absolutely love Firebug in Firefox and I know Chrome has the ability to inspect elements as well.  It makes it "fun" to go in and change things and see the effect immediately w/o breaking my site (which I would do!).  *lol*  Glad you found a solution.

[mobile.ning.com]

I will practice with FireBug. Last time you recommend it. And in fact before posting, I did attempt to use it, but with not luck. Hence I posted. But I will take the recommendations and I will spend some time training myself in FireBug.

Thanks.

[Kos]

it definitely takes some getting used to "how" to navigate on specific areas.  There are some really great youtube tutorials..........I highly recommend.  Weekend project!  Yay!  Just what you needed, right?  LOL

[mobile.ning.com]

Going though this one. Seems very friendly 

[Kos]

Great!  You're on your way.  Watch a couple then dive in.  Just try a few changes.  If you mess up, just refresh the page and start all over again.  You cannot break your code using firebug b/c it's not really changing anything inside until you paste a code into your CSS area.

Once you have a code change the way you want it, just highlight/copy the code on the right side (don't forget the closing bracket) and paste into your CSS area.   

At times I would get stuck b/c I didn't know how to do something and this website helped explain a great deal and of course we're here to help too @ Creators   Good luck!

http://www.w3schools.com/

[mobile.ning.com]

The Homework, Kos assigned to me for the weekend.