Adding CSS to module_invoke() D7 - drupal

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');

Related

Wordpress Some Content in header file not outputting

I'm developping a Wordpress website, and I need to display conditionnal content in header file, just after opening body tag.
If I call exit(); just after my condition, the code is outputted correctly, so I know condition is working and I'm in the right file. Then I remove the call to exit(); and code is not outputted.
Theme is Divi / Divi-Child, I removed all plugins to be sure (renamed the plugins folder to _plugins), no cache in effect.
I looked at both functions.php and child/functions.php, I don't see any 'after content' functions that would clean/remove the code, although I suspect this is what's happening.
Even the HTML comments are striped ()
</head>
<body <?php body_class(); ?>>
<!-- Advertising -->
<?php
$bool = is_sidebar_active('wallpaper-advertising');
//var_dump($bool);
if($bool){
//exit();
?>
<script>
jQuery(document).ready(function($){
if(jQuery('#ad_habillage').length>0){
jQuery('#adbg, .wallpaper_spacer').show(0);
}else{
jQuery('body').addClass('deactivate_wallpaper');
}
});
</script>
<div id="adbg">
<?php dynamic_sidebar('wallpaper-advertising'); ?>
</div>
<div class="wallpaper_spacer" style="">
<img src="<?= THEME_PATH ?>/media/img/994x112Transparent.gif" border="0" alt="Cliquez ici" title="Cliquez ici">
</div>
<div class="big_wallpaper_wrap_bg">
<div class="big_wallpaper_wrap">
<?php } ?>
<!-- End Advertising -->
Any help is welcome.
I found out using QueryMonitor, it shows templates in use, and header.php was replaced by another file in the theme folder. I moved my code there and it's all fine.

Adjust the positioning of one element without affecting the others' in css

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.

Custom Navigation and Header Area in Genesis Framework

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>';
}

wordpress custom page template based on a specific <div>

I want to know how to set up a custom page template. My website is based on many different widths. example for some pages I use a div called <div class="content-wrap ninecol clearfix"> but for another page I use <div class="text-centered twelvecol clearfix">.
I need to create a template so that I can easy create new pages based on those templates.
Below is my static html code that Ive done in dreamweaver.
<div class="content-wrap ninecol clearfix"> <!--I want to make a template based on this div so I can just add new text in the future-->
<div class="content">
<h1 class="title">Om oss</h1>
<hr>
<div class="entry-content">
<h4>Vilka är Unified Sweden?</h4>
<p>Vi värnar starkt om vår unika företagskultur och ser den som vårt kraftfullaste
konkurrensmedel. Inom företaget har vi alltid arbetat hårt för att skapa den
stabila grund som vår företagskultur är byggd på. </p>
<p>All personal på Unified Sweden har många års erfarenhet av webbutveckling,
programmering, design och kundservice vilket gör oss unika då alla led inom kundbemötandet
vet exakt vad ni som företag behöver hjälp med.</p>
</div>
</div>
</div>
and this is what I came up with.
<?php
/*
Template Name: Test
*/
?>
<?php get_header(temp); ?>
<?php
// get_template_part( 'loop', 'index' );
?>
<div class="breadcrumbs">
<?php if(function_exists('bcn_display'))
{
bcn_display();
}?>
</div>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; endif; ?>
</div><!-- content-wrap -->
</div><!-- #content -->
</div>
</div><!-- .main -->
<?php get_footer(); ?>
Thank you for any kind of help or support.
Are you saying that for each template you want a different style? If yes you need to give different name at div id and then you should edit your style.css
#namediv{ }
to setup custom page template (if i understand your question correctly)
you create your page template in the theme directory which is active
and use the header the way you did
<?php
/*
Template Name: Test
*/
?>
you replace Test by whatever you want to use for the name (this name can have space)
then in the admin, you can select the template to use for the page by going to Admin > Page Attributes > Templates
Your new custom template should appear here
edit (following op comment)
then you could check which template is being use with
is_page_template()
http://codex.wordpress.org/Function_Reference/is_page_template
from within the header.php that would then load a specific css file
side note: you might also want to check the codex page: http://codex.wordpress.org/Pages#Creating_Your_Own_Page_Templates as well as the dedicated wordpress stackexchange https://wordpress.stackexchange.com/
Template Name : Your page name
*/
you replace Test by whatever you want to use for the name (this name can have space) then in the admin, you can select the template to use for the page by going to Admin > Page Attributes > Templates Your new custom template should appear here

Drupal search block customizing

I have my block template block.tpl.php
<div class="block">
<?php print $content ?>
</div>
And I want to change block wrapper for search form
<div class="block search">
<?php print $content ?>
</div>
I'm trying to use block-search.tpl.php but it doesn't work
There is a feature in Drupal - you can override specific template(block-search.tpl.php) in theme when you override general template(block.tpl.php).
Other thing is that probably your cache is not cleared - try
And here you have some nice description how to check other things that could failed.

Resources