vstemen's picture

Posted by vstemen on Tue, Aug 28, 2018 - 6:09pm

Hi.

I am experimenting with creating a Backdrop theme using Bartik as a starting point. I added a new style sheet in the .info file after where it loads style.css and colors.css

    stylesheets[all][] = css/style-experimental.css

In that file, I can override styles in .container {} but, when I try to modify the main menu, it just ignores it. For example, I tried

    .l-header ul.menu {  
        border: 1px solid grey; 
    }

which has no effect. However, if I put that same CSS in the style.css file, it adds a border around the menu bar as I would expect. I even tried adding it to the colors.css file and still no effect. It only works if I put it in the style.css file. I know it's loading the new file because I can override styles in the .container selector.

Does anybody have any suggestions of what I might be doing wrong?

Most helpful answers

I just thought I would let

I just thought I would let you know, that I finally completed my our CSS only theme enough that I contributed it to backdrop.  I just published it this evening.  I named it "Corporate KISS" https://backdropcms.org/project/corporate_kiss.

I think you also need to

I think you also need to change the name of the folder from "bartik" to the name of the new theme (if not already done) and also edit files:

  • template.php
  • theme-settings.php

and replace in them everywhere text "bartik" with the name of the new theme.

But I also think it's easier and more correct to make a sub-theme.

https://api.backdropcms.org/documentation/creating-sub-themes

This will allow you to use new versions of a bartik in case of updating of the the original theme.

 

 

Comments

Wed, Aug 29, 2018 - 7:37am by laryn

Have you cleared all caches after introducing the new change? (And ps, are you doing this in a subtheme of Bartik or Bartik itself?)

vstemen's picture

Wed, Aug 29, 2018 - 7:59am by vstemen

Yes. I cleared the caches.  Any changes I made to .container {} in the extra css file takes effect when I clear the CSS and Javascript cache, but I also cleared all caches.

It's a new theme.  I copied Bartik and renamed and edited the .info.

 

Wed, Aug 29, 2018 - 8:48am by laryn

So, to clarify, is it taking effect/working now?

Wed, Aug 29, 2018 - 9:19am by amilenkov

I think you also need to change the name of the folder from "bartik" to the name of the new theme (if not already done) and also edit files:

  • template.php
  • theme-settings.php

and replace in them everywhere text "bartik" with the name of the new theme.

But I also think it's easier and more correct to make a sub-theme.

https://api.backdropcms.org/documentation/creating-sub-themes

This will allow you to use new versions of a bartik in case of updating of the the original theme.

 

 

vstemen's picture

Wed, Aug 29, 2018 - 1:23pm by vstemen

Ah. This I had not done.  Neither the instructions at https://api.backdropcms.org/themes nor any other docs I have found so far made any clear mention of doing this.

OK.  I now I have made those changes to template.php and theme-settings.php but the problem still persists.

I was hoping to do it as a standalone theme with no outside dependencies.  I didn't really want to have the chance of it breaking my theme if a parent theme gets updated.

 

vstemen's picture

Wed, Aug 29, 2018 - 8:18pm by vstemen

I ran the same test directly with the bartik theme, rather than my copy of it, and had the same problem.  However, I tested a different theme, "cleanish", and it was able to override the menu CSS in a separate style sheet file just fine.  So it seems to be a problem with the bartik theme.

vstemen's picture

Wed, Aug 29, 2018 - 10:09pm by vstemen

Hmm...  Basis might be a better theme to us as our starting point than Bartik.  It does not seem to have the style sheet problem that I am having with Bartik.  Although, I kind of like having the color module already integrated into Bartik. 

If we don't figure out what the problem is with Bartik, I might file an issue report on it.

 

vstemen's picture

Wed, Sep 05, 2018 - 8:00am by vstemen

It appears that this has been fixed on the new release.  I installed Backdrop 1.10.1 and it does not seem to have this problem.  Although there is another problem.  I think I will start a new topic about it.

Thanks to those who attempted to help.

 

Wed, Sep 05, 2018 - 11:59am by amilenkov

I've met a lot of similar problems while working with the available Drupal 7 themes.

For me, for last 8-10 years (with Drupal), I always work in the following way (not totally in line with the most textbooks, but it works fine for me):

I don't use available ready-made themes at all.

For every site that I do, I create the theme myself and as I am accustomed to work.

With Drupal, it means at least creating a new theme ( .info file)  and a new page. tpl.php template file.

With Backdrop instead of editing page. tpl.php  I create my own layout.

