I am trying to modify the Drupal menu:page.tpl.php
<?php if ($main_menu): ?>
<div id="navigation-wrapper">
<div id="navigation">
<nav id="main-menu" role="navigation" tabindex="-1">
<?php
// This code snippet is hard to modify. We recommend turning off the
// "Main menu" on your sub-theme's settings form, deleting this PHP
// code block, and, instead, using the "Menu block" module.
// #see https://drupal.org/project/menu_block
print theme('links__system_main_menu', array(
'links' => $main_menu,
'attributes' => array(
'class' => array('links', 'inline', 'clearfix'),
),
'heading' => array(
'text' => t('Main menu'),
'level' => 'h2',
'class' => array('element-invisible'),
),
)); ?>
</nav>
<?php print render($page['navigation']); ?>
</div>
</div>
<?php endif; ?>
And the css is:
#navigation-wrapper{
overflow:hidden;
width:100%
background:#ff6005;
}
#navigation{
width:950px;
margin:0 auto;
background:#ff6005;
}
#navigation ul li
{
display:inline;
padding:5px 10px 6px 10px;
}
But my output produces the background color only for the div navigation ! I was expecting a background color covering full width . Whats wrong with my CSS >
#navigation-wrapper{
overflow:hidden;
width:100%;
background:#ff6005;
You missed a ; after width.
Related
I want to add a picture above the footer as seen picture below, or you can visit the website: http://creativelab.twofour54.com/en/
Example of the photo from TwoFour54
The website I'm testing it on is wordpress. I tried playing with the footer.php however it works nicely but when I stretch the site (zoom out or in) It gets ruined. I tried to make it static with position tag from CSS but that didnt work.
<div class="cfa" style="margin-left: 200px; width: 100%; z-index: 10;">
<div class="container">
<div class="col-sm-12">
<img src="http://localhost:8080/TESTWORDPRESS/wp-content/uploads/2017/01/Sketch-Book-icon.png">
</div>
</div>
</div>
<?php
/*
Template for Footer
*/
?>
<footer id="footer">
<div class="row clearfix">
<?php
if ( ! dynamic_sidebar ( 'footer_widgets' ) ){
thdglkr_emptysidebar('Footer');
}
?>
</div><!-- row -->
<?php if (_option('footer_menu','1')=='1'){ ?>
<div class="footer-last row mtf clearfix">
<span class="copyright"><?php echo _option('footer_text'); ?></span>
<?php
wp_nav_menu(
array(
'theme_location' => 'secondary',
'menu' => 'Footer Menu',
'container' => 'div',
'container_class' => '' ,
'menu_class' => 'foot-menu',
)
);
}else{?>
<div class="footer-last row mtf clearfix center">
<span class="copyright center"><?php echo _option('footer_text'); ?></span>
<?php } ?>
</div><!-- end last footer -->
</footer><!-- end footer -->
</div><!-- end layout -->
</div><!-- end frame -->
<?php if (_option('footer_gototop')==1): ?>
<div id="toTop"><i class="icon-angle-up"></i></div><!-- Back to top -->
<?php endif; ?>
<?php wp_footer(); ?>
</body>
</html>
note: code above is Footer.php from my test local host
Does anyone have any ideas?
Put your .cfa inside your footer in your html. And in your css:
.cfa {
position: absolute;
top: 0;
left: 200px;
margin-top: -100px; //change this to the height of your image
}
EDIT: Actually it's better if you can remove it from your HTML and just add it via css using a :before pseudo-element if you're using it just for design purposes.
I'm making a purchase order system that exports the PO to PDF, but I need in the upper part to display data from buyer and also from seller.
I would like to have 2 DetailViews side by side, each one with a 50% of page width.
It is possible? So far I've not found any info regarding this and my CSS skills are low.
Thanks for any info.
You can unse bootstrap grid
In view you can palce the detailView in two separated bootstrap column
<div class="col-sm-6 col-md-6 col-lg-6" >
<?= DetailView::widget([
'model' => $modelBuyer,
......
?>
</div>
<div class="col-sm-6 col-md-6 col-lg-6" >
<?= DetailView::widget([
'model' => $modelSeller,
......
?>
</div>
in controller simply pass the two models in render
return $this->render('your_view', [
'modelBuyer' => $modelBuyer,
'modelSeller' => $modelSeller,
]);
I am using the kartik mpdf wrapper of mpdf. I noticed the kv-mpdf-bootstrap.min.css did not define "col-sm-6" as 50% the way it is in bootstrap.css. Since the documentation suggests that the mpdf css overides bootstrap I found the class "col-xs-5" which specifies 41.6666% which was suitable for my output requirements and allowed me to display two detailviews next to each other.
<form class="form-inline">
<div class="form-group">
<div class="col-xs-5">
<p><b>Bill To</b></p>
<div style="border: 1px solid grey; padding-left: 10px; padding-right: 10px; padding-top: 5px; padding-bottom: 5px; width:200px">
<?= DetailView::widget([
'model' => $model,
'bootstrap' => false,
//'condensed'=>true,
//'striped' => false,
//'bordered' => true,
'labelColOptions' => ['hidden' => true],
'attributes' => [
'company',
'billStreetAddress',
[
'attribute' => 'billStreetAddress2',
'visible' => (!empty($model->billStreetAddress2)),
],
'billCity',
'billPostalcode'
]
])
?>
</div>
</div>
<div class="col-xs-5" >
<p><b>Ship To</b></p>
<div style="border: 1px solid grey; padding-left: 10px; padding-right: 10px; padding-top: 5px; padding-bottom: 5px; width:200px">
<?= DetailView::widget([
'model' => $model,
'bootstrap' => false,
'labelColOptions' => ['hidden' => true],
'attributes' => [
'company',
'shipStreetAddress',
[
'attribute' => 'shipStreetAddress2',
'visible' => (!empty($model->billStreetAddress2)),
],
'shipCity',
'shipPostalcode'
]
])
?>
</div>
</div>
</div>
My element has no height, but it's filled with images now the Anchor around the images is not clickable unless i give .portfolio a fixed height.
Any suggestions on how to fix this?
THE HTML :
<h1 class="text-center">
Een greep uit ons portfolio
</h1>
<span class="main-underline"></span>
<div class="portfolio">
<?php
$args = array( 'post_type' => 'portfolio', 'posts_per_page' => 4 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
?>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="portfolio-img">
<a href="<?php echo esc_url( get_permalink() ); ?>">
<?php the_post_thumbnail('portfolio',array('class' => 'img-responsive')); ?>
</a>
</div>
</div>
<?php endwhile; ?>
</div>
THE CSS:
/*PORTFOLIO*/
#main2 {
}
.portfolio {
}
.portfolio .portfolio-img img{
width:100%;
}
.portfolio .col-md-3 {
margin:0;
padding:0;
}
The result:
Thanks in advance
Set display of a to inline-block.
I am using Bootstrap with the Yii framework - and am trying to centre my login box in the middle of the page, but not having any joy.
My code looks like as follows:
How should I amend this to have the div display bang on in the centre?
A jsfiddle -:
http://jsfiddle.net/7946rak9/1/
<div class="row">
<?php $form = $this->beginWidget('CActiveForm', array(
'id' => get_class($model),
'enableAjaxValidation' => true,
'clientOptions' => array(
'validateOnSubmit' => true,
'validateOnChange' => false,
),
'htmlOptions' => array('class'=>'form-vertical'),
'action' => array('/frontend/user/login')
)); ?>
<div class="span2">
<?php echo $form->labelEx($model,'username'); ?>
</div>
<div class="span10">
<?php echo $form->textField($model,'username', array('class' => '')); ?>
<?php echo $form->error($model, 'username', array('class'=>'errorMessage')); ?>
</div>
</div>
<div class="row">
<div class="span2">
<?php echo $form->labelEx($model,'password'); ?>
</div>
<div class="span10">
<?php echo $form->passwordField($model,'password', array('class' => '')); ?>
<?php echo $form->error($model, 'password', array('class'=>'errorMessage')); ?>
</div>
</div>
<div class="row">
<div class="offset2 span10">
<?php echo $form->checkBox($model,'rememberMe', array('class' => 'pull-left')); ?>
<?php echo $form->labelEx($model,'rememberMe', array('style' => 'padding-left: 20px;')); ?>
<?php echo $form->error($model, 'rememberMe', array('class'=>'errorMessage')); ?>
</div>
</div>
<div class="row">
<div class="offset2 span3">
<?php echo Html::submitButton('Login', array('class' => 'btn')); ?>
</div>
</div>
<?php $this->endWidget();?>
have you tried adding another class "text-center" to the row div?
EDITED:
If you want to use Bootstrap 2's included markup, use the following to offset your div to the middle of the row.
<div class="row-fluid">
<div class="span4">...</div>
<div class="span4 offset3">...</div>
</div>
http://getbootstrap.com/2.3.2/scaffolding.html#fluidGridSystem
Alternative
Or you could wrap all your divs with another div and then use the following markup.
<div class="wrapper">
....all you content divs here
</div>
.wrapper {
margin: 0 auto;
width: 50%;
}
http://jsfiddle.net/7946rak9/2/
Simply use:
margin: 0 auto;
On the div you would like to center
You can simply use text-align: center; on the div you want to centre
<div id="mydiv"></div>
#mydiv {
text-align: center;
}
Should do the trick. Simple Demo
Try defining classes span2 and span 10 with text-align: center; in your CSS if you're using a pre 2.3.0 version of Bootstrap - the .text-center method, suggested by #Wu4D wasn't added until v2.3.
I believe I've correctly sourced an image in html for a (super-basic) wordpress theme I am developing; however it still does not display.
This dialogue:
Img Src on local computer
shows the process so far (whereby I've been reassured the html is correct.)
body of index.php:
<?php
$main_menu_column_top = array(
'theme_location' => 'main-nav-column-top',
'container' => 'nav',
'container_class' => 'alignleft widecol',
'container_id' => 'column-main-nav',
'depth' => 1
);
?>
<div class="leftcolumn">
<div class="logo">
<a href="http://www.petermaurin.com">
<img src="images/pmsplogo.jpg" alt="Peter Maurin Screenprinters"/></a>
</div><!--logo-->
<div>
<ul>
<h1><?php wp_nav_menu ( $main_menu_column_top ); ?></h1>
</ul>
</div>
</div>
<div class="maincontent">
<?php
if (have_posts()) :
while (have_posts()) :
the_post();
the_title();
the_content();
endwhile;
endif;
?>
</div><!-- maincontent -->
functions.php:
<?php
register_nav_menus(
array(
'main-nav-column-top' => 'Main Nav, Top of Header',
'sub-nav-column-bottom' => 'Sub Nav, Bottom of Header',
'footer-nav' => 'Footer Menu'
)
);
css:
* {
margin: 0;
padding: 0;
}
p {
font-family: Times New Roman;
}
body {
font-size: 100%;
font-family: sans-serif;
background: url(images/tshirttexture.jpg) left repeat-y #0099ff;
}
.leftcolumn{
width:365px;
float:left;
}
.maincontent{
background-color:green;
margin-left: 375px;
max-width: 600px;
}
... if anyone can take a look and let me know why my image ('pmsplogo.jpg' on line 26 of index.php) is not displaying, I'd be very grateful!
In the img element the src attribute should look like this
<?php bloginfo( 'template_url' );?>/images/pmsplogo.jpg
So basically the full image url will be:
<img src="<?php bloginfo( 'template_url' );?>/images/pmsplogo.jpg" alt="Peter Maurin Screenprinters"/>
<img src="<?php echo 'dirname(__FILE__)'.'/images/pmsplogo.jpg'?>" />
Dont write with "http://www.yoursitename.com/" in PHP, they can't find source with it.