I haven't been working with Visual Composer for ages. So my problem is I don't even know how to set up my page.php properly.
I am creating from scratch. I have Bootstrap included and the newest version of Visual Composer installed in my wordpress. I want to have this option:
https://www.youtube.com/watch?v=rkDYWXwQIJg
As for now my content is always fullwidth. I want my content to be in boxed view but have the option to stretch the rows like in the video. My page.php so far looks like this:
<?php
define('THEME_TEMPLATE', TRUE);
define('IS_FULLWIDTH', TRUE);
get_header();?>
<div id="contentarea">
<?php while (have_posts()) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
</div>
<?php get_footer();?>
So I would appreciate your help. How should my page.php look like if I want to achieve the look of the video. Thanks in advance.
If I'm getting you correctly you want to achieve the stretch row facility of Visual Composer.
In that case your contenarea div should have the boxed width in css -
#contentarea {
width: 1170px;
overflow: visible;
}
Also the contentarea's overflow should be visible since Visual Composer used to overflow the div when in full width.
I hope this helps.
Related
Hello I m using Polylang and this php code to switch my slider (I did with Smart Slider) to english-french. I don't know anything about PHP but I got it on a forum. It was working perfectly until yesterday.
http://www.chooseyourtelescope.com/
<?php
$currentlang = get_bloginfo('language');
if($currentlang=="fr_FR"):
?>
<div>
<?php
echo do_shortcode('[smartslider3 slider=6]');
?>
</div>
<?php else: ?>
<div>
<?php
echo do_shortcode('[smartslider3 slider=4]');
?>
</div>
<?php endif; ?>
Now it stays in english. I dont think the problem is coming from Smart Slider. I tried to deactivate the other plugins and to restore the previous theme and Polylang versions but nothing changed.
BTW my site is responsive and the slider is not displaying under 800px width. So you can't see the problem on mobile for example.
Instead of doing it with php I resolved the problem with css: I put both english and french sliders in my header template with different classes and "display:none" the slider I don't want for each frontpage:
.page-id-94 .smartslider-en {
display:none;
}
.page-id-7386 .smartslider-fr {
display:none;
}
Please answer if you find a solution with php only.
Here s the solution :
<?php if(get_locale() == 'fr_FR') : ?>
Actually the "get_bloginfo('language')" function stopped working since I upgraded to WordPress 4.6 and to Polylang 2.0.3.
I'm working on a website for a friend, everything goes well so far, but there's one little thing I can't seem to figure out.
I have included SmartSlider 2, which I want to hide on mobile devices. But since SS2 doesn't natively support this I tried by editing the code. Long story short, it won't work.
I've tried including the CSS in the file itself (header.php) :
<div class="slider" style="#media(max-width:1120px;){.slider {display:none;}}">
<?php echo do_shortcode('[smartslider2 slider="2"]'); ?>
</div>
For some reason, it still shows up, hopefully you guys can help me out. Thanks in advance.
It will not work like you are trying.
you have to put this in custom css
#media screen and (max-width: 1120px) {
.slider {
display:none;
}
}
and remove from here
<div class="slider">
<?php echo do_shortcode('[smartslider2 slider="2"]'); ?>
</div>
and in media query CSS you have ; here #media(max-width:1120px; it's wrong
Fiddle
My friend has asked me to help them move images around on their wordpress site. They have an image slideshow that runs along the bottom of the page and the image gallery that shows, depends on the page template used.
One template has the following code:
<?php
$tagu = get_post_meta($post->ID,'bototm_gallery');
?>
<div class="flt box_bottom">
<ul style="margin-left:10px !important; width:100% !important;" class="sub_photo sub_photo_gigs" class="sub_photo">
<?php echo do_shortcode($tagu['0']); ?>
</ul>`
and another page template shows this code:
<?php $tagu = get_post_meta($post->ID,'bototm_gallery'); ?>
<div class="flt box_bottom">
<div class="sv_footer_photo">
<?php echo do_shortcode($tagu['0']); ?>
</div>`
How do I add images to a specific gallery? I can't find a gallery id in the media library and/or I don't know where to find the class such as sv_footer_photo or sub_photo.
Could you please explain it to me?
Oh Wow, I've found it and sure enough it was simple.
I had to click on 'Screen Options' at the top of the page, tick the box for custom fields and then I can see the gallery image ids assigned to that page.
The website is http://www.mercuriusresearch.co.uk which runs on Wordpress and based on Bootstrap.
The error shows when you resize the screen below 768px, all the post title links stop working. The actual HTML is still showing the href but the post titles just behave like normal text.
The error is displaying across the website (i.e. on all post title links) but only on those sections of the page that are taking links from Wordpress. For example, the sidebar links on my homepage work on all screen sizes.
I haven't had this problem before. My suspicion, based on the previous paragraph, is that it relates to Wordpress somehow...but I am using the same code that I always use to bring in the titles from Wordpress. So that, and the fact that the error appears to relate to the size of the screen, leads me to think that Bootstrap is somehow related too.
Any help would be much appreciated.
The only code that isn't on the website is this, which is the Wordpress loop:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="post-date">
<?php k99_relative_time(); ?>
</div>
<div class="post-title">
<?php the_title( sprintf( '<h3 class="entry-title">', esc_url( get_permalink() ) ), '</h3>' ); ?>
</div>
<div class="post-excerpt">
<?php the_excerpt(); ?>
</div>
<div class="read-more">
Read more →
</div>
</article>
As I say though, this is working on larger screen sizes and if there was something wrong with this section, it obviously would occur on all screen sizes. All the other code is there on the website (obviously, I am not sure what part exactly is relevant, or I wouldn't I have this problem).
For a quick solution, you can write CSS using media query for devices below 768px and your links will work fine.
#latest-news-front,
#stock-ideas-front {
position: relative;
z-index: 10;
}
There is a div that covers all of the other divs you use.
If you look in your element inspector you can see the div.
You can float the sidebar-front div, but there is a change that other divs will behave different.
aside#sidebar-front {
float: left;
}
or clear every div by using the following code at the end of each one.
clear: both;
So I've been trying desperately to get my page title to overlay in the center of the header image, both horizontally and vertically, on my portfolio pages (here's a page with a longer title). I finally found a way to get the h1 title where I want it, but now I want to make it larger. However, when I currently resize the window to certain widths, the title doesn't wrap, it just disappears when it gets to long for the window. Would you mind taking a look and see if there would be a fix for this? I'm thinking that I'm using the wrong display tag somewhere along the line, but I'm not the best coder.
Here is the php for the header image and title (you can ignore the title that is black as I will get rid of that once I figure this one out). I think you should be able to see the rest of the html and css, but if I can provide anything else that may help with figuring this out, please let me know what that might be.
<?php get_header(); ?>
<div id="middle" class="clearfix">
<?php // Get the header image
$hi = getHeaderImage();
if($hi) :
?>
<div id="pageHeadImage" class="" >
<div class="inside" style="<?php echo 'background-image: url('.$hi.');' ?>">
<div id="projectTitleDiv">
<span class="aligner"></span>
<h1 class="projectTitle"><?php the_title(); ?></h1>
</div>
</div>
</div>
<?php endif;?>
Your div.aligner is causing the issue - it pushes the h1 out of the div. Remove div.aligner and use the following CSS to vertically centre #projectTitleDiv:
#projectTitleDiv {
position:relative;
top:50%;
transform:translateY(-50%);
}