Themes

Posted by Gary Cunningham-Lee 22 Feb 2018 11:41 GMT-0000

Hi,

First, about the theme option stylesheet, if the file has this path from your Tiki site root:

themes/flatly/options/yellow/css/yellow.css

then the file should be found and used. (The theme options have the same directory structure as themes themselves.)

About why your CSS rules aren't having an effect, that depends on the details. A general rule might be overridden by more specific rules, for example. Can you describe what page elements you want to have yellow and black colors?

-- Gary

Posted by James Geddes 22 Feb 2018 14:56 GMT-0000

Hi Gary,

Yes, I made a new CSS file at

../themes/flatly/options/yellow/css/yellow.css

Unfortunately, it does not seem to have any effect. I simply want heading text to be black and the navbar-default to be yellow, but can't seem to work out why the changes are not making it through.

The site, Geek.Zone, currently looks like this.

We want it to look like this.

Normally I would update the CSS on the server, as I have done here in Chrome, and that would be it, however, my tests have shown that my changes in flatly.css are not made available to the browser. Apologies for being such a tiki n00b but I'm a bit stumped!

Thanks,

Posted by Gary Cunningham-Lee 22 Feb 2018 15:25 GMT-0000

So you made the changes in CSS and they are working locally? Normally I find that CSS changes made at the site take effect immediately (after a page refresh), but you could try turning off CSS minifying (on tiki-admin.php?page=performance), if that is enabled (and then back on after the change is in effect).

[I wrote this earlier without seeing your screenshots (just started writing after getting the forum post email notice), so maybe it's not necessary but I'll leave it here just in case:]

The default stylesheet has this rule:

.navbar-default,
.navbar-inverse,
.topbar,
.topbar .navbar-default .navbar-nav > li,
.topbar .nav > li {
    background-color: #2b6288;
}

So if you change "#2b6288" to "yellow", that should do the trick.

The links in the navbar have this rule:

.navbar-default .btn-link {
    color: #ffffff;
}

So that needs changing to red, or whatever shade of red you're wanting to use.
(BTW, I generally use Firefox's DOM inspector to identify what CSS rules apply to the various page elements - I think all web browsers have this kind of developer tool built in, if you want to give it a try.)

-- Gary

Posted by James Geddes 22 Feb 2018 15:32 GMT-0000

Am I wrong in thinking that flatly.css or preferably yellow.css should be doing the job? With this in mind, I was a bit reluctant to change the root CSS! Why won't tiki allow serverside changes I make in flatly.css to be provided to the browser?

I have updated my previous post to include current and expected screenshots. I used the chrome DOM inspector to fudge the second one, but it's pretty much the same as the firefox one.

Surely the point of the options CSS files is so that you can control the main objects without having to change the root CSS? Why would it ignore yellow.css?

Posted by Gary Cunningham-Lee 22 Feb 2018 15:47 GMT-0000

Yes, that is the point of the options CSS files, and also of custom CSS input on the Look and Feel admin page or saved as a custom.css file in the themes directory root; that's the design and it's how things normally work. So if it isn't working, the stopper might be the need to unminify/reminify the CSS files (this assuming that the option/custom CSS rules are written correctly to overwrite the theme file once all the CSS is loaded and applied.

-- Gary

Posted by James Geddes 22 Feb 2018 15:56 GMT-0000

Minifying has never been turned on for CSS - or javascript for that matter

It's so frustrating as I can see the controlling field and temporarily edit it in the browser!

Posted by Gary Cunningham-Lee 22 Feb 2018 16:18 GMT-0000

Looking at your site with the DOM inspector, I see that yellow.css is being used, but it has this rule being applied to the navbar:

.navbar-default, .navbar-inverse, .topbar, .topbar .navbar-default .navbar-nav > li, .topbar .nav > li {
    background-color: #2b6288;
    // background-color: #ffff00;
}

The color #2b6288 is a blue shade. This should be "yellow" or a hex color value for yellow. (Also "//" isn't a valid way to comment out a line in CSS - it should be "/* background-color: #ffff00; */".)

-- Gary

Posted by James Geddes 22 Feb 2018 18:05 GMT-0000

Thanks for pointing out my incorrect commenting! I guess I was thinking about another language. Just for good measure, I have removed the unrequired lines entirely.

Here is yellow.css as I see it serverside at ./themes/flatly/options/yellow/css/yellow.css

/* Deliberately minimal css option file for the Flatly theme added as a demo and test for Tiki 14 */

a, .btn-link {
    color: #ff0000;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
a:hover, a:active, a:focus {
	color: #00ff00;
}

.btn-default {
    background-color: #ff0000;
    border-color: #ff0000;
}

.btn-default:hover {
    background-color: #000000;
    border-color: #000000;
}

.navbar-default,
.navbar-inverse,
.topbar,
.topbar .navbar-default .navbar-nav > li,
.topbar .nav > li {
    background-color: #ffff00;
}

.topbar > a:hover,
.topbar .navbar-default .navbar-nav > li > a:hover,
.topbar .nav > li > a:hover,
.topbar > a:focus,
.topbar .navbar-default .navbar-nav > li > a:focus,
.topbar .nav > li > a:focus {
  color: #ff0000;
}



.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
    background: #000;
}

.autotoc * {
    color: #000000;
}

Here is yellow.css as I see it when I navigate to http://geek.zone/themes/flatly/options/yellow/css/yellow.css

a,.btn-link{color:#3c88bc}.navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>li>a:focus,a:hover,a:active,a:focus{color:#50b3fb}.btn-default{background-color:#3c88bc;border-color:#3c88bc}.btn-default:hover{background-color:#ff0;//title,original2b6288border-color:#ffff00}.navbar-default,.navbar-inverse,.topbar,.topbar .navbar-default .navbar-nav>li,.topbar .nav>li{background-color:#2b6288}.topbar>a:hover,.topbar .navbar-default .navbar-nav>li>a:hover,.topbar .nav>li>a:hover,.topbar>a:focus,.topbar .navbar-default .navbar-nav>li>a:focus,.topbar .nav>li>a:focus{color:#50b3fb}.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>.active>a:focus{background:#000}.autotoc *{color:#3c88bc}

I am sure you will notice that there are several changes that are not getting through. I don't think this is a minification issue as that apperas to generate an entirely new CSS. Unless there are some caching setting I have missed, I do not know what could be causing this! What do you think?

Posted by Gary Cunningham-Lee 23 Feb 2018 05:40 GMT-0000

I would fix the CSS first (remove the invalid comment characters and so edit the CSS to designate yellow for the navbar). If I remove the "//" characters using Firefox's DOM inspector, the navbar background changes to yellow.

However, the links in the navbar are still using the flatly.css values, so the CSS the specifies them should be added to yellow.css (I strongly suggest using your browser's dev tools' DOM inspector to identify the CSS that's styling those links and any other text that appears against the yellow background.)

As far as minification is concerned, there normally isn't a difference in the applied CSS between minified and not minified versions of the stylesheets in terms of effect, although invalid CSS or stray characters can cause a difference.

-- Gary