Is it possible to add icons to all/some of the menu-links in your account-dashboard? Is there a node/style-attribute in the layout XML-file that should come with the addLink-action?
<action method="addLink" translate="label" module="randomname"><name>randomname</name><path>randomname/index/credits</path><label>Credits</label></action>
You have your default Account Dashboard, Account Information, Addresses, My Orders,... menu-items, but I added a new one; "Credits", and I want to make it "pop" out with an icon and/or another background-color. Couldn't figure out how to do it so far.
Thanks!
EDIT:
Ok, I've found out that there's no parameter to set a css class or id in the addLink() function:
public function addLink($name, $path, $label, $urlParams=array())
{
$this->_links[$name] = new Varien_Object(array(
'name' => $name,
'path' => $path,
'label' => $label,
'url' => $this->getUrl($path, $urlParams),
));
return $this;
}
Now you have two options to add icons to the links. 1. Overwrite the Mage_Customer_Block_Account_Navigation Block Class within your own module and extend the addLink method or 2. you could set the css class/id via jQuery. Good Luck!
Related
I developed a wordpress theme. I want to add dark mode option in the customizer. I want to make this choice with the combobox.
When dark mode is selected, it is enough to add a class named dark in the body element. Likewise, when the light mode is selected, it is enough to add the light class named in the body element. How can I do that? (I can do the rest with css.)
Your question is a bit vague, I think you're saying that you're using a plugins to handle the darkmode or nightmode but i'm unssure... Using a plugin to handle the nightmode is unnecessary.
Putting in place, a nightmode is fairly simple, we want to add a css class (let's call that class .night) to our body tag. Upon a user click we want to toggle 2 differents states. Our current toggle state need to be saved as a LocalStorage item. Once this is done, we will define appropriate colors for each sections, div, and any other content in our css. to Let's get started.
Most of the theme are using jQuery (a JS library), it will be the only requirement.
$(document).ready(function () {
null != localStorage.getItem("state") && (localStorage.settingNight, $("body").toggleClass("night"), $("#toggle").toggleClass("selected")),
$("#toggle").click(function () {
$("body").toggleClass("night"), $("#toggle").toggleClass("selected"), $("#toggle").hasClass("selected") ? localStorage.setItem("state", "true") : localStorage.removeItem("state");
});
});
Here we define multiple css classes and ids:
#toggle, This is our button. Together with the .selected class, they're defining the LocalStorage state item.
.night, we use the .night css class to apply our appropriate colors for each sections, div, and any other content.
'.selected', we use the '.selected' css class to know which state we are in. We can also apply a custom style to our #toggle button.
In our html we can now add the following:
<button id="toggle">Nightmode</button>
This is our toggle button, upon receiving the user click, it will switch state.
And in our css we can customize the appropriate colors:
.selected{background-color:#f17d3b!important;border-color:#f17d3b!important;}
body.night,
body.night html{background-color:#1d1e22!important;}
Here we define our colors for each sections, divs, text ...etc. We use body.night .class to target our classes behaviours when the night state is selected.
Finally, I've made a simple codpen with a working example for you to get you started more easily! In this example i'm using the Bootstrap framework, which is unnecessary.
Source # https://codepen.io/amarinediary/pen/poErgVw
Thanks to LocalStorage, our browser remembers the night state.
I found a solution and it works for me.
To add options to customize page in administration panel:
$wp_customize->add_setting(
'theme_mode',
array(
'default' => 'light',
'type' => 'theme_mod',
'capability' => 'edit_theme_options',
'transport' => 'refresh',
'sanitize_callback' => 'mytheme_sanitize_select',
)
);
$wp_customize->add_control(
'theme_mode',
array(
'description' => __( 'Choose the theme mode', 'mytheme' ),
'settings' => 'theme_mode',
'section' => 'mytheme_general_theme_settings',
'type' => 'select',
'priority' => 10,
'choices' => array(
'light' => 'Light',
'dark' => 'Dark',
),
)
);
When Dark Mode is selected from the management panel, to add a class to the body (in functions.php):
function mytheme_dark_mode( $classes ) {
if ( ( get_theme_mod( 'theme_mode', 'dark' ) === 'dark' ) ) {
$classes[] = 'dark-theme';
return $classes;
}
else{
return $classes;
}
}
add_filter( 'body_class','mytheme_dark_mode' );
If there is an error in the code, I would appreciate it if you fix it.
How can I add placeholder or CSS classes to login fields using wp_login_form?
The function wp_login_form in wp-includes/general-template.php renders the login form from an array of arguments:
$default = array(
'echo' => true,
...
...
);
and then creates the <form>...</form>. There is no way I can add a class name to input fields or the submit button. I want to use bootstrap classes for this purpose. Currently I have to override default classes rendered by WordPress.
I don't want to do that. For example if I want to make username box to look like an input with class form-control, I have to either write additional classes in my CSS for default WP classes or take help of jQuery to remove default classes and add mine.
What is the best way to do it? wp_login_form does not have attributes set for placeholder.
In brief I need to pass the following:
1. Pass class name from outside via an array $args,
2. Pass placeholder text for input fields
This might be a solution, eventhough it isn't perfect.
Wordpress' functon wp_login_form() does not support changing the css class. And I would recommend not to use Javascript for changing the DOM when you do not absolutely have to.
My solution to modify the CSS class was to set the echo property to false so the function returns the result as a string. Then, use str_replace() to find the classes we want to replace and replace it with the class names we want to use.
$args = array(
'echo' => false,
// etc...
And now replacing the class names...
$output = wp_login_form( $args );
$output = str_replace( 'class="input"', 'class="df-input"', $output );
echo $output;
You could also convert $output into a DOMDocument() so you can replace the class names in an more elegant manner.
According to its documentation, wp_login_form() does not receive an argument to set a class name for itself of input elements. Presumably because you wouldn't have more than one login form on the page.
It is possible to add an id to the inputs of the forms like so:
$args = array(
'form_id' => 'loginform',
'id_username' => 'user_login',
'id_password' => 'user_pass',
'id_remember' => 'rememberme',
'id_submit' => 'wp-submit',
);
However, seems that in order to set other attributes such as class and placeholders you would have to use Javascript. This can be done without JQuery. This would look like something along the lines of document.querySelector('#username').setAttribute("class", "username");
See the querySelector documentation.
CakePHP creates a div that automatically wraps any of its input tags that are built with the formhelper as followed:
$this->formhelper->input('something');
Such that the output looks about as followed:
<div class='input'>
<input />
</div>
I know that there is a way to add classes to the input tag i.e.
$this->formhelper->input('text', array('class' => 'some_css'));
But how would you add a style to the div that is automatically created by CakePHP. This might be something where the core needs to be hacked, but I want to know if there is a better way to do this, so that I get something as followed:
<div class='input other_class_I_want_here'>
<input />
</div>
Thank you to anyone who can help.
Simply add a new class to the div.
$this->formhelper->input('text', array('div'=>array('class'=>'divClass'),'class' => 'some_css'));
should actually output
<div class='input divClass'>
<input class='other_class_I_want_here' />
</div>
The above answer is certainly correct. And works beautifully if you only require adding a class in a one (or a few) specific locations.
However, anyone arriving here looking for a way to add a class to input div wrappers application-wide (ex: if you're using a front-end framework which often requires a specific class name be added to input wrappers to enable auto-styles) there is a MUCH better solution. That being, a custom FormHelper.
In the App/View/Helper directory create and save a file "MySuperCoolFormHelper.php"
Place the following code in the file:
App::uses('FormHelper', 'View/Helper');
class MySuperCoolFormHelper extends FormHelper {
protected function _divOptions($options) {
if(isset($options['div'])
$options['div'] .= ' class1 class2 class3'; //note the prefixing space
else
$options['div'] = 'class1 class2 class3';
return parent::_divOptions($options);
}
}
To use this new form helper globally, add the following code to your AppController:
public $helpers = array(
'Form' => array(
'className' => 'MySuperCoolFormHelper'
)
//The rest of your helper inits
);
... and BLAMMO you're done!
CakePHP 3:
For applying 'form-group' to DIV and 'form-control' to the input field
<?=
$this->Form->control('year', [
'type' => 'select',
'value' => $year,
'options' => $years,
'label' => false,
'class' => 'form-control',
'templates' => ['inputContainer' => '<div class="form-group">{{content}}</div>']
]);
?>
I try to add some css attributes to labels in my custom sfForm but I can't achieve it.
In my custom class myForm extends sfForm, I create all textfields dynamically:
public function configure()
{
$widgetFixtures = array();
foreach ($fixtures as $fixture) {
$widgetFixtures[$fixture->getId()] = new sfWidgetFormInputText(
array('label' => $fixture->getTeamNameDom()),
// I would like to add something like: array('class' => $fixture->getCSS()),
array('value' => $fixture->getScore1(), 'readonly' => 'readonly')
);
}
$this->setWidgets($widgetFixtures);
}
I tried to format the rendering with setFormFormatterName but without success.
Note: I can't use renderLabel($value, $attributes = array()) in the template because I get the CSS class from the DB (as you may have seen, I have to use: $fixture->getCSS()).
Could someone shed my light?
Many thanks.
Here is how I solved it.
I took both suggestions from johnwards and richsage and put them together :
"This sort of stuff should be handled in the view/action."
"Access to the options/attributes passed to the Widget itself."
First, I add the CSS class to the input itself (even if I will not use it).
In my custom class myForm extends sfForm,
foreach ($fixtures as $fixture) {
$widgetFixtures[$fixture->getId()] = new sfWidgetFormInputText(
array('label' => $fixture->getTeamNameDom()),
array('value' => $fixture->getScore1(),
'readonly' => 'readonly',
'class' => $fixture->getCSS())
);
}
Then, in the template, instead of using echo $form;, I add the CSS class to the label as shown below:
foreach ($form as $widgetId => $widget) {
...
$labelClass = $widget->getWidget()->getAttribute('class');
echo '<td>'.$widget->renderLabel(null, array('class' => $labelClass)).'</td>';
...
}
Maybe it is not the best way to solve this issue but it works.
Thanks all for your feedback!
What you're trying to do seems possible but your greyed out syntax seems a little off. Try this:
$widgetFixtures[$fixture->getId()] = new sfWidgetFormInputText(
array('label' => $fixture->getTeamNameDom()),
array('class' => $fixture->getCSS()),
array('value' => $fixture->getScore1(), 'readonly' => 'readonly')
);
... or check "The sfWidgetForm Base Class" section here: http://www.symfony-project.org/forms/1_4/en/A-Widgets
The class attribute needs to be passed in as an array in the second parameter for all form widgets.
$this->setWidget('foo', new sfWidgetFormInputText(array(),array('class','fooclass'));
You could try overriding the widget class if you want to add CSS to labels - specifically the methods that render the label. You could then do something like
$foo = new myWidgetFormInputText(array("myCSSClass" => $fixture->getCSS()));
and then override your renderLabel() method or similar in your widget. Your widget will have access to the options you pass in - in the above example myCSSClass is the option key. You can then apply this class value to your widget's label.
It's much easier than that. Just apply CSS to the label for tag...
label[for=payment_cardNumber]
{
margin-top: 20px;
color: red;
}
I'm trying to theme a modules output.
In particular i'm working on http://drupal.org/project/service_links
Any idea how that works?
Thanks in advance!
Generally, if you want to theme a module you have a few options.
Overwrite theme functions. You can overwrite the theme functions that the module uses/implements to change the markup, one example of such a function is theme_service_links_node_format. You change make a function in your theme's template.php called 'your_theme_name_service_links_node_format' and make your custom markup in it instead.
CSS. If you don't need to change the actual markup of a modules output, you only need to add the needed css, to theme it into your liking.
In some cases, it doesn't look like sercive links is such a case, you can also make your own templates, and make Drupal use them instead.
Another way, again it doesn't look like service is service links is such a case, is to implement preprocess functions in your template.php. This is needed if you want to alter how certain template variables are generated.
If you want to implement your own theming function services links defines 3 themables. In your theme you should imlement the following
yourtheme_service_links_build_link()
yourtheme_service_links_node_format()
yourtheme_service_links_node_format()
'service_links_build_link' => array(
'arguments' => array(
'text' => NULL,
'url' => NULL,
'title' => NULL,
'image' => NULL,
'nodelink' => NULL,
),
),
'service_links_node_format' => array(
'arguments' => array('links' => NULL),
),
'service_links_block_format' => array(
'arguments' => array('items' => NULL),
),
Have a look at http://drupalcode.org/viewvc/drupal/contributions/modules/service_links/service_links.module?view=markup line 389 and below
What's the problem? I mean, every module should use a different name for main container and so. You can use css selector in clever way to refer the template pages.
For example, the FAQ module use identificator to all part of html output, like faq-question and faq-answer in the main page.
Just inspect your resulting code and css it, if possible modify the module-related css!
If the module implements its own theme hooks you can use that. You can also use CSS.