Community Forums › Forums › Archived Forums › General Discussion › Styling content after the front page
Tagged: new pages
- This topic has 21 replies, 2 voices, and was last updated 8 years, 1 month ago by Doug Edgington.
-
AuthorPosts
-
March 7, 2016 at 10:01 am #180809ChrisrxMember
Hi All
Hope you guys can help,
I have developed a few genesis websites, at basic level, and have always struggled when designing/ adding content to any pages that are not the front page. Due to them not using widgets, could some advise how they best implement additional pages from the front page. Do you need to fully customise the php page?, do you need to apply widgets to the pages or can it all be styled in wordpress text editor.
Really struggling so any help would be appreciated.
Regards
Chris
http://www.roxhar.comMarch 7, 2016 at 8:26 pm #180867Doug EdgingtonMemberYou wouldn't want to setup the inner pages using a sidebar driven layout like the home page. You would end up having an overwhelming amount of sidebars. If you need to achieve some type of special design on the inner pages, you could use something like Advanced Custom Fields to output additional sections on the inner pages; examples might be sections before and/or after the content that comes from the editor.
Depending on what you are trying to do on the inner pages, a page builder like Beaver Builder may work.
Doug Edgington
http://www.dougedgington.comMarch 8, 2016 at 8:09 am #180904ChrisrxMemberThank you doug, i have replicated the homepage widget section at the moment, and looking to alter the styling, i have run into a few issue's tho, the main image is acting strange - when scrolling it moves up as with the text also, i have also noticed if you scroll up quick enough the whole image is the background from the page, would you be able to take a look at http://www.roxhar.com/websites and shed any light on the issue and how to resolve.
Many thanks in advance.
Regards
Chris
March 8, 2016 at 10:04 am #180914Doug EdgingtonMemberI am not sure what you are referring to. I am not seeing any issues. Have you tried comparing it to the Digital Pro demo to see if it is acting the same way?
Doug Edgington
http://www.dougedgington.comMarch 8, 2016 at 11:06 am #180922ChrisrxMemberHi Doug,
Yes compared CSS and PHP, it is the image, so on the front page it is fine the image is fixed when you scroll down, but when you scroll down on the website page the text moves up and the next section move up and above the image instead of the image moving up with the scroll.
It is hard to explain, but you should be able to see it if you compare the first home page and second page.
Regards
Chris
March 8, 2016 at 1:31 pm #180928Doug EdgingtonMemberYou are using a back stretch setup for this section. On the home page it is included within the front-page-1 div. So on your custom setup it should be added to the website-page-1 div. Instead, it is added at just before the closing of the body tag.
Within your js folder, backstretch-set.js is likely what is responsible for adding the setup to the front-page-1 div on the home page. So you would need to replicate this for your new website-page-1 div.
Doug Edgington
http://www.dougedgington.comMarch 9, 2016 at 3:43 am #180987ChrisrxMemberThank you Doug, that absolutely resolved the issue, amazing,
Can i ask how i would set the background of the page to only be a colour when scrolled to much, so on homepage when scrolling the the top or bottom of the page you get a grey colour background, but on the website page the image is still visible and not a background colour.
Again thank you for your help, would not resolved this on my own.
Regards
Chris
March 9, 2016 at 4:15 pm #181055Doug EdgingtonMemberThe backstretch still looks like it is being added directly before the closing body tag rather than within the website-page-1 div. Check your javascript.
Not sure what you mean by scrolling too far, unless you are talking about how the top section and below footer sections flex when you force the browser scroll up or down further than intended. If so, I see this in Safari but not FireFox. Browsers act differently. If you fix what I mentioned above, this should make it look like the home page. Your backstretch is being added to the whole page rather than the website-page-1 div.
Doug Edgington
http://www.dougedgington.comMarch 10, 2016 at 9:40 am #181111ChrisrxMemberHi Doug
I have added a website-page.js file and looking over my css and php in the page template there does not seem to be any difference in the code, and when the backstretch is added this is not added to a div only referenced against that div which i have done. I can not see where the issue lies, could you check and see if the changes have made any alterations. If it is helpful i could post my code via pastebin.
March 10, 2016 at 10:52 am #181119Doug EdgingtonMemberI am assuming that you created some type of template for the inner pages that is based off of the original front-page.php.
You would need to update the "Enqueue scripts for backstretch" section accordingly.
For instance the wp_localize_script function would now need to reference your new backstretch set rather than digital-backstretch-set. And the new backstretch set js file would now have to reference web-page-1 rather than front-page-1.
Doug Edgington
http://www.dougedgington.comMarch 10, 2016 at 11:14 am #181122ChrisrxMemberOK Doug
Yes i created a new template and added my new page references, would you be able to give an example of new backstretch set as i can not see where the digital-backstretch-set file is within the theme.
Thank you for your help so far.
Regards
Chris
March 10, 2016 at 11:35 am #181124Doug EdgingtonMemberWithin the front-page.php file it would be the digital_front_page_enqueue_scripts function on line 37.
You can reuse most of the js, but the backstretch-set.js would need be to be unique to the new inner page (website-page-1) in order to place it into the correct div.
Doug Edgington
http://www.dougedgington.comMarch 11, 2016 at 2:37 am #181190ChrisrxMemberHI Doug,
I have changed a few thing around but still can not get this to work, here is the link to the code for the template file, would you be able to advise on what need changing and if i need to amend any other files.
Help is really appreciated.
Regards
Chris
March 11, 2016 at 3:19 am #181191Doug EdgingtonMemberIt is still referencing the original backstretch-set.js file, which is what adds the backstretch to front-page-1 on the front page. You need to add the backstretch to your new page template in the website-page-1 div.
/* Front page version */ $(".front-page-1").backstretch([BackStretchImg.src]);
/* What the Website Page 1 version should look like */ $(".website-page-1").backstretch([BackStretchImg.src]);
Doug Edgington
http://www.dougedgington.comMarch 11, 2016 at 9:05 am #181213ChrisrxMemberHi Doug
Currently on the template i showed you the script that similar to above is
wp_localize_script( 'digital-backstretch-set', 'BackStretchImg', array( 'src' => str_replace( 'http:', '', $image
this is taken from the front page template and does not reference the front page only the 'digital' where am i altering the code as the above is not in the original template.
Regards
Chris
March 11, 2016 at 9:08 am #181214ChrisrxMemberAlso to add Doug
the backstretch-set.js looks like this
jQuery(document).ready(function($) {
$(".front-page-1").backstretch([BackStretchImg.src]);
$(".website-page-1").backstretch([BackStretchImg.src]);});
I added the website-page-1 line and the front-page-1 was already in there.
Hope this helps.
Regards
Chris
March 11, 2016 at 12:50 pm #181221Doug EdgingtonMemberBasically, since you are replicating the functionality from the front page to an inner page, you are going to have to ensure that everything you need is in place. Even if you are referencing the same files, you still need to check those files to make sure no code within the files need edited. For instance, backstretch-set.js contains code that is intended for the front page only.
Sorry, I wrote this before seeing your last post - it was on a second page. I will look at the info again.
Doug Edgington
http://www.dougedgington.comMarch 11, 2016 at 1:01 pm #181223Doug EdgingtonMemberI am not a JS coder. But within your backstretch-set.js file you are using BackStretchImg twice. You will likely need to create a custom name for the second one and update wp_localize_script function accordingly within your new template.
Doug Edgington
http://www.dougedgington.comMarch 12, 2016 at 8:35 am #181267ChrisrxMemberHi Doug
Thank you have gave a custom name to the backstretch and that now have removed the image completely.
Apologies if i'm missing something simple, with your help i know i am close to resolving this, so an amazing thank you for your help so far.
Just need to find out why the image is now not displaying.
Regards
Chris
March 12, 2016 at 11:14 am #181270Doug EdgingtonMemberIf you added a new name to your new line of code within the backstretch-set.js. Then you also need to update it in the wp_local_script function in your template.
//* you would need to update the name of BackStretchImg in the following line of code within your new template wp_localize_script( 'digital-backstretch-set', 'BackStretchImg', array( 'src' => str_replace( 'http:', '', $image ) ) );
If this doesn't work, you may need to create a separate backstretch-set.js all together to keep is separate from the original (i.e. backstretch-set2.js). And only include your new line of code. And reference the new file like the original file is referenced in front-page.php.
I am only telling you what I think the issue is. I have no way of testing this code, since you have a custom setup your are trying to implement. You will have to experiment until you get it working.
Doug Edgington
http://www.dougedgington.com -
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.