-
Posts
-
Hi Guys, I am trying to achieve this design: https://dl.dropboxusercontent.com/u/780434/School-Blog-List-V1.jpg
I am okay with the looping of the posts below etc but I am struggling with the header.
I actually want to do a similar design for most pages but I am a little lost of which files to edit with regards to the header.
Hope you can point me in the right direction. Thanks.
Hi there,
Not entirely sure which part you are trying to achieve, The green area or header of blog posts? Please clarify.
Also provide us with URL.Thanks.
What files should I edit to change the header like the design sent? I am using renew and there are so many options for which file to edit I am not sure where to start.
I do not have a live link yet as I am using local host for now.
Just need a point in the right direction. If you was going to make the blog list page like this where would you start?
Hi there,
Thanks for writing in!
First off, because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.
After that, the files responsible for the layout of header (only this part: http://prntscr.com/6kre0b) in X are located under wp-content/themes/x/framework/views/global/ directory. So, you may want to copy
_navbar.php,_brand.phpand_nav-primary.phpin your child theme’s folder /framework/views/global/. Then you can make your desired changes to these files.For the banner in your design (i.e., BLOG….), you could use our below masthead slider. For detailed instructions, watch our video walkthrough on sliders.
Hope this helps. 🙂
Thank you.
Hiya,
Thank you for your suggestions.
I have indeed created a child theme and I had been playing with the _brand.php and nav.
The only way I could do it is have the elements below the nav move up behind the nav..but that then caused an issue when in mobile so I made the relevant code within a Media Query
/* allows the nav to be on top of top image */
@media only screen and (min-width : 800px){
.masthead {
position: absolute;
width: 100%;
}.x-navbar .desktop .x-nav > li > a {
color: #9E9494;
text-transform: none;
}.x-navbar {
background-color: transparent !important;
}}
Seemed to work but this is not ver elegant
I wil take a look at the customisation best practices.
To be honest I feel like I am fighting with your theme more than working with it so i was just reaching out to your support before throwing in the towel and the $60 I paid for your theme and just starting from scratch.
Hey there,
Can you give us more details about “this is not ver elegant”? X give pre-designed templates however, if you need to customize it, you will need knowledge of HTML, CSS and learn the structure of X and especially our Customization Best Practices. X would be easy to modify after that. It would be much harder if you’re starting from scratch unless your design is really unique and outside of a standard website which is not good for marketing purposes which X is originally built for.
The header that you want does not need template modification. Sorry for the confusion about that. It can be achieved by setting up a Single Slide – Slider Below the Masthead and some CSS tweaks. To set a slider below the masthead, your blog must be a page that is set as Post Page in Settings > Reading like our demo. Please set it up and we’ll help you with the CSS.
Thanks.
Thank you for the reply.
I am a web design instructor so I am happy with PHP, JS, CSS and of course HTML. I have built my own themes before on the Reverie framework and you are right it was a lot of work.
Creating a slider per post is not a great idea sorry, nor is it manageable. The best way, in my opinion, would be using ACF for the big header in the background but I dont get which file to edit.
Even removing the side bar is confusing me which file to go into. Id love to see a single.php that I can change but in your single PHP is more files to follow.
I understand the need and benefit of modularity but I am lost and running out of patience to try.
In addition: what would be really nice is a infographic of how your pages are built from what files and where to find them. “want to change this, then go here” etc.
🙂
http://www.agencyclients.com/wcb/blog/hello-world/
wanting to achieve
https://dl.dropboxusercontent.com/u/780434/School-Blog-Single-V1.jpg
What file, for Renew, would I change to remove the sidebar in the child theme you provide in the download?
What file would I change to achieve the header? If this is custom then you are welcome to ignore my request.
Hi there,
There is no need to modify any file to remove the sidebar. You can simply disable it by selecting Fullwidth under Blog > Layout in the Customizer (Appearance > Customize).
In regards to the banner, we cannot provide you with the customization of it as it’s a custom development and will fall outside the scope of support we can offer. However, I’ll be happy to guide you in the right direction with the understanding that it would ultimately be your responsibility to take it from here.
So, you can copy the file wp-content/themes/x/framework/views/renew/wp-header.php in your child theme’s folder /framework/views/renew and modify this file to create your custom banner.
In X all non-existing templates will redirect to index.php. So, no matter which page it is, e.g., blog (archive, tags, category, search, and much more ), it will use index.php.
If you want to create your own templates, you can always follow WordPress Template Hierarchy. This post should help you understanding this in details: https://theme.co/x/member/forums/topic/archive-integrity-page-customize/#post-233376
Hope this helps. 🙂
Thank you.
