I am trying to figure out how I can stretch my slider image to the full-page width, but have it also be responsive. I am running on Wordpress and I'm not opposed to using Javascript if necessary. Here is the site: http://cmattayers.com/b2bu/
This is my original mockup, if that helps: http://i.imgur.com/jCWPIsp.jpg
Pull the slider div at the end but inside just before last </div> of <div class="navbar-header"> it may be found in your header.php if you use a shortcode like [yourslidershortcode] in your page content you have to modify it before post into direct theme header.php put <?php echo do_shortcode( '[yourslidershortcode]' ); ?>
I found the in the site you mentioned
<div class="navbar-header">
</div><!-- end of #logo -->
<?php echo do_shortcode( '[yourslidershortcode]' ); ?>
</div>
If the slider show only on home page use below code instead of above
<div class="navbar-header">
</div><!-- end of #logo -->
<?php
if ( is_home() ) {
echo do_shortcode( '[yourslidershortcode]' );
}
?>
</div>
Related
I'm currently developing a theme for my blog, I have a question about the integration of Carousel Slider in Wordpress.
The slider works pretty well, showing the latest 5 posts with a featured image and a caption with the title of the post. However i've had to set a fixed height to the img, cause different size of images would change constantly the height of the carousel, so the result was not pretty good.
The problem is that on mobile the img stretch a lot, so i would like to set the post thumbnail as a background of the carousel, so i can set bg-size, bg-position etc. in order to achieve a perfectly responsive image.
Do you know if there is a way to reach that? Or maybe it is possible with my actual code without setting the thumbnail as a bg?
Thank you all in advance.
<div class="carousel-inner">
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<?php $active_class = ( 0 === $the_query->current_post ) ? ' active': ''; ?>
<div class="carousel-item <?php echo esc_attr( $active_class ); ?>">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
<?php the_post_thumbnail('full') ?>
</a>
<div class="carousel-caption d-md-block">
<h2><?php the_title();?></h2>
</div>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
</div>
You can register a new image for your carousel using add_image_size( 'home-carousel', <width here>, <height here>, false );.
Then, you can call the_post_thumbnail('full') like this- the_post_thumbnail('home-carousel'). If you have already uploaded the images, you need to regenerate the thumbnails using this plugin.
If you still want to go with the background image option - you can get the URL of the featured image by this function - get_the_post_thumbnail_url and set it as background for the .carousel-item div.
This is my actual code using the thumbnail as a background-image.. but, like i said, the permalink doesn't work. Is there a way to have it work also with the thumbnail as a background? If I'm not clear, i want that when the user clicks on the image, it redirect to the single page post.
<div class="carousel-item <?php echo esc_attr( $active_class ); ?>" style="background:url('<?php the_post_thumbnail_url('full');?>') center center no-repeat; background-size: cover; min-height: 75vh;">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
</a>
<div class="carousel-caption d-md-block">
<h2><?php the_title();?></h2>
</div>
</div>
I am having problems figuring out how to display my wordpress page title above all the main content, including the sidebar. In other words, straight after the header. It is fine with a full width page but on a page with a left aligned sidebar the page title sits to the right of the sidebar content and over the main content section rather than at the very top of the page, directly above the left-aligned sidebar content. Am using JointsWP theme and having looked into loop-page.php it seems as though the page title is being called above the entry-content:
<article id="post-<?php the_ID(); ?>" <?php post_class(''); ?> role="article" itemscope itemtype="http://schema.org/WebPage">
<header class="article-header">
<h1 class="page-title"><?php the_title(); ?></h1>
</header> <!-- end article header -->
<section class="entry-content" itemprop="articleBody">
<?php the_content(); ?>
</section> <!-- end article section -->
<footer class="article-footer">
<?php wp_link_pages(); ?>
</footer> <!-- end article footer -->
<?php comments_template(); ?>
</article>
If I remove the article header section from loop-page.php and insert it directly into page.php after the closing of the get_header(); tag then I get the desired result, but I don't think this is the correct way to handle it. Sorry if this is a really basic question but I have searched online and haven't been able to find an answer.
Where each item appears on the page is a product of both your theme and the CSS applied to the page. The code you've pasted above doesn't include the code that is used to generate the sidebar. Usually the sidebar is called by the file 'header.php'. For example, here is the code from the common theme "twenty fifteen" that generates the sidebar (right at the end of the header.php file):
</header><!-- .site-header -->
<?php get_sidebar(); ?> </div><!-- .sidebar -->
You could solve this purely with CSS, but I would recommend adding the title before the header - this will make it a little easier. In the example above, try editing header.php as follows:
</header><!-- .site-header -->
<div id="the_title">
<h1 class="page-title">
<?php the_title(); ?>
</h1>
</div>
<?php get_sidebar(); ?> </div><!-- .sidebar -->
Depending on the formatting you're using, it might be helpful to place the title inside a div that shares the main page content class, as below.
</header><!-- .site-header -->
<div id="content" class="site-content">
<div id="the_title">
<h1 class="page-title"><?php the_title(); ?></h1>
</div>
</div>
<?php get_sidebar(); ?> </div><!-- .sidebar -->
Then add CSS formatting to id="the_title" to ensure it displays as you want it to. For the CSS edits, you're probably going to want to add something like the below to your style.css file:
#the_title {
width:100%;
margins: 40px;
}
When you open www.nomadicmatt.com on mobile devices the first image you see is his big bold background image. I am trying to replicate the same thing on my site www.rosstheexplorer.com. The header image looks too small on mobile devices hence why I am exploring having a background image.
To achieve this I was told the following
You must change your markup. Change your
<img class="custom-header">
to
<div class="custom-header">
and set container background property:
.custom-header {
background: url(path_to_image) no-repeat;
background-size: cover;
}
I was also told, you can set style on div like this
<div style="background: url(<?php header_image(); ?>); background-size: cover;">
I tried inserting the following code into additional CSS
<div style="background: url(<?php header_image(); ?>); background-size: cover;"> </div> And
.custom-header { background: url("rosstheexplorer.com/cover-photo-1/") no-repeat; background-size: cover; }
I got the error message
Markup is not allowed in CSS.
I tried each line individually and there was an issue with both lines
Where do you alter the markup? Or is there another solution?
I have now been told I may have to make the changes in the index.php file, this is the code for my index.php file
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
/* Include the Post-Format-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Format name) and that will be used instead.
*/
get_template_part( 'content', get_post_format() );
?>
<?php endwhile; ?>
<?php penscratch_paging_nav(); ?>
<?php else : ?>
<?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>
</main><!-- #main -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
If I understand correctly you have tried putting html code in css file. That is you inserted
<div style="background: url(<?php header_image(); ?>); background-size: cover;"> </div>
in your css file. This is not going to work. You need to change the markup in html file that might be generated using php so you actually might need to put this markup in index.php or something.
Your have given padding and margin that is creating issue. Please look into attached image
I am trying to build a website for a friend, I am building it using Drupal 7.
I have a CSS problem that is driving me crazy. The secondary menu, which I float to the right isn't next to my content. Instead it appears to the right below my content.
I feel like I have tried everything. I have the first menu floating left, secondary floating right, and the content on margin auto left and right.
I also tried clear both on the underlying container but it didn't help either.
I am experiencing this error in both Firefox and Chrome.
The only solution i could find online that i haven't tried yet, is to float right before floating left, because I'd have to tinker with Drupal core.
I actually had the problem before, and rebuild the whole damn website, and it happened again while trying to center my components.
I have changed too much since to press 'undo', so it would be awesome if someone with a lot of CSS knowledge could explain me why this occurs.
If you want to see the problem, its on this page www.mohaaleague.com, in the right bottom, but it should be as high as the left menu....
.two-sidebars #content /*the middle element*/
{
width: 827px;
margin-left:auto;
margin-right:auto;
}
#sidebar-second /*the right sidebar*/
{
width: 287px;
float:right;
}
#sidebar-first /*the left sidebar*/
{
float:left;
width: 287px;
}
#main /*the underlying div that holds all the others*/
{
width: 1650px;
margin-left: auto;
margin-right: auto;
position: relative;
clear: both;
}
btw I started from BARTIK theme.
Okay, so I managed to solve it by changing page.tpl.php,a ctually it was something I adressed in my question.
The problem was that float right was being called, before the float left. So I changed the order in which Drupal renders the page. By making Drupal render my second-sidebar first, and then my first-sidebar, and then the content i solved the problem.
I changed page.tpl.php in my themes templates directory like this, if you are reading this and have the same problem change the order of the code to this:
<?php if ($page['sidebar_second']): ?>
<div id="sidebar-second" class="column sidebar"><div class="section">
<?php print render($page['sidebar_second']); ?>
</div></div> <!-- /.section, /#sidebar-second -->
<?php endif; ?>
<?php if ($page['sidebar_first']): ?>
<div id="sidebar-first" class="column sidebar"><div class="section">
<?php print render($page['sidebar_first']); ?>
</div></div> <!-- /.section, /#sidebar-first -->
<?php endif; ?>
<div id="content" class="column"><div class="section">
<?php if ($page['highlighted']): ?><div id="highlighted"><?php print render($page['highlighted']); ?></div><?php endif; ?>
<a id="main-content"></a>
<?php print render($title_prefix); ?>
<?php if ($title): ?>
<h1 class="title" id="page-title">
<?php print $title; ?>
</h1>
<?php endif; ?>
<?php print render($title_suffix); ?>
<?php if ($tabs): ?>
<div class="tabs">
<?php print render($tabs); ?>
</div>
<?php endif; ?>
<?php print render($page['help']); ?>
<?php if ($action_links): ?>
<ul class="action-links">
<?php print render($action_links); ?>
</ul>
<?php endif; ?>
<?php print render($page['content']); ?>
<?php print $feed_icons; ?>
Intro:
I have a page designed simply with html and css, mostly just div's with css to mold the div boxes.
I want to integrate only the blog posts of a wordpress blog site into this page. Everything in the design is to be the same except for one (large) div that contains the "imported" posts. I do not want this div to contain it's own scrollbar, as if it's a window to the wp site. I want the whole site to expand vertically, determined by the height of the wp blog posts, whatever they may be.
I have used the method provided here: http://moshublog.com/2005/07/05/integrate/2/
to incorporate the blog, this has worked.
Problem:
The div containing this the blog posts ("the loop") does not expand vertically. It simply cuts the blog post(s) off as if they are not detected. The height is set to 100% on the div containing it and any div's parent to that one.
Question:
How can the div containing the wp blog posts expand vertically based on the height of those blog posts?
What I've tried:
- - - Overflow:hidden; I have floating elements on the page. I have tried every possibility with overflow:hidden;, which was suggested in any other questions I could find. This did not change anything.
- - - Making body and html height=100%. This did not change anything.
- - - Changing the height of the div containing it and any of the parent div's to a fixed height. This changed the height. If it was larger, then more of the blog posts were seen. The posts are there, just cut off.
Here is the code:
<!-- Main Body Start -->
<div class="clean" style="width:1200px; height:100%; border:0px; margin:0 auto;">
<!-- Body Column One Start -->
<div class="clean" style="width:950px; height:100%; float:left;">
<!-- Blog Integration Start -->
<div class="clean" style="width:946px; height:100%; max-width:946px; border-style:none solid; border-color:#99AAFF;
border-width:0px 2px; float:left; overflow:hidden; background-color:#ffff77;">
<div class="clean" style="width:926px; height:100%; margin:0px 10px;">
<!-- WP Blog code goes in here -->
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php
the_title_attribute(); ?>">
<?php the_title(); ?>
</a>
</h2>
<small>Posted in <?php the_category(', ') ?> on <?php the_time('F jS, Y') ?> by <?php the_author() ?> –
<?php comments_popup_link('Be the first to comment', '1 Comment', '% Comments'); ?>
<?php edit_post_link('Edit', ' | ', ''); ?> </small>
<div class="entry">
<?php the_content('<span class="more">read more »</span>') ?>
</div>
<?php if(is_single()) {?><p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?></p><?php } ?>
</div>
<?php endwhile; ?>
<div class="navigation">
<div class="alignleft">
<?php next_posts_link('« Older Entries') ?>
</div>
<div class="alignright">
<?php previous_posts_link('Newer Entries »') ?></div>
</div>
<?php else : ?>
<?php include (TEMPLATEPATH . "/searchform.php"); ?>
<?php endif; ?>
</div>
</div>
Everything below "wp blog code goes here" to "?php endif; ?" is from the wp blog site, and is "the loop".
Thank you.
Don't set the height of the divs, doing so will limit them to the height you set them, having said that, if you set the height to 100%, the div will fill 100% of the area of its container, not 100% of its contents, so for the outermost div this will be 100% of the window.