What is the best practice to make different layouts for pages in Yii2?
The problem I am facing is that Yii2 layout/main.php code looks like
<div class="container">
<?= $content ?>
</div>
Yii2 uses Bootstrap and I need to make full width image only in site/index.php.
Basically in the index.php I need to wrap
<?= $this->render('_search') ?>
into .container-fluid class.
How can I replace .container class to .container-fluid class only for index.php page?
Make a new layout, e.g. layout-fluid.php, and in controller do
public function actionIndex()
{
$this->layout = 'layout-fluid';
return $this->render('index');
}
If fluid container is the only change you need, you can do this instead: in index view file add
$this->params['fluid'] = true;
And in layout file change the desired container to
<div class="container<?= $this->params['fluid'] ? '-fluid' : '' ?>">
params array is a good place to propagate information within view.
If you need just change wrapper class only for site/index, in main.php you can do it like this:
<div class="container<?=($this->context->id=='site' && $this->context->action->id=='index')?'-fluid':'';?>">
<?= $content ?>
</div>
Related
I'm developing wordpress theme using Understrap, with using customstrap child theme of livecanvas. It uses Bootstrap 4.
I developed my theme, but there is unnecessary border when I clicked the content area on theme. I checked the code on browser using inspects but i could not find the code that caused this problem.
here is understrap repo: https://github.com/understrap/understrap
and my page.php
<?php
/**
* The template for displaying all pages
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages
* and that other 'pages' on your WordPress site will use a
* different template.
*
* #package understrap
*/
// Exit if accessed directly.
defined( 'ABSPATH' ) || exit;
get_header();
$container = get_theme_mod( 'understrap_container_type' );
?>
<div class="wrapper" id="page-wrapper">
<div class="<?php echo esc_attr( $container ); ?>" id="content" tabindex="-1">
<div class="row">
<!-- Do the left sidebar check -->
<?php get_template_part( 'global-templates/left-sidebar-check' ); ?>
<main class="site-main" id="main">
<?php
while ( have_posts() ) {
the_post();
get_template_part( 'loop-templates/content', 'page' );
}
?>
</main><!-- #main -->
<!-- Do the right sidebar check -->
<?php get_template_part( 'global-templates/right-sidebar-check' ); ?>
</div><!-- .row -->
</div><!-- #content -->
</div><!-- #page-wrapper -->
<?php
get_footer();
Which selector that I need to use to prevent this problem?
Here is the image of this be like:
1- 1st image is Default
2- 2nd image When I clicked the content area
When I clicked the content area
I'm pretty sure this is outline property in CSS.
As we cannot see your code right now, for debugging I would suggest to try pasting this in your styles to check if that helps:
* {
border: none !important;
box-shadow: none !important;
outline: none !important;
}
Look at the following code there tabindex is used for keyboard accessibility. :focus is triggered Where tabindex is used.
<div class="<?php echo esc_attr( $container ); ?>" id="content" tabindex="-1">
The div mentioned above has an id content so if you'd like to remove outline only from there use the following CSS code.
#content { outline: none !important; }.
Don't use asterisk with :focus like *:focus to solve this then that might also remove outline from some other styles.
When I add the code below to custom css in wordpress:
*:focus{outline: none !important;}
It works.
But I don't understand that why it does not work when I add it into style.css
I wanted to add a little Menu Hover Animation to my Wordpress Menu:
https://www.littlesnippets.net/blog/some-css-menu-inspiration-using-animated-lines
Somehow my Wordpress Theme (Avada) writes inline html styles to the tags:
<ul id="menu-menu" class="fusion-menu">
<li ><a href="#Home" data-hover="Home" **style="overflow: hidden; height: 100px;**"><span class="menu-
text">Home</span></a></li>
<li ><a href="#Events" data-hover="Events" **style="overflow: hidden; height: 100px;**"><span
class="menu-text">Events</span></a></li>
</ul>
...
I added this Code to my functions.php:
add_filter( 'the_content', 'the_content_filter', 20 );
function the_content_filter( $content ) {
$content = preg_replace('#<a.*?>(.*?)</a>#i', '<a>\1</a>', $content);
return $content;
}
But this removes too much style elements on my page. How can I adjust the function, that only the inline style tags in the class .fusion-menu get deleted?
Thanks for your help!
$('ul#menu-menu li').attr('style', function(i, style)
{
return style && style.replace(/display[^;]+;?/g, '');
});
Please check with above code , It will remove with jQuery
I've tried already with jQuery but this won't work because I think the function must point exactly on the tag.
The inline style comes from the fusion builder template but I don't know exactly in wich php file this function lies.
My favourite Method would be when someone could complete my function with the preg_replace with the target of all elements in selector class .fusion-menu
Thanks...
<?php $form = ActiveForm::begin(); ?>
<?= $form->field($model, 'title')->textInput(['maxlength' => true]) ?>
<?php ActiveForm::end(); ?>
How can I get the input text box without bootstrap 3 wrapper codes ?
I am using a custom HTML wrapper and how can I implement my own template for the text box ?
thanks
Depends whether you want to change div's class or input itself.
<?= $form->field($model, 'title', ['options' => ['class' => 'custom_class_div']])->textInput(['class' => 'custom_class_input']) ?>
I have given two options with overwriting classes from bootstrap.
custom_class_div will replace boostrap for div (input's parent). custom_class_input will replace boostrap for input. Basically, it removes form_group in both cases but in first option it will remove that part where input field takes entire "line" in parent div and in second option this will modify input itself (will still be just 1 input on the "line" but no border shadows, smaller input field, etc.).
If you don't have any classes but just want to use style in div/input element, you can replace class with style, for example:
<?= $form->field($model, 'title')->textInput(['style' => 'width: 150px']) ?>
How can I remove a blank image container if the image's source is unavailable please? I would only like the image to appear if its source is available. Otherwise, I don't want anything to appear, including the blank container.
HTML image syntax:
<img src="url" alt="some_text">
You are able to do this using JavaScript and the error event on the img tag.
For example:
<img src="url" alt="some_text" id="myimage">
<script>
var imgElement = document.getElementById('myimage');
imgElement.addEventListener('error', function()
{
this.parentNode.removeChild(this);
}, true);
</script>
(Oops, sorry #JosephSilber, modified my example to be a bit different ;-))
Your best bet would be using server-side processing if you know that your image isn't going to be available. If you're intentionally leaving the src blank, for example, you can do something like this in PHP:
<?php
$src = ''; // or something else
if (!empty($src)) { ?>
<img src="<?=$src?>" alt="some_text" />
<?php } ?>
Loop through your images, and bind onerror:
imgNode.onerror = function () {
this.parentNode.removeChild(this);
};
i want to remove the link from my header using CSS so that only the text "my inner yoga" shows, but it is not a hyperlink. i tried to do
#post-28 .site-title.a {display:none;}
but it didnt work. i know it has to do with the site-title because i don't know how to say in CSS that i want to only have the "a" tag not working, but only in the site-title div.
also, is it possible to remove the "learn more" text from the right side of my header? i don't know PHP so that part is confusing to me. i dont know if its possible to do with css.
the link is: http://myinneryoga.com/strange-exotic-fruit-supplement/
Can't be done with CSS, but you can just display the site title itself using
<?php echo $bloginfo('name'); ?>
If you only want it removed on one page, use a conditional IF statement to query the page ID or slug and set a version without the site URL attached and an ELSE to set a version with the URL.
To remove the learn more text, add this code to the end of your functions.php file:
function improved_trim_excerpt($text) { // Fakes an excerpt if needed
global $post;
if ( '' == $text ) {
$text = get_the_content('');
$text = apply_filters('the_content', $text);
$text = str_replace(']]>', ']]>', $text);
$text = strip_tags($text, '<p>');
$excerpt_length = 100;
$words = explode(' ', $text, $excerpt_length + 1);
if (count($words)> $excerpt_length) {
array_pop($words);
array_push($words, '');
$text = implode(' ', $words);
}
}
return $text;
}
remove_filter('get_the_excerpt', 'wp_trim_excerpt');
add_filter('get_the_excerpt', 'improved_trim_excerpt');
If I'm correct the theme developer added a custom excerpt ending. Either that or it's just a hardcoded link, in which case go into the header file and use the find function of whatever editor you are using and search for the "learn more" text, then just remove it and the tag around it.
Not sure how you're generating "Learn Now", but if it's just a link you should be able to do something like the following (let's say the post ID is 17).
<?php if (!is_single(17)) { ?>
Learn More
<?php } ?>
Like Corey said above, use <?php echo $bloginfo('name'); ?> to show the name. Remove any <a> tag that might be surrounding it.
Try this..
Modify style.css line 482
#site-title a {
color: #FFFFFF;
cursor: default;
pointer-events: none;
}