I don't have a codepen to reproduce this cause it's more of a WordPress issue than a fullpage.js issue. I have a client that has a WP site and wants to integrate fullpage scrolling on their homepage. I have successfully integrated fullpage.js into it, and it works as expected (no plugins). My problem is that I cannot seem to find a way to include the footer. I have given it the "section" and "fp-auto-height" classes, as the documentation suggests, but it still isn't showing. I realized that the footer was outside the fullpage div I created, since fullpage.js is only for the front page, so I tried wrapping the <? get_footer(); ?> on the front page within the fullpage div, which actually wraps it in the DOM, and the additional styling/divs (that are automatically applied by fullpage.js) were applied to the footer section, however, it still wasn't showing. Essentially it looked like this:
<div id="fullpage">
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<? get_footer(); ?>
</div>
and within footer.php I have this:
<footer class="section fp-auto-height">
//content
</footer>
I realize this is difficult to diagnose without having a codepen to troubleshoot on, but any help/suggestions are appreciated.
Related
It seems like my theme has a "feature" that changes my normal page header when i set a default post-page. Every time I set a default page for the blog-posts (readings: set page for the posts-page), the theme changes that pages title, and replaces it with “Latest News” in the centre. It appears this might be a "feature" of my theme, peakshops, but their support has gone dark.
I can't find where this is located. I can see in a code inspector this thing looks like some sort of "archive-title" class... so I'm wondering if there are some css changes i can make to change the title from "latest news" to anything else. When i click on the inspector i shows me this:
<div class="archive-title search-title">
<div class="row align-left text-left">
<div class="small-12 medium-8 large-6 columns">
<h1>
Latest News</h1>
</div>
</div>
</div>
And maybe if anyone knows how to find where that is hidden, i can then change it! I’d welcome some help please! Thanks much 🙂
The page I need help with: https://www.byjgk.com/blog/
I am trying to setup the footer.html template part of my custom block theme for Wordpress.
The template part looks like this:
<footer>
<div class="footer__grid">
<div class="footer__left-space"></div>
<div class="footer_left-block"></div>
<div class="footer__widgets">
<!-- wp:group -->
<div class="wp-block-group"></div>
<!-- /wp:group -->
</div>
<div class="footer__right-section"></div>
</div>
</footer>
I would like to be able to insert blocks in the wp:group area, which should then be rendered inside of the footer__widgets element (see html above). The blocks I have set up for this particular wp:group section look like this:
As you can see in the image, it already gives me a This block has encountered an error and cannot be previewed.
Second, the html gets rendered as follows, outside of footer__widgets:
Main question:
How can I make sure the blocks from wp:group get rendered inside of the div.footer__widgets element?
Side question:
Am I doing wrong and/or misusing Wordpress' new Block Theme functionality, also with regards to the error message in the first image?
I can see lots of answers for this but not quite the right solutions..
Essentially i'm displaying numerous emails in a thread (looks like iMessage a bit) on a page. The messages are looped within a repeated element, with the HTML email displayed inside it.
I have no control over the HTML in the email content as it could be from anywhere.. the problem is that the HTML in the email is inheriting CSS styling from the page style sheets.. this is making it all look weird..
I can't overrule the CSS with a more specific CSS, as there could be any classes or id's coming in the email that match those in the main style sheet..
I've tried adding all:initial to the wrapper div like this:
div.sentMsgBody *{
all: initial !important;
}
This however seems to override any styles that comes with the email and so looks really naff..
Anyone got any ideas how to display the email content with its own HTML without taking on the main styles?
Thanks!!
Addition:
I've been asked to show my code, though that's quite tricky...
there's loops of a certain div in the page like this:
<div id="page">
<div class="sentMsgBody"></div>
<div class="sentMsgBody"></div>
<div class="sentMsgBody"></div>
</div>
Of course each loop of this div could have any HTML at all as its showing emails...
eg:
<div id="page">
<div class="sentMsgBody">
<div class="Header">My Email</div>
<div class="Main">This is my email body</div>
<div class="Footer">Email Footer</div>
</div>
<div class="sentMsgBody"> ... ... </div>
<div class="sentMsgBody"> ... ... </div>
</div>
Here the Header and Footer etc may take css from the main page...
I thought about iFrames but they are messy, i don't know how big the content will be for each one, are a bugger with being responsive too, and there could be dozens that have to be created dynamically from the content of each div that is loaded by ajax from a handler.
I've run into a small problem coding my own WP theme from scratch (with a static Home page and a separate Blog page). I can't change the font-color of my blog posts (that display after I click them). So I have a two-part question:
Why can't I get the_content to change color on my single.php page? Here's my code:
<?php
get_header();
the_post();
if ( has_post_thumbnail() ) {
the_post_thumbnail('large');
}
?>
<div class="white">
<div class="container">
<h2 class="black-text light" style="margin:0;">
<?php the_title();?>
</h2>
<h5 class="black-text" style="margin:0 0 7% 0;">
<?php the_author();?>
</h5>
<p class="black-text">
<?php the_content();?>
</p>
</div>
</div>
<?php
get_footer();
?>
What's happening is on my single.php page (which I'm using to design my individual blog posts), I've put 'the_title();' in an <h2>, 'the_author();' in an <h5>, and 'the_content();' in a <p>. I've also told each of those elements to show as black text. However, only the <h2> and <h5> change to black text. When I inspect it with Dev Tools, what's happening is WP is ignoring my hard-coded <p>, and creating new <p> of its own WITHOUT the black-font formatting.
My second question:
Am I even doing this right?? It displays fine on my local development, but am I doing this all in the correct way? Basically, I have a front-page.php that displays my Home Page. Then I have an index.php that shows the main blog page with small excerpts. Then, when a user clicks on a single blog post to open it, the individual post is shown with the single.php template. Is this right?
If a reference would help, you can see it here: www.uptowndownentertainment.com/blog
The code is missing from your post, you need to indent it with four spaces to make it show up. Looking at this page you seem to have added this before the content:
<p class="black-text" style="color:black !important;">
But the actual text is inside another paragraph element so it's not affected by that code. Wordpress automatically does this when writing posts. The easiest solution might be to add this to your style.css:
.container p {
color: black;
}
And then remove the style markup from the headers and paragraphs. It's always better to keep styles in the CSS instead of right in the code.
Ok, this is a beginner's question.
I have a main page with a header (with a menu), a right column and a footer. I want these elements to be always present on my site, only the container div to change upon clicking different links in the menu. Until now I have used iframes. Is there any other way to do this without iframes?
Thank you!
Yes of course. But not with only HTML.
If you are using php it is common to do something of the sort:
inc/header.php:
<html>
<head>
...
</head>
<body>
<header>
...
</header>
<div id="content">
inc/footer.php:
</div>
<footer>
...
</footer>
</body>
</html>
index.php:
<?php
include('inc/header.php');
?>
<h1>Hello World!</h1>
<?php
include('inc/footer.php');
?>
Yes but it depends on what language you are using.
iFrames are a bad way to do this since your pages won't be indexed properly by search engines. People will arrive on you iframe page and miss the context of your header and menu.
If you are using PHP you can create includes for the header, footer and right column as separate files. So your page might look something like this:
<?php
include 'header.php';
?>
<p>Page content here</p>
<?php
include 'right_column.php';
include 'footer.php';
?>