WordPress CSS does not persist throughout the site - css

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.

Related

How to set transition from one page to another page using Wordpress

I am very new to WordPress. I just started developed with it this week but I am a experienced front end developer. I attached a link to my working site. When you go to the site the first page will be a top navbar menu with a image in the middle. I want the first page to be an image only and then after a few seconds go to the page you currently see. How do I do this?
In the Dashboard setting for Pages, the page with the image only the Order setting is 1 and the page with the menu is 2.
Is there a easier/better way to do this besides what I'm describing?
I would appreciate any help for this.
Link to site
wns.bc8.myftpupload.com

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

Fixing Angular 4 layout

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.

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.

WordPress Hero SlideShow Links

I'm fairly new to WordPress and I'm working on a site that was created by someone else; I've inherited the entire thing. There is a Hero Slideshow which works, but users have to click on the "tabs" then click on another image (Learn More) in order to go to the page they want; which of course is too much trouble.
I've found the code in front-page.php and I've changed how the spans and a href tags are in hopes of making the "tabs" in the Hero slideshow link directly to the associated pages. Everything looks correct and if you hover over the tabs the browser will show the correct link - however when you click on the tab it simply rotates the slideshow and doesn't actually link to the associated page. I can't find where I can change this behavior.
Anyone have any ideas?
stay well away from the php in wordpress .
just uninstall the hero slideshow and use "Cyclone Slider 2" plugin its very user friendly
easy to use , you can add and change pic and there is a lot of options on movement speeds enbed url links (etc)

Resources