Override Apigee responsive theme on dev portal

Google Cloud Apigee
1

Hi All,

I am facing an issue while overriding Apigee responsive theme on dev portal. I have the css file and layout in html format given by the UI team. I performed the following steps to create the subtheme

  1. Copied the apigee_responsive_starkit folder into sites/all/themes

  2. Renamed the folder and info file inside it.

  3. Placed my css (screen.css) and js files in js folder

  4. Gave stylesheet and javascript references in info file

  5. Copied page.tpl.php from apigee_responsive theme folder to my subtheme’s template/pages folder

  6. Modified page.tpl.php to include logo and header menu as per the required layout

The problem i am facing is that my screen.css has bootstrap classes, but those are not getting applied on the page properly, rather it is taking bootstrap classes from the apigee_responsive theme. I am not able to find a way to override the bootstrap classes that are already present in the base theme.

This is a blocker for us. Any help/guidance is appreciated.

1 Like
2

I think overwriting the bootstrap classes is not the right way to implement the theme.

You can add your own custom classes in the page.tpl.php and use that to enforce your styling.

The way CSS works is the longest selector will always be used to apply the styling.

3

I am assuming you are talking about applying the custom class names on the markup elements in page.tpl.php. Then we have already tried this, it did not work.

4

Can you elaborate on what you mean by this?

The problem i am facing is that my screen.css has bootstrap classes, but those are not getting applied on the page properly, rather it is taking bootstrap classes from the apigee_responsive theme.

If you are referring to .css classes that are provided by bootstrap.css, then… it should just work. Right? Those classes don’t get modified. I’m pretty sure you would not have modified them, right? It won’t matter where those .css classes get loaded from. Am i right?

Maybe you are still seeing the old apigee_responsive theme? There’s one key step you did not include in your 1..2..3…4.. list. Have you selected the new theme as the default theme? If not, then the devportal will continue to use the apigee_responsive theme.

This quick screencast shows how to do that:

5

@snehal chakraborty

Assuming you will be writing your own css using SASS based on bootstrap, the best way is to exclude the bootstrap from apigee theme using a hook in template.php

Code -

function theme_css_alter(&$css) { $exclude = array( ‘profiles/apigee/themes/apigee_responsive/css/bootstrap.min.css’ => FALSE, ); $css = array_diff_key($css, $exclude); }

This way you can exclude css from base theme and add your own css file to theme.info file - which should solve your problem.

Solution in brief - Exclude bootstrap from base theme and add bootstrap to your theme. If you add the above hook and add the file info to theme.info, the problem is solved.

Let me know if you have any further questions.

1 Like