I want to add a border to the footer.
Here are the css lines:
position: fixed;
bottom: 0;
right: 0;
left: 0;
clear: both;
line-height: 1.36em;
padding: 08px 0px 0px;
text-align: center;
margin: 0px auto;
background: #fff;
border-top: 5px solid #4cb6cb;
What have I set wrong ? Think sometimes block the border to show.
Here is the html:
<div id="page_footer">
<div id="bottom_nav">
<?php echo $LANG['footer-about']; ?>
<?php echo $LANG['footer-terms']; ?>
<?php echo $LANG['footer-support']; ?>
</div>
<div id="footer" class="clear">
<?php echo APP_TITLE; ?> © <?php echo APP_YEAR; ?>
<a class="lang_link" href="javascript:void(0)" onclick="App.getLanguageBox('<?php echo $LANG['page-language']; ?>'); return false;"><?php echo $LANG['lang-name']; ?></a>
</div>
You may be applying this in a wrong class or id. Your code is fine.
Try adding a rule for HEIGHT to the footer itself and checking the class name again.
#footer {
position: fixed;
bottom: 0;
right: 0;
left: 0;
clear: both;
line-height: 1.36em;
padding: 08px 0px 0px;
text-align: center;
margin: 0px auto;
background: #fff;
border-top: 5px solid #4cb6cb;
}
<div id="page_footer">
<div id="bottom_nav">
A link here>
A link here
A link here
</div>
<div id="footer" class="clear">
<?php echo APP_TITLE; ?> © <?php echo APP_YEAR; ?>
<a class="lang_link" href="javascript:void(0)" onclick="App.getLanguageBox('<?php echo $LANG['page-language']; ?>'); return false;"><?php echo $LANG['lang-name']; ?></a>
</div>
</div>
Related
I'm trying to display my posts horizontally, but I have not managed to get it, it only shows vertically, I see that parts of the html code are repeated.
My code:
<div id="content" class="container-fluid">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id="four-columns" class="grid-container" style="display:block;">
<ul class="rig columns-4">
<li itemscope="">
<a href="<?php the_permalink(); ?>"><img src="<?php
$feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
echo $feat_image;?>" class="attachment-single-post-thumbnail size-single-post-thumbnail wp-post-image" alt="" width="300" height="188">
<h3 itemprop="headline"><?php the_title_attribute(); ?></h3></a></li></ul>
</div>
<?php endwhile; endif; ?>
</div>
My css:
<style>
ul.rig li img {
border-radius: 6px;
}
.mg-breadcrumb-section .overlay {
display: none;
}
img, ul.rig li img {
max-width: 100%;
height: auto;
}
ul.rig li h3 {
margin: 0 0 5px;
text-align: center;
}
#front-list ul li {
list-style: square;
}
#front-list ul, ul.rig li {
margin-bottom: 15px;
}
ul.rig.columns-4 li {
width: 16%;
}
ul.rig li {
margin-right: 10px;
background: #ddd;
font-size: 16px;
border-radius: 6px;
}
.footer3, ul.rig li {
display: inline-block;
}
</style>
This is how it shows up in the browser
what am I doing wrong?
I cant align tooltip with social icon.You can see on the link:
http://www.themeforest-deneme2.deniz-tasarim.site/2020/01/22/vffd/
(on left sidebar, bottom social icon which is facebook)
the related code:
<div class="col-sm-1 " >50%
<?php global $post; ?>
<style>
.logo-img2{
border: 1px solid #d0d0ff;padding:20px; margin-top: 0px; margin-bottom: 0px;
}
</style>
<style>
.col-sm-1 .sticky-top { top: 60px;}
</style>
<div class="sticky-top ">
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo get_permalink($post->ID);?>">
<div>
<img src="<?php echo get_template_directory_uri(); ?>/img/icons/facebook.png" alt="Logo" class="logo-img2"">
</div>
</a>
<a href="https://twitter.com/share?url=<?php echo get_permalink($post->ID);?>">
<div>
<img src="<?php echo get_template_directory_uri(); ?>/img/icons/twitter.png" alt="Logo" class="logo-img2"">
</div>
</a>
<?php $pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>
<a href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&media=<?php echo $pinterestimage[0]; ?>&description=<?php the_title(); ?>">
<div>
<img src="<?php echo get_template_directory_uri(); ?>/img/icons/pinterest.png" alt="Logo" class="logo-img2" >
</div>
</a>
<style>
a.tooltips {
position: relative;
display: inline;
}
a.tooltips span {
position: absolute;
width:140px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
box-shadow: 0px 0px 10px #800000;
}
a.tooltips span:after {
content: '';
position: absolute;
top: 50%;
right: 100%;
margin-top: -8px;
width: 0; height: 0;
border-right: 8px solid #000000;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
a:hover.tooltips span {
visibility: visible;
opacity: 0.8;
left: 100%;
top: 50%;
margin-top: -15px;
margin-left: 15px;
z-index: 999;
}
</style>
<a class="tooltips" href="#">vdsf
<img src="<?php echo get_template_directory_uri(); ?>/img/icons/facebook.png" alt="Logo" class="logo-img2"">
<p>a</p>
<span>Tooltip</span></a>
</div>
</div>
you can delete unnecessary letter that nearly social icon because when i delete them, arrow seem on different place.
To fix this you can first remove that extra, unwanted text and <p> tag from around the facebook icon and then change this css declaration so the margin-top is -36px like this:
a:hover.tooltips span {
visibility: visible;
opacity: 0.8;
left: 100%;
top: 50%;
margin-top: -36px;
margin-left: 15px;
z-index: 999;
}
I tested it in the browser tools and it worked well. That's not to say that there are not better ways to do this, but this, in my opinion answers your question and gets you moving forward.
I am having a bit of a problem with my bootstrap grid alignment.
I have three main columns. One for left side bar, one for blog posts, and one for right sidebar.
I'm trying to put a yellow bar on top of left and right sidebar. I have successfully added one on my left sidebar but on my right sidebar, I can't make it have a fixed position. It moves away whenever I zoom-out or zoom-in unlike on my left sidebar.
Here's my index.php code with my sidebars:
<div class="row">
<div class="col-md-5">
</div>
<div class="col-md-1">
</div>
<div class="col-md-4">
</div>
<div id="maineverything">
<div class="col-md-3">
<?php get_search_form(); ?>
<?php get_sidebar('1'); ?>
</div>
<div class="col-md-7 blog-main">
<div class="blogtitle">
<p>PAKU SQUAD <span class="subheader1">BLOG</span></p>
<hr>
</div>
<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
get_template_part( 'content', get_post_format() );
endwhile;?>
<nav>
<ul class="pager">
<li> <?php next_posts_link( 'Older Posts >>>' ); ?> </li>
<li> <?php previous_posts_link( '<<< Newer Posts' ); ?></li>
</ul>
</nav>
<?php
endif;
?>
</div> <!-- /.blog-main -->
<div class="col-md-2">
<?php get_sidebar('2'); ?>
</div>
</div>
</div> <!-- /.row -->
And here's my css code for my bootstrap grid:
/* Column Codes */
.row {
padding: 100px;
}
#maineverything {
padding-left: 150px;
display: inline-block;
max-width: 100%;
width: 100%;
height: 100%;
}
.col-md-2 {
border-bottom: 2px solid #a7a7a7;
max-height: 100%;
height: 1920px;
width: 250px;
background-color: #f0f0f0;
}
.col-md-3 {
border-bottom: 2px solid #a7a7a7;
max-height: 100%;
height: 1920px;
width: 250px;
background-color: #f0f0f0;
}
.col-md-4 {
margin-right: 47px;
float:right;
max-width:100%;
width: 250px;
height: 50px;
background-color: #feb300;
}
.col-md-5 {
padding-top: 50px;
max-width:100%;
margin-left: 150px;
width: 250px;
height: 30px;
background-color: #feb300;
}
.col-md-7 {
max-height: 100%;
height: 1920px;
border-bottom: 2px solid #a7a7a7;
}
There is not proper bootstrap HTML Structure,You need to add row in container div and col-md-* in row Refer it https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp,In bootstrap width apply by default so no need to apply width and padding and margin,I have changed your HTML Structure by adding container and remove unnecessary css...Check Now
/* Column Codes */
.row {
padding:0px 100px;
}
#maineverything {
display: inline-block;
max-width: 100%;
width: 100%;
height: 100%;
}
.col-md-2 {
border-bottom: 2px solid #a7a7a7;
background-color: #f0f0f0;
}
.col-md-3.bgyellow{
height: 30px;
background-color: #feb300;
}
.bgyellow2{
height: 50px;
background-color: #feb300;
}
.col-md-3 {
background-color: #f0f0f0;
}
.col-md-4 {
height: 50px;
background-color: #feb300;
}
.col-md-5 {
height: 30px;
background-color: #feb300;
}
.col-md-7 {
border-bottom: 2px solid #a7a7a7;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-3 col-xs-3 bgyellow">
</div>
<div class="col-md-7 col-xs-7">
</div>
<div class="col-md-2 col-xs-2 bgyellow2">
</div>
</div>
</div>
<div id="maineverything">
<div class="container">
<div class="row">
<div class="col-md-3 col-xs-3">
<?php get_search_form(); ?>
<?php get_sidebar('1'); ?>
</div>
<div class="col-md-7 col-xs-7 blog-main">
<div class="blogtitle">
<p>PAKU SQUAD <span class="subheader1">BLOG</span></p>
<hr>
<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
get_template_part( 'content', get_post_format() );
endwhile;?>
<nav>
<ul class="pager">
<li> <?php next_posts_link( 'Older Posts >>>' ); ?> </li>
<li> <?php previous_posts_link( '<<< Newer Posts' ); ?></li>
</ul>
</nav>
<?php
endif;
?>
</div>
</div> <!-- /.blog-main -->
<div class="col-md-2 col-xs-2">
<?php get_sidebar('2'); ?>
</div>
</div> <!-- /.row -->
</div>
</div>
Currently trying to display 8 of the most popular items in from my shop on the home page in a list (ul, li) form. Problem is, it's not displaying inline. Looks horrible and I can seem to get any of the CSS to change it or rearranging the php code isn't working either. Was wonder if anyone had an insight into what I'm missing here.
Here's the php code:
<div id="popular-items" class="site-content">
<div id="popular-links" class="site-content">
<ul class="popular-list">
<li>
<div class="popular-im">
<?php
$args = array( 'post_type' => 'product', 'stock' => 4, 'posts_per_page' => 8, 'orderby' =>'date','order' => 'DESC' );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); global $product;
?>
<a id="id-<?php the_id(); ?>" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" width="65px" height="115px" />'; ?>
<h5><?php the_title(); ?></h5>
<span class="price"><?php echo $product->get_price_html(); ?></span></a><?php woocommerce_template_loop_add_to_cart( $loop->post, $product ); ?>
<?php endwhile; ?>
</div>
</li><!-- /span3 -->
</ul><!-- /row-fluid -->
</div>
</div>
And here's the css:
#popular-items {
height: 520px;
background-color: transparent;
border: 1px solid #fd0e35;
position: relative;}
ul.popular-list {
display: inline-block;
list-style-type: none !important;
padding: 0;}
#popular-links {
height: 400px;
width: 1102px;
background-color: transparent;
border: 2px solid lightgreen;
position: relative;
top: 50px;
margin: 0 auto;
padding: 0;}
.popular-im {
left: 400px;
height: 350px;
width: 150px;
margin: 0 0 0 0;
border: 2px solid black;
display: inline-block;
vertical-align: top;
position: relative;
text-transform: none;}
Remove Inline-block from UL and apply it to LI, Below should be ideal code for your problem, with explanation, change height / width as per your layout.
First you may want to highlight area what is popular items and let me guess it is about 600px width.
#popular-list {padding:10px; box-sizing:border-box; width:600px;}
Now let us define UL
ul.popular-list {list-style:none}
Finally Li setup in columns. (with 10px gutter between them)
ul.popular-list li {display:inline-block; width:142.5px; margin-right:10px}
ul.popular-list li:nth-child(4n+4) {margin-right:0}
And right after last li (just before ) put clear class.
Thanks & Regards
Manoj Soni
Something like that will help:
.popular-list{
list-style-type: none;
overflow:hidden;
}
.popular-list li{
display:inline-block;
float:left;
height: 350px;
width: 150px;
}
I'm having problems implementing this code onto my site http://www.some-things.net/category/work/
http://www.sohtanaka.com/web-design/css-on-hover-image-captions/
Can anyone see where I'm going wrong?
I've got it working in coda - but when I try implement it into wordpress, something breaks.
<div style="clear:both"></div>
<div class="gallery">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="portfolioItem">
<?php the_post_thumbnail(); ?>
<span class="desctitle"><h2><?php the_title(); ?></h2>
</span> </div>
<?php endwhile; ?>
</div>
And here is the CSS:
.portfolio {overflow:hidden;}
.gallery {
margin-top:10px;
padding-left:22px;
margin-left:-22px;
margin-bottom:20px;
width:982px;
}
/* .portfolioItem {
float:left;
width:300px;
margin-right:25px;
overflow:hidden;
margin-bottom:5px;
} */
.portfolioItem {
float: left;
overflow: hidden;
position: relative;
margin-right: 25px;
margin-bottom: 5px;
}
.portfolioItem a {
text-decoration: none;
float: left;
}
.portfolioItem a:hover {
cursor: pointer;
}
/* .portfolioItem img {
border:2px;
border-color:000;
border-style:solid; */
/* border:none; */
/* opacity:0.6;filter:alpha(opacity=60);} */
/* .gallery .portfolioItem img:hover {
opacity:1;filter:alpha(opacity=100);}
*/
.portfolioItem a img {
float: left;
margin: 0;
border: none;
}
/* boxes for portfolio item descriptions */
.portfolioItem a:hover .desctitle {
display: block;
font-size: 1.2em;
padding: 0px 0;
background: #111;
filter:alpha(opacity=75);
opacity:.75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/
color: #fff;
position: absolute;
bottom: 0px;
margin: 0;
width: 300px;
border-top: 1px solid #999;
}
/* .desctitle a {
color:white;
padding-left:12px;
}
*/
.portfolioItem a .desctitle { display: none; }
It turned out to be a formatting error - the / linking was all wrong. This is the correct code for anyone else with a similar problem...
<div style="clear:both"></div>
<div class="gallery">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="portfolioItem">
<a href="<?php the_permalink() ?>" class="desctitle" title="<?php the_title();?>"><?php the_post_thumbnail(); ?>
<span class="desctitle"><?php the_title(); ?></a>
</span>
</div>
<?php endwhile; ?>
</div>