Hi,
How can we style the blog page or any other pages thats coming from wordpress?
2 Likes
Hello @aeyzazkhan, once you have a Frontity site up and running. I have found the best way to style the website is the run
npx frontity dev
This will spin up a server where you can see any changes you make. From there, Frontity recommends using CSS-in-JS for styling your website. You can find more information on best practices at this link: https://docs.frontity.org/learning-frontity/styles
I hope that helps. Someone from the project may have additional information that may help you. Best of luck building with Frontity 
4 Likes
Thanks for answer @ShaGui but where to apply those styles for pages coming from Wordpress, For Example there is this Blog page coming from wordpress and handled by post.js and if i apply styles it will possibly apply to all the pages that post.js handle.
If I understand correctly, you want styles that will only affect that page? If that is the case, once the page is created as outlined here in another of your posts: How to create Custom Pages?. You can simply add the styles to that page.js or whatever file you created for that custom page. To add styles to that custom page, you simply need to follow the link I provided in my previous post which explains CSS-in-JS. That being said, it typically would look something like this:
const CustomTag = styled.div`
background-color: black;
`;
That being said, obviously this is a very simple example, but hopefully it will help
Also as I had forgotten, you will need to import like this:
import { connect, styled } from "frontity";
- edited to add the import.
const Theme = ({ state }) => {
const data = state.source.get(state.router.link);
return (
<>
<Head>
<title>{state.frontity.title}</title>
<meta name="description" content={state.frontity.description} />
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
/>
<html lang="en" />
</Head>
<Global styles={globalStyles} />
<HeadContainer>
<Header />
</HeadContainer>
<Body>
{data.isFetching && <Loading />}
{data.isHome && <Home/>}
{data.isSignUp && <SignUp/>}
{data.isSignIn && <SignIn/>}
{data.isPricing && <Pricing/>}
{data.isAboutUs && <AboutUs/>}
{data.isDashboard && <Dashboard/>}
{data.isCheckout && <Checkout/>}
{data.isArchive && <List />}
{data.isPostType && <Post />}
{data.is404 && <Page404 />}
</Body>
</>
);
};
In the above code, See Post Component, how can this be styled differently for different pages.
@aeyzazkhan I am not sure I understand. Are you trying to have different styles for every blog post or simply for different pages?
If you want to have different styles for every page like the Sign up page and the Sign In page then that can be done as shown above.
If you are trying to have different styles for every blog post. I would have to say that I am unsure of why you would want to do so? I am also unsure of how it might be done. One of the developers may be more useful in answering that question.
@ShaGui May be we are not understanding each other. Lets make it simple.
How is every page handled from wordpress, How the data is shown on frontend?
P.S i am not talking about Custom Pages. I am talking about the pages that i create in wordpress backend.
@aeyzazkhan So all website data is taken from the Wordpress REST API as stated here: https://docs.frontity.org/getting-started/installation-requirements#the-wordpress-rest-api.
That being said, the REST API handbook can be found here: https://developer.wordpress.org/rest-api/
It is a great resource if you want to understand more of what the REST API is capable of.
Another resource is this: https://docs.frontity.org/api-reference-1/wordpress-source#api-reference.
It highlights some of the API references and how they are made in wp-source.
Hopefully that may help you, as honestly, I am still learning the framework and I am only starting to understand some of the mechanics. You may get a more thorough answer from someone like @luisherranz
Yes, @ShaGui is right, all the styling of a Frontity app can be done with styled because everything is a React component. Except one case: post.content.rendered, post.excerpt.rendered and post.title.rendered.
Those are different because they are HTML strings coming from the REST API, they are not React components. If that’s what you meant, @aeyzazkhan, you are totally right. We need to add specific documentation for those cases.
If you take a look at mars-theme’s Post component, you can see something like this (simplified):
const Post = ({ state, actions, libraries }) => {
const data = state.source.get(state.router.link);
const post = state.source[data.type][data.id];
const Html2React = libraries.html2react.Component;
return data.isReady ? (
<>
<Title dangerouslySetInnerHTML={{ __html: post.title.rendered }} />
<Content>
<Html2React html={post.content.rendered} />
</Content>
</>
) : null;
};
const Title = styled.h1`
margin-bottom: 8px;
color: rgba(12, 17, 43);
`;
const Content = styled.div`
color: rgba(12, 17, 43, 0.8);
word-break: break-word;
`;
export default connect(Post);
There are two ways to insert HTML in React.
- The first one is
dangerouslySetInnerHTML, used here for the title:post.title.rendered. - The second one is to use Frontity’s
html2reactpackage.
And there are two ways to style the HTML those fields:
- Use the parent React component (
<Title>or<Content>in this example) to target children HTML tags with nested selectors:
const Title = styled.div`
span {
font-weight: 400;
}
`
const Content = styled.div`
color: rgba(12, 17, 43, 0.8);
word-break: break-word;
* {
max-width: 100%;
}
p {
line-height: 1.6em;
}
a {
color: rgb(31, 56, 197);
text-decoration: underline;
}
/* WordPress Core Align Classes */
@media (min-width: 420px) {
img.aligncenter,
img.alignleft,
img.alignright {
width: auto;
}
.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignright {
float: right;
margin-left: 24px;
}
.alignleft {
float: left;
margin-right: 24px;
}
}
`;
- Use
html2reactto process certain HTML tags as React components, and style those:
const Paragraph = styled.p`
line-height: 1.6em;
`
const Anchor = styled.a`
color: rgb(31, 56, 197);
text-decoration: underline;
`
// Create one processor for each HTML tag you want to modify.
const paragraph = {
test: node => node.component === "p" ,
process: node => {
node.component = Paragraph;
return node;
}
};
const anchor = {
test: node => node.component === "a" ,
process: node => {
node.component = Anchor;
return node;
}
};
// Add the processors to your `actions.theme.init` function:
const marsTheme = {
...
actions: {
theme: {
init: ({ libraries }) => {
libraries.html2react.processors.push(paragraph);
libraries.html2react.processors.push(anchor);
}
}
}
};
The second way is more complex, but it is also much more powerful because with html2react you can do much more than styling: you can also modify attributes and turn any HTML in a full-fledged React component.
2 Likes
Regarding this, I made it work but now sure if it is a good practice.
Could we create variables for styling each page and pass it to the <Post /> component through <Global /> depending on state.router.link @luisherranz?
An example of what I mean. Imagine I want the “About-us” page to have a pink background, my “Contact-us” page to have a green background, but the posts remain with white background.
import { connect, styled, Global, css } from "frontity";
const aboutUsStyles = css`
body {
background-color: pink;
}
`;
const contactUsStyles = css`
body {
background-color: green;
}
`;
const Post = ({ state, actions, libraries }) => {
...
return(
<Container>
{state.router.link === "/about-us/" && <Global styles={aboutUsStyles} />}
{state.router.link === "/contact-us/" && <Global styles={contactUsStyles} />}
...
</Container>
)
}
1 Like