I'm trying to center the navigation on this page: http://66.147.244.50/~schneie1/
However, the div containing the ul of buttons take up the entire width and thus I can't do "text-align:center;"
Here's the page.tpl.php and the CSS-file:
<nav id="navigation" role="navigation" class="clearfix">
<?php if ($page['navigation']): ?> <!--if block in navigation region, override $main_menu and $secondary_menu-->
<?php print render($page['navigation']); ?>
<?php endif; ?>
<?php if (!$page['navigation']): ?>
<?php if ($main_menu): print $main_menu;
endif; ?>
<?php if ($secondary_menu): print $secondary_menu;
endif; ?>
<?php endif; ?>
</nav> <!-- /#navigation -->
#navigation {
margin: 0 0 1.5em;
padding: 0;
width:auto;
margin-left:auto;
margin-right:auto;
}
#navigation ul.main-menu {
margin:0;
padding: 0;
display:block;
width:auto;
}
#navigation ul.main-menu li {
float: left;
margin: 0;
padding: 0;
}
Thanks in advance!
Change your width on your #navigation from "auto" to a value. Auto means it will extend the full width of the screen, unless you've already wrapped it in a block level element which has a fixed width. You need something for your "auto" to reference.
Related
I tried to display the content of the fields horizontally but was unsuccessful. It is always the showing vertical view. Am I missing something?
This is the php code.
Thanks for the help.
<h3>Details</h3>
<ul>
<?php foreach ($custom_fields['quote'] as $custom_quote_field_name => $custom_quote_field_value) : ?>
<li><?php echo $custom_quote_field_name; ?> : <?php echo $custom_quote_field_value; ?></li>
<?php endforeach; ?>
</ul>
Your problem lies with your CSS and HTML output, and not necessarily the PHP generating it.
If you have access to the CSS stylesheet, you could use several methods:
Inline-block
ul {
font-size: 0;
/*makes inline-block method work, as " " in your DOM have a font-size,
and we want to eliminate those
*/
}
ul li {
font-size: 18px; //or however large you would like
display: inline-block;
width: calc(100% / X); //where X is number of li
}
Float
ul {
}
ul li {
font-size: 18px; //or however large you would like
float: left;
margin-left: X; //where X is the gap you want between elements
}
Flexbox
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
ul li {
}
I'm not sure if I understood Your problem, but You are probably thinking about php like it can be used to style data generated by Your script. You need to replace <li> in Your code with <li style="float: left; margin-left: 28px;". This code uses inline CSS used for styling HTML elements like unordered list generated by Your script.
Float: https://www.w3schools.com/cssref/pr_class_float.asp
Margin: https://www.w3schools.com/cssref/pr_margin.asp
Margin is optional here, I just recommend to add this because of a little bit messy look of the list with only float applied.
Thanks a lot Guys,
This is the code works for me:
<head>
<style>
.flex-container {
display: flex;
flex-wrap: nowrap;
background-color: white;
}
.flex-container > div {
background-color: #e8f3ff;
width: 1px;
margin: 10px;
text-align: center;
line-height: 55px;
font-size: 30px;
}
</style>
</head>
<body>
<h4>Details</h4>
<div class="flex-container">
<?php foreach ($custom_fields['quote'] as $custom_quote_field_name =>
$custom_quote_field_value) : ?>
<?php echo $custom_quote_field_name; ?> <?php echo $custom_quote_field_value; ?>
<?php endforeach; ?>
</div>
</body>
On this screenshot, if you look in the North East corner, you'll find a 20% of the Ajax Load More button.
I have called it using the do_shortcode method in my template file right after I closed the loop to fetch the posts of this category.
<?php if ( have_posts() ) :
if ( is_home() && ! is_front_page() ) : ?>
<header>
<h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
</header>
<?php
endif;
/* Start the Loop */
$my_query = new WP_Query('cat=2,3&showposts=9');
while ( $my_query->have_posts() ) : $my_query->the_post();
get_template_part( 'template-parts/content', get_post_format() );
endwhile;
the_posts_navigation();
else :
get_template_part( 'template-parts/content', 'none' );
endif; ?>
<?php echo do_shortcode('[ajax_load_more container_type="div" post_type="post" offset="9" images_loaded="true"]'); ?>
How would I go about placing it in a new line?
Live demonstration at -> http://www.technobyte.org/interesting-facts/
Here is how I would mark something like that up. https://jsfiddle.net/sheriffderek/wcoyc0hf
I see that you are using PHP - but the same idea applies since PHP creates HTML.
"Put a border around it" - is the magic way to see that your floating and other styles are breaking the flow of things - and need to be addressed with clearfixes - in the case of floats / or generally just make sure things maintain their shape and that the parents of lists are expanding to hold them properly.
markup
<section class='stuff'>
<ul class='thing-list'>
<li class='thing'>
<a href="#" class='image-wrapper link'>
<img src="https://placehold.it/800" alt="thumbnail">
</a>
</li>
<li class='thing'>
<a href="#" class='image-wrapper link'>
<img src="https://placehold.it/800" alt="thumbnail">
</a>
</li>
<li class='thing'>
<a href="#" class='image-wrapper link'>
<img src="https://placehold.it/800" alt="thumbnail">
</a>
</li>
</ul>
<div class='get-more'>
<button>more...</button>
</div>
</section>
styles
ul {
list-style: none;
margin: 0;
padding: 0;
}
.image-wrapper img {
display: block;
width: 100%;
height: auto;
}
.thing .link {
display: block; /* link needs to be a block here to have shape */
border: 1px solid red;
}
.thing-list {
overflow: hidden; /* should be a clearfix or use flexbox */
}
.thing-list .thing {
float: left;
max-width: 33%;
}
.get-more {
border: 1px solid blue;
text-align: center;
}
.get-more button {
display: inline-block;
}
I am new to wordpress development . In My custom wordpress theme posts are not rendering perfectly may be there is css issue but i am not able to figure out .
I have added code of my index.php please have a look.
Index.php ->>
<?php get_header(); ?>
<div id="primaryContent" class="content-area">
<main id="main" class="container site-main" role="main">
<?php if(have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post_box">
<div class="post_title"> <h2> <?php the_title(); ?> </h2> </div> <!--end of post title-->
<div class="post_thumb">
<?php
if (has_post_thumbnail() )
{
the_post_thumbnail();
}
?>
</div> <!-- end of post thumb-->
<div class="post_content">
<?php echo substr(get_the_excerpt(), 0 , 200); ?> </br>
Read more
</div> <!-- end of post content-->
<?php endwhile; else: ?>
<p> No Post Found </p>
<?php endif; ?>
</div> <!-- end of post box -->
</main>
</div><!-- .content-area -->
<?php get_footer(); ?>
CSS ->>
#primaryContent
{
Clear:both;
}
.post_box
{
width:700px;
min-height:220px;
border:1px solid;
margin : 5% 0 5% 0;
}
.post_title
{
margin-top:10px;
margin-top:10px;
color:#000000;
}
.post_title h2
{
text-align:center;
text-decoration:none;
color:#000000;
}
.post_title h2 a
{
color:#000000;
}
.post_title h2 a:hover
{
text-decoration:none;
}
.post_thumb
{
float:left;
width:180px;
height:140px;
margin-left:10px;
}
.post_thumb img {
width:100%;
height:100%;
border:1px solid #cccccc;
padding:5px;
}
.post_content
{
float:left;
width:400px;
border :1px solid #000000;
margin-left:25px;
min-height:100px;
margin-top:5%
}
.read_more
{
background:#0E5198;
color:#ffffff;
padding:5px 10px;
text-decoration:none;
margin-top:12%;
float:right;
}
Images when there is only 1 post
Images when there is only 1 post
Image when there are 2 posts
Image when there are 2 posts
Please help me solve this issue. Thanks in advance
here's my website http://www.saraandcompany.ca/
I would like the navigation under the image to also be centred.
I've tried all sorts of ways of doing it but I have no idea how.
here's the header.php file.
<center><img src="http://www.saraandcompany.ca/wp-content/uploads/2014/03/weblogo.png" style="PADDING-BOTTOM:15px"></center>
<h1 id="main-title"><?php bloginfo('name'); ?></h1>
<nav>
<?php $args = array(
'show_home' => Work,
'sort_column' => 'menu_order, post_title'
); ?>
<?php wp_page_menu( $args ); ?>
</nav>
<div class="clearfix"></div>
</header>
thank you so much in advance.
You need to change a few lines in the CSS:
nav {
float: right; /* Remove */
}
.menu {
display: inline-block; /* Keep */
margin-left: 20px; /* Remove */
}
nav li {
display: inline;
margin-left: 20px; /* Remove */
margin: 0 10px; /* Add */
}
I am currently coding a Wordpress website. I have a sidebar and the main body for my blog posts. The sidebar currently has the following properties:
.nav{
width:25%;
height: 100%;
background: #FFF;
display:block;
float:left;
position:relative;
border-right:thin solid #C8C8C8;
}
and the main body for blog posts:
body {
font-family: Myriad Pro, Tahoma, arial, helvetica, sans-serif;
font-size:16px;
margin-left:20%;
margin-right:20%;
}
.post {
padding-left:10px;
border-left:thin solid #000000;
}
I am currently trying to add padding-left to .post so that there is a gap between the right border of the sidebar and the blog posts. However, this is not working (a gap is not created) for some reason. Nor is border-left (there is no border created; I tried removing the border-right property on the sidebar).
This is currently the code for index.php
<div id="blog">
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div class = "sidebar">
<?php get_sidebar(); ?>
</div>
<div class="post">
<h3><?php the_title(); ?></h3>
<div class="entry">
<?php the_post_thumbnail(); ?>
<?php the_content(); ?>
<p class="postmetadata">
<?php _e('Filed under:'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php the_author(); ?><br />
<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?> <?php edit_post_link('Edit', ' | ', ''); ?>
</p>
</div>
</div>
How do I make padding-left and border-left work for the main blog posts?
Thanks!
Padding is applied within the element, so the border is on the other side of the padding. What you need is margin, which is applied outside of the element:
.post {
margin-left:10px;
border-left:thin solid #000000;
}
Here is an article explaining padding and margin in more detail.
This sounds like a conflict between the default Wordpress CSS and your themes CSS file(s). A quick hack is to add !important to the end of the CSS declarations as follows:
.post {
padding-left: 10px !important;
border-left: thin solid #000000 !important;
}
A long-term solution is to examine what CSS files are loaded (and in what order) and what selectors are being used. Excellent resource: http://codex.wordpress.org/CSS_Troubleshooting