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 */
}
Related
On main blog page all excerpt is showing but there is no continue reading and Have coded very well?
on the content.php I have the code
<div class="post-excerpt">
<?php the_excerpt(); ?>
</div><!-- post-excerpt -->
On function.php I have place this code and the moretag class is not present in my style.css file and not in bootstrap is this is the reason.
/**
* Replaces the excerpt "more" text by a link.
*/
function new_excerpt_more($more) {
global $post;
return '... <a class="moretag" href="'. get_permalink($post->ID) . '"> continue reading »</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');
I expect output on the main blog page every excerpt should have continue reading link and should clickable and show full post.
after 4 hour of struggle I have found answer to my question yahoooo!!
on content.php place this.
<div class="post-excerpt">
<?php the_excerpt(); ?>
<?php if (!is_home()): ?>
<div class="continue-reading">
<a href="<?php echo esc_url( get_permalink() ); ?>" rel="bookmark">
<?php
printf(
/* Translators: %s = Name of the current post. */
wp_kses( __( 'Continue reading', 'mano-theme' ), array( 'span' => array( 'class' => array() ) ) ),
the_title( '<span class="screen-reader-text">"', '"</span>', false )
);
?>
</a>
</div>
</div><!-- post-excerpt -->
<?php endif ?>
on function.php place this code.
/**
* Customize the excerpt read-more indicator
*/
function new_excerpt_more( $more ) {
return " …";
}
add_filter( 'excerpt_more', 'new_excerpt_more' );
On style.css paste this code
.continue-reading {
text-align: center;
}
.continue-reading a,
.entry-content .continue-reading a {
display: inline-block;
margin: 1em auto;
padding: 1em 2em;
font-family: "Fira Sans", sans-serif;
text-decoration: none;
border: 1px solid #c3c3c3;
}
.continue-reading a:hover,
.continue-reading a:focus,
.entry-content .continue-reading a:hover,
.entry-content .continue-reading a:focus {
border-color: #000;
border-width: 1px;
box-shadow: none;
}
.continue-reading a::after {
content: "…"
}
.continue-reading::after {
display: block;
content: "";
width: 7em;
border-bottom: 1px solid #c3c3c3;
margin: 4em auto 0;
}
.entry-content .continue-reading::after {
display: none;
}
OUTPUT:
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>
I'm designing my page mobile friendly menu in Wordpress. I want expandable submenus to have + next to them. I'm trying to use content to add + next to it and float middle with padding but my issue is I'm getting + next to everything on the menu.
PHP:
<div class="store-menu">
<div class="store-wrapper">
<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( '', 'eightstore-lite' ); ?></button>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
</nav><!-- #site-navigation -->
<div class="clear"></div>
</div>
</div>
CSS:
#media screen and (max-width: 990px) {
.sub-menu {display: none !important;}
.menu li a::after{
content:'+' !important;
color:'white' !important;
float:middle !important;
font-size:14px !important;
padding-left: 10px !important;
}
}
This is what i want
Hey so the first little bump your going to run into is that there is no float middle property. You could use flexbox for this, or just a simple text-align: center
Im guessing your other issue is that you only want the '+' icons to show on menu items that have children?
What you need to do in that case is take advantage of the 'menu-item-has-children' classes added by Wordpress to menus. Something like:
.menu li.menu-item-has-children a::after{
content:'+' !important;
color:'white' !important;
text-align: center;
font-size:14px !important;
padding-left: 10px !important;
}
Something else to point out is that are misusing the !important property. You will want to look into css specificity CSS Tricks - css specificity
I am trying to get the next/prev links at the bottom of my blog to show up with just images. I have the positioning and the links set up correctly with the images that I want to use as well. The problem is though that the links are only working on the text that I used from the original code. I have the image that I want to use set up as the background of the div. I can not figure out how to make the image a link and delete the text.
Link to blog:
http://www.conutant.org/test-box/
What is have inside my PHP:
<div id="bottomnavigation">
<?php if($single) { ?>
<div class="nextprev">
<span class="prev"><?php previous_post('‹‹‹ %', 'PREVIOUS TUTORIAL', 'no', 'no'); ?></span>
<div id="homeicon"></div>
<span class="next"><?php next_post('% ›››', 'NEXT TUTORIAL', 'no', 'no'); ?></span>
</div>
<?php } ?>
</div>
And the CSS
.nextprev {
height: 100px;
}
.nextprev .prev {
float: left;
height: 100px;
width:200px;
background: url(http://www.conutant.org/wp-content/uploads/2012/12/Prev.png);
background-repeat: no-repeat;
background-position: left top;
margin-left: 19px;
}
.nextprev .next {
float: right;
height: 100px;
width:186px;
background: url(http://www.conutant.org/wp-content/uploads/2012/12/next.png);
background-repeat: no-repeat;
background-position: left top;
}
try with :
<div id="bottomnavigation">
<?php if($single) { ?>
<div class="nextprev">
<span class="prev"><img src="http://www.conutant.org/wp-content/uploads/2012/12/Prev.png" alt="<?php previous_post('‹‹‹ %', 'PREVIOUS TUTORIAL', 'no', 'no'); ?>" /></span>
<div id="homeicon"></div>
<span class="next"><img src="http://www.conutant.org/wp-content/uploads/2012/12/next.png" alt="<?php next_post('% ›››', 'NEXT TUTORIAL', 'no', 'no'); ?>"</span>
</div>
<?php } ?>
</div>
You don't need background in your css anymore
Apply the background image to the anchors, not to the spans.
.prev a {
float: left;
background: url(http://www.conutant.org/wp-content/uploads/2012/12/Prev.png);
}
.next a {
float: right;
background: url(http://www.conutant.org/wp-content/uploads/2012/12/next.png);
}
You also need to set the anchors as block elements:
.prev a,
.next a {
display:block;
}
And finally use text-indent: -9999px in order to hide text.
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.