I'm building a theme options system to my theme using the Redux framework.
I want to append a css property (background-image) when the user press specific button in a "Button Set" field.
The code:
array(
'id' => 'opt_change_menu_button',
'type' => 'button_set',
'title' => __('Change Menu Button', 'faster'),
'options' => array(
'yes' => __('Yes', 'faster'),
'no' => __('No', 'faster'),
),
'defualt' => 'no',
),
When the user press YES, I want, in addition to what already happen (some other options appear in the bottom), to append a CSS property in the front end ( background-image: none), that overwrites the other properties which relate to the chosen selector.
In some other fields it is possible using the "output" value, but in that case I didn't fiend it possible, after hours of struggling.
Thanks in advance!
Lead dev of Redux here. You'll have to append your own JavaScript for in-panel changes via JS. Luckily, it's quite easy. https://docs.reduxframework.com/core/advanced/custom-panel-css/
Related
I have searched for this topic here and Google but I only found the solutions with PHP frameworks (for example, YII and Laravel)
I am developing a simple CMS and I would like to add widget system just like WordPress ( Recent Comments, Categories widgets )
List available widgets.
Users can active the widgets and use them in sidebar.
My steps:
1. First at all, I already made an admin tool as the screenshot blow ( jQuery UI sortable works fine)
Here is my php code:
$available_widgets = array(
0 => array(
'id' => 'recent-post',
'title' => 'Latest Pots',
'option' => array( 'display_count' => 5, 'multi_widget' => 0)
),
1 => array(
'id' => 'recent-comment',
'title' => 'Recent Commets',
'option' => array( 'display_count' => 5, 'multi_widget' => 0)
),
2 => array(
'id' => 'text-box',
'title' => 'Text Box',
'option' => array('multi_widget' => 1)
)
);
View
foreach ( $available_widgets AS $available_widget ) {
if ( $available_widget['option']['multi_widget'] == 0 ) {
echo '<li class="widget-box widget-single" data-widget-id="' . $available_widget['id'] . '" ><div class="widget-handle">' . $available_widget['title'] . '</div></li>';
}
else {
echo '<li class="widget-box widget-multiple" data-widget-id="' . $available_widget['id'] . '" ><div class="widget-handle">' . $available_widget['title'] . '</div></li>';
}
}
But I still no idea about the next step, any idea will be grateful.
Thanks.
Update:
For my step 2 I made a simple EventDispatcher, I put the link here if someone else needs it.
https://github.com/terrylinooo/PHP-EventDispatcher
You may be underestimating the complexity of this question. If you are doing this from scratch, there will be several things to consider.
Are you creating all your widgets, and then just want the user to be able to pick and choose which ones they want visible?
If so, roughly I would probably:
Obviously make html sidebar that will house the widgets, styled by your css. Have the width of column set to 0 if no widgets are published.
And of course make all your widgets in separate files probably in their own folder.
Have database table with at very least path to widget file, "published" boolean column, and "widget_order" column.
Choose where in the admin area the user will choose which ones to show, and have it change the "published" column in the table, and maybe also a small text box or dropdown where they can specify the order number.
Then on the front end, just do a database lookup in the sidebar, if the number of rows from the module table that are "published" is greater than 0, then 'echo' out a css value that will give your column the correct width (of your choice) instead of 0 width keeping it hidden otherwise if none are enabled.
The database look up should have the ORDER BY clause to follow the 'widget_order' values. This obviously is how the widgets get displayed in order by the users preference.
Now each widgets functionality is all in each file, so put any relevant php, Javascript etc, in each one which will make them easy to develop and modify. Obviously you can refactor after where feasible.
Hope this gives you an idea of what you're getting in to lol..
Take a look at Observer Pattern
or Event Dispatcher Pattern for plugin system
When installing plugins, don't forget to save it to the database
And, to list available widgets, you just need to query the database which plugins are available or activated.
Is there any way to prevent certain custom wysiwyg styles to be applied to certain HTML elements?
Suppose I have two styles called "red" and "framed". One colours text red and the latter puts a frame around photos.
Can I control which styles are available when highlighting text or an image? For example, I want the style "framed" not to be available when highlighting text and the style "red" not showing in the styles dropdown menu when highlighting an image.
Tinymce configuration is kinda tricky in silverstripe, though it looks easy once you got it running.
Jonom wrote down some configs and put it on Github, called tinytidy module, there you might find a possile solution. So best is to try out this module as it adds some custom css to the editor.
Copied from there, put in your /mysite/_config.php:
$formats = array(
// Define the styles that will be available in TinyMCE's dropdown style menu
// * Use 'selector' to specify which elements a style can be applied to
// * See Headings example below for explanation of different settings
// * Using 'classes' allows a class to be combined with others while 'attributes'=>'style' removes other classes before applying
// Text styles
array(
'title' => 'Selected text'
),
array(
'title' => 'highlight red',
'classes' => 'red',
'inline' => 'span',
'selector' => 'i,em,b,strong,a'
),
array(
'title' => 'Images',
),
array(
'title' => 'Put a frame around a photo',
'attributes' => array('class'=>'framed'),
'selector' => 'img'
)
);
//Set the dropdown menu options
HtmlEditorConfig::get('cms')->setOption('style_formats',$formats);
hope that helps, wmk
I am using a wordpress theme that has it's own framwork which is based upon redux framework I think. I am modifying this theme using a child theme. I want to add to the Theme Options in the backend and I found a function within the files of the parent theme that seems to be exactly what I need:
/*
*
* Custom function for filtering the sections array. Good for child themes to override or add to the sections.
* Simply include this function in the child themes functions.php file.
*
* NOTE: the defined constansts for URLs, and directories will NOT be available at this point in a child theme,
* so you must use get_template_directory_uri() if you want to use any of the built in icons
*
*/
function add_another_section($sections){
//$sections = array();
$sections[] = array(
'title' => __('A Section added by hook', 'swift-framework-admin'),
'desc' => __('<p class="description">This is a section created by adding a filter to the sections array. Can be used by child themes to add/remove sections from the options.</p>', 'swift-framework-admin'),
// Redux ships with the glyphicons free icon pack, included in the options folder.
// Feel free to use them, add your own icons, or leave this blank for the default.
'icon' => trailingslashit(get_template_directory_uri()) . 'options/img/icons/glyphicons_062_attach.png',
// Leave this as a blank section, no options just some intro text set above.
'fields' => array()
);
return $sections;
}
//add_filter('redux-opts-sections-twenty_eleven', 'add_another_section');
I have added this function to my child theme's functions.php and uncommented the add_filter. However, this does not seem to work and no new section has been added.
I came across this discussion elsewhere which suggests the name of the function needs to be changed (I was getting the same error mentioned on there). I have done that and it still won't work.
Here is what I have in my child theme functions.php
function add_another_section_bl($sections){
$sections = array();
$sections[] = array(
'title' => __('A Section added by hook', 'swift-framework-admin'),
'desc' => __('<p class="description">This is a section created by adding a filter to the sections array. Can be used by child themes to add/remove sections from the options.</p>', 'swift-framework-admin'),
// Redux ships with the glyphicons free icon pack, included in the options folder.
// Feel free to use them, add your own icons, or leave this blank for the default.
'icon' => trailingslashit(get_template_directory_uri()) . 'options/img/icons/glyphicons_062_attach.png',
// Leave this as a blank section, no options just some intro text set above.
'fields' => array()
);
return $sections;
}
add_filter('redux-opts-sections-twenty_eleven', 'add_another_section_bl');
I wasn't sure if the filter name 'redux-opts-sections-twenty_eleven' needs editing as it mentions the twenty eleven theme. I have tried it with different theme names at the end instead of twenty_eleven and that had no effect.
Any help would be greatly appreciated! On a side note I have been able to accomplish adding new options to Theme Options by copying over the whole framwork folder into my child theme and defining the path to the framework in the child theme's functions.php. I just felt that there should be a much slicker, neater way to achieve this and I thought that function sounded perfect.
Many thanks.
Lead dev of Redux Framework here. This solution only works if you're using Redux Framework 3.1+. If you have an older version, install the Redux Framework plugin and it will override the version inside your theme.
First go to the current option panel. Open up a javascript console (use chrome or firefox) and type: redux.args.opt_name. That will echo out a name. Copy that and paste it into this function replacing OPT_NAME with the name that was echo'd out:
function add_another_section_bl($sections){
$sections = array(); // Delete this if you want to keep original sections!
$sections[] = array(
'title' => __('A Section added by hook', 'swift-framework-admin'),
'desc' => __('<p class="description">This is a section created by adding a filter to the sections array. Can be used by child themes to add/remove sections from the options.</p>', 'swift-framework-admin'),
// Redux ships with the glyphicons free icon pack, included in the options folder.
// Feel free to use them, add your own icons, or leave this blank for the default.
'icon' => trailingslashit(get_template_directory_uri()) . 'options/img/icons/glyphicons_062_attach.png',
// Leave this as a blank section, no options just some intro text set above.
'fields' => array()
);
return $sections;
}
// In this example OPT_NAME is the returned opt_name.
add_filter("redux/options/OPT_NAME/sections", 'add_another_section_bl');
Good luck!
** UPDATE **
Also with the Redux API you can easily add a new section that way.
Redux::addSection(array(
'title' => __('A Section added by hook', 'swift-framework-admin'),
'desc' => __('<p class="description">This is a section created by adding a filter to the sections array. Can be used by child themes to add/remove sections from the options.</p>', 'swift-framework-admin'),
// Redux ships with the glyphicons free icon pack, included in the options folder.
// Feel free to use them, add your own icons, or leave this blank for the default.
'icon' => trailingslashit(get_template_directory_uri()) . 'options/img/icons/glyphicons_062_attach.png',
// Leave this as a blank section, no options just some intro text set above.
'fields' => array()
))
That makes it a wee bit easier using our API I believe we released in Redux 3.2...
If you are using redux options with plugin your filter won't work inside a theme
for that make sure you put code inside a plugin.
Here is code that will work with theme and plugin as well!
function add_social_media_options($sections) {
$sections[] = array(
// Redux ships with the glyphicons free icon pack, included in the options folder.
// Feel free to use them, add your own icons, or leave this blank for the default.
'icon' => 'el-icon-wrench',
'title' => esc_html__('Social Media Settings', 'textdomain'),
'desc' => esc_html__('These are settings social media link', 'textdomain'),
'fields' => array(
array(
'id' => 'facebook_link',
'type' => 'text',
'url' => true,
'title' => __('Facebook link', 'textdomain'),
'compiler' => 'true',
//'mode' => false, // Can be set to false to allow any media type, or can also be set to any mime type.
'desc' => __('', 'textdomain'),
'default' => ''
),
array(
'id' => 'twitter_link',
'type' => 'text',
'url' => true,
'title' => __('Twitter link', 'textdomain'),
'compiler' => 'true',
//'mode' => false, // Can be set to false to allow any media type, or can also be set to any mime type.
'desc' => __('', 'textdomain'),
'default' => ''
),
)
);
return $sections;
}
add_filter("redux/options/redux_demo/sections", 'add_social_media_options');
I saw the following answer to the post Where are Magento static CMS blocks stored? regarding programatically using PHP generating cms/blocks in Magento.
I changed the code to the following
$newBlock = Mage::getModel('cms/page')
->setTitle('Test CMS Page Title')
->setContent('Hello I\'m a new cms page.')
->setIdentifier('this-is-the-page-url')
->setIsActive(true)
->save();
... and it works. I see a new page show up in the CMS Pages area in the backend.
What I need to add to this is the ability to set the content of the other fields in the CMS/Page. Namely:
Layout (trying to set to 1 column)
meta keyword
meta description
fields. These fields are blank currently. I so far haven't been able to figure this part out.
Thanks,
here you go:
$cmsPageData = array(
'title' => 'Test CMS Page Title',
'root_template' => 'one_column',
'meta_keywords' => 'meta,keywords',
'meta_description' => 'meta description',
'identifier' => 'this-is-the-page-url',
'content_heading' => 'content heading',
'stores' => array(0),//available for all store views
'content' => "Hello I'm a new cms page."
);
Mage::getModel('cms/page')->setData($cmsPageData)->save();
The keys of the array are the name of the fields of the cms_page table (check the db). And to know the value, I manually create the cms page I want and then see the value for this entry in the db.
I am developing a zendframework project. My sign up page contains a field "I Agree to the Terms of Use" with a check box near to it. Here I want to make "Terms of use” as a link. But I am new to the zend and PHP5. I checked the code and below is the code to display "I Agree to the Terms of Use"
'Agree' => array ('Checkbox', array (
'Required' => true,
'Decorators' => $element Decorators,
'Label' => 'I Agree to the Terms of Use',
)),
How I would make Terms of Use as a link?
You can add HTML to the label if you have your label decorator set up correctly. First, add 'escape' => false to the options of your label decorator. Without seeing your exact decorators it is difficult to say exactly how it should look for you, but it is likely to look like this:
$elementDecorators = array(
// some decorators...
array('Label',
array('placement' => 'prepend',
'escape' => false)),
// other decorators...
);
Then, add the HTML anchor to your label:
'Label' => 'I Agree to the Terms of Use',
Be wary of placing links on labels though. A label's native click action is to bring focus to the input it is associated with. If you have problems with this, you can apply the same options to a Description decorator and add the link there.
You can also do it the following way:
$radioElement = new Zend_Form_Element_Checkbox('formelement_0');
$radioElement->setLabel('Do you accept the Terms & Conditions?');
$radioElement->getDecorator('Label')->setOption('escape', false);
I dont know anything about this Framework, just guessing...
'Label' => 'I Agree to the Terms of Use',