I have a small issue. I searched for relative issues but couldnt find anything.
I would like to fix this issue without Scripting if possible, and without adapting body width.
So here we go. I would like the Logo to display INSIDE the box area as it appears on Maximized Window.
Also i would not like to put relative position to the element since it puts a large margin between header and Navigation Bar.
I've tried playing with body width and setting it in other container. No Luck.
You can see what i mean in here:http://imageshack.us/g/43/q3qr.jpg/.
And here is the code:
http://jsfiddle.net/NCZg8/4/`
>
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
<img class="Logo_wrapper" src="http://pizza-bar.gr/wordpress/wp-content/uploads/2013/09/PB_Logo.png"/>
</a>
</body>`
Note: try to stretch the "Result" Window and u will see what i mean.
Ty in advance.
In order to keep the element from going out of boundaries on the right side, you should be setting the right property instead of the left.
.Logo_wrapper{
position:absolute;
top:40%;
right:5%;
z-index:10;
}
Updated fiddle: http://jsfiddle.net/NCZg8/6/
Also i would not like to put relative position to the element since it puts a large margin between header and Navigation Bar.
In order for the logo to appear inside the header, it's important to set position:relative on the header element. To see a more detailed explanation of relative and absolute positioning, see here: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
Your problem of margin can probably be fixed with css.
Related
I'm using Bootstrap 4.
My question is quite simple: how to put an image side by side with a text using bootstrap ?
This is my code:
<div class="card-content">
<div class="portfolio-desc">
<h3><?php echo $galleryTitle; ?></h3>
<img id="authorImg" style="border-radius: 50%; height: 36px;" src="<?php echo $author_photo; ?>" />
<span id=authorSpan"><?php echo $galleryAuthor; ?></span>
<span>Gallery: <?php echo $galleryName; ?></span>
</div>
</div>
How can I put "authorImg" side by Side with authorSpan ?
Now, each img, span etc are on new line .
Thanks
Images do not cause a line break by default, so it must be some additional css or other formatting. try removing some classes and see if that fixes the problem. If you find a class that causes the line break then add whitespace: nowrap; to that class; I tried this myself and the image was on the same line as the text so it may be some additional css you wrote.
Side note: your id does not have the first quote mark.
I've started diving into WP code for theme customization, yet I suddenly saw a serious bootstrap column fla where I can't really locate the problem.
I've designed the blog section as col-xs-12 col-sm-4 for the thumbnailed side image, and col-xs-12 col-sm-8 for the content itself. Everything is fine and dandy in all size stretches except for 768px-990px where the columns start to overlap each other, in approx the same size as the margin they should have from each other.
Here is the code:
<div class="row">
<?php if( has_post_thumbnail()): ?>
<div class="col-xs-12 col-sm-4">
<div class="thumbnail-img"><?php the_post_thumbnail('medium'); ?>
</div>
</div>
<div class="col-xs-12 col-sm-8">
<p><?php the_content(); ?></p>
</div>
<?php else: ?>
<div class="col-xs-12">
<p><?php the_content(); ?></p>
</div>
<?php endif ?>
</div>
Here are a few pictures to emphasize:
EDIT:
I changed, just to check, what happens if instead the 8-4 row, I will do a 6-6, and it works great (picture included below). isn't 8 + 4 = 12? what am I missing here?
Try giving image width 100% so that it fits in div when resizing.
Or create a fiddle and share link.
I've found out that wordpress doesn't really play nicely with bootstrap since the_post_thumbnail('$string') would overlap the bootstrap column grid if they aren't set right (WP doesn't auto set the image width into a column restricted area.)
the_post_thumbnail('$string') receives the following set params:
the_post_thumbnail( 'thumbnail' ); // Thumbnail (150 x 150 hard cropped)
the_post_thumbnail( 'medium' ); // Medium resolution (300 x
300 max height 300px)
the_post_thumbnail( 'medium_large' ); // Medium Large (added in WP
4.4) resolution (768 x 0 infinite height)
the_post_thumbnail( 'large' ); // Large resolution (1024 x
1024 max height 1024px)
the_post_thumbnail( 'full' ); // Full resolution (original
size uploaded)
There is no 100% for the_post_thumbnail('$string') yet i'm just guessing that it could be hardcoded into the function itself as a param.
My solution was either using $string = thumbnail or changing the grid to col-sm-6 for both columns.
Place the url of the image in a img tag with the img-responsive class.
I have just begun exploring CSS and am looking forward to gain an in-depth understanding of the language.
One of the issues I'm facing with a project is the alignment of the products in mobile view.
Website - http://klcl.com.my/product-listing/
In the mobile view, the products are touching the right side of the screen. I want them to be centered. I tried adding a 'margin-right: 15px' and it works; however, that new line of code affects the social media icon in the footer as well. I'm guessing because both the product list and the icon are using the '.col-md-4' class tag.
Here is the code:
<div class="col-md-9 product-listing-main">
<div class="row">
<?php
$args = array(
'posts_per_page' => -1,
'post_type' => 'product'
);
$query = new WP_Query($args);
while ($query->have_posts()) :
$query->the_post();
?>
<div class="col-md-4">
<figure>
<img src="<?php echo wp_get_attachment_url(get_post_thumbnail_id($post->ID));?>" />
<figcation><?php the_title(); ?></figcation>
</figure>
</div>
<?php
endwhile;
wp_reset_postdata();
?>
</div>
</div>
How can I align the products to the middle without affecting any other elements on the website? Any help will be greatly appreciated.
After a short look at your code i see that you are often manipulating the paddings of bootstrap elements (container, col-* …) and that leads to confusion. Try to avoid this and everything runs fine.
add this to your css to reset the previous settings:
.on-social{margin-right:initial !important;}
or
.on-social{margin-right:0px !important;}
please consider margin: 0 auto; for centering the elements.
I came across this site: http://www.jfletcherdesign.com.
I want to replicate how the home page shows the featured image of all of his posts and that when you click on the image you drill down into in the specific post. I also want to replicate how you are able to click forward and next with an image to the corresponding post within a category.
Can someone please point me in the right direction for setting up this functionality?
Bonus points if you can point me to the jQuery plugin that is being used for the rollover effect on his category page.
Thanks!
That site is based on the Imbalance theme by WPShower. It's a free theme so you can download it and check out all the source code. That should answer your first question.
To get images that act as pagination to the previous and next posts all you need to do is use the get_adjacent_post function. You can use something like the code below to set it up to link an image. Stick it in the bottom of your single.php or wherever you want the pagination to appear.
<?php
$prev_post = get_adjacent_post(true, '', true);
$next_post = get_adjacent_post(true, '', false);
?>
<?php if ($prev_post) : $prev_post_url = get_permalink($prev_post->ID); ?>
<a class="previous-post" href="<?php echo $prev_post_url; ?>"><img src="www.site.com/previous-image.png" alt"previous post" /></a>
<?php endif; ?>
<?php if ($next_post) : $next_post_url = get_permalink($next_post->ID); ?>
<a class="next-post" href="<?php echo $next_post_url; ?>"><img src="www.site.com/next-image.png" alt"next post" /></a>
<?php endif; ?>
Now for the jQuery rollover, it is pretty simple:
$(document).ready(function() {
$('.article').mouseenter(function() {
$(this).find('.article-over').show();
});
$('.article').mouseleave(function() {
$(this).find('.article-over').hide();
});
$('.article').hover(
function() {
$(this).find('.preview a img').stop().fadeTo(1000, 0.3);
},
function() {
$(this).find('.preview a img').stop().fadeTo(1000, 1);
}
);
});
Which acts on the following HTML markup generated by the theme:
<li class="article li_col1" id="post-1234">
<div class="preview">
<img width="305" height="380" src="http://www.site.com/image/src.jpg" class="attachment-background wp-post-image" alt="" title="Cool Post">
</div>
<div class="article-over">
<h2>Cool Post</h2>
<div class="the-excerpt">
<p>Blah blah blah this is a post excerpt...</p>
</div>
</div>
</li>
So basically when you first go to the site, for all the items except the first, all you see is the .preview div that holds the category image. The .article-over div is absolutely positioned over the .preview div but has a style of display:none so that you can't see it.
When the mouseenter event is fired, the .article-over div is displayed via show(), and the image inside .preview fades out to an opacity of 0.3 allowing you to see the .preview div's black background behind it. When the mouse leaves, .article-over is hidden, and the .preview image fades back to fully opaque.
If you're still stuck let me know and I'll try to explain further.
I can easily make images within a post responsive, but am have an issue getting custom post type thumbs to do the same b/c WP automatically inserts a width and height. I am looking for a way to at least override these default widths/heights on them. Anyone happen to have a solution for this?
Thanks in Advance!
- j
This is what you want in your CSS:
img {
max-width: 100%;
height: auto;
}
The first declaration makes sure all images won't exceed the width of their containing element. The auto declaration for height ensures all images retain their proportions when scaled down even when they have size attributes in the img element. So in a way this overwrites the size attributes.
You should use WP's wp_get_attachment_image_src() to output the URL of the thumbnail and then proceed with building your own <img/> tag and responsive-ing it.
<img src="<?php $img=wp_get_attachment_image_src(get_post_thumbnail_id($post->ID)); echo $img[0]; ?>" alt="<?php the_title(); ?>"/>
If you want a specific size, insert this: wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'large')
<img src="<?php $img=wp_get_attachment_image_src(
get_post_thumbnail_id($post->ID),large);
echo $img[0]; ?>" alt="<?php the_title(); ?>"
style="display:block; width:50%;"/>
That should do it.