Jump to content
Willem-Siebe Spoelstra

Simple questions about: Twitter Bootstrap, Font Awesome, LESS

Recommended Posts

Willem-Siebe Spoelstra    0
Willem-Siebe Spoelstra

Hi,

 

You explain something about Mixins/LESS here: http://demo.pagelines.me/tools/.

Am I right Mixins has nothing to do with Twitter Bootstrap Library?

 

Mixins is something made possible by LESS right?

Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes. Mixins can also behave like functions, and take arguments, as seen in the example below.

 

But you also integrated Twitter Bootstrap Library into Pagelines. What I think I figured out right now, is that all the nice Twitter Bootstrap stuff > Pagelines made MIXINS of it....

Am I right?

 

Because I found out today this is also working (and this is same behaviour like MIXIN):

 

.post-meta .c_img img {
.img-circle
}

 

An other question I have is about the Icons. What is the difference between the icons I see on the Twitter Bootstrap Page and the Font Awesome page?

And why is Pagelines using 'em' instead of 'i' what I see on Twitter Bootstrap and Font Awesome page?

 

 

The new icon font system in PageLines 2.3 makes adding icons to elements easier than ever before. The best part is that its fully backwards compatible with the existing icons found in Bootstrap.

<em class="icon-pagelines"></em>

 

Hope to hear from you soon.


Kind regards,

 

Willem

 


I write about internet marketing, WordPress and Pagelines on my Dutch blog spoelstra.ws

Share this post


Link to post
Share on other sites
beardedavenger    158
beardedavenger

Mixins come in 2 shapes and sizes, regular mixins, and parametric mixins. Parametric mixins are like  .img-polaroid, and you can either use it as a class, or embed it into a css rule. Mixins is a LESS thing, and Boostrap uses plenty of mixins (thus so does PageLines).

 

The icons in core, are part of Font Awesome. Boostraps Icons, are actually images. They are no longer used.

 

More on LESS if you're interested:

http://nichola.us/less/less-chronicles-the-basics/


Something big is coming for DMS + photographers.

http://fotostheme.com

 

Nick Haskins & CO - New home for all of my PageLines Store products! 

http://nickhaskins.co

 

Better DMS - News, Tutorials, and Tips

http://betterdms.com

 

Share this post


Link to post
Share on other sites
Willem-Siebe Spoelstra    0
Willem-Siebe Spoelstra

For sure I'm going to read that to have all clear to me!

 

Question, do you have any expercience with creating a vertical menu with Twitter Bootstrap.

I would like to have this effect in my menu: http://twitter.github.com/bootstrap/javascript.html#collapse

 

Ofcourse where you can put the content I can put en list (ul) but I have to do this manually...

Do you have an idea what is less time consuming?

 

I made it possible to add php in my text widget and I addes:

 

<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header' ) ); ?>

 

on the 'context' place... but this ads only the first menu and I don't know how to call a specific menu into the widget. In that way I can make 5 menu's for all the subpages...

 

Kind regards,

 

Willem


I write about internet marketing, WordPress and Pagelines on my Dutch blog spoelstra.ws

Share this post


Link to post
Share on other sites
James B    436
James B

Hi Willem

 

You can copy and paste the html from twitter bootstrap directly into the framework. As bootstrap is already integrated into the framework with the required code and js files. Just paste in the html and it will work, this is with exception of the navbar masthead which have been edited into pagelines sections. All other bootstrap code should work fine.

 

I wouldn't know the answer the to php related question unfortunately, that's outside of our support spectrum. But we'll leave this thread open and maybe another user or developer will be able to advise on that further :-)


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Willem-Siebe Spoelstra    0
Willem-Siebe Spoelstra

Hi, thanks for all the advise. 

 

If I tried to apply the code for 'collapse' - the effect I want in my vertical menu - it looks like it doesn't fit the menu of WordPress.

 

     <li class="accordion-heading" id="menu-item-56" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-56"><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne" href="http://oudisnieuw.net.websrv.makeweb.nl/landelijke-meubels/">Landelijke meubels</a>
      <ul id="collapseOne" class="accordion-body collapse in" class="sub-menu">
       <li id="menu-item-54" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-54"><a href="http://oudisnieuw.net.websrv.makeweb.nl/cafestoelen/">Cafestoelen</a></li>
<div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Collapsible Group Item #1
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>

 

The last div with class="accordion-inner" needs to hold all the inner content, but that is where all the sub 'li' from the menu starts, so I really don't know how to achieve a vertical menu based on twitter bootstrap.

 

Kind regards,

 

Willem


I write about internet marketing, WordPress and Pagelines on my Dutch blog spoelstra.ws

Share this post


Link to post
Share on other sites
Willem-Siebe Spoelstra    0
Willem-Siebe Spoelstra

Hi, well I still want to know if I can make something like that above, but I found a wonderfull plugin called http://wordpress.org/extend/plugins/jquery-vertical-accordion-menu/faq/.

 

This is based on Jquery, nothing wrong with that I guess?

 

Kind regards,

 

 

Willem


I write about internet marketing, WordPress and Pagelines on my Dutch blog spoelstra.ws

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

I don't really understand what you're trying to do. Are you wanting to use the Accordion as a menu ?

If this is the case, I recommend you contact one of our Pros, as this goes beyond the support we can provide here in the forums.

 

http://www.pagelines.com/pros/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Willem-Siebe Spoelstra    0
Willem-Siebe Spoelstra

Hi , thats what i'm trying.

Thanks for the pro link.

Willem


I write about internet marketing, WordPress and Pagelines on my Dutch blog spoelstra.ws

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×