Loading...
 
Themes

Themes


Change Flatly to yellow and black

Hi everyone,

I'm trying to change the flatly theme to yellow and black as those are our organisations' colours. I think I have found the correct line in flatly.css, but it is not making any changes on the front end. I tried adding a "yellow" option, but my amendments in yellow.css were also ignored.

What am I doing wrong? Is there a caching option I am missing?

How should I go about customising this theme?

Thanks!

James

Japan

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


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.

2018 02 22 15 05 05 Geek.Zone   Welcome

We want it to look like this.

2018 02 22 15 09 28 Geek.Zone   Welcome

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,


Japan

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


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?


Japan

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


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!


Japan

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


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

yellow.css serverside
/* 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

yellow.css in browser
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?


It appears to use the yellow when minify css is activated, but ignore it when it is turned off. I'm still a bit perplexed.

Japan

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


Page: 1/2  [Next]

Upcoming Events

No records to display

Why Register?

Register at tiki.org and you'll be able to use the account at any *.tiki.org site, thanks to the InterTiki feature. A valid email address is required to receive site notifications and occasional newsletters. You can opt out of these items at any time.