Add Custom style on magento cms>page - php

How i can add the custom style to perticular pag in magento like :
I want to know how we can add style tag in page editor

You can add your custom stylesheet for cms page.
just do this in your cms page open design tab and in layout update xml field just add this code
<reference name="head">
<action method="addCss">
<stylesheet>css/your.css</stylesheet>
</action>
</reference>
Hope this will help you

So ran into this same issue, I needed it to allow the customer to adjust a few values with a media query depending on the edits of the content.
Simply place empty comments at the start and end of your style and TinyMCE will not add it's own.
e.g.:
<style type="text/css" scoped><!-- -->
p{color:red;}
<!-- --></style>
This is valid at least with Magento v1.9.1

Since adding <style> tag directly is not working, you can use javascript instead.
If youe theme is using jQuery, you may do it this way (concat the style tag so editor will not mark it as comment):
jQuery('body').append('<sty'+'le>'+'#header{margin:10px 0 0 0;}#morestylehere{display:inline}'+'</sty'+'le>')
Make sure it's enclosed with <script> tags.

Click on Show/Hide editor and you will be able to edit HTML source directly so you can add a style tag there

#Max unfortunatelly, tinyMCE will convert style tags to html comments. And after each modification of CMS page you should take care of replacing html comments back to style tags - this is not very good approach.
So, my suggestion is to use specific CMS page class name, that is being added to body tag.
You can go to your CMS page, and take a look at source code of the page to find this class name.

Related

Magento 2 About Us Layout

We want to edit the left part of the page layout of about us as seen in the photo, we want to remove the "compare" part and customize it. Where can we edit it?
For this functionality i see you're using layout 2columns-left
To edit this functionality in magento you can do it by updating the layout file for your page.
You can remove this part of the page by using this xml handle in your xml config:
<referenceBlock name="catalog.compare.sidebar" remove="true"/>
After you have removed compare from left sidebar you can create your own block and assign it to left sidebar using this command
<referenceBlock name="left">
<block name="your.custom.block.name" class="Vendor\Module\Block\YourBlock" template="Vendor\Module::template.phtml" />
</referenceBlock>
These two command layouts updates will do:
First one will remove the compare products from sidebar
Second one will add your custom block to the sidebar, where you can put code you need to
Only thing you should be carefull to put this is on right layout handle.
The handle for this will lay in your module: Vendor\YourModule\view\frontend\layout
In case that you showed here it would be
cms_tmt_about_us.xml
Please check this in your configuration that this is the right handle

Location of head in Magento

I am trying to modify the head of my website made in the Magento platform and I am having very much trouble in dooing this. Everywhere I search I read something about app/design/frontend/default/modern/template/page/html/head.phtml
What is this? The physical location of the code ? I only have access to the Magento platform. Is there any way to have acces to the head file? I want to add a metadata (<meta name="google-site-verification" content="quuawwomLqURQt6N34_Pr0cBlYnWcYdiRz8tdXC3Oe8" />) in it and I tried to overwrite the XML file and failed.
I tried something like this:
default>
<reference name="head">
<block type="cms/block" name="google verification" as="google verification">
<action method="setBlockId"><block_id>google_plus</block_id></action>
</block>
</reference>
</default>
If you want to add a custom meta tag to your Magento store, you need to edit the head.phtml file of your current running template.
app/design/frontend/Your-template/default/template/page/html/head.phtml
If you not found this file in your template then you can get this file in
app/design/frontend/base/default/template/page/html/head.phtml
Edit head.phtml file and flush magento cache. Refresh the page and check the source code of page.
In case if you want to add meta title and description data for specific product page then you can check the Link.
To check which template is running currently on your site.
Login into admin panel.
System > configuration > under the left menu find General tab and under this you will get Design tab . Click on Design tab.
Current Package Name is the current template name.
OR To solve your problem (easier):
Use the field Miscellaneous Scripts from System->Configuration->Design->Head and put your scripts in there.
They will be added before the </head> tag and you can set different scripts per website or even store views.

Magento extension adding and positioning new blocks in existing/core pages

