Its driving me crazy as im not code whiz, using a template 'submate' im trying to add a right sidebar on a child theme vantage
<?php
/**
* This template displays full width pages with a page title.
*
* #package vantage
* #since vantage 1.0
* #license GPL 2.0
*
* Template Name: submate
*/
get_header(); ?>
<?php
//get the sidebar
$avia_config['currently_viewing'] = 'page';
if(is_front_page()) { $avia_config['currently_viewing'] = 'frontpage'; }
get_sidebar();
?>
<div class="breadcrumbs">
<?php if(function_exists('bcn_display'))
{
bcn_display();
}?>
</div>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php endwhile; // end of the loop. ?>
<?php get_footer(); ?>
The link for it is; http://www.seasonalharvest.co.uk/recipes/february/
Many thanks for any help :)
Your html structure for article is very bad. You have wrapped your article element within strong element this doesn't make sense as it use for make the text bolder.
Anyway you can add this tiny snippet to your wp-content/themes/your-theme/style.css
article[class*="post"] { /* only post articles */
float: left;
width: 65%;
}
Edit
For specific page only:
.page-id-231 article[class*="post"] { /* only post articles */
float: left;
width: 65%;
}
Try this...
<style type="text/css">
article#post-231 {
float: left;
width: 65%;
}
</style>
Related
How Can I delete html tags in excerpts posts on homepage https://ptbo.edu.pl/ ?
I mean only HOMEPAGE (not in categories) because I'm changing this manually in posts editor.
My code looks now:
<?php if ( allium_has_excerpt() ) : ?>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<?php endif; ?>
I want to make changes only on the home page
My solution would be to leave the HTML tags but add this CSS to make them unnoticeable:
.home .entry-summary a {
pointer-events: none;
color: #3d3d3d;
}
.home .entry-summary strong {
font-weight: normal;
}
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.
I want to make the header of this WordPress page taller. I found advice here that I should use the following code in the homepage template CSS file:
.full-container {
min-height: 390px;
}
The CSS file looks like this:
<?php
/**
* The template for displaying the home page panel. Requires SiteOrigin page builder plugin.
*
* Template Name: Page Builder Home
*
* #package vantage
* #since vantage 1.0
* #see http://siteorigin.com/page-builder/
* #license GPL 2.0
*/
get_header();
?>
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<div class="entry-content">
<?php
if ( is_page() ) {
the_post();
the_content();
}
else if( function_exists('siteorigin_panels_render') ) echo siteorigin_panels_render('home');
else echo siteorigin_panels_lite_home_render();
?>
</div>
</div><!-- #content .site-content -->
</div><!-- #primary .content-area -->
Where must I put the suggested code in?
In a Child Theme or wp-content/themes/vantage/style.css
The code you showed there as the CSS style is not the style at all, thats a costum page template named "Page Builder Home".
You should open style.css which is found directly on the theme folder. At the very end of style.css add the lines of css:
.full-container {
min-height: 390px;
}
If you dont know how to difference css files from php/html files then you definitely are in the wrong business and you should let the work be done by the pro-s.
having said that, hope my "solution" works for you.
How I can make a right sidebar for a wordpress theme and integrate with advanced search like the concept below:
sidebar.php
<?php
/**
* The sidebar containing the main widget area.
*
* #link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* #package custom
*/
if ( ! is_active_sidebar( 'sidebar-1' ) ) {
return;
}
?>
<div id="secondary" class="widget-area" role="complementary">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</div><!-- #secondary -->
<?php if ( is_active_sidebar( 'sidebar-2' ) ) : ?>
<div id="tertiary" class="widget-area" role="supplementary">
<?php dynamic_sidebar( 'sidebar-2' ); ?>
</div><!-- #secondary .widget-area -->
<?php endif; ?>
style.css for sidebar
#secondary { /* left Sidebar */
width: 18rem;
margin-left: -67rem;
float: left;
position: relative;
}
#tertiary { /* right Sidebar */
width: 18rem;
margin-right: -23rem;
float: right;
position: relative;
}
How I can achieve it in an easy way?
Have a look at the WordPress Codex for information about customizing the sidebar. This page has a lot of information on it about the sidebar: https://codex.wordpress.org/Customizing_Your_Sidebar
If you are asking how to get a menu to expand from the side of the screen, there are many different CSS/JavaScript implementations, but perhaps something like this jQuery Slick Plugin might help: http://www.designchemical.com/lab/jquery-slick-plugin/examples/
If you are asking how to create the custom search functionality, then that is going to be very dependant on the plugins you are using and what you are searching for. This article does give a good overview of getting started with customised search capabilities and custom search forms in WordPress: https://premium.wpmudev.org/blog/build-your-own-custom-wordpress-search/
If you already have your sidebar.php set up in your template file where you want it; it could be index.php,single.php,page.php or whatever
I see two ways of doing it
1 - Install some fancy search plugin and add it your sidebar using Dashboard - Appearance - Widgets area
2 - In your Widget area you can add Html content where you will have your search form OR hardcode it in your sidebar.php OR create search-form.php(where you will have your form) and include it in your sibedar.php or directly to the template file using get_template_part()
here are some useful links:
https://codex.wordpress.org/Function_Reference/get_search_form
https://codex.wordpress.org/Function_Reference/get_template_part
I have made a static blank page that also shows my website's header/sidebar/footer in it. Now what i am trying to do is get rid of the 'style' that my wordpress template css is forcing me to have on the page i am trying to create.
Here is my code:
<?php
/*
* Template Name: My own page!
* Description: I made a page!
*/
require (dirname(dirname( __FILE__ )).'/wp-load.php');
get_header(); ?>
<div id="main-content" class="main-content">
<?php
if ( is_front_page() && twentyfourteen_has_featured_posts() ) {
// Include the featured content template.
get_template_part( 'featured-content' );
}
?>
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<!-- MY CONTENT!!! -->
Hello2.
<h1> hello.</h1>
<p>hello</p>
<input type="submit" name="connect" value="CONNECT" style="height:52px ; width:136px"/>
<p>hi</p>
<!-- -->
</div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar( 'content' ); ?>
</div><!-- #main-content -->
<?php
get_sidebar();
get_footer();
Any help appreciated.
You will need to overwrite the styles which are already in the theme. For example, you can give an id to your submit button like <input type="submit" name="connect" value="CONNECT" id="submitbutton"> and then style it according to your needs using CSS, for example:
input#submitbutton {
height: 52px;
width: 136px;
background: blue;
color: white;
}
Same goes for the <h1> tags. Give an <id> to your <h1> tag like <h1 id="hello"> hello.</h1> and then style it according to your needs using CSS, for example:
h1#hello {
color: black;
font-weight: bold;
font-size: 20px;
}
Use of Developer Tools over here will help you quite a lot in order to see how an element would look with your desired styles before actually making any changes to its CSS.
you will need to use something like
get_header('custom-header');
And use a custom header file to only load the stuff you want. You may need to create a custom function to override the scripts included by the theme...