I asked this question in a Wordpress forum with no response. So trying here in hope of an answer or suggestion.
I'm using the Wordpress Twenty Seventeen theme (here) and the multi-panel homepage. My menu is a series of "custom links" which navigate to anchors in each of the homepage panel sections.
The navigation to the anchors is not consistent. Some land where they are supposed to, and others land after the intended location. When I inspect the page code, the only difference in the panel sections is where 'tabindex' gets set.
The ones that work show tabindex set at ‘panel-content’ level:
<div class="panel-content" id="noted" tabindex="-1">
<div class="wrap">
<div class="entry-content">
<p><a name="noted"></a> </p>
<h2>Noted</h2>
The ones that land incorrectly have tabindex set in the “a” anchor link.
<div class="panel-content" id="video">
<div class="wrap">
<div class="entry-content">
<p><a name="video" tabindex="-1"></a></p>
<h2>A Video is Worth a Thousand Words</h2>`
It seems random from panel section to panel section. I didn't do anything differently when creating the page. I have never dealt with tabindex before.
Any suggestion on how to correct this, so the anchors land where intended?
Thanks in advance, Mike
This issue is resolved. Turned out to be a Wordpress plugin issue.
https://wordpress.org/support/topic/tabindex-for-home-homepage-panels/#post-10781852
Related
I would like to change the call to action button on the landing page of my website to a social icons element. How do I edit the HTML code to do this? I am using the "Paris - Business" theme. Thanks.
There is some documentation on how to do this, if you search the web. For example, my own site has a basic example of what to look for Landing Page Button Removal.
In that case, you could replace the code that makes the button with your own code.
That being said, there's some new features you can use that would make the content editable. Weebly just introduced "Sections". Sections allows you to have different sections on a page, and with that you can also drag and drop into the Header area. (See Screenshot)
*BUT, before you go ahead and do this, I should note that Weebly plans on making these changes to the newer themes, in the near future. When Paris would be done, or if it will be done, is anybody's guess.
Depending on the design of your Theme, this might be slightly different, so please keep that in mind.
Basically, for the Paris Theme, what was:
<div class="banner-wrap wsite-background">
<div class="container">
<div class="banner">
<h2>{headline:text global="false"}</h2>
<p>{headline-paragraph:text global="false"}</p>
<div class="button-wrap">{action:button global="false"}</div>
<span id="contentArrow"><span></span></span>
</div>
</div>
</div>
Would become:
<div class="banner-wrap wsite-background">
<div class="container">
{{#header}}
<div class="banner">
{content}
<span id="contentArrow"><span></span></span>
</div>
{{/header}}
</div>
</div>
*If you are customizing a Theme, I might also recommend making a custom page type, specifically with these changes.
If you want to use Sections, for the content area of the page it would look something like:
<div class="main-wrap">
{{#sections}}
<div class="container">{content}</div>
{{/sections}}
</div>
**Note: There isn't any documentation yet, and I have not tested this, so wsite-background may not be needed... but don't take my word for it.
I have been using display.none, for the hid-whens for example, all the hidden fields were kept in a section and section was hidden from web by using Display.none.
This is working for Internet Explorer till IE 9, but for IE 10 all the hidden fields are shown.
Can anyone help in this matter. Any alternative or approach.
Without seeing the page it sis very difficult to guess.
Try validating the html through one of the many online html validators as something may not be closed or Notes might have given you an unwanted code addition .
Try adding a background color to the css #wrapper to make sure the css is being called.
Take a copy of the form and start removing all other elements one section at a time to see if something else is causing the issue.
Add {meta http-equiv="X-UA-Compatible" content="IE=10;IE=9; IE=8; IE=7; IE=EDGE" /} as the very top meta tag and see if that fixes it. Replace the curly braces obviously.
All the best in finding the issue.
It sounds like just the section element is getting hidden. Without seeing the code I can't tell why that changes between ie 9 and 10 but ie is famous for having varying behavior between versions.
One alternative that comes to mind: You could wrap the section and the fields in a DIV element using pass thru HTML and set that div's style to display:none. That is pretty standard and should work across browsers.
Update: To give you an idea what I'm talking about, check out this jsfiddle.
HTML:
<form>
<div class="wrapper">
<input type="text" name="Field 1" /><br />
<input type="text" name="Field 2" /><br />
<input type="text" name="Field 3" />
</div>
<span>Some text that won't be hidden.</span>
</form>
CSS:
.wrapper {
#display:none;
}
You can remove the # next to the display:none and see the difference, even in IE 10.
You'll need to look closely at the HTML being rendered by Domino and make sure that in fact all the fields you are trying to hide are surrounded by the DIV that is hidden.
I cannot figure out how to change a text in the header section of my site. I am trying to do this in my custom module's theme. This is how my header looks like:
<header>
<div class="container">
<div class="row-fluid">
<div id="Logo"><h1>#WorkContext.CurrentSite.SiteName</h1></div>
<h3>[ We Know Business ]</h3>
<a class="btn btn-navbar btn-menuh" data-parent="#collapse-nav" data-target=".collapse-menuh">btn</a>
<a class="btn btn-navbar btn-search" data-parent="#collapse-nav" data-target=".collapse-search">btn</a>
</div>
</div>
</header>
I changed [We Know Business] to [We know Businesses] but the updated text is not coming up on any page of my site.
However, my main objective is to use HTML5 and Responsive compatibility in IE8 by injecting conditional CSS and js like this:
<!--[if lt IE 9]>
<script src="/themes/intrust/js/html5shiv.js"></script>
<![endif]-->
I cannot see the above snippet in "View Source" option.
The reason I changed the text only to check whether I am doing it at the right place or not. When it didn't work I turned Shape Tracing tool on to see what template is being used for the header. But could not highlight any part of the header at all!
Isn't Layout.cshtml of my custom theme liable to render the header section? If not, which template I have to look for?
I must be doing something wrong here but cannot figure out what! Please help!
NB: I tried resetting IIS several times but had no luck either.
This is a bit late but what you are looking for is overriding document.cshtml.Orchard has a default in the folder Orchard\src\Orchard.Web\Core\Shapes\Views folder. Copy the file document.cshtml to your theme and put the items that you want in the header section of this document.
I have a site that was built and handed over to me, so I'm not as familiar with ModX as I'd like to be. That said, I've built my own templates, tpls and the like.
However, and existing MIGX using template is giving me fits. It used to display all the items in the list properly - one image, and three text fields. Now, it randomly will stop displaying one item.
When I say random, I don't mean that it switches around when you refresh the page - I mean right now item #4 isn't being displayed (even in source code, nothing appears). But if I were to delete any other item, that #4 might just show up again, and a different item start disappearing.
I'm at a loss here. I see no special characters in the text fields. Even if there were, that wouldn't explain how an item will work then not work then work again based on making changes to other items.
Please let me know what other information I can provide to assist in troubleshooting this.
Below is all the relevant code I can think of.
Template:
<div id="content">
[[!getImageList?
&tvname=`management`
&docid=`[[*id]]`
&tpl=`management_tpl`
&limit=`0`
]]
<div class="clear"></div>
</div><!-- #content -->
management_tpl:
<div class="management_box">
<div class="management_img">
<img src="[[+image:phpthumbof=`w=100&z=1`]]" alt="[[+pagetitle]]" />
</div>
<div class="management_content">
<h2>[[+name]]</h2>
<h3>[[+position]]</h3>
[[+descr]]
Show more
</div>
<div id="[[+name:stripString=` `]]" class="fulldescr">
<img src="[[+image:phpthumbof=`w=100&z=1`]]" alt="[[+pagetitle]]" />
<h2>[[+name]]</h2>
<h3>[[+position]]</h3>
[[+fulldescr]]
</div>
<div class="clear"></div>
</div>
Thanks,
Chris
For anyone who finds this in the future - my MIGX plugin was outdated and had some flaws that caused this. Updating the plugin fixed everything.
I have a homepage on an Intranet. It has at 15+ webparts (news, weather, etc.) I want to allow the users to customize the page by moving the webparts around or deleting them. At present I don't let them see the ribbon at the top so they don't have access to the "Edit page" button. I have pulled it out from the Ribbon
<a unselectable="on" href="javascript:;" onclick="return false;" class="ms-cui-ctl-large" aria-describedby="Ribbon.WebPartPage.Edit.Edit.Menu.Actions.Edit_ToolTip" mscui:controltype="Button" role="button" style="height: auto;" id="Ribbon.WebPartPage.Edit.Edit-SelectedItem">
<span unselectable="on" class="ms-cui-ctl-largeIconContainer">
<span unselectable="on" class=" ms-cui-img-32by32 ms-cui-img-cont-float">
<img unselectable="on" alt="" src="/_layouts/1033/images/formatmap32x32.png" style="top: -160px; left: -96px;">
</span>
</span>
<span unselectable="on" class="ms-cui-ctl-largelabel" style="height: auto;">Edit<span unselectable="on">
</span>Page</span>
</a>
Unfortunately it is not working. Any thoughts?
I will be doing the same with the "Stop Editing" button as well.
According to this post: http://artykul8.com/2011/03/useful-sharepoint-shortcuts/
the trick is to use the MSOLayout_ToggleLayoutMode(); javascript function.
According to a comment in that same page, in SP2010, that javascript function is only available when you already have a web part in the page. The behavior I observed differs from this one, given that, to me, this function only worked when the page was in edit mode already (and it worked even when the page had no web part added).
I was able to find the javascript file where that function is defined, which is the ie55up.js. You can load it in your masterpage by doing:
<SharePoint:ScriptLink language="javascript" name="ie55up.js" OnDemand="false" runat="server" />
For information about how to build a web control that uses that javascript function, see here: http://www.codeproject.com/KB/sharepoint/SwitchWPMode.aspx
Hope this helps
I finally found the answer to this question. It was very simple after the JS call was determined. I believe this should be for a webpart only page.
To put the page in edit mode for Personalization via a Javascript call:
ChangeLayoutMode(true); // how simple is that??
To stop the editing of the page via a Javascript call:
MSOLayout_ToggleLayoutMode(); // same as given in the other post
The "Stop" edit mode I believe is the same for all pages no matter if it's a personalized page, all webparts page, etc.