Changes made to _settings.scss does not seem to take effect. I am running compass watch on the project and can see that it is notified on the changes made.
Let me take an example:
If I uncomment and change the line
// $crumb-slash: "/";
to
$crumb-slash: "-";
as seen in their docs, and then use breadcrumbs in my html, such as
<nav class="breadcrumbs" role="menubar" aria-label="breadcrumbs">
<li role="menuitem">foo</li>
<li role="menuitem" class="current">bar</li>
</nav>
I will still see a slash instead of a dash.
Do I need to do anything to enable my _settings.scss?
EDIT:
Also worth mentioning is the fact that I get deprecation warnings from compass, regarding lines in _global.scss.
seems like you have some weird html. Inside you don't have to use , so try an html like this:
<nav class="breadcrumbs">
Home
Features
<a class="unavailable" href="#">Gene Splicing</a>
<a class="current" href="#">Cloning</a>
</nav>
I just saw in source that the slash in foundation/components/_breadcrumbs.scss that the slash is hardcoded in one line:
/* Accessibility - hides the forward slash */
[aria-label="breadcrumbs"] [aria-hidden="true"]:after {
content: "/";
}
Maybe this causes problems for you? maybe a bug?
Related
I'm looking to create a reusable, modularized component in Umbraco 9. I've never worked with any Umbraco before. The example I'll use is a text widget/component that has an image on the left and text on the right, with the ability to set whether you want to swap this to be image right, text left.
I come from the Sitecore world where creating a component like this would mean creating a definition with the fields in the back office, creating an MVC controller and an action, and pointing that back office definition at the controller/action combo. Then, anywhere I've deemed a component hot spot, I can click an "add component" and it'd display the available components I've created (Text + Image Block, in our example).
Our team has been researching how to do something like this in Umbraco. We've been using element types. I've got it working where I can create a list of element types, but we couldn't figure out how to add a controller/action/view to this process to really control what gets displayed.
We've looked into the Grid Type Editor. That requires some Angular work that wasn't exactly playing nice, for some reason it was seeing our image fields as null even though they had an image.
We also tried messing with the Block List editor, and are currently investigating macros.
We've been spinning our wheels and I'm hoping to get some assistance on how to do something like this in Umbraco. Perhaps I'm searching/using the wrong terminology?
Most of our components are super simple, and rather than create a reusable component, we can just use the grid editor. In our example above, we could create a 50/50 grid row and put an image in the left column and the text in the right. This would work, but we'd like to have a little more of a reusable package. Furthermore, a few of the components will require some controller functionality to be able to hit an API and massage some data before passing it to the presentation layer.
We will keep investigating, but ultimately I'm hoping someone can clear up if we're going down the wrong path, or just missing some crucial point here.
Sure! Two ways come to mind for me. One would be make a simple doctype like the screenshot below and let layout decide how to stack them
This sample uses bootstrap which of course you don't have to use, and in my case I have them in a nested content element so I basically just loop through them and alternate putting flex-row-reverse on the row.
#{
var i = 0
foreach(var contentBlock in Model.ContentBlocks)
{
<div class="d-flex flex-wrap align-items-center #(i %2 != 0 ? "flex-row-reverse" : null)">
<div class="block-left col-sm-7">
<h5>#contentBlock.SectionHeading</h5>
#Html.Raw(contentBlock.SectionDescription.ToString())
</div>
#if(contentBlock.HasValue("sectionImage") && contentBlock.SectionImage != null)
{
<div class="block1-right col-sm-5 ml-auto">
<figure class="hover">
<img id="#contentBlock.SectionImage.Name.Trim().Replace(" ", "-")" src="#contentBlock.SectionImage.Url">
</figure>
</div>
}
</div>
i++;
}
}
The other way (as you asked for) is to give the content editor the choice with a toggle, add a toggle to the doctype
and instead of this line
<div class="d-flex flex-wrap align-items-center #(i %2 != 0 ? "flex-row-reverse" : null)">
you could use this line
<div class="d-flex flex-wrap align-items-center #(contentBlock.SectionAlignment == true ? "flex-row-reverse":null)">
Or even something like this where you just assign your own class and write the CSS separately
<div class="d-flex flex-wrap align-items-center #(contentBlock.SectionAlignment == true ? "block-right":"block-left")">
Hope that helps get you going in the right direction. I'm sure you'll have to adapt this for your situation and this code is not tested.
Happy to help if you have any issues.
I would like, using vim-surround to convert this
<p>
^currsor
Issues reported by users from the
https://re.fr
they will create an issue.
</p>
into that
<h1 class="important">
Issues reported by users from the
https://re.fr
they will create an issue.
</h1>
I've been using in command mode: cs<<h1 class="important"> and I get
<h1 class="important">p</h1>
^currsor
Issues reported by users from the
https://re.fr
they will create an issue.
</p>
you can just do ...
cst<h1 class="important">
"change surrounding tag "
And now i have surround to work:
3VS<h1>
will do the trick for you
Without using the surround plugin i would do this:
:%s/p>/h1>
I have a FAQ page i have created with many questions and answers in the form of
<div>
<h4 id="anchor-name">question</h4>
<p>answer</p>
</div>
This works as expected if i have a button or clickable link in the form of
Click here to go to anchor
which takes me directly to my question with that id (expected behaviour)
The problem is when i try to access this from a URL from another tab by doing something like
https://my-app-url/#/FAQ/#anchor-name
it redirects me to my FAQ page but not to my question. Instead, it just loads the FAQ and stays on the top.
Some context:
frontend is in react
the first # in the url https://my-app-url/#/FAQ/#anchor-name is mandatory. Apparently if i just go with https://my-app-url/FAQ/#anchor-name it never loads the page
I have tried enclosing the <div> tags and the <h4> tags by an <a> tag but it didn't work. In those cases what i did was
<div>
<a href="#anchor-name">
<h4 id="anchor-name">question</h4>
<p>answer</p>
</a>
</div>
What i wish to know and cannot seem to find it by doing research a lot is:
Is it possible to access this anchor via URL from an external link by using react-router library?
Could it be that by using react the html way to anchor is not working as expected?
Is my first # in the URL interfering with the anchor linking feature?
You don't need that last / right before the #anchor-tag.
so the URL would be:
https://my-app-url/#/FAQ#anchor-name
For anyone who might be interested, I fixed this issue. The problem was fixed by replacing HashHistory with BrowserHistory. With HashHistory, the URL gets an # that interferes with anchors. By using BrowserHistory, that # is never there so the issue is gone. Hopes this helps.
I just got a problem using revolution slider in modx evolution.
My slider have jquery code
tabs: {
tmp:'<div class="tp-tab-content"> <span class="tp-tab-date">{{param1}}</span> <span class="tp-tab-title">{{title}}</span></div><div class="tp-tab-image"></div>'}
and modx of course parsing {{param1}} and {{title}} as chunks, but its part of revoslider's jquery.
so after parsign page html code looks like this
tabs: {
tmp:'<div class="tp-tab-content"> <span class="tp-tab-date"></span> <span class="tp-tab-title"></span></div><div class="tp-tab-image"></div>'}
and revolution slider shows incorrect
i tried calling revoslider code from html file using snipnet with php funtion include, but it also got parsed by modx engine
can i solve this problem without changing revoslider jquery code?
thanks to your ansewers!
I am not an EVO expert, but I could suggest several tricks that may help:
Try to escape the curly braces like \{\{param1\}\}
Try to breake the sequence like {[*fakeTemplateVar*]{param1}[*fakeTemplateVar*]}*
Try an empty TV like [*fakeTemplateVar*:ifempty={{param1}}]
*fakeTemplateVar will finally evaluate to an empty place in the template.
I just started with magento. I try to replace the header links on the default page. I need to replace the text "My Cart" with the following font-awesome icon.
<i class="fas fa-shopping-cart"></i>
But I have no clue where I can change this, the documentation is complicated and not very beginner friendly.
I figured it out. You have to create your own design and assign it in the backend . Then you have to create the following folder structure if it does not exist yet.
\app\design\frontend\yourDesign\default\template\page\template
Now create a file called links.phtml with the following content:
<ul class="links"<?php if($this->getName()): ?> id="<?php echo $this->getName() ?>"<?php endif;?>>
//insert links here
</ul>