I'm trying to create a module that adds new content to existing pages. For testing purposes I'm trying to add to the checkout/cart/index page, but I want a general solution as there are other pages I need to modify.
I've examined the code of free extensions which achieve this by copying all the code of an existing template file into an override template and then using getChildHtml('some_block') to show a new block at the appropriate place. I'd like to add my blocks without having to override any of the core template files to make my module as compilable as possible.
This thread Magento - Add custom block using custom module on Shopping Cart page, shows how to add a block but the accepted answer doesn't work for me. I've followed the link to Alan Storms's answer to another Stackoverflow question Magento XML using before/after to place blocks hardly ever works and I sort of understand that most block types will only render sub blocks if there are direct calls to getChildHtml('subblockname') within the blocks template file.
Is there a general way of adding blocks to any part of an existing page without having to override the template files? What is the preferred way in Magneto modules of adding to existing content on a page as I cannot believe that overriding core files is the way to do this.
Thanks.
You don't need to override magento native template files. Just create your own theme. Magento will search markup file in your theme and if he did not find it, then he will be using base theme.
Also you can set your own template file name or path for this template using xml layouts. All what you need for this - make referense for existing block name and add action setTemplate. Example:
<layout>
<checkout_onepage_review>
<reference name="root">
<action method="setTemplate">
<template>my/path/to/template/file.phtml</template>
</action>
</reference>
</checkout_onepage_review>
</layout>
You need two things to insert a block using only your own layout and have the block be output in the page.
Firstly, you need your layout to insert your block into an existing block that has the type="core/text_list" attribute - or a block which extends the Mage_Core_Block_Text_List class. Examples of core/text_list blocks include left, right, content, before_body_end and so on.
Secondly, you need the template assigned to that block to include this call:
echo $this->getChildHtml();
//note that there is no block alias parameter passed in to this function
Calling getChildHtml() without a block alias will output all children blocks, in order. If your block is a child of this one's layout, then it will be output, too.
I'm assuming that your module has its own layout file linked from the it's etc/config.xml, in which case you can try adding this layout update:
<default><!-- On all pages -->
<reference name="content"><!-- in the content (middle) column -->
<block type="your_module/your_block" name="my.test.module" template="your/template/path.phtml" before="-" /><!-- insert your block -->
</reference>
</default>
Once you can see that this is working, you can start digging through the default layouts to find blocks into which you can insert yours.
Note the before="-" attribute.
This causes the block the be inserted before all other blocks in that container.
You can also use before="block.alias" to position your block before a particular block in the list, and after="block.alias" to position it after a particular block.
You could write after="-" to position your block at the bottom of the list.
There's a brief introduction to the Magento layout system here.
If you plan on distributing your module, you'll find that most people have modified and customised either the templates, layout, or both, of the pages you want to modify and your non-invasive approach will not work and you will have to, either, modify and override core templates, use the layout to change a block's template to your own modified one (without overriding files using the filesystem), or instruct end-users on how to add the right echo command into their existing templates.
I'd suggest, instead, this approach:
Add new templates into template folders for your module that are modified from the base/default or default/default templates just enough to make your module work in those themes.
Add custom layout to your module that makes these changes when it is installed - override the template for the blocks you need to modify in the layout:
<checkout_cart_index><!-- on the cart page -->
<reference name="checkout.cart"><!-- in the cart block -->
<action method="setTemplate"><!-- change the block's template -->
<template>path/to/your/modified/template.phtml</template>
</action>
</reference>
</checkout_cart_index>
You should also provide documentation on how to integrate your changes into third-party templates by adding echo $this->getChildHtml('your.block.alias'); where necessary.
People who have customised their themes, have to accept that they must customise other features, or adapt their existing changes, to use them in their themes, too.

How to style a single wordpress widget

I am using a newsletter plugin in http://coconutwaterblog.com. But i want to style that single widget with heading background as yellow.
Can anyone suggest me how to do this.
Thanks
Depending on how the widget is developed, it could be pushing the styles inline and not via CSS.
Use Developer Tools (such as Firebug) to determine where the current styles are coming from to determine where they need to be altered to achieve the desired result.
If able, you could then alter the theme style sheet to include what you wanted to do to the specified element.
After viewing your site, I had problems determing which widget you were attempting to alter. If ti's the "FROM THE BLOG" widget, the CSS would appear as such:
#omc-sidebar.omc-right ul.xoxo li#pages-2.omc-widget h3.widgettitle {background:yellow;}
And, after looking at the markup on the page, it appears those attributes come in to play on line 80 of the document itself, which means you're not going to be able to over-ride them with a style sheet. You will have to alter the code either in the plugin of the theme itself.

How to show wishlist block in header magento

I would like to able load my 'wishlist' on header block in my magento-1.6 site.
I am using magento1.6.2.0. Now my wishlist is showing up on left side block.
I just changed the reference of wishlist.xml from left to header like
<reference name="header">
<block type="wishlist/customer_sidebar" name="wishlist_sidebar" as="wishlist" template="wishlist/sidebar.phtml"/>
</reference>
But its not coming
How can I achieve that..? Which xml file i want to edit ..?
All layout XML files are one - that is, they are merged as part of typical rendering.
You need to edit the page/html/header.phtml file and add this bit of code:
<?php echo $this->getChildHtml('wishlist') ?>
Before you do any of this though you should read through the articles at the Official Magento Knowledge Base, paying particular attention to the theme hierarchy and developer articles. The time to get theme customizations right is at the beginning of a project.

Categories