twitter-bootstrap-3,typo3,navbar,typoscript , Typo3 BootStrap 3 navbar (typoscript)


Typo3 BootStrap 3 navbar (typoscript)

Question:

Tag: twitter-bootstrap-3,typo3,navbar,typoscript

Hi I am new to typoscript and I need help in getting the menu working. The following typoscript will render the Bootstrap navbar, yet the menu is thrown out of the navbar completely without css styles.

topnavigation = HMENU
topnavigation.wrap (

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container"> 
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
      <a class="navbar-brand" href="http://www.example.com">Brand</a></div>
    <div class="collapse navbar-collapse" id="navbar-collapse">
      <ul class="nav navbar-nav">

      </ul>
    </div>
  </div>
</nav>

)
  topnavigation.entryLevel = 0
  topnavigation {
    1= TMENU
    1 {
      expAll = 1
      maxItems = 4
      NO.wrapItemAndSub = <li>|</li>

      ACT = 1
      ACT.wrapItemAndSub =  <li class="active">|</li>            

      IFSUB = 1
      IFSUB.wrapItemAndSub = <li class="dropdown">|</li>

      ACTIFSUB = 1
      ACTIFSUB.wrapItemAndSub= <li class="active dropdown">|</li>

    }    
    2= TMENU
    2 {
      wrap = <ul class="dropdown-menu">|</ul>
      NO.wrapItemAndSub = <li>|</li>

      ACT = 1
      ACT.wrapItemAndSub =  <li class="active">|</li>

    }    
  }

Please help


Answer:

Biesior, thanks for pipe suggestions, it did set me in the right direction. After a load of research and hacking (not being a coder and alien to typoscript), I managed to get the bootstrap 3 inverse navbar working correctly with in typo3.

The following code works out of the box.

topnavigation = HMENU
topnavigation.wrap (

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="http://www.example.com">Your Company Name or Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="navbar-collapse">
      <ul class="nav navbar-nav">|</ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container -->
</nav>

  )
topnavigation.entryLevel = 0
topnavigation {
    1 = TMENU
    1 {
    expAll = 1
     
    NO.allWrap = <li>|</li>
    NO.ATagTitle.field = abstract // description // title
     
    ACT = 1
    ACT.wrapItemAndSub = <li class="active">|</li>
    ACT.ATagTitle.field = abstract // description // title
     
    IFSUB = 1
    IFSUB.before = <a href="#" class="dropdown-toggle" data-toggle="dropdown">
    IFSUB.after = <b class="caret"></b></a>
    IFSUB.doNotLinkIt = 1
    IFSUB.wrapItemAndSub = <li class="dropdown">|</li>
    IFSUB.ATagTitle.field = abstract // description // title
     
    ACTIFSUB = 1
    ACTIFSUB.before = <a href="#" class="dropdown-toggle" data-toggle="dropdown">
    ACTIFSUB.after = <b class="caret"></b></a>
    ACTIFSUB.doNotLinkIt = 1
    ACTIFSUB.wrapItemAndSub = <li class="dropdown active">|</li>
    ACTIFSUB.ATagTitle.field = abstract // description // title
     
    }
     
    2 = TMENU
    2 {
    expAll = 1
     
    ACT = 1
    ACT.wrapItemAndSub = <li class="active">|</li>
    ACT.ATagTitle.field = abstract // description // title
     
    ACTIFSUB = 1
    ACTIFSUB.wrapItemAndSub = |
    ACTIFSUB.before = <li class="divider"></li><li class="nav-header">
    ACTIFSUB.after = </li>
    ACTIFSUB.doNotLinkIt = 1
    ACTIFSUB.ATagTitle.field = abstract // description // title
     
    NO.allWrap = <li>|</li>
    NO.ATagTitle.field = abstract // description // title
     
    IFSUB = 1
    IFSUB.before = <li class="divider"></li><li class="nav-header">
    IFSUB.after = </li>
    IFSUB.doNotLinkIt = 1
    IFSUB.ATagTitle.field = abstract // description // title
     
    SPC = 1
    SPC.allWrap = <li class="divider"></li><li class="nav-header">|</li>
     
    wrap = <ul class="dropdown-menu">|</ul>
    }
     
    3 = TMENU
    3 {
    NO.allWrap = <li>|</li>
    NO.ATagTitle.field = abstract // description // title
     
    ACT = 1
    ACT.wrapItemAndSub = <li class="active">|</li>
    ACT.ATagTitle.field = abstract // description // title
    }
  }

