Bootstrap on Creativity

Hi,

I am using the creativity template but I would like to add the Bootstrap html custom module from the Meet Gavern template on my website.
This custom module comes with 3 items (Free Joomla! 3.0 Template, Gavern + Bootstrap, Responsive Web Design) but need to use 4 items instead of 3.
I can mannage to create new icons but I need instructions how to create the html custom module.

Thank you in advance.

JL

If you haven't added your module yet go to module manager and click on add new and select custom html module and assign module position suitable for you.

Please either select no editor in global configurations or use source mode in your editor to see proper html codes.

Following is the html code. I have added an extra item and changed span4 to span3 so each box gets around 22% width and fits in one line.

Code: Select all

<div class="container-fluid">
   <div class="row-fluid">
      <div class="span3 gk-demo-content"><img src="templates/meet_gavern/images/content/joomla30.png" alt="Free Joomla! 3.0 Template" />
         <h2>Free Joomla! 3.0 Template</h2>
         <p>This is our first and free template built especially for Joomla 3.0. Want to know more about Joomla 3.0?</p>
         <a class="btn btn-large" href="http://www.joomla.org/3/">Read more</a>
      </div>
      <div class="span3 gk-demo-content"><img src="templates/meet_gavern/images/content/gavern_plus_bootstrap.png" alt="Gavern + Bootstrap" />
         <h2>Gavern + Bootstrap</h2>
         <p>Meet Gavern is based upon a brand new version of the Gavern Framework which features built-in support for Bootstrap</p>
         <a class="btn btn-large" href="index.php/template/content/single-article">Read more</a>
      </div>
      <div class="span3 gk-demo-content"><img src="templates/meet_gavern/images/content/responsive_design.png" alt="Responsive Web Design" />
         <h2>Responsive Web Design</h2>
         <p>Joomla! 3.0 and Gavern Framework are prepared to support Responsive Web Design</p>
         <a class="btn btn-large" href="http://gavick.com/magazine/responsive-web-design-necessity-or-fashion.html">Read more</a>
      </div>
      <div class="span3 gk-demo-content"><img src="templates/meet_gavern/images/content/responsive_design.png" alt="Responsive Web Design" />
         <h2>My Fourth Box</h2>
         <p>Joomla! 3.0 and Gavern Framework are prepared to support Responsive Web Design</p>
         <a class="btn btn-large" href="http://gavick.com/magazine/responsive-web-design-necessity-or-fashion.html">Read more</a>
      </div>
   </div>
</div>


Notice each box is wrapped in below code.

Code: Select all

      <div class="span3 gk-demo-content"><img src="templates/meet_gavern/images/content/responsive_design.png" alt="Responsive Web Design" />
         <h2>My Fourth Box</h2>
         <p>Joomla! 3.0 and Gavern Framework are prepared to support Responsive Web Design</p>
         <a class="btn btn-large" href="http://gavick.com/magazine/responsive-web-design-necessity-or-fashion.html">Read more</a>
      </div>


If you are missing css codes from meet gavern then let me know I ll check which css you need.

See you around...

Hi NormanUK,

Thank you, I've created the custom html module but looks diferent on the creativity template. It is not aligned horizontally but vertically.

Please add following css code to css/override.css located in template folder and then enable css override option in template settings > advanced settings > css override "on".

Code: Select all

.row-fluid [class*="span"] {
    -moz-box-sizing: border-box;
    display: block;
    float: left;
    margin-left: 2.5641%;
    min-height: 28px;
}
.row-fluid .span3 {
    width: 22%;
}
.gk-demo-content {
    padding: 0 15px;
    text-align: center;
}


See you around...

Hi NormanUK,

It doesnt work.

Do you have an online link where I can check your site as what I have posted was tested in my server, perhaps another css overrides this css.

See you around...

http://www.supermousestudio.com/index.php/en/about-us

Why do you have span2 in the html?

Oh yes, I pasted the code tha you provided but since the bootstrap was on vertical I suppouse the if I change to span2 can be solved but it was not the solution. So, I'd put it on span3 back again.

In which file did you add the css code I have posted ?

Hi NormanUK,

The html code for the bootstrap on a new module (custom html) and the css code on the css override template (template manager) and also on the template options I swiched on as you requested.

I can't see your override.css loaded at all, can you please double check it is enabled in template settings.

Hi NormaUK,

Checked : template settings > advanced settings > css override "on".-------->OK
Chacked : css override code on template ---------------------------------->OK

If you have used quickstart, there should be 2 copies of this template in template manager, make sure you enable both css override option in both styles.

