I am trying to add
<div class="menu-toggle">
<label for="checkbox" id="checkboxLabel">Menu</label></div>
<input type="checkbox" id="checkbox">
to a wordpress menu. I am using the the custom menu widget, but have no idea how to add this piece of code above
<div class="menu-main-menu-container">
The reason why I would like to do this is because I have some css which allows me to toggle the menu on and off on smaller screen sizes. When I add the code above in the correct place using google chrome inspector it works perfectly, I am now stuck trying to implement this 'live'. I know it will be editing one of the wordpress .php files, but that is not my strong point. Any help would be appreciated.
Depends on your theme but there might be a chance it's located inside header.php. Go to Appearance > Editor and select header.php. Do a search for the menu.
Make sure you have closing div tags like this.
<div class="menu-toggle">
<label for="checkbox" id="checkboxLabel">Menu</label></div>
<input type="checkbox" id="checkbox">
<div class="menu-main-menu-container">
...
</div>
</div>
Related
I am fairly new to programming websites so this might be a stupid question, but I can't seem to change the color of a checkbox I have where user should accept privacy policy. The code is placed in a .PHP file.
Code
Here is what I have now:
<label class="custom-control custom-checkbox mb-0">
<input type="checkbox" class="custom-control-input" id="privacypolicy" value="1" tabindex="20" onchange="jQuery('#privacypolicy').prop('disabled', false);" data-fieldblock="block<?php echo $i; ?>">
<div class="custom-control-label mr-2"> <?php echo __("Accept","premiumpress") ?> <?php echo __("<b>Privacy policy</b>","pp") ?> </div>
</label>
What I tried
I have been Googling for ages now and all I find is people saying to add CSS. But where would I do this? I can't just add it in html/php file, when I tried it of course didn't recognize it as code. I don't want to change some style CSS since I only want to change background color on this specific place. I can't seem to add an attribute to my like background-color="000000" either.
What I want
Just change background color of checkbox on this specific place. I don't know if the code provided is enough, please let me know in comments if you need any more details.
Though it is easier than it was in the past, adding custom styling to the browsers default input fields is not as easy as it might sound. In other words, changing the color of a checkbox seems like it should be super simple but in reality you have to use quite a bit of CSS styling. Here is a nice article that provides some examples of how to do it:
https://css-tricks.com/custom-styling-form-inputs-with-modern-css-feature
As #jaspal mentioned in his comment, you need to add css to the html output. Once you do, you can use the css styling rules in the article to target specific inputs and style them. If you are just trying to style checkboxes and not the other input types, this is a good primer: https://www.w3schools.com/howto/howto_css_custom_checkbox.asp
Try the accent-color property instead of background-color
Full description here
I have a class called event-manager in a wordpress php file in the plugins folder. They are using this class to style the elements, and I am using a custom css to over-write this. The problem is I cannot overwrite their css so I had to remove this class all-together.
I need to remove this class dynamically, removing manually every-time is pointless, because every-time the plugin gets updated the class comes back.
And here the html structure. The class appears on two different pages and on both pages the image alignment is different.
<!-- Home page -->
<div class="some-class">
<div class="some-more-class">
<div class="featured-image"> <!-- this image alignment is different -->
<div class="event-image"> <!-- this div is generated dynamically from the plugin -->
some link
</div>
</div>
</div>
</div>
<!-- Blog single -->
<div class="some-class">
<div class="some-more-class">
<div class="featured-img"> <!-- and image alignment is different -->
<div class="event-image"> <!-- this div is generated dynamically from the plugin -->
some link
</div>
</div>
</div>
</div>
To acheive this I used jquery .removeClass method.
$(function(){
$(".featured-img > div, .featured-image > div").removeClass("event-manager");
});
I also tried this
$(function(){
$(".featured-img > div").removeClass("event-image");
$(".featured-image > div").removeClass("event-image");
});
And this
var featuredimg = ['.featured-img > div','.featured-image > div'];
$(featuredimg.join()).removeClass('event-image');
On all these methods, the class seems to be removed, because its on two different pages, when I load the homepage.php for the first time, the class is removed but when I go to single.php, it did not remove automatically and when I refresh the page, the class removes. I am not sure why.
Can anyone help me.
Thanks.
In my opinions it is related with caching. Do you have any? If yes disable it to test if works without it. If no you can check on developer console if do you have any errors. Issue can be also with place the script like this (prefer at the end of the page).
I would like to customize the HTML output of a Wordpress Contact Form 7 (WPCF7) shortcode itself, i.e. the [file] shortcode. I do not want to modify the surrounding HTML.
So far I've modified the HTML output by changing the contents of the file /contact-from-7/modules/file.php.
My changes will be lost when I update the plugin. So I'd like to implement a more permanent and robust solution, like adding a filter in my functions.php.
What I would like to do (pseudo code - untested code):
add_filter('wpcf7_file_shortcode_handler', 'my_file_sc_handler');
function my_file_sc_handler($html) {
$html = sprintf('<div>my own html</div>');
return $html;
}
I only not need to change the $html returned - no need to touch the remaining code of the wpcf7_file_shortcode_handler function.
My question: How can I customize the Wordpress Contact Form 7 HTML output of the [file] shortcode so that my changes will not get lost when I update the plugin?
Based on the comments and such, although I do not have a solid answer, I think you may find the answer you're looking for with this link:
http://www.featheredowl.com/contact-form-7-submit-button-element/
This tutorial explains how to manipulate the [submit] shortcode from using <input type="submit"> to a <button> element.
Using this basis, you may be able to customise your [file] output to how you want.
Although this does require editing core files, it also seems to set about handing upgrades of the plugin through functions.
Hope it helps somewhat!
Firstly it is a very bad idea to change the core files of any plugin.
If it is simply the HTML output that you want to change, why don't you change it in the provided editor, see below example:
<div class="row">
<div class="col-md-6">
<p>Name<br />
[text your-name] </p>
</div>
<div class="col-md-6">
<p>Email*<br />
[email* your-email] </p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>Enquiry<br />
[textarea your-message] </p>
<p>[submit "Send"]</p>
</div>
</div>
You can pretty much change everything!
you cannot insert a contact form shortcode into your template file directly. You will need to pass the code into do_shortcode() function and display its output like this
<?php echo do_shortcode( '[contact-form-7 id="7" title="Contact"]' ); ?>
I know you can add style formats to wordpress through the functions.php file which is great for buttons e.g:
<button class="button">Click Me!</button>
But does anyone know a solution if you wanted to add entire sections of code from a dropdown or a similar method other than defining it in a template page? So, for example, you could add html code below by selecting from a dropdown or clicking a button from the WYSIWYG TinyMCE editor:
<div class="col-md-4 text-center logo">
<a class="navbar-brand" href="google.com">
<img class="responsive" src="#" />
</a>
</div>
So there are multiple tags and classes.
Thanks,
Rick
There is a Wordpress Plugin called Content Blocks that lets you do this sort of thing.
I am new to CakePHP and I want to know a way to use Boostrap from Twitter in layouts combined with cake.
My main concern is to make the Form Helper continues to function normally, because I think that it uses pre-configured CSS classes, and if I change the default css, I imagine that the Form Helper will stop to work as it should.
I read this tutorial but it doesn't seems to be complete.
Build a PHP application using CakePHP and (twitter) Bootstrap, Part 1
Has anyone done this?
Thank you! :D
CSS is purely presentational; how can it affect the form helper from working as it should?
Some of the CSS validation classes might need reworking as well as what Cake returns when an error is encountered.
You can easily modify the output using the error option:
$this->Form->input('Model.field', array('error' => array('wrap' => 'span',
'class' => 'boostrap-error')));
http://book.cakephp.org/view/1401/options-error
This seems to be what you are looking for.
https://github.com/loadsys/twitter-bootstrap-helper/branches
I'm doing the same thing for an app, and I've found the CSS classes for form elements match up pretty well actually.
Twitter's Bootstrap form elements look like this:
<div class="clearfix">
<label for="xlInput">X-Large input</label>
<div class="input">
<input class="xlarge" id="xlInput" name="xlInput" size="30" type="text" />
</div>
</div>
And CakePHP's FormHelper generates elements like this:
<div class="input text">
<label for="UserName">Name</label>
<input name="data[User][name]" type="text" value="" id="UserName" />
</div>
The main difference being the label outside the div in Bootstrap. FormHelper lets you set custom classes like array('class' => 'clearfix').
The .input class in Bootstrap is defined in forms.less and only sets margin-left: 150px; to move the inputs over to the right. If you don't use this style you can just add margin-right: 20px; to <label> instead.
The code in my form element ends up being:
echo $this->Form->input('first_name', array('div' => 'clearfix'));
...and generates elements that are styled properly by Bootstrap.
<div class="clearfix required">
<label for="PersonFirstName">First Name</label>
<input name="data[Person][first_name]" maxlength="50" type="text" id="PersonFirstName"/>
</div>
I'm still learning both frameworks so there may be problems with this. Hope it helps though.
All current answers require changes to the view files.
The following plugin will "Bootstrap-ify" your current views without any code/markup changes:
https://github.com/slywalker/TwitterBootstrap
All you need to do is alias the FormHelper and HtmlHelper so that all your existing calls to $this->Form & $this->Html will be handled by the plugin instead.
Can't get easier than that :)