MyBB Community Forums

Hi

Can someone explain me how one should handle CSS with myBB properly? I did some searching but no solid understanding has built one me.

I find strange that supposedly the way to work up a theme (if I'm wrong educate me please) it's to work on a ''cache'', usually synonimous for "temporary file subject to change without notice'. There should be one CSS file like "userstyles.css" where all the user changes would go.
Also I don't understand what css.php is. It wrangles all the styles from forum base, theme, plugins, etc and outputs them all as one, I don't individual css files loading which makes harder to trace the origin of the code?

My problem.

First. I installed a theme (Apart Flame) and edited it with my likings, by editing cache/theme3/global.css (for the record also changed global.php for this, and some templates and images.)
All fine I edited in Notepad++ saved, looked to the site updated. Cool.

But then today I started saving and nothing happens, plus long load time unlike before and my @font-faces failed to load.

So... for my amazement I deleted my global.css from cache and the site styling remain the same... So it's not my file doing it. What it? Where is it stored and how do I control it?
Then I ran it on gtmetrix: http://gtmetrix.com/reports/probiner.x10.mx/rKfbukQ3 and the it showed why my load times were so high now. As you can see in Timeline Tab in the bottom the @font-faces generate the lag. But I had deleted my css why is it still looking for them?... Anyway I noticed it was looking for them in the root of the forum, unlike before where was looking for them in the caches folder where I set them up. This other website tested at the same time shows the css looking for the fonts in the correct place: http://gtmetrix.com/reports/topowiki.x10.mx/cPlW4VpC

I managed to solve the slow down by just moving the fonts to where css is looking for them, the root, but I can't still edit the outcome of the css.


So...? Apparently my global.css code changed place and is "cached" somewhere else, and I don't know how to reach it. Why? Did I do something? What's the predictable behavior of css in mybb. How can I control this without losing my mind?

I so much wished there was a way I could control CSS from top down. Is there?

Thanks for reading.
Cheers.
probiner

myBB:1.608

You should always change CSS via the APC: APC > Styles & Templates > *YOUR THEME* > Stylesheet to edit (eg: "global.css") > Advanced Mode.

Hmm... ok so I work on Notepad++ and then dump the whole file in the Advanced Mode. Now I kind of understand the mismatch of the root of the CSS. So myBB root folder is CSS root folder? (Meaning, all the relative paths origin from it?). It seems that the code is changed in either in global.css file and the ACL representation of said file.

Not yet understanding why one must work like this though I must admit the browser edited is very well done, in any case.

Problem persists with @font-face
Still I must have broken something. I've put the font files on both forum/ and forum/cache/themes/mytheme folders and they fail to load.
current: http://tinyurl.com/dyrjp5j
test: http://tinyurl.com/cn9ru35

It's really weird. When I use the editor and save, the paths are fine but the fonts don't load. Now, the global.css seems like it's updating again and when I change it directly the fonts works.

Bottom line: Where should I put the fonts and what path should I put in the css Advanced Panel in order to work correctly?

Cheers

PS: I clicked the B button for bold in this forum, while doing this post, and this is what it threw at me:

[undefined=undefined] text [/undefined]

It depends where you are loading the fonts from - for google fonts I just use the link provided by Google and put it at the top of headerinclude directly above the {$stylesheets} variable.

Re weird saving - try disabling code press in the admin preferences in ACP.

Re the editor - yes, this board is running MyBB 1.6.8 and is the default install. Once 1.6.9 is released then the board will be updated to run 1.6.9 with the new editor.js.

Why not fix it? Because this board is also the "demo board" for the currently available download package.

IIRC, fonts don't work too well with our style system. Most people just use google web fonts or other similar services.

Well, they do work fine if you just add the @fontface rule in the style sheet.

I've never tried it but I know plenty of people have whined about it in the past

Yea, there is a weird "bug" - if you update the css from the easy edit rather than advanced edit it adds a space after the @ character in the css - this effectively breaks the rules. I just always work in the advanced editor.

My code is fine. It's the way myBB handles CSS sources for @font-face that is sketchy.

Unfortunately I have to ask of you guys. What is the relative folder from where relative urls must be made from, in the browser editor??

Example
I managed to put the fonts loading again, by editing the global.css file through ftp.
Fine. I go in the browser editor, just open the advanced tab. Save what it's there (which apparently it's working, right?) and booom fonts fail again.

I have the fonts files BOTH in mybb/ and also in mybb/cache/theme/ and no matter what I put in the editor it doesn't pick the fonts...

In the advance browser editor (urls seem to be realtive css.php) :
I input src: urlurl('cache/themes/theme3/nuf_medium-webfont.eot'); fails
I input src: url('nuf_light-webfont.eot'); fails

In the globabl.css file (urls seem to be realtive to this file) :
I edit to ('../../../nuf_light-webfont.eot') works
I edit to ('nuf_light-webfont.eot') works

Ha but I noticed... I input with apostrophes 'nuf_light-webfont.eot', but when I open the editor sometimes it's without apostrophes nuf_light-webfont.eot , ah! So is there some stripping of the code here at times?
Anyway even when it's not stripped I can't use the editor for the fonts. So I'll stick with globals.css

(2012-11-02, 11:40 AM)euantor Wrote: [ -> ]I've never tried it but I know plenty of people have whined about it in the past

Sorry to hear this is how you take it...

Cheers

Hi,

First, did you disable codepress?

Home/Preferences Turn Codepress OFF

Second, which browser are you using?

It sounds like things are all very complicated in your css. I would put the fonts in a folder called fonts in the mybb/images/mytheme directory and then use an url structured so:

@font-face { /* for IE */ 
       font-family: 'MyCustomFont';
       src: url(images/mytheme/fonts/sector_017.eot) /* EOT file for IE */
}

@font-face {
       font-family: 'MyCustomFont';
       src: url(images/mytheme/fonts/MyCustomFont.tff)  /* TTF file for CSS3 browsers */
}
.myclass, .myclass a:visited {
	font-family: 'MyCustomFont';
        font-size: 15px;
        color: #fff;
	padding-left: 20px;
	margin-right: 15px;
	font-weight: bold;
}