Creativity - Frontpage.
Creativity - Subpages.

Aaaaaah.......!!!.... of course...!!
Now is ok but just one little thing, the pumping effect of the icons doesn't work.

Use below css code. Also you might want to use module positions bottom as current mainbody position width doesn't seem enough width to hold 4 boxes.

Code: Select all

.gk-demo-content img {
  display:block;
  height:auto;
  margin:30px auto;
  max-width:100%;
  -webkit-transform:scale(1.0);
  -moz-transform:scale(1.0);
  -ms-transform:scale(1.0);
  -o-transform:scale(1.0);
  transform:scale(1.0);
  -webkit-transition:transform 0.5s ease-out;
  -moz-transition:transform 0.5s ease-out;
  -o-transition:transform 0.5s ease-out;
  transition:transform 0.5s ease-out;
}
.gk-demo-content:hover img {
  -webkit-animation-name:gkbounce;
  -webkit-animation-duration:0.75s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:linear;
  -moz-animation-name:gkbounce;
  -moz-animation-duration:0.75s;
  -moz-animation-iteration-count:infinite;
  -moz-animation-timing-function:linear;
  -ms-animation-name:gkbounce;
  -ms-animation-duration:0.75s;
  -ms-animation-iteration-count:infinite;
  -ms-animation-timing-function:linear;
  animation-name:gkbounce;
  animation-duration:0.75s;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
}
@-webkit-keyframes gkbounce {
  0% {
    -webkit-transform:scale(1.0);
  }
  25% {
    -webkit-transform:scale(0.9);
  }
  50% {
    -webkit-transform:rotateZ(1.0);
  }
  75% {
    -webkit-transform:rotateZ(1.1);
  }
  100% {
    -webkit-transform:rotateZ(1.0);
  }
}
@-moz-keyframes gkbounce {
  0% {
    -moz-transform:scale(1.0);
  }
  25% {
    -moz-transform:scale(0.9);
  }
  50% {
    -moz-transform:rotateZ(1.0);
  }
  75% {
    -moz-transform:rotateZ(1.1);
  }
  100% {
    -moz-transform:rotateZ(1.0);
  }
}
@keyframes gkbounce {
  0% {
    transform:scale(1.0);
  }
  25% {
    transform:scale(0.9);
  }
  50% {
    transform:rotateZ(1.0);
  }
  75% {
    transform:rotateZ(1.1);
  }
  100% {
    transform:rotateZ(1.0);
  }
}


Hi NormanUK,

Thnx for you advice, Sure I will change the position. I have 2 more questions:
"Use below css code" do you mean replace the one on the override.css o just add it on?
And the other questions is about the read more buttoms , they doesnt show up.

Regarding css yes use it together with previous css code.

Regarding Read More buttons use the button class from Creativity template.

In Custom html module content.

Code: Select all

<a class="btn btn-large" href="http://www.joomla.org/3/">Read more</a>


Change btn btn-large to just button so this uses Creativity style.

Code: Select all

<a class="button" href="http://www.joomla.org/3/">Read more</a>


Hi,

I added the code on the override.css template and still the icons doesn't have de pumping effect

Are you sure you have added to correct file as currently your override.css has only following.

Code: Select all

.row-fluid [class*="span"] {
    -moz-box-sizing: border-box;
    display: block;
    float: left;
    margin-left: 2.5641%;
    min-height: 28px;
}
.row-fluid .span3 {
    width: 22%;
}
.gk-demo-content {
    padding: 0 15px;
    text-align: center;
}


See you around...

Hi NormaUK,

Sorry, I was my mistake, I didn't copy the complete codes. Now is the pumping effect great as should be. Just one more thing, I need to put in the centre the read buttons.

Please also add following css code to your override.css

Code: Select all

.row-fluid .span3 a {
    text-align: center!important;
    float: none!important;
    width: 100px;
    margin-left: auto;
    margin-right: auto;
}


See you around...

Hi NormanUK,

Everything works perfect....Many thanks...!!!!

No problem at all, see you around...

Hi Norman

I have a question about the bootstrap on creativity. until now every thing looks ok on a pc display but on a small device not. Seems that the site is not responsive any more.
Could you please tell me what to do to make again the site responsive?

Thank you in advance.

It is showing fine on my android, which device are you checking with ?

Hi Norman,

Thank you for your email. I have an Android too and actually what I mean is there is 2 things on the site that is not responsive anymore.
One is the custom module bootstrap on position gk1 and the other are the pictures of the joomla default article editor.
However all the pictures from K2 articel editor are good.
Here some pictures.

Sorry,

Here are the pictures and thank you for your support