I've run into a problem with Foundation 5. If I want to use position:fixed on a div that is part of the Foundation Grid, it pops it out of the grid and aligns with the left edge of the row. Is there a work around for this?
<div id="right" class="medium-4 columns show-for-medium-up" >
<dl class="tabs" data-tab>
<dd class="active">Recent</dd>
<dd>Popular</dd>
</dl>
<div class="tabs-content">
<div class="content active" id="recent">
<ul>
<?php
$query= new WP_Query();
$query->query(array('posts_per_page'=>10));
while ($query->have_posts()) : $query->the_post();
?>
<li><?php the_title();?></li>
<?php endwhile; wp_reset_query();?>
</ul>
</div><!-- END .content -->
<div class="content" id="popular">
Popular posts
</div>
</div><!-- END .tabs-content -->
</div><!-- END #right -->
<script>
$(document).scroll(function() {
var y = $(document).scrollTop(), right = $("#right");
if(y >= 160) {
right.css({position: "fixed"});
} else {
right.css({position: "relative"});
}
});
</script>
As far as I understand you want to create a sticky top bar (Fixed Navigation or Contain to Grid), so when user scrolls bottom, the bar will display your recent and popular posts.
See how it should be done by reading the documentation.
Related
I have created a Wordpress theme, where I have created a single.php for my blog posts. I had pagination, and everything was working fine before. Now It all of a sudden the pagination is not displayed on the page. When I 'inspect element' I can see that the code is there, but nothing is displayed. It says that the dimensions of the div is 659.08 x 0. I've searched the internet and It feels like I've tried everything. Do you have any suggestions as to what the problem can be? Here is a snippet of my code. Thanks in advance!
<div class="container-fluid" id="content_container">
<div class="row">
<div class="col-12 col-md-8 col-lg-8">
<div class="inner">
<p>By <?php the_author();?> | <?php the_date(); ?></p>
<?php the_content();
?>
<div class="post-pag-wrap">
<div class="post-pag-container prev">
<?php previous_post_link('
<h6>%link</h6>
', 'previous', false);
?>
</div>
<div class="post-pag-container next">
<?php next_post_link('
<h6>%link</h6>
', 'next', false);
?>
</div>
</div>
</div>
You don't write which element has the dimensions 659.08 x 0, but this sounds very much like all its child elements are floated and the parent therefore doesn't have any height (because it doesn't wrap floated elements by default).
To avoid this, add overflow: hidden or overflow: auto to that (parent) element. This should cause the element to wrap the floated children and make them visible that way.
So I have a blog layout (theme) that displays the articles in 2 columns on a row, each article being a LI inside an UL.
I then have this CSS code that basically adds margin-top: 20px; to each LI starting from the third (so it doesn't add a margin to the first row and leave an empty space between them and the header) and it also adds clear: both; to each 2 LIs (first LI of each row).
.module-row.two-cols ul li:nth-child(n+3) {
margin-top: 20px;
}
.module-row.two-cols ul li:nth-child(2n+1) {
clear: both;
}
The code for this is:
<div class="content-wrap module-row two-cols clearfix">
<ul>
<?php while (have_posts()): the_post(); ?>
<li class="col-sm-6">
<div class="item content-out co-type1">
<?php get_template('article-column');?>
</div>
</li>
<?php endwhile; ?>
</ul>
</div>
My problem starts with the CSS when I try to insert an ad LI after every 4th LI - so it will basically display an ad after every 2 rows/4 columns. Is there a way to change the CSS so I can insert that ad correctly and also keep the current CSS logic (with the top margin and clear)? Also, the ad LI will be with one with the class col-sm-12 (so full width).
So I want this, with CSS if possible
Basically insert via the PHP code another LI with class col-sm-12 after each fourth col-sm-6 LI. Thanks!
I can do this in PHP, change the theme's logic and do the count there, not via CSS, but I want to know if possible to do it via CSS because I would like best to not change the theme, only CSS. "Hacking" it and doing it via PHP instead of CSS will look like this - so this is the logic I want in CSS:
Add a margin-top to all the LIs after the 3rd LI, add a clear: both from each 2 to 2 LIs starting from the first LI and add both margin-top and clear: both to each 5th LI.
Here's a possible solution.
The idea is that with help of modulo operation, you can target the third while loop, 6th, 9th and so far. I am not a php developer so I hope I hope there is no syntax mistake in here if so would appreciate if someone points me to it! :)
EDIT: made a quick fix
EDIT: The HTML structure is not correct, but I do not know what you want to achieve with the li and divs at the end result so I left it the way you wrote it in the question.
<div class="content-wrap module-row two-cols clearfix">
<ul>
<?php $counter = 0 ?>
<?php while (have_posts()): the_post(); ?>
<?php if ($counter % 3 == 0){
<div class="col">
// code for your ad here
</div>
<?php } else {?>
<li class="col-sm-6">
<div class="item content-out co-type1">
<?php get_template( 'row' );?>
</div>
</li>
<?php } ?>
<?php $counter = $counter + 1 ?>
<?php endwhile; ?>
</ul>
</div>
I have a page that consist of a fixed navbar,fixed footer and in between them I have a bootstrap jumbotron.The jumbotron's content has been divided into two columns as shown below(one with id="tasks" & other with id="view").When I resize the browser, as expected ,the two columns gets stacked one above the other.The problem is that since the left column consist of fewer content,after browser resize(and after left column gets stacked on top of the right column),the width of the jumbotron now is equal to the width of the left column.As a result the right column is now not entirely inside the jumbotron
Below is code
<body>
<div id="header">
<?php echo $navbar; ?>
</div>
<div id="jumbotron" class="jumbotron row">
<div class="container-fluid">
<div id="tasks" class="col-md-2">//the left column contains fewer contents
<?php echo $task_set; ?>
</div>
<div id="view" class="col-md-8 col-md-offset-1">//the right-column
<?php echo $view_to_load ?>
</div>
</div>
</div>
<div id="footer" class="row">
<?php echo $footer; ?>
</div>
</body>
Please tell me how can i make the jumbotron's width equal to width of the right column i.e. the column with id=""view
You need to implement different classes for when your viewport is smaller.
So per example <div class="col-md-2 col-sm-12"> if you'd like it full size on a small viewport.
i need to hide "right" column in "md position" on some pages (login, registration,contacts...)
and extend "main" to col-md-12.
my index.php
<div class="container">
<div class="row">
<div id="main" class="col-md-9 col-xs-12">
<jdoc:include type="component" />
</div>
<div id="right" class="col-md-3 col-xs-12">
<?php if($this->countModules('right')) : ?>
<jdoc:include type="modules" name="right" style="none" />
<?php endif; ?>
</div>
</div>
</div>
i think the easiest way is checking the option & view in template and act based on its value , for example :
$app = JFactory::getApplication();
if(in_array($app->input->get('view'), array('login', 'registration') && in_array($app->input->get('option') ,array('com_users')){
echo ' <div id="main" class="col-md-12 col-xs-12">';
}
else {
echo ' <div id="main" class="col-md-9 col-xs-12">';
}
and similar check for right menu
also you can create menu for login & registration & ... and dont add any module in this menu for the position that you want to hide
then you can check in template if there is noting in that position simply make main div full page width
There is also a CSS way. You can print the option and view (or also itemid to base selection on the selected menu item) from $_GET as classes of the <html> or <body> tags and then just hide what you want via CSS (display: none). As for extending the #main div to full width, you can just override the class on the #main when using this approach.
To show you an example, the CSS for hiding #right div and extending #main div could look like this (example for K2 component and posts' detail view, in your case just the html classes (.com_k2 and .view-item) would be different):
html.com_k2.view-item #right { display: none; }
html.com_k2.view-item #main.col-md-9 { width: 100% !important; }
The !important could not be needed, I'm not sure, would have to try it.
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; ?>