Where in the Embed-Friendly Theme can I change font size for threads?

DocH

Hi, I'm a beginner with Vanilla, and also with CSS/HTML.

I simply wish to change the font size for the text in my Vanilla forums, which is running the provided Embed-Friendly theme. I can't even find where the font family and size is defined. I assume it's in one of the CSS files in the ..vanilla/themes/EmbedFriendly/ area.

Can anyone tell me where it is to be found? If that's not a daft question. Well, some help would be appreciated even if it IS...

Thanks

whu606

DocH

It's pulling many of its rules from the default Vanilla css file, but it's better not to edit that.

In your Vanilla folder there is a themes folder, and in that one called EmbedFriendly.

Inside the design folder in there is a css file called custom.css

add the following line:

.MessageList {font-size:14px;}

changing the font size to the px you want.

If you use Firebug with Firefox, you can inspect any element on a page, and see what rule affects it. You can make changes in the right hand pane, and see immediately what the change will do.

I'm not trying to puff my own stuff, but if you are relatively new to css (as I am) I uploaded a theme called annotated_css which contains rules to change the common elements in Vanilla, along with notes as to what they do, so it might be worth playing with that for a while.

You can then copy any rules from there into the Embed custom.css file.

DocH

Thanks whu606. Appreciate it a lot.

I hadn't come across Firebug before - very helpful. But still a bit perplexing.
Inspecting an element and being shown where its rule originates is really neat. And then altering it and seeing the effect immediately - neater still.

BUT... how does one update the custom.css file from there? I click on the link to custom.css at the right hand side of Firebug's CSS window to take me to the editor with custom.css open in it, and edit it there, but how do you save the CSS file from this editor? Any thoughts? I don't seem to be able to.

Also, I've also tried editing /vanilla/themes/EmbedFriendly/design/custom.css directly using the [crude] edit option in my host's FileManager, and even though I change the size: parameter, and save the file here, it doesn't seem to update when I go back into Firefox and open my Wordpress Vanilla forum - if I use Firebug again, the updates I have made to custom.css through the FileManager editor, don't seem to have fed through and are not present when I look at the file in Firebug. I've even rebooted in case there was some caching thing going on. I don't get it...

Any thoughts?

DocH

Hi Again,

Hmmm... I just realised I didn't use your ".MessageList {font-size:14px;}" suggestion, and perhaps that was my mistake - I just assumed that altering the size:nn parameter should have the effect I was seeking.

hbf

If you are running the minify plugin the new css changes may not be getting picked up. If you are, then you should disable it while you are testing, then delete the cache folder on your server before re-enabling it.

whu606

DocH

AfaIk, there is a default font setting set in Body, which is then overruled in much of Vanilla with element specific rules.

That .messagelist rule affects the text size of the comments.

DocH

Hi hbf,
No, not running minify, but I see what you mean.

Hi whu606,
Actually, I remembered that I did put the .messagelist{} in custom.css but it didn't seem to make any difference, (and that's when I started tinkering with the size:12 elements pointed out to me by Firebug). But then I may have put it in the wrong place, perhaps. Where does it have to go?

I'm still puzzled about how the system remembers its various settings - I've even uploaded, using my host's FileManager, the original custom.css file to overwrite the changes I made, but they still seem to be there even after I restart Firefox, and even after I reboot. Puzzled...

Thanks for suggesting Firebug. A lot to learn, I think...

Where am I supposed to put the .messagelist{} in Custom.css?

Thanks

DocH

whu606

It can go anywhere.

When I put it in EmbedFreindly custom.css it changed the font of the comments.

Maybe try Ctrl + F5 to force a refresh of the cache?

If that doesn't work, use the CSS tab in Firebug to see which css stylesheets your page is using. On the second bar you'll see a filename.css. If you click the drop down arrow next to that it will show you all the css files the page uses.

DocH

I can't understand this 'failure to refresh' issue.

If I do as you say, I can see that Firebug is telling me that I am looking at file custom.css in vanilla\themes\embedfriendly\design.
BUT the contents of the file I can see in this CSS window in Firebug, are not the same as the contents of custom.css if I view/edit the custom.css file
at vanilla\themes\embedfriendly\design\

I can't understand why they'e different.
EXCEPT that the bar in Firebug's CSS window shows the filename as custom.css?v=1.0
Perhaps there's some version control thing going on here and it is accessing an earlier edited version stored somewhere else (where??!!)

Thanks for your comments.

whu606

I think there is something in Vanilla that stores css versions of themes.

Try changing the version number in About.php (in EmbedFriendly folder) to 1.01 or something else. That might force Vanilla to recognise it.

DocH

The About.php shows 1.0. I'm reluctant to change it without knowing what I'm doing in case more things become unrecogniseable/unfindable/incomprehensible. Anyway, since it says 1.0, and since the CSS window shows custom.css?v=1.0 I don't see what that would achieve.

I've got to put this aside for a few days to focus on other stuff, even though I hate doing that while n the middle of a problem. If anyone can help, please do post something!!!!!
It's still a problem!!

Thanks

DocH

whu606

It tells something in Vanilla there is a new version of the theme, including the css file.

It's perfectly safe, and can do no harm!

DocH

Where is the new version actually stored? I can only see custom.css in the host's filemanager.

If I do try to alter something in custom.css in Firebug, is it possible to save this updated version? I can alter things and see the result reflected in the screen, but don't know how to save/update the file. Perhaps it's not possible in Firebug, lest the user wreak havoc.

The css window in firebug now shows custom.css?v=1.01 but I don't know where that is - can see custom.css in embedfriendly/design/ but don't know how to find, or how to edit, the ?v=1.01 version of it.

I'm just stuck now, and I've got to put it aside for now.

Completely confused...

whu606

DocH

custom.css is the same file as custom.css?v=1.0 (or wahtever number)

The Firebug edits are only for that session with the particular page, not permanent. You can't save them, they are for testing purposes only.

To make permanent changes you edit the custom.css file.

When you've edited the css file, make sure to use Ctrl + F5 to refresh the cache.

DocH

Impasse. Firebug shows the contents of custom.css to begin with
.MessageList {
font-size: 34px;

But if I edit custom.css using my host's filemanager/editor, it shows the beginning as
.MessageList {
font-size: 16px; [which is what I want]

I don't get it.

whu606

What's your forum address?

I'll try and take a look to see if I can spot anything (probably won't, but 2 heads and all that...)

DocH

I've switched 'maintenance mode' on because the whole site still very much in development. (I'm embedding Vanilla in a Wordpress site - could that be the problem?)

Thanks for the offer but I've got to turn my attention to other stuff and I don't want to make the site public yet.

whu606

I'm not sure what is going on tbh.

I've just enabled EmbedFreindly on a test site, added the line I suggested, did ctrl + F5 and the changes showed up.

DocH

Because it's embedded in Wordpress?
Because it's under Windows 7?
Because I don't know how to keep track of .css file versions?

whu606

If you have a development site, try taking Vanilla out of wordpress, and just having Vanilla on its own first, with Embed theme enabled.

If it works then, that points to the embed in WP, if it still a problem you know you need to look in Vanilla.

If necessary, delete the EmbedFrienldy theme from your server, and reupload it from the Vanilla package and start again.

whu606

And what is under Windows 7?

Is it a local site, or is it on a webserver?