Can anyone tell me how to integrate Bootstrap into my Wordpress theme for the navigation menus? I just want a simple explanation that is easy to follow because I am a beginner coder.
There is a great tutorial located here https://a1websitepro.com/boostrap-nav-menu-wordpress/ You can use this in your header.php or wherever you are putting you menu.
<nav class="navbar navbar-default"><div class="container-fluid">
<?php wp_nav_menu( array(
'container' => 'ul',
'menu_class' => 'nav navbar-nav',
'menu_id' => 'bootmenu',
'echo' => true,
'theme_location' => 'main-menu',
) );?>
</div>
</nav>
Related
I'm pretty new to PrestaShop and PHP, I was asked to transform the current accordion checkout steps of PrestaShop 1.7 (classic theme) into a steps progress bar. I've got some good enough notions of CSS and a bit of JavaScript but I'm totally at lost when I look at the PrestaShop files. :(
Here some code (what's in comment is what I tried to add to create the steps progress bar).
The checkout-process.tpl is a mystery:
{foreach from=$steps item="step" key="index"}
{render identifier = $step.identifier
position = ($index + 1)
ui = $step.ui
{* steps = $steps *}
}
{/foreach}
Then I've got the checkout-step.tpl:
{block name='step'}
{* <div id="checkout-steps">
<ul id="checkout-steps__bar">
{foreach from=$steps item="step" key="index"}
<li id="{$step.identifier}" class="step-title h3">{$step.title}</li>
{/foreach}
</ul>
</div> *}
<section id="{$identifier}" class="{[
'checkout-step' => true,
'-current' => $step_is_current,
'-reachable' => $step_is_reachable,
'-complete' => $step_is_complete,
'js-current-step' => $step_is_current
]|classnames}">
<h1 class="step-title h3">
<i class="material-icons rtl-no-flip done"></i>
<span class="step-number">{$position}</span>
{$title}
<span class="step-edit text-muted">
<img src="{$urls.img_url}/icn/edit.png" alt="{l s='Update' d='Shop.Theme.Actions'}" class="icn-16" />
{l s='Edit' d='Shop.Theme.Actions'}</span>
</h1>
<div class="content">
{block name='step_content'}DUMMY STEP CONTENT{/block}
</div>
</section>
{/block}
I managed to got the title by editing CheckoutProcess.php:
public function render(array $extraParams = array())
{
$scope = $this->smarty->createData(
$this->smarty
);
$params = array(
'steps' => array_map(function (CheckoutStepInterface $step) {
return array(
'identifier' => $step->getIdentifier(),
'ui' => new RenderableProxy($step),
// Add title to steps array
'title' => $step->getTitle(),
);
}, $this->getSteps()),
);
$scope->assign(array_merge($extraParams, $params));
$tpl = $this->smarty->createTemplate(
$this->template,
$scope
);
return $tpl->fetch();
}
I don't think I'm doing the right thing but if I almost understood what's happening there, I've got no clue where to begin. -_-"
If anybody got some advices or even better (one can always dream) already attempt this kind of modification, I'll be glad for any information, help, code example!!
Thanks in advance.
It took me a while and it's probably not the best way to go, but I managed the transformation by adding my progress bar then overriding the default behaviour with custom CSS and JavaScript.
It's a lot of code, I'm not sure it's useful I post it there but if anyone want some information or the code, I will share it gladly!
given the following generated html
<a href="#" class="primaryInversed v-btn v-btn--large v-btn--round"
<div class="v-btn__content">STOP!
<i aria-hidden="true" class="v-icon v-icon--right material-icons">pause_circle_outline</i>
</div>
</a>
when I test with the .toEqual Jest matcher
console.log(playLink.text())
expect(playLink.text()).toEqual("STOP!");
test is failing because of the icon
console.log tests/unit/Heading.spec.js:46
STOP!
pause_circle_outline
It foes not fail if I use the .toMatch watcher
expect(playLink.text()).toMatch(/STOP!/);
Is it the normal test to be written or is there anyway to use the .toEqual watcher ?
NOTE : I used 'mount' and not 'shallowMount' as I need to generate html from vuetify components
thanks for feedback
One technique is to wrap the <v-btn>'s text content in a <span>, and use wrapper.find(selector) to select the <span> to get its text:
foo.vue template:
<v-btn>
<span class="text">STOP!</span>
<v-icon>pause_circle_outline</v-icon>
</v-btn>
foo.spec.js
it('contains the expected text', () => {
expect(wrapper.find('.text').text()).toEqual('STOP!');
});
demo
After struggling for a while, I was able to get Vue working with webpacker in my Rails 4.2.5 app. This is my first Vue project and I am still unsure of a lot of things when using it.
I am using Buefy, which are Vue.js components based on Bulma CSS (https://buefy.github.io/#/documentation/tabs). I have some tabs setup inside of a modal and I want each tab to render a form for a different partial, however, I don't know how to set this up as Vue can't run the ruby code. The result of this code is that the tabs work properly, but my Ruby render code is shown as a string and not run.
I could just copy the contents of the partials into the vue.js file, but there is still more ruby I am calling in there. I am sure there is a proper way to do all of this, but I just can't figure it out.
Here is my html/haml file calling the modal
#buefy
= javascript_pack_tag 'buefy_modal'
Here is my buefy_modal.js
import Vue from 'vue'
import App from './B_modal.vue'
import Buefy from 'buefy'
Vue.use(Buefy)
new Vue({
el: '#buefy',
render: h => h(App)
})
and here is the B_modal.vue
<template>
<section>
<button class="button is-primary is-medium"
#click="isCardModalActive = true">
Social Save
</button>
<b-modal :active.sync="isCardModalActive" :width="640" has-modal-card>
<div class="card">
<div class="card-content">
<section>
<b-tabs v-model="activeTab">
<b-tab-item label="Lists">
<%=render partial: 'shared/list_item/list_form', locals: {media: #media} %>
</b-tab-item>
<b-tab-item label="Clubs">
<%=render partial: 'shared/club_item/club_form', locals: {media: #media} %>
</b-tab-item>
<b-tab-item label="Challenges">
<%=render partial: 'shared/challenge_item/challenge_form', locals: {media: #media} %>
</b-tab-item>
</b-tabs>
</section>
</div>
</div>
</b-modal>
</section>
</template>
<script>
export default {
data() {
return {
isCardModalActive: false,
activeTab: 0,
}
}
}
</script>
Maybe try to rename file to something.vue.erb
I am using will_paginate and font-awesome-rails gems in my app.
I want to replace will_paginate 'Previous' and 'Next' labels with this font-awesome symbol.
To replace those will_paginate labels I can write this piece of code (I am using Slim):
= will_paginate #articles, :previous_label => 'my_own_text', :next_label => 'my_own_text'
but I don't know how to insert any font-awesome symbol there.
Any ideas?
will_paginate exposes only few things to be able to customize the look and feel of the pagination, which covers most of the cases, but not all the cases.
Try this:
= will_paginate #articles, :previous_label => '<i class="fa fa-angle-left"></i>', :next_label => '<i class="fa fa-angle-right"></i>'
I haven't tested it. If it doesn't work, then the only way I can think of is to monkey-patch the will_paginate pagination renderer.
I need to remove the save as button from openerp upload field. Can someone please help me.
First go below path.
7.0-web => addons => web => static => src => xml => base.xml
Now find class="oe_form_binary_file_save_data" and comment that whole <a> tag.
<!--a class="oe_form_binary_file_save_data">
<button class="oe_button oe_form_binary_file_save" type="button" title="Save As">
<img t-att-src='_s + "/web/static/src/img/icons/gtk-save.png"'/>
<span>Save As</span>
</button>
</a-->
After refresh browser and it will remove a Save As button.