Here is my website:
http://steelpony.com/shop/shop-by-look/
The header is trying to kill me. I have tried everything in my knowledge base in the header.php, page template, style.css, index.php and function.php to get rid of most of the white space, place the shopping cart and shopping cart search widgets inline with the navigation menu and nothing is working. Here is what I want the header to look like (minus the top line - don't really care about that): http://www.shopthreedots.com/Home.aspx
I believe that the way to change the position of the widget areas is by changing the <aside> attributes but is it to display=inline that I change it? Here is the header code:
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed">
<header id="branding" role="banner">
<div align=center><div id="topcontent">
<div class="topcart">
<div id="secondary" class="widget-area" role="complementary">
<?php if ( ! dynamic_sidebar( 'sidebar-1' ) ) : ?>
<aside id="archives" class="widget">
<h3 class="widget-title"><?php _e( 'Archives', 'twentyeleven' ); ?></h3>
<ul>
<?php wp_get_archives( array( 'type' => 'monthly' ) ); ?>
</ul>
<aside id="meta" class="widget">
<h3 class="widget-title"><?php _e( 'Meta', 'twentyeleven' ); ?></h3>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<?php wp_meta(); ?>
</ul>
</aside>
<?php endif; // end sidebar widget area ?>
</div><!-- #secondary .widget-area -->
<div align=center><strong>Checkout</strong></div>
</div><!-- topcart -->
So, what do I change to
get the widget areas inline and looking like the desired ex given vs my current page reality and
How do I re divide up the header to eliminate the white space and create a logo area like in the example I gave?
Correction: changing the attributes from <aside> to <div display=inline> but I do not know if that is how to get the widget area on the same line as the navigation menu on line with those category tabs ...
I inspected your code. Go to your CSS file. You want to edit the id main content (#maincontent) to decrease the white space. I noticed that the height of this is 956px. You should decrease this amount, which should get rid of the white space.
Related
I've got a problem and was hoping you guys could help me out;
For a project I'm working on I want to create an uneven grid in a WordPress template. For the grid, I'm using Desandro's Masonry.js which is a lovely library for creating flexible grids.
Currently, I have all wordpress content displayed as a straight horizontal grid, like so:
even grid
However, my eventual goal is to have the grid displayed as following:
uneven grid
To give you an idea of how I currently have my grid setup here's a chunk of the code:
I'm using the following WordPress loop for the majority of the grid display:
<main id="main" class="site-main" role="main">
<?php
if ( have_posts() ) :
if ( is_home() && ! is_front_page() ) : ?>
<?php
endif;
/* Start the Loop */
while ( have_posts() ) : the_post();
get_template_part( 'template-parts/content-masonry', get_post_format() );
endwhile;
else :
get_template_part( 'template-parts/content', 'none' );
endif; ?>
Which selects from the following content-part:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<a href="<?php echo get_permalink( $post->ID ); ?>">
<div class="row">
<div class="grid-item col-xs-12 col-sm-6 col-md-6 grid-item-content-background">
<div class="grid-item-content-background">
<div class="front-page-grid-item-tag">
</div>
<div class="button-container">
<i class="fa-border-circle glyphicon glyphicon-chevron-right"></i>
</div>
<!-- post-tags -->
<div class="tags-container">
<?php $tags = wp_get_post_tags( $post->ID );
$html = '';
foreach ( $tags as $tag ) {
$tag_link = get_tag_link( $tag->term_id );
$html .= "<div class='tag-display tag-icon-{$tag->slug}'></div>";
}
echo $html; ?>
<h4 class="front-page-category">
<?php foreach( (get_the_category()) as $category ) { echo $category->cat_name . ' '; } ?>
</h4>
</div>
<!-- .post-tags -->
<div class="grid-item-content">
<div class="grid-item-content-thumbnail"
<?php
if ( $thumbnail_id = get_post_thumbnail_id()) {
if ($image_src = wp_get_attachment_image_src( $thumbnail_id, 'normal-bg'))
printf('style="background-image: url(%s);"', $image_src[0]);
} ?>>
<div class="frontpage-overlay frontpage-overlay-trigger">
<div class="frontpage-article-text-container">
<h2 class="front-page-title"><?php echo get_the_title(); ?></h2>
<h3 class="front-page-subtitle">
<?php {
$subtitle = get_post_meta ( $post->ID, 'subtitle', $single = true );
if ( $subtitle !== '' ) echo $subtitle;
elseif ( $subtitle == '' ) echo '<!-- no subtitle set -->'; } ?>
</h3>
</div><!-- .front-page-article-text-container -->
</div><!-- .frontpage-overlay -->
</div><!-- .grid-item-content-thumbnail -->
</div><!-- .grid-item-content -->
</div><!-- .grid-item-content-background -->
</div><!-- .grid-item -->
</div><!-- .row -->
</a>
</article><!-- #post-<?php the_ID(); ?> -->
Now I've noticed that Masonry uses absolute positioning on the .grid-item class to position elements from top: 0px and left: 0%. Would it at all be possible to have masonry instead start elements from, say, 40px top on the uneven elements inside the grid? Making the grid effectively uneven?
Normally I would simply encapsulate the left side of the grid within a container with an additional margin-top, but sadly I've been unable to achieve that. I've also tried setting all uneven children of the grid to an additional margin-top using CSS, but that was to no avail either (which probably has something to do with the absolute positioning Masonry does).
I've been fussing about this for hours on end. If somebody could assist me that would be really appreciated!
Thank you!
Update:
Due to the used library using absolute positioning, any CSS edits are uneffective. I assume that I'll be needing a jQuery hack that'll set the top of the first element to top: 40px instead of the top: 0; but I have no clue where to start. If anybody can help me that'd be very much appreciated!
You may be able to leverage the :nth-of-type() CSS selector. If these elements are rendering in the expected order, you would use :nth-of-type(odd) to select the first column. Adding margin-top:40px; to drop every element in that column.
If the grid elements are not rendered in the expected order, you may have to modify Masonry.js or write your own JS to find and modify the top positioning of the left column grid elements.
Okay, so I eventually found the solution by adding the following jQuery:
jQuery( '.grid-item:even' ).css( 'margin-top', '40px' );
Hope it helps somebody!
Thank you all.
I have a loop (in wordpress) grabbing the thumbnails, titles and excerpts from the most recent posts and displaying them on the homepage in a column format. I want to make the div that contains title of each post the same height as the tallest title.
I found CSS can work if you can put all the elements in a container div but I don't know how to go about doing that.
any help would be much appreciated!
(EDIT)
ok this is what I am working with
<div class="col-sm-3 col-6 postbox">
<?php
$thumb = get_post_thumbnail_id();
$img_url = wp_get_attachment_url( $thumb,'full' ); //get full URL to image (use "large" or "medium" if the images too big)
$image = aq_resize( $img_url, 750, 500, true ); //resize & crop the image
?>
<?php if($image) : ?>
<div class="hthumb">
<img class="img-responsive" src="<?php echo $image ?>"/>
</div>
<?php endif; ?>
<div class="art_header">
<h3> <?php the_title(); ?></h3>
</div>
<div class="hometa"> <?php web2feel_posted_on(); ?> </div>
<?php the_excerpt(); ?>
</div>
this is the section that I need to be the same height. But it need to be responsive to the length of the post titles.
<div class="art_header">
<h3> <?php the_title(); ?></h3>
</div>
I'm a bit rusty with Wordpress so forgive me if I haven't given all the info!
I added HTML to my functions.php. After the
<?PHP get_sidebar(); ?>
and before
<?php get_footer(); ?>
while the CSS is added in my style.css Child theme. The result is my box of HTML under the main content on my home page instead of being on the right side of the main content. I am hoping someone may be able to help me?
I tried to add my HTML and CSS but it wouldn't let me post it.
I've spent about 3 hours on this by myself so far. First I tried reformatting a feature provided by the Minamaze Wordpress Theme, but I figured I may as well just right my own code as it may be easier to implement.
I fixed it! Here's how: The real problem was the fact that my front page articles were individually grouped instead of wrapped in a class. I found the index.php file (the copy from my child theme) and surrounded the homepage content in a named div class. Below is code from my index file. Put a div wrapper class between get_header and the php line below it. Close the div before the get_sidebar.
get_header(); ?>
<?php while( have_posts() ): the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class('blog-article'); ?>>
<?php if ( has_post_thumbnail() ) {
$column1 = ' two_fifth';
$column2 = ' three_fifth last';
} else {
$column1 = NULL;
$column2 = NULL;
} ?>
<header class="entry-header<?php echo $column1; ?>">
<?php thinkup_input_blogimage(); ?>
</header>
<div class="entry-content<?php echo $column2; ?>">
<?php think_input_blogtitle(); ?>
<?php thinkup_input_blogmeta(); ?>
<?php thinkup_input_blogtext(); ?>
</div>
<div class="clearboth"></div>
</article><!-- #post-<?php get_the_ID(); ?> -->
<?php endwhile; ?>
<?php thinkup_input_pagination(); ?>
<?php else: ?>
<?php get_template_part( 'no-results', 'archive' ); ?>
<?php endif; ?>
?php get_sidebar(); ?>
Under get_sidebar, you can put in your HTML code for YOUR sidebar that you wish to add.
Once I wrapped them into the php into it's own class and wrapped my sidebar boxes into their own class, I used float: left and right respectively in my CSS child theme, successfully creating a sidebar. I also made their widths percentages to increase usability. You can use this same method in the content-page.php, content-single.php, if you wish to add a side bar to other pages besides just the home screen.
I'm trying to do something with my Bootstrap .post-title class.
I want to put an element.style background on my post titles, which calls as a background, to the post featured image, for each post. I've already achieve this, but something went wrong and now isnt working. the only thing i know is must look something like this.
<div class="post-featured" style="background-image:url('upload/<?php the_post_thumbnail( 'wpbs-featured' ); ?>')">
but something in the syntax there is wrong, because it render this characters on HTML. whats going on?
')">
live example: WP Featured post image, as a div background
the_post_thumbnail returns an IMG html tag. So the generated code is
<div class="post-featured" style="background-image:url('upload/<img src="path/to/file.png">')">
Definitely not something that could work... You want the url only, so you should do this:
$thumb_id = get_post_thumbnail_id();
$thumb_url = wp_get_attachment_image_src($thumb_id,'wpbs-featured', true);
<div class="post-featured" style="background-image:url('<?= $thumb_url[0] ?>')">
this is the actual html snippet working.
<?php
$img = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), "full");
$img = $img[0];
?>
<div class="postfeatured" style="<?php if($img){echo 'background:url('.$img.');';} ?>">
<div class="page-header"><h1 class="single-title" itemprop="headline"><?php the_title(); ?></h1>
<h4>
<?php $mykey_values = get_post_custom_values('_aioseop_description');
foreach ( $mykey_values as $key => $value ) {
echo substr("$value",0 ,300); //This will display the first 150 symbols
}?>
</h4>
<hr>
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<div class="addthis_native_toolbox"></div>
<hr>
</div>
</div>
live example: Design Thinking. Blog de Diseño Gráfico. Picoboero
My wordpress theme (Anglepane) is creating a second (unwanted) post at the bottom of my page.
I have used Firefox page inspector and isolated the problem with the div tag "nocolsidepost", and I have gone through the 20+ theme files (css etc) and deleted this tag whereever I find it, but the second posts still remain!! - I can delete it on the fly with Firefox page inspector, but not in the actual code
Could anyone please explain how to solve this
Website is http://historyofliverpool.com and the section I want to remove it the bottom block with the previous / next links on it
I don't know the structure of the code in the theme but it can be in multiple parts of the code.
TwentyThirteen and TwentyFourteen themes (the ones bundled with Wordpress) use a separate function to show the pagination or the Prev/Next buttons. If your theme has this function (usually in function.php file) you will have to search for it and delete/modify all the lines that print something. For example, here is the function from TwentyThirteen theme:
function twentythirteen_paging_nav() {
global $wp_query;
// Don't print empty markup if there's only one page.
if ( $wp_query->max_num_pages < 2 )
return;
?>
<nav class="navigation paging-navigation" role="navigation">
<h1 class="screen-reader-text"><?php _e( 'Posts navigation', 'twentythirteen' ); ?></h1>
<div class="nav-links">
<?php if ( get_next_posts_link() ) : ?>
<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">←</span> Older posts', 'twentythirteen' ) ); ?></div>
<?php endif; ?>
<?php if ( get_previous_posts_link() ) : ?>
<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">→</span>', 'twentythirteen' ) ); ?></div>
<?php endif; ?>
</div><!-- .nav-links -->
</nav><!-- .navigation -->
<?php
}
On the other side, the theme can easily implement the corresponding code directly in the archive.php, index.php and other category.php/tag.php files. It is similar to the function used above, the only difference is the function wrapper (the first is a function, the second not).
Or, simpler (but less proper) way to achieve this is to add a display:none; to the element above. But, to achieve this, you will have to find the code that generates it, to add there an id, and in the CSS use the id like this:
#your-id-here{
display:none;
}