Fixing Angular 4 layout - css

I am building a small application but this is my problem, I have a landing page with a search box in the middle, this page has a footer. All this page does is query something then navigate to a listing page. In the listing page I do not need the footer anymore, but later other screen may use it. My problem i have been having so far is that if my landing page with the search bar has a background image for the body, i have to do some monkey business in my listing page to remove it as well as the footer.
Is there a way I could have a page in Angular 4, say my index.html where this has a component (other than the <app-root>), this component will have all the head and html needed for that landing page but then when i navigate to the listing one , i want to have a different body and then here add the <app-root>
but then i am not sure how my routing will work.
It comes down to be able to apply css to my body from anywhere in the app without having to do monkey business from the child components to add classes or remove them.
Bear with me, i am new to Angular4 and i am paying the price.

Related

Track what a user has seen/scrolled on a single page website?

I read through all the other questions/answers I could find. Most solutions were quite old already and given that most websites nowadays are single page sites I am hoping there's an easier solution today?
I have a single page website i.e. home, banner, services, team, contact all on the same page with links at the top to scroll using href # to the section on the page.
Since all content is on one page, Google Analytcs only tracks the page as a whole. Is there an easy way to track whether a visitor has scrolled down to a specific section (website is a simple Bootstrap site) and/or clicked on a menu item to scroll down?
You can set a Virtual Pageview based on visibility element. Each section has a div, by assigning an ID to each section you can send a pageview as soon as the ID appears in the screen.
Depend on how your SPA works youca use History change trigger: https://support.google.com/tagmanager/answer/7679322?hl=en&dark=0

WordPress CSS does not persist throughout the site

I'm working on a clients site in WordPress using the Calafate theme. The client needs the carousel images to each link to a certain blog post on the site. The only problem is that the theme creates two large divs that cover the carousel. So with CSS I create some extra space and give the images a link. The only problem here is that when a user goes to another page on the site, it's as if the CSS just reverts back to the original before I even touched it, and now the two divs blocking the carousel is back. I've never experienced this before so I have no clue where to start.
Client site: https://idapostle.com/
Problem
Home page CSS does not persist throughout users time on site. But if user refreshes the site, correct CSS returns.

WordPress: Not displaying changes of updated pages

I have update a page in my wordpress site using web admin back end, but what I see is that even if I update a page, it does not get updated online. Moreover, some of the content of the page which I see online /live are not actually texted in the area where we put the content.
On the right side navigator, in the page attribute area Parent has been set to No Parent, template --> Home Page.
Can you please let me know what could be the possible reason why the live content of the page is different from what I can see in the actual text area through web admin panel?
Also updating a page does not reflects on the page as well for that particular page.
First make sure you are editing the right page. Click in the frontend adminbar on edit instead of navigating in the backend through the pages list.
Secondly it can be any caching related issue. Check out if there are any plugins or settings for this.
Areas that are on the page but not editable via the content can be widgets or any kind of theme builder stuff. Check in the backend design->widgets.
The page hierarchy (parent: no parent) can be differ from the actually website navigation. Check out design->menus. It is possible to build other hierarchies in the menus.

How to make a complete page with links and images in css

I would like to make a template in css of a complete page, together with links and images, so that I can just change the nav bar of the template once only, and have it change on every page. I have searched for weeks and can't find out how to do this. I would like to rewrite my whole website using just this one template, because each time I want to add or change a link, I must go into all 200 pages...

Show the same divs on different pages in ASP.net

I have, for example, 3 different pages. All pages should have a menu div, a logo div and a footer div. All divs should be the same on every page.
Is there any way to develop only one page and when I make a change on that page, this change should appear on every other page, in ASP.NET?
You can use Master Pages. As well as that MSDN page, you can view more tutorials on the official ASP.NET site.
If you use a master page then you get that same effect. Or you can use user controls and then include them in all 3 pages.

Resources