This has the following advantages:

  • Since the code in the template is written by me I do not have to override unfamiliar CSS selectors in the CSS file of the theme. What's more, I use the same selectors in all of my themes.
  • I easily use fragments of layout code and from CSS code from one theme to another.
  • I know every element of the page where it's managed and so it's easier for me to find a solution for problems.

I must note, however, that in this way of working, for me to work with Drupal 7 is easier than with Backdrop (because of additional work with layouts). But this is not a serious problem, Backdrop has other advantages.

The available ready-made themes (and layouts) for me have a significant drawback: they seek to have possibilities to build sites with very different configurations, and I only need one of all possible layout configurations for the specific theme.

By creating my own theme (and layout for Backdrop) I get a much clearer and shorter code without unnecessary options (and code) that I will not use.

That's why my advice is not to try to edit Bartik or any other theme, but to learn to make your own themes and layouts.

This will take you less time than editing available ready-made themes and is not very difficult .

 

 

vstemen's picture

Fri, Sep 07, 2018 - 11:30am by vstemen

Thanks for the suggestions amilenkov. You make some interesting points.

I was hoping to not have to spend the time digging into learning to create themes from scratch but I keep running into so many quirks and bugs in every existing theme that, in the long run, your way may end up being easier.

This particular problem was apparently a core problem because, as I mentioned, it started working correctly in 1.10.1. However, I've encountered various other problems trying to use existing Backdrop themes that have become time sinks to try to figure out. I have posted about a couple of them.

aeon5 - menu links in the header are broken #5
Broken searchbox using Bartik them #3278

Like you, I have had problems with most Drupal 7 themes also. I have had to do a lot of theme research to establish a small selection of usable themes. It is kind of like Android apps. You often have to evaluate a bunch of them to find one that works well. But, there are so many to choose from for Drupal that I have been able to find a reasonable selection to use. One of my favorites is Mayo. I wouldn't mind seeing that ported to backdrop. It is not really that light weight, be it seems to work pretty well on various screen sizes.

I really like the architecture of Backdrop of separating the layouts from themes much better. It seems to me that this should substantially simplify creating a theme from scratch. The existing layout selection looks like it should fulfill most of my needs.

One of the Problems with Drupal 7 themes is that it is hard to find simple themes that are responsive. Since the layout is combined with the themes, most responsive themes I find are really bloated and built on other frameworks. I also have found very few themes that will utilize a wide screen and I often pull my hair out trying to modify them to do so. So far, it has been pretty easy for me to modify Backdrop themes to go wider with just one or two CSS changes to the outer containers.

I think that if there was a little bit better selection of themes for Backdrop that actually work well out of the box, it would substantially help reduce the barrier of entry for new users and improve Backdrops popularity. But, I am guessing that will come in time. Perhaps, if I get good enough at it, I will end up contributing one or more myself :-).

drop's picture

Thu, Sep 20, 2018 - 3:23pm by drop

Although, I kind of like having the color module already integrated into Bartik. 

Perhaps now that the color module is integrated into Basis it will make a better starting point for your themes? The Bartik theme was adapted to be responsive, but the Basis theme was built that way from the ground up, so if what you want is a neat responsive theme Basis might be a better choice. Maybe give it a shot on your next project?

The problem with themes in general is that most are created for one site (or one style of architecture), then expected to work for an infinite number of different architectures.

Having more themes that work seamlessly is the right answer, but it will be hard to get there on a system as feature-rich as Backdrop (or Drupal). 

vstemen's picture

Thu, Sep 20, 2018 - 6:41pm by vstemen

Perhaps now that the color module is integrated into Basis it will make a better starting point for your themes?

Yea, I am happy to see that. That does encourage me to do more playing around with Basis. Also, I have been working on creating a clean lightweight theme from scratch for our business site and have finally made some pretty good progress. As I suspected, so far I haven't had to write anything but simple CSS code. The layout system seems to do a nice job of taking care of responsiveness. Once it's refined and reasonably well tested, I have been thinking about contributing it as a Backdrop theme. I might even learn to integrate the color module into it if I get the time, but I don't have a need right now for that for our own use since I wrote it and know where all the CSS knobs are. I am keeping the CSS as simple and well structured as possible, so it is easy to find what to change for customization. So, even without the color module, there is always CSS Injector.

drop's picture

Thu, Sep 20, 2018 - 11:05pm by drop

Also, I have been working on creating a clean lightweight theme from scratch for our business site ... Once it's refined and reasonably well tested, I have been thinking about contributing it as a Backdrop theme.

It would be fantastic to have some examples of CSS-only themes in contrib :)