By Keirebu on

Hello,

I'm trying to modify the builtin Bootstrap Theme - Superhero.....

Where exactly is the theme located in the Bootstrap folder? What file do I need to access to change a few colors and font sizes?

I found this: http://bootstrap-live-customizer.com and it does exactly what I'm looking for, but, sadly, I'm not sure where I'm supposed to put the file after it has been modified from this site, where do I put it?

Can someone please give me a hint as to where the file is located and the name of the file so I can either adjust it manually, or replace it with the file that this site creates?

Thank you!

⋅ Categories: Drupal 8.x

Comments

onejam’s picture

onejam commented

I believe 'superehero' is just an external css file to skin Bootstrap pulled in from https://bootswatch.com/

So there isn't any physical files in the Drupal BS theme. You can visit https://bootswatch.com/ and grab the css file and create a subtheme to use.

If you are going to use http://bootstrap-live-customizer.com/ i suggest to create a Drupal sub theme using these files.

-----------------------------------------------------------------
We build engaging websites and intuitive designs that will benefit your business.
Duvien

Keirebu’s picture

Keirebu commented

Hi!

Oh dang, I was hoping to avoid that process... I'm not only new'ish to Drupal, but I'm by no means a code savvy person, I even have tendencies to break things once I start looking at the folder level :(

How tricky is it to creating a sub theme?

Thank you!

onejam’s picture

onejam commented

How tricky is it to creating a sub theme?

I guess that depends on how eager you want to learn? but you don't need to be a rockstar coder...

Here's an article to get you started: https://internetdevels.com/blog/create-bootstrap-subtheme-Drupal8

-----------------------------------------------------------------
We build engaging websites and intuitive designs that will benefit your business.
Duvien

Keirebu’s picture

Keirebu commented

Thank you!

I don't mind learning, I'm just tired of messing stuff up :)

With http://bootstrap-live-customizer.com/ in mind, and the files it produces, which folder should I use LESS, SASS, or CDN?

Thank you!

onejam’s picture

onejam commented

Just replace all the same files into your subtheme folder. CDN will not be required.

*.less, *.css place them into your subtheme keeping the directory structure the same (like base theme).

It might not look the same due to drupal's own css overriding some of the elements, so you will have to tweak the bootstrap css or overwrite drupal css to get what you want.

-----------------------------------------------------------------
We build engaging websites and intuitive designs that will benefit your business.
Duvien

onejam’s picture

onejam commented

Download a Drupal Bootstrap subtheme and take a look at how it is built. You might be able to use it and just alter some of the settings in *yml files to match your own.

See: https://www.drupal.org/node/2781903

Here's a subtheme i created: https://www.drupal.org/project/bootstrap_progress you can use that as a starting point.

-----------------------------------------------------------------
We build engaging websites and intuitive designs that will benefit your business.
Duvien

Keirebu’s picture

Keirebu commented

I'm messing something up...

I followed the instructions you shared, and I got the theme created and installed, but I can't get the Superhero theme from 'Bootstrap Live Customizer' to work in the LESS theme I was able to create...

The Customizer allows you to download the following after modification:

bootstrap.min.css
bootstrap.css
variables.less
theme.less

Which file do I download and where in the them folder should it be placed? Does it need to be renamed?

I'm sorry these are such simple questions...

onejam’s picture

onejam commented

I'm guessing bootstrap.css is the one you need. It would probably end up as theme.css (compiled from theme.less) once you download it to your desktop.

So download bootstrap.css and rename it to style.css

I don't know how you have structured your sub theme but if you have structured this way:

{sub theme}/assets/css/style.css

then replace style.css with your downloaded file you have also renamed

That will get you about 95% close to the custom theme. Next is to tidy up the drupal css that may have overwritten your styles.

-----------------------------------------------------------------
We build engaging websites and intuitive designs that will benefit your business.
Duvien

Keirebu’s picture

Keirebu commented

Ready for this?

I just started playing with overrides-superhero.min.css and was able to actually modify the details I needed!

I'm sure it isn't the best method, but hey, it worked! :)

I'm still trying to figure out the other sub-theme issue, the adventure continues....