Topic-icon Facebook PageTab/Canvas Page format isuse

Support Specialist
12 years 9 months ago #36552 by alzander
It's because that text is done differently than the rest. It's not only wrapped in a Normal-C div, but another div beneath that, like:
<span class="Normal-C"><span style="font-size: x-large;">Round 8 of the FGA 2013 championship took place on Sat 24th August and proved to be very successful for Jack, winning four of the six races and second in the remaining two. Jack still achieved maximum points towards the junior championship.</span></span>
It's a big ugly how that HTML is being generated, honestly. The font-size really shouldn't be specified inline at all as that's what CSS files are for. If possible, I'd remove that where possible so that your stylesheets don't have to get so ugly.

With that said, for the specific example above, the below update should fix that:
.Normal-C, .Normal-C >span { 
font-size: 14px !important; 
}
The >span means the first span after a .Normal-C will also have the style, instead of every span. It helps with specificity, but the > could be removed to apply to all spans.

I hope that helps, but if not, let me know.
Alex
The topic has been locked.
Active Subscriptions:

None
12 years 8 months ago #36568 by y021ahe
Alex, Thank you for your help with this.

I have managed to get most of it working now thanks to your help.

I am really confused because I can't find any reference in the template to the html text that you are referring.

Your advice has certainly helped with the the setup of most of the page.

There are two areas that I could do with your advice if possible and then I will stand you down - you have been awesome help

1) In the Race calendar there should be 3 columns, but the right hand one has been chopped off?
2) On the About Me page - two of the pics have been put one on top of the other instead of resized and side by side.

This is the last time, i am going to ask for your advice if you have the time.

Thanks

Rich
The topic has been locked.
Support Specialist
12 years 8 months ago #36597 by alzander

I am really confused because I can't find any reference in the template to the html text that you are referring.

The text is most likely being added in the Joomla Article manager, possibly from TinyMCE itself by default or if you are selecting a specific style. I'd honestly recommend recommend looking into JCE as your editor. There's a free version which replaces all of TinyMCE and a paid version which has extra features like a better image uploader/resizer, etc. Both versions output much better HTML that is generally cleaner (less unnecessary styles) and easier to use CSS on.

For the Calendar, and a general suggestion, I think you may want to increase the size of the wrapper div you're using in your template. Right now, it's hard-coded to 760px. Raising that up to 950-1020px makes things look a lot better in general. Your site is actually decently responsive as well. You may want to try 100% to see how you like that. The higher width though will show all columns. The table itself could be fixed to show in the narrower view, but it just isn't necessary.

Not sure why you picked 760px, or why I didn't notice it before, but that's my best quick fix suggestion for a lot of things.

Also, I noticed your html tag has the following style in your template:
html {
height: 101%;
}
I'm pretty sure that's why the automatic resizing was going haywire. Everything just kept trying to get 1% larger. If possible, lower that back to 100% as it's strange being at 101.

I hope that helps, but if not, let me know.

Alex
The topic has been locked.