I have browsed through many articles, but none of them mention how I can go about redesigning the toplinks at the top of any Magento store.
Does anyone know how I can modify the default links which are found in the top right of my Magento store and assign an icon to each link and also spread the links across the full width of the top area.
It may include something like the below (example only).
Any suggestions would be much appreciated.
My website is: www.efficienttrade.co.nz if that helps.
Thanks,
Jason
Find the top.links in layout xml files and add a class. Then, you can customize this class via css.
For instance,
<!-- this piece of code available in rss.xml, look at the class define -->
<reference name="footer_links">
<action method="addLink" translate="label title" module="rss" ifconfig="rss/config/active"><label>RSS</label><url>rss</url><title>RSS</title><prepare>true</prepare><urlParams/><position/><li/><a>class="link-rss"</a></action>
</reference>
Same as Ogüz answer + more information:
You have to be a little bit like Sherlock Holmes.
The top links are generated thanks to a block that you can find in the layout file page.xml of your theme. Then search the block name "topLinks" in the header block (in the default theme, it's the name) and you will find <block type="page/template_links" name="top.links" as="topLinks"/>. This block topLinks is generated thanks to the block class Mage_Page_Block_Template_Links. The important method in this block is public function addLink(...), it means that you will have to search into the xml layout the following element/tag <action method='addLink'>...</action>.
An example for the customer module, in the file customer.xml of the layout folder:
<reference name="top.links">
<action method="addLink" translate="label title" module="customer"><label>My Account</label><url helper="customer/getAccountUrl"/><title>My Account</title><prepare/><urlParams/><position>10</position></action>
</reference>
You should find more than one xml element which uses this kind of method.
Pay attention, the addLink method can also be called programmatically (into PHP code), not only in layout file.
Hope it helps
Related
In backoffice, for B2BUnit and B2BCustomer models, There are some important attributes that are displaying under "Administration" tab.
But I would like to show it under "Properites" or "General" tab. What configuration I need to change?
I hope you already have a custom backoffice extension, if not then follow this tutorial to create one.
Now, In your custom backoffice extension, you can find the file *backoffice-backoffice-config.xml. In this file, you can define how & where you want to populate your custom attribute. You need to declare it for the editor-area component like below.
<context merge-by="type" parent="Customer" type="B2BCustomer" component="editor-area">
<editorArea:editorArea xmlns:editorArea="http://www.hybris.com/cockpitng/component/editorArea">
<editorArea:tab xmlns="http://www.hybris.com/cockpitng/component/editorArea" name="hmc.properties">
<section name="hmc.section.your.custom.section">
<attribute qualifier="yourAttribute"/>
</section>
</editorArea:tab>
</editorArea:editorArea>
</context>
Here you can define the new custom section (hmc.section.your.custom.section) or use any existing section name. For the custom section, you need to define its value in the in labels_en.properties (like a way for each language labels_*.properties) file.
Is it possible to change default color of the TimePickerAndroid component ?
You would have to change it from the styles.xml file of android. Here's what you do:
1) Open up styles.xml: "android/app/src/main/res/values/styles.xml"
2) you'll need to add a few lines:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:timePickerDialogTheme">#style/Dialog.Theme</item>
</style>
<style name="Dialog.Theme" parent="Theme.AppCompat.Light.Dialog">
<item name="colorAccent">#FF0000</item>
<item name="android:textColorPrimary">#0000FF</item>
</style>
In styles.xml you should already have:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
If you do just add the remaining lines. If not go ahead and add them.
4) Lastly, just recompile the app. "react-native run-android". You should see the color change right away.
Using React-native, unfortunately no.
However, by changing some java files in RN and using this solution from SO you might be able to do it.
If you succeed doing this, I suggest you create a Pull Request on RN's repository as it might be very useful for other users.
You could also develop it as a module and open source via NPM.
I'm using the pages that comes with the default instalation of magento on my web store. The customer want's to have diferent contents on right column of that pages.
For instance, on "customer-service" page wants to have the top FAQ's but on "contacts" want to have the telephone and mail information.
How can I achive that? I been trying to change the 2columns-right layout, on the right column, to each page but I was unable to find a way to do that.
Thanks in advanced.
In 'CMS > Pages' from the Magento back office, go into the 'Design' tab in each page you want to change and set the 'Layout' to '2 columns with rightbar'.
Then, you can use the right.permanent.callout block to call in what content you wish on various pages/page types as wanted.
For example, displaying an image in the right sidebar on contact page only:-
<contacts_index_index>
<reference name="right">
<block type="catalog/product_compare_sidebar" before="cart_sidebar" name="catalog.compare.sidebar" template="catalog/product/compare/sidebar.phtml"/>
<block type="core/template" name="right.permanent.callout" template="callouts/right_col.phtml">
<action method="setImgSrc"><src>images/media/col_right_callout.jpg</src></action>
<action method="setImgAlt" translate="alt" module="catalog"><alt>Keep your eyes open for our special Back to School items and save A LOT!</alt></action>
</block>
</reference>
</contacts_index_index>
You can modify to change the page, page type, or template/block as you wish.
I have my own design for a Twitter feed and I want to style the default feed using my own design. Is there a way to do that?
The issue is that you can't use the CSS selectors because it appears only after the loading the page.
Please check this pic to give you more idea about what I need
Thanks,
Well, You can customize Your twitter widget by doing something like this:
Default Code
<a class="twitter-timeline" href="Pagelink" data-widget-id="Page ID">Tweets by #Test</a>
To remove Header footer, Just add data-chrome="nofooter transparent noheader transparent" and it will look something like this:
<a class="twitter-timeline" href="Pagelink" data-widget-id="Page ID" data-chrome="nofooter transparent noheader transparent">Tweets by #Test</a>
For more customization like link color, Borders etc refer to this article. https://dev.twitter.com/docs/embedded-timelines#customization
I hope this helps :)
1# Getting a fully customisable timeline like suggested earlier (by using the API), would require that you fetch the timeline as a json file (https://api.twitter.com/1.1/statuses/home_timeline.json) and manually loop them in your display. More details here https://dev.twitter.com/rest/reference/get/statuses/home_timeline
2# This is as close as I could come with your design #shadeed9. Most of the restrictions are here https://dev.twitter.com/overview/terms/display-requirements
3# This JS snippet will let you add custom CSS styles to the Twitter embed widget: https://github.com/kevinburke/customize-twitter-1.1 by Kevin Burke
If this solves your question, kindly accept it!
If by twitter widget you mean the embedded timelines, then see the "client side options" section of the docs https://dev.twitter.com/docs/embedded-timelines for options that you can set.
If you want totally customised output using CSS, then you'll need to write your own solution using the API to spit out content that can be styled.
I am creating a CMS page in magento as a teaser for an upcoming product. I am using two columns with a right bar and using the layout update XML in the backend to call some custom blocks I make for the right side.
Well right now I am loading just placeholders then going to edit the phtmls after the fact.
If I use two blocks on the right it looks fine.. but if I add more, then the whole footer corrupts and moves to the right column.
I am trying to get 3 custom blocks on the right side.
Here is my layout update XML
<reference name="right">
<block type="newsletter/subscribe" name="left.newsletter" template="newsletter/rightsubscribe.phtml"/>
<block type="core/template" name="name1" template="page/custom/custom1.phtml"/>
<block type="core/template" name="name2" template="page/custom/custom2.phtml"/>
</reference>
Here is the HTML of the customs blocks I am using.
<div id="shop-with-confidence" class="white-box">
<h3>Custom1</h3>
<div class="white-box-inner">
Testing1
</div>
<div id="shop-with-confidence" class="white-box">
<h3>Custom2</h3>
<div class="white-box-inner">
Testing2
</div>
Does anyone have any idea why that would be wrecking the page I am editing?
OP has already resolved the issue for himself, but it's worth noting that one can easily check parent-child block relationships to determine if an issue is framework- or markup- related.
To check the list of child blocks which a parent block has, one can simply do the following in a template:
Zend_Debug::dump($this->getChild()) //list of children
Zend_Debug::dump($this->getSortedChildren()) //list of ordered children
In the case of blocks lacking templates (core/text_list, e.g. "right"), one could do this from a child block template as well:
Zend_Debug::dump($this->getParentBlock()->getChild()) //list of children
Zend_Debug::dump($this->getParentBlock()->getSortedChildren()) //list of ordered children
Ref Mage_Core_Block_Abstract for more information.