I need to apply css3 properties to kartik time picker widget tried with
<div style=" position: none;">
<?php echo $form->field($model, 'checkin_time')->widget(TimePicker::classname(), [] )->label(false); ?>?>
</div>
But not able to get it, is there any way so to apply css3 properties?
I think you should use containerOptions is the array that set the HTML attributes for the main widget container
<?php echo $form->field($model, 'checkin_time')->widget(TimePicker::classname(),
['containerOptions' => ['style' => 'position:none;']] )->label(false); ?>
Related
I'm having a hard time trying to solve this problem. I don't want WP controlling the size of my images, so I stopped it from generating image sizes setting all values in Settings>>Media to 0. Also, my functions.php doesn't have any add_image_size(). This should be enough but WP is still getting width and height from somewhere.
My code:
<div class="post-image-div"><?php the_post_thumbnail('thumbnail', array('class' => 'img-post')); ?></div>
CSS:
.post-image-div {
width: 100%
}
.img-post {
max-width: 100%;
heigth: auto;
}
The output:
<img src="" class="img-post" alt="" width="128" height="86">
What is preventing my code from working is the "width" and "height" WP is adding in <img>. I don't know from where WP is generating these values.
If you want the original image as output then use
// Full resolution (original size uploaded)
<?php the_post_thumbnail( 'full', array('class' => 'img-post')); ?>
Instead of
the_post_thumbnail('thumbnail', array('class' => 'img-post'));
I hope this will solve your issue.
try this:
the_post_thumbnail('full', array('class' => 'img-post'));
<div class="row">
<div class="large-12 columns">
<div class="row collapse featured-option">
<input id="featured" name="featured" type="checkbox" style="display: none;" <?php echo esc_attr( $featured_disabled ); ?>>
<span class="custom checkbox <?php echo esc_attr( $featured_disabled ); ?>"></span> <?php echo sprintf( __( 'Feature Proposal %s', APP_TD ), sprintf( _n( '(1 credit)', '(%d credits)', hrb_required_credits_to('feature_proposal'), APP_TD ), hrb_required_credits_to('feature_proposal') ) ); ?>
</div>
</div>
</div>
I'm trying to edit this wordpress theme code to use it for my own website.
But I don't know why style="display: none;" is needed here.
When I erase this style element, I get checkbox on the screen
but the functions are not working as it should be.
What's wrong with this? Why need "display: none"?
Please help
In this instance it is simply just hiding the checkbox. When
style = "display:none;"
is used, the page will be displayed as if the item does not exist. Meaning the layout of the page will not show a "hole" or something where that item is missing. In other words, the layout will not be affected by this.
The other way to hide something would be with,
style = "visibility:hidden;"
However, the page layout will be affected and the hidden item will still take up the same space.
Depending on what was trying to be accomplished, the checkbox could be hidden for different reasons. It's possible that the programmer of this code wanted to hide this checkbox by default and then show it later on after certain events occurred. Additionally, there are times when it is best to show and hide objects as you need them or don't need them rather than constantly recreating or deleting them.
I have just begun exploring CSS and am looking forward to gain an in-depth understanding of the language.
One of the issues I'm facing with a project is the alignment of the products in mobile view.
Website - http://klcl.com.my/product-listing/
In the mobile view, the products are touching the right side of the screen. I want them to be centered. I tried adding a 'margin-right: 15px' and it works; however, that new line of code affects the social media icon in the footer as well. I'm guessing because both the product list and the icon are using the '.col-md-4' class tag.
Here is the code:
<div class="col-md-9 product-listing-main">
<div class="row">
<?php
$args = array(
'posts_per_page' => -1,
'post_type' => 'product'
);
$query = new WP_Query($args);
while ($query->have_posts()) :
$query->the_post();
?>
<div class="col-md-4">
<figure>
<img src="<?php echo wp_get_attachment_url(get_post_thumbnail_id($post->ID));?>" />
<figcation><?php the_title(); ?></figcation>
</figure>
</div>
<?php
endwhile;
wp_reset_postdata();
?>
</div>
</div>
How can I align the products to the middle without affecting any other elements on the website? Any help will be greatly appreciated.
After a short look at your code i see that you are often manipulating the paddings of bootstrap elements (container, col-* …) and that leads to confusion. Try to avoid this and everything runs fine.
add this to your css to reset the previous settings:
.on-social{margin-right:initial !important;}
or
.on-social{margin-right:0px !important;}
please consider margin: 0 auto; for centering the elements.
How will I add a custom CSS to module_invoke() function in Drupal 7? I have superfish menu and I can get this to place to a right regions in my page that's why I'm planning to invoke it in my page and set a right css for this,
here's my code
<nav id="customMenu" class="collapse navbar-collapse">
<div id="navigation"><div class="section">
<?php
$block = module_invoke('superfish', 'block_view', '2');
print render($block['content']);
?>
</div></div>
</nav>
Any Idea?
There are 2 ways:
By using '#attaching' property of element:
$block['content']['#attached']['css'][] = drupal_get_path('module', 'my_module_name') . '/css/my_module_name.css';
By using drupal_add_css():
drupal_add_css(drupal_get_path('module', 'my_module_name') . '/css/my_module_name.css');
I'm trying to customize the navigation and header region of my Genesis 2 theme. Here is the code I'm using:
/* Reposition the primary navigation menu
remove_action( 'genesis_after_header', 'genesis_do_nav' );
function new_header(){ ?>
<div id="title-area">
<div id="new-title">
<h1>new Title</h1>
</div>
<div id="new-nav">
<nav class="nav-primary" role="navigation" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement"><div class="wrap">
<?php
add_action( 'genesis_do_nav' );
?></div>
</nav>
</div>
<div id="new-search">
<p>Search Box will need to go in here</p>
</div>
</div>
<?php
}
add_action( 'genesis_before_header', 'new_header' );
The title is printing out fine, and the paragraph where I will want to add my search box is printing fine too. HOwever, for some reason I am not getting any output for my menu.
What am I missing? THere is nothing being printed at all when I inspect the element.
Thanks in advance.
Couldn't you alter the CSS of each of these elements the default way Genesis provides it? The only thing I see that is different from the default way is that you want a search box underneath the navigation.
If that's the case, then just add the function for the search box and position it after the nav. For example check below
add_action('genesis_after_header', 'move_my_nav');
function move_my_nav() {
echo '<div id="new-search">';
echo '<p>Search Box will need to go in here</p>';
echo '</div>';
}