I'm building a custom wordpress theme and I was watching my buddy write up code for a page using bootstrap. He made it so that it is centered on his monitor. I believe he is using a 4:3 monitor. When I look at the page on my 24inch widescreen the page is not centered. What am I doing wrong that is making the page not responsive to any screen size? This is my code for the page:
<?php get_header(); ?>
<div class="row">
<div class="span1"></div>
<div class="span8" id="container">
<?php the_post(); ?>
<?php the_content(); ?>
</div>
<div class="span2">
<?php get_sidebar();?>
</div>
<div class="span1"></div>
</div>
<?php get_footer(); ?>
and here is the code for the header:
<meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>;charset=<?php bloginfo('charset'); ?>" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
<center>
<div class="row">
<div class="span3"></div>
<div class="span6">
<div class="logo">
<h1 id="logo-mathew">Mathew J. Mari</h1>
<h3 id="logo-attorney">Attorney At Law</h3>
</div>
</div>
<div class="span3"></div>
</div>
</center>
I am new to using bootstrap so maybe I'm using the wrong syntax for it to be responsive or I've left something out? I just want it to be responsive on all monitors, having it centered and utilizing a 1-8-2-1 column layout. Any help would be greatly appreciated.
It does seem like you are using an older version of Bootstrap. The Newer version mnakes it much easier to center your elements.
Your code with the elements being used inside a container class. One of bootstrap's 3 easier method of centering a div.
And with the new bootstrap, the use of class names like col-md-1 , col-md-8 etc will be used. Make sure you read up on Bootstraps' grid system. Makes life much easier for responsive designs
<div class="container">
<div class="row">
<div class="col-md-1"></div>
</div>
<div class="container">
<div class="col-md-8">
<?php the_post(); ?>
<?php the_content(); ?>
</div>
<div class="col-md-2">
<?php get_sidebar();?>
</div>
<div class="col-md-1"></div>
</div>
container tag is missing must be used over the row and all other tags
Use .container for a responsive fixed width container.
...
Use .container-fluid for a full width container, spanning the entire width of your viewport.
...
Firstly you are using the old version of Bootstrap i.e 2.3 and bootstrap has already released the new version 3.0 so please upgrade it.
Now in the version you are using, there is another css that you need to give reference and that is for the responsive. and also add the .container-fluid for your main container.
Add Class .col-centered to your page wrapper div
.col-centered{
margin:0 auto;
float : none;
display:block;
}
it centered your page in any size monitor
Related
I am a newbie with in-depth work that includes Wordpress & Custom Type Post types. I have my Image correctly placed into wordpress and have successfully implemented the photo onto the "About Page". It works fine as far as desktop mode, but when I go responsive and bring it to tablet/mobile the picture states stationary and does not act responsive when translated to a Tablet/Mobile interface. I have been fiddling around with margins, applying my style syntax into different media queries but seem to get no result once bringing the responsive page down to Tablet or Mobile. Here are is my HTML Code & CSS Code that I have at this moment.
HTML
<?php
/*
Template Name: About
*/
?>
<?php get_header(); ?>
<div class="about" style="">
<h1>Why?</h1>
</div>
<div class="about">
Many may ask the question "Why". Questions such as; "Why is this website relevant?", "Why do I need to know this?" or "Why does this topic even matter?"
Many of those questions can be anwsered in different ways, with different attitudes and opinions, yet the only importance this website offers is Knowledge.
The access of clear and ordered catagories of famous people from the actors all the way up to our goverment officials whom represent us, the United States citizens, the opportunity for individuals that may have this disability to understand that it does not make you less from anyone else, and that it simply gives you the power to express who you are and reach milestones in your lifetime that many "ordinary" people don't.
</div>
<div class="about" style="">
<h1>General Statistics</h1>
</div>
<div class="about">
<img src="<?php the_field('data_graphic');?>"/>
</div>
<main role="main" class="col-md-3">
<!-- section -->
<section>
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
<!-- article -->
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php the_content(); ?>
<br class="clear">
</article>
<!-- /article -->
<?php endwhile; ?>
<?php else: ?>
<!-- article -->
<article>
<h2><?php _e( 'Sorry, nothing to display.', 'html5blank' ); ?></h2>
</article>
<!-- /article -->
<?php endif; ?>
</section>
<!-- /section -->
</main>
<?php //get_sidebar(); ?>
<?php get_footer(); ?>
**CSS**
.about img {
max-width: 100%%;
vertical-align: bottom;
margin-left: 150px;
}
If anyone could help me on figuring this responsive problem out, it would be greatly appreciated.
I do like this:
.about img{
max-width:100% !important;
height:auto;
display:block;
}
Note: This is for responsive images, i remove the position rules, because you can adjust yourself
You image needs to fill 100% of its container.
.about img {
width: 100%;
vertical-align: bottom;
margin-left: 150px;
}
I have a few nested divs on a website I am creating with the Joomla engine. The problem lies mainly in the fact that the plugins themselves nest 2 divs inside my already created div "banner", meaning I do not have access to these two divs. Within them is the small, rectangular image. This image should help you see my issue (I'd post an embedded image but you know, apparently I need 10 rep):
http://www.nerfarena.net/SiteImage.PNG
I don't want the banner ad butted against the search bar. But the three nested divs will not increase in height no matter what CSS properties I modify. Even #banner won't budge. They all seem to size themselves to the minimum needed (bottom of the search bar + banner ad's height). I'm looking for a way around this so any suggestions would be really appreciated.
Here is the chunk of the php file where the divs I am concerned about are:
`
<!-- Logo -->
<div id="logo">
<?php if ($logo && $logoimage == 1): ?>
<img src="<?php echo htmlspecialchars($logo); ?>" alt="<?php echo $sitename; ?>" />
<?php endif; ?>
<?php if (!$logo || $logoimage == 0): ?>
<?php if ($sitetitle): ?>
<?php echo htmlspecialchars($sitetitle); ?><br/>
<?php endif; ?>
<?php if ($sitedescription): ?>
<div class="sitedescription"><?php echo htmlspecialchars($sitedescription); ?></div>
<?php endif; ?>
<?php endif; ?>
</div>
<!-- Search -->
<div id="search">
<jdoc:include type="modules" name="position-0" />
</div>
<!-- Banner -->
<div id="banner" style= "text-align: right;">
<jdoc:include type="modules" name="banner-position" />
</div>
</div>
`
Try using sibling selectors for CSS. Sometimes it helps me fix the alignments of divs.
apologies if this has been covered anywhere here. I tried searching, but only found topics related to styling and positioning captions within the carousel code…
So, I have a layout that contains three columns:
The left column contains general information related to each page/project.
The center column contains a Bootstrap 3 carousel with images.
The right column is where I was planning on displaying all the captions related to the images in the center Carousel.
I can't quite figure out how to get the captions working in the right column. To clarify, the captions will change with each carousel slide, just as they do in the default carousel setting. I basically want to move the captions off the image, and into the right column.
I am using Kirby (www.getkirby.com) as my CMS and I am using a foreach loop to get the code for the images, etc. in the carousel. Here is my current code, including the caption section (which I am trying to move…)
<div id="center" class="col-xs-12 col-sm-6 col-md-8">
<?php $imagepage = $page->children()->first() ?>
<?php if($imagepage->hasImages()): ?>
<div id="merry-go-round" class="carousel slide">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php $n=0; foreach($imagepage->images() as $image): $n++; ?>
<div class="item<?php if($n==1) echo ' active' ?>">
<img style="display:block; margin-left: auto; margin-right: auto;" src="<?php echo $image->url() ?>" alt="<?php echo html($image->title()) ?>" class="img-responsive">
<div class="carousel-caption"><?php echo $image->img_title() ?></div>
</div>
<?php endforeach ?>
<?php endif ?>
</div><!-- /carousel-inner -->
<!-- Controls -->
<a class="left carousel-control" href="#merry-go-round" data-slide="prev"></a>
<a class="right carousel-control" href="#merry-go-round" data-slide="next"></a>
</div><!-- /merry-go-round -->
</div><!-- /#center -->
<div id="right" class="col-xs-12 col-sm-3 col-md-2">
<p>THIS IS WHERE I AM TRYING TO PUT THE CAROUSEL CAPTIONS…</p>
</div><!-- /#right -->
I've tried by best but I am all out of ideas. I thought maybe I could do something like make the caption a variable:
<?php $test_caption = $image->img_title() ?><?php echo $test_caption ?>
but this doesn't work outside the carousel area. I'm guessing it's that it won't work outside of the foreach loop?
Anyway, if anyone has any suggestions I would really appreciate it. I'm learning PHP as I go along, but I don't know any javascript so I'm hoping there's a solution outside that. And again, I'm using Bootstrap 3.
Here is a link to a fiddle I made (without all the php stuff…):
http://jsfiddle.net/4tMfJ/2/
Based on Twitter Bootstrap Carousel - access current index
You can add the code below to your javascript (after loading jquery / bootstrap)
$(function() {
$('.carousel').carousel();
var caption = $('div.item:nth-child(1) .carousel-caption');
$('#right h1').html(caption.html());
caption.css('display','none');
$(".carousel").on('slide.bs.carousel', function(evt) {
var caption = $('div.item:nth-child(' + ($(evt.relatedTarget).index()+1) + ') .carousel-caption');
$('#right h1').html(caption.html());
caption.css('display','none');
});
});
also see: http://jsfiddle.net/4tMfJ/3/
Thanks Bass for your answer it worked for me !
But i did not want to have replicated content so i did it my way ;)
$("#slider").on('slide.bs.carousel', function(evt) {
var step = $(evt.relatedTarget).index();
$('#slider_captions .carousel-caption:not(#caption-'+step+')').fadeOut('fast', function() {
$('#caption-'+step).fadeIn();
});
});
http://jsfiddle.net/4fBVV/3/
I am using Bootstrap but under the roots.io wordpress template using a 'wrapperless theme'
i am trying to achieve this http://roots.io/ - where there are sections of colour but the page content itself isn't full width.
the answer I have been given is to make the container class 100% - but this just makes all the content full width.
Im really stuck and ive been trying to figure this out for hours. - I know that sounds noobish and it is, but I can't get past this point.
all the page templates take their its style from base.php, code here
<?php get_template_part('templates/head'); ?>
<body <?php body_class(); ?>>
<!--[if lt IE 8]><div class="alert alert-warning"><?php _e('You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.', 'roots'); ?></div><![endif]-->
<?php
do_action('get_header');
// Use Bootstrap's navbar if enabled in config.php
if (current_theme_supports('bootstrap-top-navbar')) {
get_template_part('templates/header-top-navbar');
} else {
get_template_part('templates/header');
}
?>
<div class="wrap container" role="document">
<div class="content row">
<div class="main <?php echo roots_main_class(); ?>" role="main">
<?php include roots_template_path(); ?>
</div><!-- /.main -->
<?php if (roots_display_sidebar()) : ?>
<aside class="sidebar <?php echo roots_sidebar_class(); ?>" role="complementary">
<?php include roots_sidebar_path(); ?>
</aside><!-- /.sidebar -->
<?php endif; ?>
</div><!-- /.content -->
</div><!-- /.wrap -->
<?php get_template_part('templates/footer'); ?>
</body>
</html>
so Im just not sure how to get past it in any of the page templates
About the first part of your question: "100% width colored parts".
Cause Bootstrap use the box-sizing: border-box model every html-element gets 100% width of its parent by default. So wrap your .container div's in other element (div, header, etc). This wrapper is a direct child of the body and gets 100% width. See: http://bootply.com/87196
<header role="banner" class="banner">
<div class="container" style="background-color:red;">
Header example
</div>
</header>
<div style="background-color:blue;">Elements get 100% width by default</div>
The second part about your page templates. The code you show use the get_template_part(). This function is a core function of WordPress. See http://codex.wordpress.org/Function_Reference/get_template_part#Using_loop.php_in_child_themes. You will find where your templates should be located.
But i think read http://roots.io/roots-101/#theme-templates first.
Thank you, I had a few solutions offered to me yesterday also, in case anyone else looks at this.
my own was simply to remove the .container class from the base.php file. - this just stopped the content of every page being constrained in a container by default. - this way I was able to add sections to the page at full browser width, and add .container inside them to constrain the actual content.
lines 16 and 17 of original base.php
<div class="wrap <?php if ( ! is_front_page() ): ?>container<?php endif; ?>" role="document">
<div class="content <?php if ( ! is_front_page() ): ?>row<?php endif; ?>">
In app.less
.home .main {
padding: 0;
}
Then add your sections like so:
<section class="semantic-section-class">
<div class="container">
<!-- your content -->
</div>
</section>
This is my current set up.
I have created a new custom theme with the following regions.
regions[header] = Header
regions[content] = Content
regions[footer] = Footer
page.tpl.php
<div id="Header">
<div class="row">
<div class="span12" style="text-align:center;padding-top:20px;">
<div><img src="logo.png" width="150" height="150" alt="KT Logo"></div>
</div>
</div>
<div class="row"> </div>
</div><!-- /Header -->
<div id="Navigation">
<div class="row" style="text-align:center;">
<div class="span12" style="text-align:center;">
<?php print render($page['header']); ?>
<hr class="style-two">
</div>
</div>
</div><!-- /Navigation -->
<div id="Content">
<div class="row"> </div>
<div class="row">
<div class="span8 offset1">
<h1><?php print $title; ?></h1>
</div>
</div>
<div class="row"> </div>
<div class="row">
<div class="span10 offset1">
<?php print render($page['content']) ?>
</div>
</div>
<div class="row"> </div>
</div><!-- /Content -->
<footer>
<div class="row">
<div class="span12">
<img src="separator.png" alt="separator">
<?php print render($page['footer']); ?>
</div>
</div>
<div class="row"> </div>
</footer>
</div><!-- /container -->
This all works well and I have created several basic pages fine. The problem comes when I want to have a custom "content type" with 2 blocks on a page, one with main content on left, one with a sidebar on right. Now I'm not completely understanding how the regions work.
I am wanting something like the sidebar_second effect but I'm not sure how it would set in with my widths. Here is a screenshot of my regions. http://goo.gl/XFVnl
So I think I need to change the way my content region is displayed so that it can include the sidebar region?
Thanks for any help
Content-type specific templates are usually node.tpl.php files, and page templates are page.tpl.php files.
page.tpl.php file is already included when you are using a node.tpl.php
First, add ALL the regions to the .info file of them theme. This directly affects which regions are available in blocks administration page.
It's not necessary to have all the regions you defined (in .info file) to present in all page.tpl.php files.
As you have 3 regions in the page.tpl.php file, leave it and it will continue to work.
But to override the page.tpl.php for specific node types, you will have to set them in the theme's template.php file. You simple "ask" Drupal to use this page.tpl.php file is node type is a "page" (for example).
Add this to your template.php file. Drupal will not look in to page--node-book.tpl.php file for an alternative page.tpl.php file if the node type is (machine name) is "book".
<?php
function themename_preprocess_page(&$variables) {
if (!empty($variables['node'])) {
$variables['theme_hook_suggestions'][] = 'page__node_' . $variables['node']->type;
}
}
?>
Now you can copy the page.tpl.php file to page--node-[type].tpl.php and make your changes there. Whatever you put in this file will be used for page template for that node type.
(Note: 2 hyphens between "page" and "node", and one between "node" and "[type]")
Remember to clear caches if you can't see the changes.
I believe the first step is to declare a sidebar region in your .module file along with your other regions even if it will not be displayed on every page.
In your page template you can check (psuedo-code)
if (isset($page['sidebar'])) {
<div sidebar float left theme this how you want>
print render($page['sidebar']);
</div>
}
Now when you create a block you can specify a specific path for it to show up on or a specific content type for it to show up on. The code above will check if the page has a block in your sidebar and render it accordingly.
You will probablly be more likely to get answers if you post on drupal stack exchange.
https://drupal.stackexchange.com/