Remember to refer to the extension in the main page (fileadmin/your_template/layouts/your_main_page.html)

<f:cObject typoscriptObjectPath="topnavigation" />

Related:


Using AngularJS to display form validation errors


javascript,angularjs,twitter-bootstrap,twitter-bootstrap-3
Here's my current html code: <div class="form-group" ng-class="{ 'has-error' : form.inputName.$invalid && !form.inputName.$pristine }"> <label for="inputName" class="col-sm-4 control-label"><font color='RED'>* </font>Name</label> <div class="col-sm-8"> <input type="text" class="form-control" ng-model="name" name="inputName" id="inputName" placeholder="Enter in a name." required /> <p ng-show="form.form.$invalid && !form.form.$pristine" class="help-block">Name is...

Can we change width of container in css using Bootstrap3


twitter-bootstrap-3,width,containers
how can i change width of container in bootstrap3. I want content in center of browser (70% of browser's width). <p> Use Bootply to design, prototype, or test the Bootstrap framework. Find examples, share code and rapidly build interfaces for Bootstrap. Use Bootply to design, prototype, or test the Bootstrap...

How to assign variable in fluid?


typo3,fluid,view-helpers
I want viewhelper that can be helpful to assign variable in fluid, I dont want variable to be passed from controller.

Bootstrap Hovering


javascript,twitter-bootstrap-3
Is it possible to do simply on bootstrap framework the following thing? Example having a few buttons and when one is hovered the others change to light grey or something. Sorry but I can't find it on w3 schools or in the web. Should javascript be used? Thanks!...

Content section overlap footer


html,css,twitter-bootstrap,css3,twitter-bootstrap-3
I have a a page as following that works fine in big screens but in small screens the mainsection overlap the footer. How can I have the footer always at the bottom of the page. Also in small screens the location of the footer should be based on content of...

Typoscript add class to the first element using stdWrap


typo3,typoscript,typo3-6.2.x
I have a custom requirement to display an image slider using TypoScript. The images are taken from default tt_content image content element. I've added the following TypoScript code to implement this; lib.homeslider = COA lib.homeslider { 10 = CONTENT 10 { table = tt_content select { where = colPos =...

Inconsistent display on IE & Firefox


html,css,internet-explorer,firefox,twitter-bootstrap-3
I'm using Bootstrap on my website project. I'm through with the design but the items are displayed out of place on IE & Firefox. The same page renders great on Chrome. I used developer tools on the three browsers to make sure there was no difference in the CSS properties....

how to align column to the right?


angularjs,css3,twitter-bootstrap-3
I am getting my head around twitter bootstrap 3 and specifically the column setup. I got a 2 columns on the same line: <!--datetime row--> <div> <div class="col-md-6 form-group"> <label for="">Title:</label> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li...

padding between col-md2 elements


html,twitter-bootstrap,twitter-bootstrap-3
My goal is to show 6 columns in one row. Here's part of how I get them done (shown only first 3). I have this code: <div class="col-md-2"> <input mytr="first_name" mytrId="" name="first_name[]" id="first_name" class="form-control" placeholder="First name" type="text"> </div> <div class="col-md-2"> <input mytr="middle_name" mytrId="" name="middle_name[]" id="middle_name" class="form-control" placeholder="Middle name" type="text"> </div>...

Change Font Awesome Icon on Click, but return to original icon when next item is clicked


jquery,twitter-bootstrap-3,onclick,font-awesome,toggleclass
I'm using Bootstrap 3 Panel's and have appended the Font Awesome Plus and Minus icons to the panel items. I'm looking for a way using Jquery to change the plus to a minus "onClick", then when another panel item is clicked I want that minus icon to change back to...

aligning controls vertically in bootstrap


css3,twitter-bootstrap-3
I'm new to bootstrap and css3. I want to align my controls vertically in middle but some how not able to find elegant solution to it using bootstrap classes. Pls check sample code snippet below : <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="row"> <div class="col-md-12"> <div class="form-group col-md-5"> <span class="fieldtext">Field 1</span>...

How to join two jquery methods into one statement?


jquery,twitter-bootstrap-3,asp.net-mvc-5
I am using jquery to display bootstrap modal and want to add custom message at runtime. Here is what I am doing? but wondering if there is a way to merge two lines into one:- $("#modalBody").append("saved successfully"); $("#modal").modal("show"); Bootstrap Modal:- <div id="modal" class="modal fade" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div...

How to get typo3 settings in the utility files?


php,typo3,fluid,extbase
plugin.tx_xxx { setting { storagePid = 23 } } I want this typo3 settings in utility file. Please help me....

How to make Bootstrap Carousel to start from the first slide on button click?


javascript,twitter-bootstrap,twitter-bootstrap-3,carousel
I am using a Bootstrap Carousel in my website and want to achieve this: The carousel should reset and start from the first slide on button click. Is it possible?

How can I make my icon stay in the center of my accordion header?


html,css,twitter-bootstrap-3
I have an accordion. At the right of my accordion, I have an icon, and I want to set that icon to stay in the center of my panel-header. As you can see right now, it's kind of too close to the bottom. I've tried using padding, and margin,...

how to make a loop and if statement that loops through a different groups of radio buttons (javascript)


html,loops,twitter-bootstrap-3,radio-button
**HTML** <li class="option"> <input type="radio" name="Answer1" value="A">A</input><br> <input type="radio" name="Answer1" value="B">B</input><br> <input type="radio" name="Answer1" value="C">C</input><br> <input type="radio" name="Answer1" value="D">D</input><br> </li> <li class="option"> <input type="radio" name="Answer2" value="A">A</input><br> <input type="radio" name="Answer2"...

Each form control display on its own line and strech the entire screen


html,html5,forms,twitter-bootstrap,twitter-bootstrap-3
My form looks great with Twitter Bootstrap 3 but I don't want it to look like this: And more like this: I was able to make my button group on another page do this with btn-group-vertical btn-group-lg btn-block class. But I didn't yet find anything that does the same with...

Bootstrap collapse - opening multiple accordions at the same time


javascript,jquery,twitter-bootstrap,twitter-bootstrap-3
I've got to a point where my accordions open up at the same time - see http://www.bootply.com/Go4t29rYyF When you click on "tab1" all the "tab1s" open, when you click on "tab2" all the "tab2s" open - great! But I cant open "tab1s & tab2s" at the same time, it only...

Bootstrap text-danger with form-inline not aligned


css,twitter-bootstrap-3,jqbootstrapvalidation
I have a simple form with error handling through jqBootstrapValidation. I set it up so that it is horizontal when the browser is wide enough. Here is how it looks: http://i.imgur.com/K0JKzb8.png However, when I enter a bad email, the form is not aligned anymore. http://i.imgur.com/4Fr2UTq.png Here is the code I...

Replace URLs in Typo3 DB


mysql,database,typo3
So I have a Site created with Typo3. I also have a domain which is linked to the folder of the Typo3 Installation. www.example.org I created a Subdomain and linked it to the same folder and used the Main Domain for something else. But now everything on the Subdomain still...

how fix this collapsable bootstrap sidebar menu?


css,twitter-bootstrap-3
this code below works fine if I have 1 collapsable sidemenu item, but when I add another the upper item doesn't work right. It's all badly highlighted. The bottom one works still fine. What's wrong here thanks. Here is bootply: http://www.bootply.com/IABXgPMp5S <div class="container body-content"> <div class="row row-offcanvas row-offcanvas-left"> <!-- sidebar...

How to get Query object to felogin repository?


typo3,typo3-6.1.x
i need Query object of TYPO3\CMS\Felogin\Controller\FrontendLoginController in my extention repository so i can create my own query conditions.

Put form fields two per line in bootstrap form


html,forms,twitter-bootstrap-3
I am using Twitter Bootstrap (version 3) and in the form, I am trying to put these fields two per line, but i cant figure it out how to do it.. Here you can see it in bootply what i have done.. <div class="col-md-10"> <div class="form-group"> <legend>1st sth</legend> <div class="col-md-2">...

Text going out of the container div


css,twitter-bootstrap,twitter-bootstrap-3,bootstrap
the css code: #overlay { background: rgba(0,0,0,0.8); position: absolute; z-index:100; width: 100%; color:#fff; height: 100%; } the html code: <div class="container" style="border:1px solid #000;"> <div class="row"> <div class="col-md-12"> <div id="overlay">Overlay</div> Here goes the brief introduction of the company which has branded it's logo religious in almost its entire brand and...

Bootstrap switch between class when in tablet or phone viewport


css,twitter-bootstrap,twitter-bootstrap-3
I have this div: <div class="col-lg-6 col-md-6 col-sm-6"> <p class="btn-toolbar pull-right">Some Content</p> </div> I want to know if its possible when the page is in tablet mode (e.g. col-md-6) I want to change the paragraph class instead of pull-right I want to set to pull-left. Is it possible? Thanks, Laziale...

Bootstrap Justified Nav Bar not collaspsing correctly


css,twitter-bootstrap-3
Building a site using bootstrap. The main navigation bar is set as justified (nav-justified) - When it gets to medium, some of the text on the menu is wrapped below and not sure to why this is happening. Any ideas? Thanks!...

Where are TYPO3 constants from constant editor stored?


typo3,constants
In Typo3 Backend -> Template -> Constants there is a constant editor. Where does TYPO3 saving the constants? Tried an fgrep -ri for an existing pattern, in case of saving to filesystem - no matches. Tried an MySQL search for an existing pattern, in case of saving to DB -...

Create two HTML Forms next to each other


html5,forms,twitter-bootstrap-3
I am new to HTML. I am wondering if you could have two forms setting next to each other in parallel in HTML. I have generated this sample GUI with Tkinter and I want to generate a HTML file for the GUi with Bootstrap style. ...

How to vertically align div inside Bootstrap 3 column


html,css,twitter-bootstrap,twitter-bootstrap-3,vertical-alignment
I have a page with Twitter Bootstrap container-fluid class div, one row and one col-md-6 inside that row. Row is set to 50% height of the container, and a column has 100% height of the row. I have a div inside that column, that I want to be in the...

HTML5 Semantic Elements Nesting with Boostrap


html5,twitter-bootstrap-3,semantic-markup
I have an article template in which I want the title to run the full width of the page (12 cols), and then the text itself to fall in below with an adjacent sidebar (8 and 4 cols respectively). The problem is that I can't get the sidebar to nest...

Typo3 6.2: “Could not find a suitable type converter for ”String“ ” exeption after update


php,typo3,typo3-6.2.x
Typo3 was from a very old version updated to Typo3 6.2. The most things are working now, but I have one own written extension that give me the following error: Core: Exception handler (WEB): Uncaught TYPO3 Exception: #1297759968: Exception while property mapping at property path "":Could not find a suitable...

Align column vertically with bootstrap


html,css,twitter-bootstrap,twitter-bootstrap-3,bootstrap
I have 3 columns in a row. The first and second are wider, and the third is narrower and needs to include only a buy button and the price. This is how it looks at this point: I need to align the right most column to the middle of the...

Bootstrap 3 collapsed menu not working on mobile screens


jquery,css,twitter-bootstrap,twitter-bootstrap-3
It seems a lot of people are having this trouble (https://github.com/twbs/bootstrap/issues/7968), but the solution that worked for some is not working for me. If you try to open my website at http://axxon.co and resize the window until the burger menu appears, you'll notice that nothing happens if you click on...

Modal from inside Bootstrap Tabs using Knockout foreach


jquery,twitter-bootstrap,knockout.js,twitter-bootstrap-3
I have Bootstrap tabs bound to a KnockoutJS observable array using a foreach binding, which is working fine. I now want to launch a Bootstrap modal from inside the active tab. <div class="tab-content"> <!-- ko foreach: trueData --> <div class="tab-pane fade in" data-bind="css:{active: $index() == 0}, attr :{'id': 'tab' +...

Bootstrap center image


css,html5,twitter-bootstrap-3
I am trying to center an image on my webpage. I want it to appear just above my footer. No matter what I have tried so far nothing works here is my html <div class="center-block"> <img alt="footer" title="footer" class="image-footer" src="./img/demo.png"/> </div> <div class="navbar-fixed-bottom footer"> <ul class="foot-left"> <li><a href="#" class="menu_buttons" >Home</a></li>...

span is not inline with input using bootstrap 3


html,css,twitter-bootstrap-3
I am using Bootstrap 3 with form-horizontal in form tag. I am making use of form-group as shown in below sample HTML. span is not inline with input control as it is expected by using form-horizontal. <form name="productForm" class="form-horizontal"> <div class="col-lg-6"> <div class="form-group"> <span class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="text-align:right;">Number</span> <div...

How to make Chart JS responsive?


twitter-bootstrap-3,responsive-design,chart.js
I am using Chart.js with Twitter Bootstrap template. The Charts are not sized correctly if I don't mention a height and width for Canvas. But if I specify width and height then the charts are not responsive. How can I solve this issue?

Is it possible & feasible to integrate new UI HTML design templates created using Bootstrap into a website developed in PHPFox? If yes how? If no why?


php,twitter-bootstrap,templates,twitter-bootstrap-3,phpfox
I've a social website like 'Facebook' which is developed entirely in PHPFox version 3.0.7(a social networking platform created in php). The website looks similar to 'Facebook' and most of it's functionalities resembles the functionalities of 'Facebook'. Now to make the site looking better I want to integrate new HTML template...

Loading bootstrap3 menu items from json response


jquery,twitter-bootstrap-3
I am trying to show items send from server as bootstreap munu items. For that I an trying following code HTML <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <span id="info-count"></span> <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="get-info-list"> <i class="fa fa-list-alt"></i> </a> <ul class="dropdown-menu" id="infolist" role="menu"> <!--Items should be loaded here--> </ul> </li> </ul>...

Setting up the page grid using push and pull


html,twitter-bootstrap,css3,twitter-bootstrap-3
I'm using Bootstrap and I'm having issues setting up my grid. How do I use bootstrap's push/pull to setup my columns as below? This is what I've got so far, <div class="row"> <div class="col-xs-5 col-sm-3 col-md-3">A</div> <div class="col-xs-7 col-sm-9 col-md-2 .col-md-push-7">B</div> <div class="col-xs-12 col-sm-12 col-md-7 .col-md-pull-9">C</div> </div> ...

Removing gap between navbar options


css,html5,twitter-bootstrap,twitter-bootstrap-3,bootstrap
I have a navbar menu for my website and I am trying to figure out how to remove the gap between each of the navbar links. As far as I can tell the li attributes with the class dropdown are a few pixels wider then the rest of the link....

Styling jQuery Validation with Select2 4.0 and Bootstrap 3+


jquery,css,twitter-bootstrap-3,jquery-validate,jquery-select2-4
I have a project that uses Bootstrap 3.3.4, Select2 4.0, and Jquery Validation 1.13.1 I have set the jquery validator defaults to style bootstrap 3 classes like so $.validator.setDefaults({ errorElement: "span", errorClass: "help-block", highlight: function (element, errorClass, validClass) { $(element).addClass(errorClass); $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); }, unhighlight: function (element, errorClass, validClass) { $(element).removeClass(errorClass);...

How can i have multiple Navbars in a page


twitter-bootstrap-3,bootstrap,navbar
I am building a CMS editor and one of the things that can be customized is the text appearing in the Navbar. I am having a problem with showing two Navbars. Most examples i have seen are multiple Navbars one below the other and is not what i need. I...

Modal toggled in other modal - can't scroll modal


twitter-bootstrap-3,modal-dialog
I created a modal and inside the modal I created a button to open the second modal and close the first but the problem is that the scrollbar doesn't work for the second modal but works for page. How could I fix this? code in fiddle: link to fiddle...

Twitter Boostrap in Rails


ruby-on-rails,ruby-on-rails-3,ruby-on-rails-4,twitter-bootstrap-3,rubygems
I generated views using this command rails g bootstrap:themed Todo it generated several views for my model. I am using git and reverted the project to its former branch without the boostrap. Now, I am trying to regenerate the views but it always returns this identical app/views/manifests/index.html.erb How do I...

List of conflicts between bootstrap and jquery-ui?


jquery-ui,twitter-bootstrap-3
I can't find such list (bootstrap and jquery-ui conflicts) in the internet. If you have used both together in one project may be you could aware me what kind of conflicts bother you? What I have met: tooltip function h? styles ...

PHP form refreshing [duplicate]


php,mysql,html5,twitter-bootstrap-3
This question already has an answer here: How to fix “Headers already sent” error in PHP 12 answers Ok this is the code! I'm developing on phpstorm the problem is that everytime I hit submit the page refreshes but doesnt redirect or execute the echo with the variables! Can...

Random opening tabs/pills - bootstrap 3


javascript,css,wordpress,twitter-bootstrap-3
i want to open on every new site load another random tab with content. i think i have to do it with some java script but it don´t work. You can look at the page here: LINK Thanks for helping....

Enabling code completion for bootstrap.js in PhpStorm


twitter-bootstrap,twitter-bootstrap-3,phpstorm
For some reason I get no code completion for the bootstrap.js. I added the non minified version from https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.js as well as adding the library manually in the javascript library settings. Same thing happened for me with knockout until I found out I have to use the knockout-debug version since...

Prevent bootstrap 3 tab from stacking when window is resized (made smaller)


html5,css3,twitter-bootstrap-3
I have two tabs and I do not want them to stack when the window is resized. How do I do so? As shown below this is the code I've used to create my tabs. I don't understand why they would stack up when my window is resized. HTML Tab...