Trouble making progress with Spirit

As per your suggestion, I am posting a new thread. I have enabled Support Access. It expires June 21.
I am using blogspot.kleinerprweb.com for experimenting with Upfront and Spirit. I may use it to redesign a client’s site. The other pages were the redesign of my web site using a different theme. That web site is now live under kleinerprweb.com. There are screen shots below.
I tried my desktop computer and it was easier at times to drag from Elements than on the laptop. Sometimes, I'll drag an element, it'll pop up on the page, then disappear.
There may be a conflict between the dashboard (blogspot.kleinerprweb.com/wp-admin/customize.php and now http://blogspot.kleinerprweb.com/?editmode=true and the page I added. When I added a page, mjs test, it became http://blogspot.kleinerprweb.com/mjs%20test. After I added mjs test, it brought up a page different than the dashboard, although I had uploaded a picture of my dog yesterday).
I experimented with dragging the elements to see results, then tried working in Regions following the tutorial.
1. The typography is better. Not all the new fonts showed up in the drop down in Theme Fonts Manager before. It seems like I have to highlight the font in the Added box and then click OK. I added fonts by clicking on one in the drop down, clicking on the sample and clicking Add. Sometimes, I was asked for a font weight and clicked P and/or H1. Do I have to click on both? Then, I clicked on the green OK box. When I highlighted the font in the Add(ed) box, and then clicked OK, the font appeared in the drop down in the Theme Settings. I had to experiment with the different headings to see them work. Not all fonts appeared with each one.
2. Using the color themes in Theme Settings, what is supposed to change? Sometimes, it changes the text, but usually nothing changes.
3. Some elements don't drag to an area/region of the screen, but will go elsewhere. I was able to get the slider into the header and an area toward the bottom of the page. It didn’t run automatically.
4. I dragged the Text box, but I couldn't type in the box, had to get/exit out and highlight to type or change the default text.
5. The Facebook Like element worked, but I was unable to drag it to a different place on the screen
6. Contact Form (can fields be added?), Menus, Widgets, Accordion dragged over.
7. Buttons, Login, Posts, Tabs didn't.
8. In the Regions (Post 2) tutorial it says, "We want to delete 10 regions. We’ll keep the header and the navigation regions, so let’s start with the region after that. Click the pen icon and then click the red “x” icon. You’ll get a prompt asking if you’re sure you want to delete this section. Click “OK.” " I'm not sure what "after that" means. I clicked on the "x" and lost the entire header. For some reason, it took a while to find any region on the page to try the exercise. Well, I was able to change the color and the picture of my dog wound up on the screen for the first time. I did not get all the dialog boxes of settings described in the tutorial. The video doesn’t seem to show deleting the header.

  • Michael Bissett

    Hey @mkleiner,

    I'll say it again, wow, that's a lot of ground to cover! Let's try to keep separate points in separate threads, it's a lot to sort through otherwise. :slight_smile:

    I added fonts by clicking on one in the drop down, clicking on the sample and clicking Add. Sometimes, I was asked for a font weight and clicked P and/or H1. Do I have to click on both?

    Nope, the P & H1 options are solely for previewing the text, choosing one of those doesn't effect the font weight imported. :slight_smile:

    Then, I clicked on the green OK box. When I highlighted the font in the Add(ed) box, and then clicked OK, the font appeared in the drop down in the Theme Settings.

    When you say "the Add(ed) box", you're referring to the column on the right side shown for the "Theme Text Fonts" tab, correct?

    I had to experiment with the different headings to see them work. Not all fonts appeared with each one.

    Could you give me an example of a situation of a font not appearing with a particular heading please? :slight_smile:

    2. Using the color themes in Theme Settings, what is supposed to change? Sometimes, it changes the text, but usually nothing changes.

    It'll depend on whether or not a piece of text has a style applied to it already (either via an element style, or by manually setting a color for it using the popup editor toolbar).

    3. Some elements don't drag to an area/region of the screen, but will go elsewhere. I was able to get the slider into the header and an area toward the bottom of the page. It didn’t run automatically.

    When you say "Some elements don't drag to an area/region of the screen, but will go elsewhere.", what elements are you referring to?

    If this ties into these two points:

    6. Contact Form (can fields be added?), Menus, Widgets, Accordion dragged over.
    7. Buttons, Login, Posts, Tabs didn't.

    I found that I was able to drag them all to different places on the screen, what browser are you using presently? And have you tried disabling the add-ons inside of it temporarily, and trying this again?

    This advice also applies to point #5:

    5. The Facebook Like element worked, but I was unable to drag it to a different place on the screen

    On this:

    I was able to get the slider into the header and an area toward the bottom of the page. It didn’t run automatically.

    Just to verify, did you set up images to be shown in the slider, by clicking on the "Choose Images" button there?

    4. I dragged the Text box, but I couldn't type in the box, had to get/exit out and highlight to type or change the default text.

    Hmm... you should be able to just click on the end of the text, like this screencast shows:

    http://screencast.com/t/qfHwtt664uh

    I found that I was able to do this on your site as well.

    8. In the Regions (Post 2) tutorial it says:

    "We want to delete 10 regions. We’ll keep the header and the navigation regions, so let’s start with the region after that. Click the pen icon and then click the red “x” icon. You’ll get a prompt asking if you’re sure you want to delete this section. Click “OK.”"

    I'm not sure what "after that" means.

    I believe she was referring to the region immediately after the navigation bar, the region that I've highlighted in red in the below screenshot. You would delete that highlighted region, and all of the regions below that.

    I clicked on the "x" and lost the entire header. For some reason, it took a while to find any region on the page to try the exercise. Well, I was able to change the color and the picture of my dog wound up on the screen for the first time. I did not get all the dialog boxes of settings described in the tutorial. The video doesn’t seem to show deleting the header.

    If we're going along with the tutorial, the header was actually supposed to stay, it wasn't supposed to be removed. It looks like you might've been referencing the screenshot above that bit of text mentioning the deleting of 10 sections, would that be so?

    ...whew, there we go! Hope this helps! :slight_smile:

    Kind Regards,
    Michael

  • mkleiner

    Michael to Michael,
    Thank you for your time and efforts. Now, I’ll try to reply.:slight_smile:
    Re the fonts: They are showing up in Main Heading and Paragraph. The problem is they are not in alphabetical order. Yes, "the Add(ed) box", is the column on the right side shown for the "Theme Text Fonts" This looks resolved, except for the alphabetical order, just remember type font name in the box. This is only a test, not going to be the actual site.
    Re 2. Colors: I’m still a bit confused about the purpose of the application of the theme colors if some areas change and some don’t. Or will it only work if I highlight something?
    Re 3 Dragging: Text, Image, Slider, Map, Menu, Widget, Like Box, Contact Form, You Tube, Code and Accordion dragged over. Button, Login and Posts dragged over, but didn’t stay there.
    Slider dragged to an area of the header and an area near the bottom, but didn’t to the area under the navigation bar, for an example. I did Add Images, but they didn’t run automatically.
    Re the Text Box, if you look as this video, it shows typing within the text box. https://premium.wpmudev.org/projects/category/themes/
    On your screen shot, it doesn’t, you double-click on the box and the box disappears and you edit the text. As you said, you were able to do this on my site, as I was. I guess this is resolved.
    Re the Regions. Again, this is where the wording and the visual in the tutorial differs. In your screen shot, the About region is highlighted. In the screenshot/video in the tutorial, the header area is highlighted.
    https://premium.wpmudev.org/blog/upfront-regions/
    The language is confusing.
    I sent screen shots yesterday, which apparently weren’t sent.
    These questions remain:
    1. How do I move forward?
    2. Why is MJS Test page different than the page in the dashboard I’m working on?
    3. Why isn’t the slider moving automatically?
    4. Why are only certain elements dragging?
    5. Did you find any problems when you accessed the site?
    6. How can I start all over? Should I not be using this subdomain, which has all these other pages? Can I experiment with the theme online?

  • Michael Bissett

    Hey @mkleiner,

    Alrighty, let's address these points:

    This looks resolved, except for the alphabetical order, just remember type font name in the box. This is only a test, not going to be the actual site.

    I do see where the fonts aren't alphabetically ordered, both in the fonts manager, and in the "Typeface" dropdown inside of the "Theme Settings" section.

    I'll bring this up to our Upfront team. :slight_smile:

    Re 2. Colors: I’m still a bit confused about the purpose of the application of the theme colors if some areas change and some don’t. Or will it only work if I highlight something?

    Simply put, the global colors are the default colors for text on your site. If you happen to set a different color for text (either through a custom element style, or by the popup text editor), then that color will apply, instead of the global color. :slight_smile:

    Re 3 Dragging: Text, Image, Slider, Map, Menu, Widget, Like Box, Contact Form, You Tube, Code and Accordion dragged over. Button, Login and Posts dragged over, but didn’t stay there.

    Odd... they're staying there for me presently, I just added them to your home page.

    As I asked earlier, what web browser are you using presently? And have you tried disabling all of the add-ons inside of the browser, in case one of them is interfering? This is really looking like a browser issue at the moment.

    Slider dragged to an area of the header and an area near the bottom, but didn’t to the area under the navigation bar, for an example. I did Add Images, but they didn’t run automatically.

    I was able to drag this below your navigation bar, but I should note that regarding the images running automatically, they won't do that while inside the editor. Outside of it however, they'll work just fine. :slight_smile:

    Re the Text Box, if you look as this video, it shows typing within the text box. https://premium.wpmudev.org/projects/category/themes/
    On your screen shot, it doesn’t, you double-click on the box and the box disappears and you edit the text.

    Hmm... I do see what you mean here regarding the video on that page, I'll bring this up to our sales team. :slight_smile:

    Re the Regions. Again, this is where the wording and the visual in the tutorial differs. In your screen shot, the About region is highlighted. In the screenshot/video in the tutorial, the header area is highlighted.

    https://premium.wpmudev.org/blog/upfront-regions/

    The language is confusing.

    I do see where it could be confusing here, I'll bring that that up to the author of that article, and see if perhaps we can adjust that language. :slight_smile:

    2. Why is MJS Test page different than the page in the dashboard I’m working on?

    Where is this MJS test page you're referring to, I'm not able to find it presently? And what's the page in the Dashboard you're working on?

    Can I experiment with the theme online?

    That you can, we do have a demo site here you can give a whirl:

    http://spirit.upfront.pro/

    Kind Regards,
    Michael

  • mkleiner

    Michael to Michael,
    Thanks again for your reply.

    Sorry, I forgot to say I am using Chrome. Extensions: Application Launcher for Drive (by Google) 3.2, Website Logon 1.0, WinZip Courier 4.5.0.0, Bing Search Engine 0.0.0.5, Skype Click to Call 7.4.0.9058 are disabled. Norton Identity Safe 1.0.5, Norton Security Toolbar 2014.7.12.21, Google Docs 0.9, Norton Safe Search as default for Chrome 1.0.9, Share As Image Extension 1.1.2 are enabled.

    I wondered if the Slider running automatically was related to the editor. How do you preview the page?

    I think I should try the online demo. As I mentioned before, this is a subdomain I used to redesign my web site in Word Press. There's too many other pages that might be coming into play and is making it hard sometimes to get back to the Upfront dashboard and giving you links to the page (s). It might be causing some of the confusion and it's not the same as using the WordPress dashboard. Start clean. Does the demo run along with the tutorial? Is it savable, so I can go back later/the next day? We might also be able to isolate whether there's a browser issue.

    Maybe, it'll be in the tutorial, but a question for later: Since Spirit is a one-pager, where do you put the meta tags? Is that part of code? Do you recommend blog being a separate page or part of the one? Thanks again.

    Michael

  • mkleiner

    I'm still having issues with inconsistent dragging while using the demo online. All the extensions in Chrome were disabled. While working in Part 3 of tutorial, after deleting elements, I was able to drag Image over and add image. I was able to add a button, but when I tried to drag the text box, it stopped working. I closed, opened new demo, was able to do a few things, then stopped again. I tried cloning and the first two I was able to drag anywhere and the third one didn't fit and I was unable to resize.

    I moved onto the Part 4 about tweaking elements and ran into this problem, which I posted in the Comments at the end of that lesson.

    (Again) Among the problems is the text and visuals don't always match. The latest is in adding css for the blockquotes. In the copy, it says to delete lines 12-34, which means 22 lines of code have to be added. But, in the next two pictures, instead of using lines 12, etc. you use 1-17 and 1-12, which is 29 lines and confusing. Then, in the screen shot, which runs fast, blockquote { starts on line 12. blockquote.upfront-quote-alternative { , is on line 8 in the first photo, which means it should be line 20, but starts on line 31, and blockquote:after {, which is line 1 in the second picture, is 19 in the screen shot. The copy doesn't say to move these and where. What lines of code were not used? Where does the text for the bubble go on the screen?
    https://premium.wpmudev.org/blog/upfront-custom-css/

    Michael

  • Michael Bissett

    Hey @mkleiner,

    I wondered if the Slider running automatically was related to the editor. How do you preview the page?

    In order to see the slider in action (having it run automaticallly, I mean), you'd have to save the page after adding the slider, and then exit the editor.

    In the online editor though, you wouldn't be able to save the changes, so this would only apply to a site that you've set up Upfront on yourself.

    Does the demo run along with the tutorial? Is it savable, so I can go back later/the next day? We might also be able to isolate whether there's a browser issue.

    You wouldn't be able to save the changes you've made (it being a demo), but otherwise, you can make the changes mentioned in our tutorials. :slight_smile:

    Maybe, it'll be in the tutorial, but a question for later: Since Spirit is a one-pager, where do you put the meta tags?

    What kind of meta tags were you looking to add here, could you elaborate?

    I'm still having issues with inconsistent dragging while using the demo online. All the extensions in Chrome were disabled.

    In addition to disabling all of the add-ons, have you tried clearing the cache, and deleting the cookies inside of your browser?

    I'd also want to make sure that Chrome's up to date as well. If that doesn't work, then could you try using a different browser?

    (Again) Among the problems is the text and visuals don't always match. The latest is in adding css for the blockquotes.

    Let's walk through this here:

    In the copy, it says to delete lines 12-34, which means 22 lines of code have to be added. But, in the next two pictures, instead of using lines 12, etc. you use 1-17 and 1-12, which is 29 lines and confusing.

    The lines in the code snippets shown there (the first one being 17 lines long, and the 2nd one being 12 lines long) are not to indicate where inside the custom CSS rules that code must be placed.

    We use Github to store our code snippets, and we then embed those code snippets into our articles. Those line numbers you're seeing in those two snippets that Raelene shared are only meant to show how many lines are in the shared code snippet.

    Also, just because there were 22 lines of code to be removed from the custom CSS rules, doesn't mean that our replacement code must have 22 lines as well. What counts is that the replacement code does what we want it to. :slight_smile:

    So we'd be taking the code from both of those snippets, and replacing the CSS code in lines 12-34 of the custom CSS rules with our new code. :slight_smile:

    Then, in the screen shot, which runs fast, blockquote { starts on line 12.

    Which it should. :slight_smile:

    blockquote.upfront-quote-alternative { , is on line 8 in the first photo, which means it should be line 20, but starts on line 31, and blockquote:after {, which is line 1 in the second picture, is 19 in the screen shot. The copy doesn't say to move these and where.

    I trust that with the mention of "photo" & "picture", you're referring to the Github snippets that I mentioned earlier?

    As mentioned earlier, we'd be taking the code from those two snippets, and replacing the CSS code in lines 12-34 of the custom CSS rules with that. Nothing else needs to be done here. :slight_smile:

    Hope this helps! :slight_smile:

    Kind Regards,
    Michael

  • mkleiner

    Michael to Michael ?
    Thanks again for replying and hanging in with me. I’ve learned from experience that WYSIWG/templates, whether web sites , apps, come with their own learning curve. e Now, to your questions.
    Re meta tags:
    Meta tags for SEO, title, description. That’s a little in the future. ?
    Browsers:
    I haven’t emptied cache and cookies. I’ve tried the desktop computer to see if there was a difference between the desktop /mouse and laptop/mouse. This morning, the dragging seemed a little easier on the desktop. On the laptop today, I switched between Chrome and Firefox and Firefox seemed to be better, than I ran into trouble there and switched to Chrome. Then, things were going well there and then got stuck. Then, I couldn’t drag a text box anywhere in either browser, so opened up a new demo.
    Blockquotes:
    You understand why there would be confusion when the text says delete lines 12-34 and the snippets /picture/photo start at 1?
    How can we put 29 lines of code into 12-34, it’s going to go to line 41? I went past this today and then tried to come back to it. That’s when I had the text box dragging problem and had to open up a new demo. I was trying to follow along with the screen shot. It was going so fast, I couldn’t see what was on lines 34 on plus what was going on with the typography. So, I didn’t achieve what we wanted. Tomorrow, I’ll go back and try again.
    Today, I animated button; Added an Animation to the Image Element Caption – the screen shot for this was above the headline instead of after -- Added Subtle Effects to the Gallery Element, although I didn’t get the border around the thumbnails, and did some Styling the navigation to match our theme design. I think I got a divider In The Code Element, but I didn’t have the parrot so I just had a white space.
    When I highlight the navigation, I don’t get a settings icon or very briefly. The + sign is there instead. How do I change the link name? I right clicked on Edit Link but nothing happened. Will this be an anchor tag like #services?

    • mkleiner

      Michael to Michael.,
      I am back working with the blockquote issue. I still don't get the math of copying 29 lines of code into 22 lines of code. I just copied the first snippet and pasted from line 12 and it goes to 28 and the next snippet goes from 29 to 41 (although line 40 and 41 each have }). I saved, but I have nothing on the screen. I'm trying to follow the screencast. It doesn't show when the text was added, whether with a text box or something else. It shows a bubble or large blockquotes around a sentence when highlighting the code. When I highlight the code, I don't have anything. I don't know if this has anything to do with using the online demo.

  • mkleiner

    Part 5 Adding Plugins and Styling Gravity Forms
    I couldn’t do much with this section because the “widgets are disabled for security reasons” in the Spirit demo. I didn’t want to buy Gravity Forms until I need to.
    1. To download and install plug-ins, do I go back to the WordPress dashboard and install and activate like with other plug-ins for other themes?
    2. Will this add Forms to the Upfront Editor? If not, then where am I supposed to go for Forms>New Form? WordPress dashboard?
    3. Where is the Form Editor Page?

  • mkleiner

    Part 6: Responsive Design
    1. Obviously, the size of the images (in the demo) get reduced at the smaller screen sizes to the point where you don’t see the entire image or nothing. Do you recommend resizing these images to fit those screen specifications ahead of time? What would be the length be or up to us?
    2. If Upfront defaults to floating left, then we shouldn’t have to do too much with the text?
    3. Until the next version of Upfront, what won’t we be able to do in responsive mode? Is there anything major?
    4. Does this pass Google’s new algorithm for searching and ranking mobile friendly sites?

    Michael

  • mkleiner

    Part 7: Working with Pages and Posts
    1. (At least in the online demo) There is no “New Post” in the Upfront Editor sidebar, just Posts. I dragged that over and got box “What should the element display? Single Post Post List?”
    2.
    Settings >General > What to display: Single Post Post List

    How to display posts: Custom Post (s) Post(s) by Taxonomy Generic
    Result Length: Excerpt Full Post

    Settings>Pick Post Parts to Display: Date Posted Author Gravatar Comment Count Featured Image Title Comment Read More Tags Category Meta
    All but Meta are checked

    Drag to reorder Post Parts….

    After clicking out of that and then Continue, there is a post and placeholder for image, but no way to click in a text area to type post.

    There is no right-hand sidebar with save a draft, preview your post, update the post status, visibility, publication date , Publish button, adding categories, tags and updating the URL.

    Clicking on Posts/Pages/Comments above Draggable Elements gives three tabs with list of Posts, Pages and Comments.

    Is this a limitation of the demo?

    3. There is No New Page option in the Upfront Draggable Elements. Again, is this a limitation of the demo?
    4. If we keep the one pager, where/how do we set up the (perma)links? I right clicked on one of the navigation links and tried Edit URL, but nothing happened. Will this be an #anchor tag like in a regular web site, taking the user to different parts of the page?
    5. Can a navigation bar be put in each region (About; Services)?
    6. Where do the meta (title; description) tags go in the one-pager? Is it part of the page elements?

  • Michael Bissett

    Hey @mkleiner,

    Re meta tags:
    Meta tags for SEO, title, description. That’s a little in the future. ?

    Yep, something I'd want to open a feature request for:

    https://premium.wpmudev.org/forums/forum/feature-suggestions#question

    Browsers:
    I haven’t emptied cache and cookies. I’ve tried the desktop computer to see if there was a difference between the desktop /mouse and laptop/mouse. This morning, the dragging seemed a little easier on the desktop. On the laptop today, I switched between Chrome and Firefox and Firefox seemed to be better, than I ran into trouble there and switched to Chrome. Then, things were going well there and then got stuck. Then, I couldn’t drag a text box anywhere in either browser, so opened up a new demo.

    Then I'd want to try clearing the cache & the cookies. The next item on the list would be to minimize the amount of programs open on the PC, don't know how many resources yours has.

    You understand why there would be confusion when the text says delete lines 12-34 and the snippets /picture/photo start at 1?

    Read one way, yes, but I've gotten used to it, speaking personally. :slight_smile:

    How can we put 29 lines of code into 12-34, it’s going to go to line 41?

    Here's the point the article makes: you delete the lines of code in lines 12-34, and replace that with the code suggested in the article, that being this code:

    http://pastebin.com/qKmM6Ttz

    No math here, it's simply a matter of getting blockquotes to look how we want to. :slight_smile:

    When I highlight the navigation, I don’t get a settings icon or very briefly. The + sign is there instead.

    I do see what you mean about this on the demo site, I'll bring that up to our developers. :slight_smile:

    Ordinarily, you should see it like this (this is on my test site):

    http://screencast.com/t/MktlbQdAY

    How do I change the link name?

    Just double click it, that'll do it. :slight_smile:

    Will this be an anchor tag like #services?

    Only if you make it one. :slight_smile:

    On the PDF you shared, those quotes aren't styled as blockquotes by default, you'd need to do that through the popup editor when selecting the text.

    1. To download and install plug-ins, do I go back to the WordPress dashboard and install and activate like with other plug-ins for other themes?

    Yes, this'd be done inside your own site (and not in the demo site).

    2. Will this add Forms to the Upfront Editor? If not, then where am I supposed to go for Forms>New Form? WordPress dashboard?

    Yep, you'll need to go inside the WordPress Dashboard for this one.

    3. Where is the Form Editor Page?

    The folks at Gravity Forms can help us with that:

    https://www.gravityhelp.com/documentation/article/edit-forms/

    1. Obviously, the size of the images (in the demo) get reduced at the smaller screen sizes to the point where you don’t see the entire image or nothing. Do you recommend resizing these images to fit those screen specifications ahead of time? What would be the length be or up to us?

    Resizing would help, the length would be up to you. :slight_smile:

    2. If Upfront defaults to floating left, then we shouldn’t have to do too much with the text?

    Nope. :slight_smile:

    3. Until the next version of Upfront, what won’t we be able to do in responsive mode? Is there anything major?

    That's a decision more so in the hands of our developers, you could say I'm more of a mechanic here on the forums. :slight_smile:

    4. Does this pass Google’s new algorithm for searching and ranking mobile friendly sites?

    It does come up as mobile friendly, yes. :slight_smile:

    1. (At least in the online demo) There is no “New Post” in the Upfront Editor sidebar, just Posts.

    Yes, this would only apply to the online demo, you can't create posts or pages there.

    After clicking out of that and then Continue, there is a post and placeholder for image, but no way to click in a text area to type post.

    There is no right-hand sidebar with save a draft, preview your post, update the post status, visibility, publication date , Publish button, adding categories, tags and updating the URL.

    Clicking on Posts/Pages/Comments above Draggable Elements gives three tabs with list of Posts, Pages and Comments.

    Is this a limitation of the demo?

    It is a limitation of the demo, sorry for not mentioning that sooner!

    3. There is No New Page option in the Upfront Draggable Elements. Again, is this a limitation of the demo?

    Yep, that it is.

    4. If we keep the one pager, where/how do we set up the (perma)links? I right clicked on one of the navigation links and tried Edit URL, but nothing happened. Will this be an #anchor tag like in a regular web site, taking the user to different parts of the page?

    Will it be an #anchor tag, yep! :slight_smile:

    How it will be that... is answered right here:

    http://screencast.com/t/UWqfMvkQiE

    5. Can a navigation bar be put in each region (About; Services)?

    That it could, using the "Menu" element, you can give that a whirl. :slight_smile:

    6. Where do the meta (title; description) tags go in the one-pager? Is it part of the page elements?

    See first response in this particular comment. :slight_smile:

    Hope this helps!

    Kind Regards,
    Michael

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.