Hay all im building a news aggregator with SimplePie, the SP elements are working fine but I would like to have the feeds that it pulls in displayed in columns across the page using HTML5 and CSS3. I have managed to implement it so that the columns are formed and display the feeds, but at the moment the stories are being ordered one on to of the other from left to right with the newest being displayed top left, the second newest bellow the first in column one and so on. What I would like is for the stories to be displayed from left to right across the column so that the newest is at the top of the first column, the second newest at the top of the second column, the third newest in the third column and so on.
The code that Im using at the moment is as follows:
<div id="page-wrap">
<?php if ($feed->error): ?>
<p><?php echo $feed->error; ?></p>
<?php endif; ?>
<?php foreach ($feed->get_items() as $item): ?>
<div class="chunk">
<h4 style="background:url(<?php $feed = $item->get_feed(); echo $feed->get_favicon(); ?>) no-repeat; text-indent: 25px; margin: 0 0 10px;"><?php echo $item->get_title(); ?></h4>
<p class="footnote">Source: <?php $feed = $item->get_feed(); echo $feed->get_title(); ?> | <?php echo $item->get_date('j M Y | g:i a T'); ?></p>
</div>
<?php endforeach; ?>
And this CSS:
#page-wrap {
width: 100%;
margin: 25px auto;
height:400px;
text-align: justify;
-moz-column-count: 3;
-moz-column-gap: 1.5em;
-moz-column-rule: 1px solid #c4c8cc;
-webkit-column-count: 3;
-webkit-column-gap: 1.5em;
-webkit-column-rule: 1px solid #c4c8cc;
}
If anyone could help me out with this that would be great.
You're trying to make CSS3 columns behave like normal divs, this will bloat your css code and make it difficult to maintain. But you want an answer, not a lecture semantics, so the solution is:
h4 {
-moz-column-break-before : always;
-webkit-column-break-before : always;
}
Then you don't need columns. You juste put the links one after the other.
One solution would be to set the width of the elements that contain the elements and have a float: left;. Then you make sure that every three elements (for examples), you go to the next line.
There might be other examples.
Related
Solution: Followed solution provided by accepted answer.
Excerpt of my code provided below as a clearer solution.
<?php
$active_home = "active";
include('header.php');
?>
<div id="content">
<title>Welcome to the home page.</title>
<p>index</p>
</div>
The $active_home must come before the include in order to affect the header file.
<html>
<head>
<link rel="stylesheet" href="MainStyle.css" type="text/css" media="screen"/>
</head>
<div class="topnav" id="mytopnav">
Home
</div>
</html>
Currently I have a main CSS sheet, which specifies all the styles of my navigation bar.
I want to provide an indication as to what page the user is on, and the tutorial I followed makes use of a ".active" class which changes the background and text colour.
The trouble is that their method has the active page specified on the navbar. This doesn't work, as what the navbar considers to be the active page never changes.
What I am attempting to do, is add a small style sheet at the start of each page which sets the current page on the nav bar to active.
I can do this very easily if I use something like
<style>
#homenav{
background-color: #4CAF50;
}
</style>
To each page, in the above example the home page.
However, this means that if I want to update the style for the active page, I need to change each page individually.
What I'd rather do is something like
<style>
#homenav{
(add the .active class)
}
</style>
Which makes life easier, however at the moment I am having issues referencing.
Is it possible in CSS to add a class to a particular ID? Failing that, is there a way to declare a variable in the main css that can be referred to in other style sheets?
Main CSS:
* {
margin: 0;
}
#body{
margin: 0px;
padding: 0px;
font-family: Calibri;
}
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/*Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #4CAF50;
color: white;
}
In your current case scenario, you have dynamic pages where you want to highlight the menu in navbar related to the active page. It can be simply achieved using the below logic.
In case you have fixed number of dynamic pages
Let's take an example that you have the below navigation bar (menu) items.
Home
About
Services
Contact
In every page, you have dynamic content. What you require will be accomplished with PHP and NOT by HTML/CSS.
Have your Navigation Bar file as a separate file. Name it as you want. For example, nav-items.php and include in your PHP pages.
Now in nav-items.php apply the below logic:
<li id="home" class="<?php echo $active_home; ?>">Home</li>
<li id="about" class="<?php echo $active_about; ?>">About</li>
<li id="services" class="<?php echo $active_services; ?>">Services</li>
<li id="contact" class="<?php echo $active_contact; ?>">Contact</li>
In case you have dynamic pages in terms of count as well and you are not sure about the pages names, use the below code instead.
<?php
$dynamic_page_name = "Page Name" //This is can be fetched from database
?>
<li id="<?php echo $dynamic_page_name; ?>" class="<?php echo ${"active_" . $dynamic_page_name}; ?>"><?php echo $dynamic_page_name; ?></li> //Since it is an example of dynamic page names, so I am only giving one List Item example.
Now in every PHP page, add the below code.
For example, About will have the below code:
<?php
$active_about = "active";
?>
In case you have dynamic pages in terms of count as well and you are not sure about the pages names, use the below code instead.
<?php
$dynamic_page_name = "Page Name" //This is can be fetched from database
${"active_" . $dynamic_page_name} = "active";
?>
This will add active class to each page with their specific PHP variables defined for this purpose only. So once the nav-items.php will be loaded in each page, only the relevant page will have active class added to it.
I have two post's next to each other on one of my pages. I have them take up the full width of the page. Although I got this to work, on the right the thumbnail has a small gap under it. This only happens on safari not on chrome. I have researched and found this gap could happen if you don't have you img tags on the same line. However, I am not using ing tags, I'm calling elements from wordpress. Does anyone have any other solutions on how to fix this? Can it be done through css? Thanks in advance.
safari, see how the bottom of the pictures don't line up
chrome, how I want it to look - bottom of pictures line up
fiddle with img tags instead of php - https://jsfiddle.net/v90pug4o/
although this is not completely similar to my problem I thought I would provide it in img tags since my code is in php. There is still a gap in the fiddle (its on the right side) its very noticeable when you compare it to this fiddle - https://jsfiddle.net/5bp0a3rf/ - where I put the img tags on the same line. However unfortunately I am not able to do this with my code since it's php. So thats why I was wondering if there are any other options?
<div class="food-featured-posts">
<div class="food-featured-posts-first">
<?php query_posts( 'p=185'); while (have_posts()): the_post(); ?>
<?php the_post_thumbnail(); ?>
</div>
<?php endwhile; ?>
<div class="food-featured-posts-second">
<?php query_posts( 'p=173'); while (have_posts()): the_post(); ?>
<?php the_post_thumbnail(); ?>
</div>
<?php endwhile; ?>
</div>
css
.food-featured-posts-first img {
width: 100%;
height:100%;
}
.food-featured-posts-second img {
width: 100%;
height:100%;
}
.food-featured-posts-first {
width: 50%;
}
.food-featured-posts-second {
width: 50%;
}
.food-featured-posts {
display: flex;
margin-bottom: 200px;
}
Am developing a WordPress site using the underscores theme and I just added a widget with contact info to my site with the following code:
<div class="topheader">
<div class="info">
<?php if( is_active_sidebar( 'info' ) ) : ?>
<?php dynamic_sidebar( 'info' ); ?>
<?php endif; ?>
</div>
</div>
CSS:
.topheader {
background-color:#e6e6e6;
}
.info {
max-width: 1280px;
}
The info is the first thing that I on the page. But I see that there is a space at the top and at the bottom where my slider is located.
How can I eliminate the existing margin that I see before and after the heading?
Cause at the moment I gap, then the widget, and after the widget there is another gap and only then the slider.
I am tried to setting the header margin to 0px, but it didn't really work.
Here a screenshot
How can I eliminate the existing margin that I see before and after the heading?
By heading do you mean an H3 tag by any chance? These are default in sidebars. You should just set margin-top:0 on the H3 tags in your sidebars, to get rid of any margin pushing your sidebar down.
To counter act this, I would then add some margin-bottom to the widget block to space them out a bit.
I think that's what you mean.. but it's hard to understand without any visual representation of what your problem is.
You have to set the start values in css like this:
body, html {
margin: 0;
padding: 0;
}
Otherwise please copy the whole Code of the page here. Open it in your browser, open the site Code and copy all.
Just inspect the element and test whats causing the margin. You can try this code. This might help. But not sure because your question is not clear enough to know your code.
*{
margin: 0;
padding: 0;
}
.top-header, .info {
margin: 0;
padding: 0;
}
I have two half width divs that have the same class but are assigned posts through WordPress. Currently I have them lined up with full width posts above and below, but, I need to apply 5px of padding to both but not on the edges, i.e. left post has right padding, right post has left padding and I can't think for the life of me how to do this. I tried using different post formats and checking which format the post was and applying padding based on that but it didn't work as intended. For some reason, it pushed the divs to the center and had padding in the wrong places. Firstly here's my PHP structure with the if/else:
<?php if (has_post_format('status')) : ?>
<div class = "twocolumnpost left">
<div <?php post_class() ?>>
<?php if (has_post_thumbnail()) : ?>
<div class = "post-thumb">
<?php the_post_thumbnail(); ?>
<div class = "caption">
<h4><?php the_title(); ?></h4>
<p><?php echo get_the_date(); ?></p>
</div>
</div>
<?php endif; ?>
</div>
</div>
<?php elseif (has_post_format('gallery')) : ?>
<div class = "twocolumnpost right">
<div <?php post_class() ?>>
<?php if (has_post_thumbnail()) : ?>
<div class = "post-thumb">
<?php the_post_thumbnail(); ?>
<div class = "caption">
<h4><?php the_title(); ?></h4>
<p><?php echo get_the_date(); ?></p>
</div>
</div>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
As you can see it has padding on both the left and right sides (it should line up with the post above) and not enough in the middle. The CSS I used for this is:
.twocolumnpost .post {
float: left;
display: block;
width: 50%;
padding: 10px 0px;
}
.twocolumnpost.left {
padding-right: 0px;
}
.twocolumnpost.right {
padding-left: 0px;
}
.twocolumnpost img, .twocolumnpost iframe {
max-width: 440px;
max-height: 294px;
width: 100%;
padding: 0;
}
Now what I'd like it to be like is this:
BUT with 10px of padding in the center of the two posts but NOT the sides i.e. 5px right on the left post, 5px left on the right post. The only difference with the second image is that the max-width of the pictures are set to 450px instead of 400px and obviously have no left or right padding.
No matter what I try it doesn't line up properly, and I'm at a loss. Any help would be greatly appreciated. Ideally this could be done without the need for two different post types so it applies correctly to any twocolumnpost but the structure as is works too. Thanks!
Live sit is here: http://suburbia.comoj.com/wordpress/
There are several ways of resolving this issue, but it depends on what kind of users (and browsers) do you want to support. If you don't mind using modern standards (therefore leaving some users on legacy browsers behind), you can use the the calc property:
.twocolumnpost {
width: calc(50% - 10px);
padding: 10px 0px;
}
.twocolumnpost.left {
float: left;
}
.twocolumnpost.right {
float: right;
}
p/s: You don't need to declare the display: block property when you set floats — that's the default behavior for floats anyway.
Even better, you can take advantage of CSS flexbox, but you need to set the parent of .twocolumnpost to have flex display. Let's say the parent has the class name of .twocolumnpost-parent:
.twocolumnpost-parent {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.twocolumnpost .post {
width: calc(50% - 10px);
}
You can see the proof-of-concept fiddle here: http://jsfiddle.net/teddyrised/DMy7r/
Update: On a related note, I have written a jQuery script to do the exact same, but with gallery images. Perhaps you can adapt it to your needs: Responsive Photosets. Not exactly relevant, but addresses the same issue that you are currently facing.
It could be just a white space issue.
You can either so something like have an html comment between your divs killing the whitespace or you can float the divs over. You might have to rework the containing elements to make sure the floats don't do crazy things. But floating the left and right columns (twocolumnpost) should have them flush against each other (unless there is padding/margin on them).
In short I think the gap is being created by the whitespace between the divs with the twocolumnpost class. If you float this two next to eachtoher or remove the whitespace you should be able to have them flush against each other.
I have a simple blog on wordpress http://heather.stevenspiel.com/ and I'm trying to make the header title to be a link to the homepage. I went into header.php and rewrote the script for that part, but still can't get a link to work.
This is what I re-wrote:
<h1>
My Spiel
<br/>
</h1>
I know that the href is being registered because of the css color change.
This is what the previous code was:
<h1>
<?php
if ($balloons_option['balloons_site-title_line1'] == '' && $balloons_option['balloons_site-title_line2'] == '') { ?>
This is a<br />
WordPress theme
<?php } else {
echo $balloons_option['balloons_site-title_line1']; ?><br />
<?php echo $balloons_option['balloons_site-title_line2'];
} ?>
</h1>
I originally tried putting the href outside the h1, but still no luck.
Is there some buried Wordpress setting that disables a clickable title? Or is there some javascript that I should be looking out for that is disabling it?
I should also note the css for the header contains a z-index. I read somewhere that it might be effected by that:
#header .content {
line-height: 18px;
margin: 0;
z-index: 4;
}
If the z-index is effecting it, why is that?
Change z-index property on line 37 of layout.css to
#header h1 {
position: relative;
z-index: 10; /* Was 2 */
}
Your .entry (z-index:4) div goes vertically from top to bottom covering your #header with a higher z-index than your h1 z-index (2). So your h1/Anchor wsa unclickable because it was "under" another div.