I'm making a webshop with the plugin Woocommerce.
What I'm doing now is styling the single product page for my site. I already changed the order of the hooks. So "related products" is now above the tab screens. But it's way too high. I tried to change it with a div around it. But that doesn't work.
Photo of my problem:
http://i.stack.imgur.com/EhVO0.jpg
The code:
<div class="related">
<?php
/**
* woocommerce_after_single_product_summary hook.
*
* #hooked woocommerce_output_product_data_tabs - 10
* #hooked woocommerce_upsell_display - 15
* #hooked woocommerce_output_related_products - 20
*/
do_action( 'woocommerce_after_single_product_summary' );
?>
</div>
<meta itemprop="url" content="<?php the_permalink(); ?>" />
CSS i already tried:
.related {
top: 40px;
margin-top: 40px;
padding-top: 40px;
}
All of this doesn't work. Anyone knows how to get related products lower?
You don't need to add <div class="related"> in content-single-product.php template. Please remove it as before.
Why? Because the class related is already used in single-product > related.php template with: <div class="related products"> html tag in it.
What you can do is to add some space after tabs withs this CSS rule:
div.woocommerce-tabs.wc-tabs-wrapper {
padding-bottom:40px;
}
When you want to overlap an existing defined CSS rule on wooCommerce pages, sometimes you need to add at the end of a CSS value attribute !important. The best thing is to test a CSS rule without first and if needed with it as this:
div.woocommerce-tabs.wc-tabs-wrapper {
padding-bottom:40px !important;
}
---- (Edit) ----
Here is the CSS rule you asked last (try also without !important first):
.woocommerce .products.related ul.products {
padding-top:40px !important;
}
you can try too:
.woocommerce .products.related ul.products {
margin-top:40px !important;
}
you need dot "." operator to specify the CSS class selector & hash "#" for id selector, try this code.
.related {
margin-top: 40px !important;
}
Cheers
Related
I'm working on a Wordpress theme where when visiting the homepage, a short animated video is played, and once it has finished playing it 'fades' away a reveals a static page of text and the header. I'm not quite sure how to achieve this but I've provided my code below.
home.php
<?php
/*
* Template Name: Homepage
*/
get_header();
?>
<div id="primary" class="content-area offset-md-1 col-md-10">
<main id="primary" class="site-main home-page">
<div id="first">
<video src="http://localhost:8888/myvideo.mp4" controls autoplay></video>
</div>
<div id="second">
<div class="home-menu">
<?php
wp_nav_menu(
array(
'theme_location' => 'menu-1',
'menu_id' => 'primary-menu',
)
);
?>
<p>Lorem Ipsum</p>
</div>
</div>
</main><!-- .site-main -->
</div><!-- .content-area -->
<?php
get_sidebar();
get_footer();
style.css
The video should be on top of the content first, so you can position it the right way using CSS in the style.css of your theme:
#first {
width: 100%; /* full screen width */
height: 100vh; /* full screen height */
position: absolute; top: 0; left: 0;/* stay in place */
z-index: 1; /* sit on top */
opacity: 1; /* it is fully visible */
transition: 0.5s; /* time to move */
}
.leave {
opacity: 0; /* it is invisible */
width: 0; /* it has no width */
}
#first video {
width: 100%; height: 100vh; /* video fit container */
}
We added a leave class for the hidden state after the video is loaded. That is all for the CSS part. Let's now get back to your page template file. We will use javascript to add the leave-class to the video, after it ended playing.
In Javascript you can use the addEventListener() method:
addEventListener("ended", yourScript);
In your html, you give an ID name to the video element: <video id="myVid" src...
With this having set, you can use the method and run a function when the video ends. Put this after your closing content-area div in the page template:
<script>
document.getElementById('myVid').addEventListener("ended", yourScript);
function yourScript(e){
var div = document.getElementById("first"); /* div container */
div.classList.add("leave"); /* add class to div */
}
</script>
This way your video gets the css class when it ended. In the CSS we took away the opacity and the width with a transition of 0.5 seconds. You can adjust it the way to like, this is just pure javascript and CSS.
There are also jQuery functions like fadeOut(500) if you prefer to use that.
Hi everybody I have this Wordpress website that I want to transform into an AMP website, one of the challnging task is to rewrite the css in inline.
So in the wordpress framework we have this functions.php file and inside we have the wp_enqueue_style function.
/**
* Proper way to enqueue scripts and styles
*/
function wpdocs_mytheme_styles() {
wp_enqueue_style( 'style', get_stylesheet_uri() . '/css/style.css' );}
add_action( 'wp_enqueue_scripts', 'wpdocs_mytheme_styles' );
Basically Wordpress will give us this line on out front end pages
<link rel='stylesheet' id='style' href='Path_to/css/stle.css' type='text/css' media='all' />
Can I change this display mechanism to make Wordpress display the registered styles in **INLINE this way :**
<style amp-custom>
<!-- The content of the style.css -->
<!-- .... -->
</style>
Yeah basically i have a lot of these files and I don't want to make a static change by opening each one and copy/pasting content n the header any idea?
You could do like this:
<style amp-custom>
{% include "/assets/css/main.min.css" %}
</style>
OR,
<style amp-custom>
/* any custom styles go here. */
body {
background-color: white;
}
amp-img {
border: 5px solid black;
}
amp-img.grey-placeholder {
background-color: grey;
}
</style>
Reference : AMP-DEV
You need to add the styles directly to the page head using wp_head()
add_action('wp_head', 'my_custom_styles', 100);
function my_custom_styles()
{
echo "<style>*{color: red}</style>";
}
is there any specific reason why you want to make use of inline styling?
I'm trying to display regular and sale price on this theme: Yourstore
When I go to the product's page, I can see both prices, but when I go to the shop or catalog price, it's only showing the sale price (or regular one if the product insn't in sale). I'd like that to display something like:
$1̶8̶9̶,̶9̶0̶ $109,90
I tried to follow this tutorial: How to Show Both Regular and Sale Price but it didn't work, my shop page stopped loading.
In yourstore/woocommerce/loop/price.php, I have this:
<div class="product__inside__price price-box">
<?php if ( $price_html = $product->get_price_html() ) : ?>
<span class="price"><?php echo wp_kses_post($price_html); ?></span>
<?php endif; ?>
</div>
I tried to use $product->get_sale_price() and it still doesn't work. How can I solve this?
I solved it. The issue wasn't in the php files, it was actually in the theme css, because the del tag of my html was set to display: none
Before:
.products .product .price-box .price del {
display: none;
}
After:
.products .product .price-box .price del {
display: inline;
}
Hi Is there any of you out there that is able to assist me on this. I'm experimenting with the fluid layout of bootstrap on my wordpress site. Apparently the isn't working properly. I created a .span 12 column and its not taking up the full width of the browser. Instead its width shrank. Is there a way around this?
Heres the experiment which i created using a custom page template
<?php
/*
Template Name: page-work
*/
?>
<?php get_header(); ?>
<h1><?php the_title(); ?></h1>
<style type="text/css">
.span12{
background:black;
color:white;
padding:20px 0;
text-align:center;
margin-top:15px;
}
.span6{
background:blue;
color:white;
padding:20px 0;
text-align:center;
margin-top:15px;
}
</style>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">span 12</div>
</div>
<div class="row-fluid">
<div class="span6">span 6</div>
<div class="span6">span 6</div>
</div>
</div>
This is because bootstrap has a fixed width of span12 as
.span12 {
width: 1170px;
}
for bigger screens.
If you still want, you can try this:
#media (min-width: 1200px) {
.span12 {
width: 100%;
}
}
Always create a child css file and put that below the bootstrap file.
I would recommend upgrading to Bootstrap 3 as it handles fluid-containers in a much better way and you wouldn't have this problem in the first place.
.span12 becomes col-xx-12 (xx is either xs, sm, md and lg...read up on that!) and has a width of 100%. BS3 uses percentage widths rather than fixed widths as mentioned in the answer above. It's also not too difficult to move from BS2 to 3.
http://getbootstrap.com/ - download here
http://getbootstrap.com/getting-started/ - documentation
As a general rule, wordpress won't really change how your website looks. It's the styles you put around it so Wordpress in this case is irrelevant.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I've created a grid portfolio page on my website and I'm looking to add a feature to the thumbnails. I'd like that whenever someone hovers over a thumbnail, it will show the post title, date of post and excerpt.
I've been trying to find an example of what I mean and this is very similar;
http://lucybenson.net/redesign2011/
So far my loop on Wordpress looks like this
http://pastie.org/2135220
Is there a plugin that does this? If not, would anyone be able to tell me how I could achieve this?
Thanks in advance.
There are plugins for this kind of thing, but it's very easy to do by yourself.
This isn't tested, but it should get you going in the right direction:
<style type="text/css" media="screen">
.image-list {
list-style-type: none;
margin: 0;
padding: 0;
}
.image-list li {
margin: 0 10px 0 0;
padding: 0;
float: left;
}
.image-list li a {
display: block;
position: relative;
height: 50px;
width: 50px;
}
.image-list li a span {
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.4);
color: #fff;
}
</style>
<ul class="image-list">
<li>
<a href="#">
<img src="myimage.jpg" alt="My Image">
<span>
This is my overlay content
</span>
</a>
</li>
</ul>
<script type="text/javascript">
$(function() {
$(".image-list li a").hover(
// Mouse Over
function() {
$(this).find("span").fadeIn();
},
// Mouse Out
function() {
$(this).find("span").fadeOut();
}
);
});
</script>
If you're looking for a javascript-independent solution - I know, sounds really silly but it's worth a try - you can do it through CSS purely. It's not too hard - http://jsfiddle.net/teddyrised/TWBhU/
What I did was to use the -webkit-transition / transition property. Of course, my solution isn't as elegant as what Jesse has posted, but it's just nice to know CSS could work some magic, too.
There are a few things you need to get sorted here - first you need to get your head around getting one thing on top of the other - so here's the effect you're after done really simply in just css using the :hover class. The key is using the absolute position in an absolutely positioned wrap to get the text on top of the image
http://jsfiddle.net/aDwe4/
Next you want the fade the item - some people might not like it - but jquery makes this super easy - drop the hover class and put the animate function in your footer in some script tags
http://jsfiddle.net/aDwe4/1/
Finally you now need to translate this into your wordpress tempalte - I'm not sure what's going on with your template - so I'll just write an example. I would install the get_the_image plugin then put something like this within your loop
<div class="imagewrap">
<div class="image">
<?php if ( function_exists( 'get_the_image' ) ) get_the_image(); ?>
</div>
<div class="copy">
<h3><?php the_title(); ?></h3>
<?php the_excerpt(); ?>
</div>
</div>
You're obviously going to have to look up how get_the_image works, but I think with all this you should be laughing!