I want to design a header by extending the Luma theme. I have attached pic on how I want the header design. Can someone please help me with this? Am new to Magento and still learning things. I am using Magento 2.3.2 and have created a custom theme in app/design/frontend/Vendor_name/theme_name/ by extending Luma theme as parent theme. THANKS.
Please refer this link for reference header image, I want same header as in image below,
https://i.stack.imgur.com/fZtr8.png
I have achived the same design with the below steps.
Note am extending blank theme.
In your theme open the file Magento_theme/layout/default.xml.
Move the navigation after the logo
Create a new container to group all the three right side icons
Move the new container "header.actions" after navigation
Move the minicart, search and user icon into the header.actions container
Clear the cache and refresh the browser
<move element="catalog.topnav" destination="header-wrapper" after="logo"/>
<container name="header.actions" htmlTag="div" htmlClass="header-actions"/>
<move element="header.actions" destination="header-wrapper" after="catalog.topnav"/>
<move element="top.search" destination="header.actions" after="-" />
<move element="minicart" destination="header.actions" before="-"/>
<move element="my-account-link" destination="header.actions" after="minicart"/>
Related
I just upgraded my OroCommerce instance to 4.1.1 and I'm finding that the image slider is broken:
I don't really need that component anyway... how can I remove it or change it's images?
Thanks!
You can update or delete the content block that renders the home-page-slider in Back-Office > Marketing > Content Blocks section.
Also, please check a note about it in the upgrade guide.
I am just getting started with Xamarin Forms, so please excuse what may well be a rookie question...
I started out with a new Shell Forms App in Visual Studio, so some code was generated for me.
There is an AppShell page which contains a TabBar control. Inside this are Tab controls were I can set my ShellContent pages.
Each Tab has an Icon property, but this apparently only accepts PNG icons.
How can I use an icon font (which is already hooked up to display icons correctly as I am using them in the content of another page) for my Tab icons in Xaml?
I am using Xamarin.Forms 4.0.0.497661
You have to use FontImageSource to do that.
<Tab Title="MyTitle">
<Tab.Icon>
<FontImageSource FontFamily="{StaticResource IconFont}" Glyph="" Size="Small"/>
</Tab.Icon>
...
</Tab>
The solution below worked for me.
Copied the files from fontawesome inside Assets folder
fa-brands-400.ttf
fa-regular-400.ttf
fa-solid-900.ttf
Important the reference "Font Awesome 5 Brands" according to icon needed
<Tab.Icon>
<FontImageSource FontFamily="fa-brands-400.ttf#Font Awesome 5 Brands" Glyph=""/>
</Tab.Icon>
That's a great question. You can't use the tab icon property in a straight forward way to accept the icon font, unless you convert it into a PNG.
If you want to go that route, you can try this, you might have to deal with permissions for saving images. Worth a try!
You can do that with custom renderers as a workaround. Check this example on GitHub here: https://github.com/winstongubantes/Xamarin.Forms/tree/master/CustomIconizeFont
I have been looking for transitions between screens but was unable to find the best practice to navigate through screens .Making sub screens and entry in apps.xml was a try but it gives a link on the top of the page which is not what I want . I want make transitions as we make in html-5 or earlier versions through anchor tag. What is the best practice to do the same?
Below code in a screen can generate the code you want. But you would need to override the "label" macro by yourself to let it contain a "link" that is simply done by add a <#recurse/> in macro "label".
<transition name="gotoScreen1">
<default-response url="Screen1"/>
</transition>
<widget>
<label type="pre">
<link url="gotoScreen1" link-type="anchor" text="This test link from FTL"/>
<label type="pre">
</widget>
A screen transition is a part of a screen definition that specifies how to process input to the transition (if there are logic/actions associated with it) and which screen to transition to when it is complete.
To access a screen transition you just have the browser (or client) go to the URL of the screen, plus the name of the transition separated by a forward slash (i.e. in the URL treat the transition as a directory or file within the "directory" of the screen). This can be done with a hyperlink, a form target, an AJAX call, etc.
To create a link or button using the XML Screen (or XML Form) in Moqui, just use the "link" tag.
I'm trying to manually position the Shareaholic sharebar WP plugin. I am using a vertical one, and want it to be in a fixed position on the left side of my screen beside my main content area. So far I have figured out how to get it onto my site, but not able to position it. I'm referencing this post of someone who tried to do a similar thing.
I'm using this code to insert it into my single.php
<?php echo do_shortcode('[shareaholic app="share_buttons" id="4766761"]'); ?>
But haven't had any luck with getting css positioning to work, or where exactly to put it in my single.php file
Right now it's just below this code :
<main class='content units <?php avia_layout_class( 'content' ); ?>' <?php avia_markup_helper(array('context' => 'content','post_type'=>'post'));?>>
And it's showing up above the post content.
Any suggestions?
Many thanks
Jonny
Custom CSS should be added to your styles.css theme file, but it is recommended to create a child theme when making any adjustments within your theme so that you will not run the risk of losing your customization if/when your theme releases a new version and you update.
I want to know, Is there any way to change the Style sheets of the extension library DOJO Tab container control?
Thanks & regards,
Yogesh Kashid
The best way to change the Style sheets of the extension library DOJO Tab container control is to create and use an own css resource. This way you can change every single table part's look and it would be valid for all DOJO Tab container controls in your application.
Create under Resources\Style Sheet a my.css file
Add the Style changes for DOJO Tab classes in my.css file. The style classes start with "dijitTab..." and you can find them analyzing the rendered page in browser.
For changing the tab labels to red you would write e.g.
.dijitTabContainerTopNone {
color: red;
}
3 . Add the my.css class to your theme
<theme extends="oneuiv2.1">
<resource>
<content-type>text/css</content-type>
<href>my.css</href>
</resource>
</theme>