I have a wordpress site which has styles made from the beginning to affect the original text editor wordpress .
For example:
If the text editor , in the "Visual " tab, I put a left-aligned image , this does not align , I assume that the class that you are placing the editor does not exist. This applies also to the " p " tags have different styles which you placed the editor ( "visual" tab).
Having explained this, how do I put classes and original styles of the "Visual " tab of the editor , so that it functions as it should ?
Any ideas ?
Thank you
You can add a custom stylesheet for the visual editor.
In your theme functions.php :
function my_editor_styles() {
add_editor_style( get_stylesheet_directory_uri() . '/css/custom-editor.css' );
}
add_action('after_setup_theme', 'my_editor_styles');
Then in your custom-editor.css file, add your rules in this way to prevent any conflict with WP admin:
body#tinymce.wp-editor p {
color: red;
}
Related
I am using WordPress and the PopUp Maker plugin.
I try to center the 'DOWNLOAD NOW' button, but unsuccessfully.
I should probably use a CSS code but have no idea what to do with it.
Any idea how to fix it?
The css you need is the following:
.pum-container .pum-content button {
display: block;
margin: 0 auto;
}
The pum-container and pum-content should be the fitting class for the popup maker plugin.
Add these lines of code to your functions.php:
add_action('wp_enqueue_scripts', 'theme_enqueue_styles');
function theme_enqueue_styles()
{
wp_register_style(THEME_NAME . '-style', THEME_PATH . '/style.css');
wp_enqueue_style(THEME_NAME . '-style');
}
Then add a file called style.css on the same level as your functions.php and add in the css lines from above
How to remove Wordpress icon with CSS for not login users in the upper left corner.
Is this possible with css or do I need to go with php?
You can see it on my page http://virtual-forms.com
Edit: added screenshot:
screenshot
create a file with name like removeicon.php and put it in wp-content/plugins/ folder, go to your wp dashboard, plugins and activate it(plugin) and your unwanted icon will disappear for none logged in users:
<?php
/*
Plugin Name: remove icon
*/
function remove_icon_css() {
echo
'<style>
#wp-admin-bar-wp-logo{
display: none;
}
</style>';
}
function remove_icon_code(){
if (!is_user_logged_in()) {
add_action('wp_head', 'remove_icon_css');
}
}
add_action('wp', 'remove_icon_code');
you can also put this code on your /wp-content/themes/{theme-name}/functions.php or child-theme/functions.php
if you want to know about child-themes and functions.php read here
I included mycustom.css in .info file but it is partially applying on my markup. My contents should be aligned side to each other ,for this i applied "display:inline-block".but they are aligned down to each other. This style is perfectly working with out using drupal. I had also used some code to disable builtin css of drupal 7 but no effect. Here is my code:
<?php
function _phptemplate_variables($hook, $vars)
{
$css = drupal_add_css();
unset($css['all']['module']['modules/system/system.css']);
unset($css['all']['module']['modules/system/defaults.css']);
$vars['styles'] = drupal_get_css($css);
return $vars;
}
?>
update: My plugin css does not work in the admin area. the below works on my website for public viewing but not on my admin page that i am building.
original question:
I'm trying to make the html text "Make this red", red!
I have a plugin I've added to my Wordpress plugins folder. In the "bio-plugin" folder in a file called "plugin.php" i have this code:
function register_bio_style(){
wp_register_style('bio-style',plugins_url('css/bio-style.css',__FILE__), false, '1.0.0', 'all');
}
add_action('init','register_bio_style');
function enqueue_bio_style(){
wp_enqueue_style( 'bio-style' );
}
add_action('wp_enqueue_scripts', 'enqueue_bio_style');
then later i have this html working:
<div class='bio_btn'>Make this text red</div>
then i have put bio-style.css in a folder called css and that is in the same directory as plugin.php
the bio-style.css code is:
.bio_btn{
color: red;
background: black;
}
the sentence "Make this red" appears on the (admin) page but it is black.
Try this :
<?php
/*
Plugin Name: Bio
Plugin URI: URL of site
Description: Custom Plugin
Version: 1.0.0
Author: Rohil
Author URI: URL of author
*/
// Register the style like this for a plugin:
wp_register_style( 'biocss', plugin_dir_url( __FILE__ ) . 'css/bio-style.css' );
// For either a plugin or a theme, you can then enqueue the style:
wp_enqueue_style( 'biocss' );
?>
<div class='bio_btn'>Make this text red</div>
I cant make a comment here to ask so im just going to make a semi blind answer here.
Is there another css file with ".bio_btn" in it?
anyways there's probably a child css over riding it.
this is bad method but it will probably work
CSS
.bio_btn{
color: red !important;
background: black;
}
solved! For admin pages you must replace "init" with "admin_init" and "wp_enqueue_style" with "admin_enqueue_style" :)
I'm going to make WP widget plugin and want to make it theme independent.
What I mean about this is the fact that I need this widget to keep style set in its CSS regardless of theme used. I'm worrying that theme will overwrite its style.
What's the best CSS technique to do this ? Should I use style based on widget ID(#) or its Class(.) ?
It's unlikely that someone overwrite your style if you define a container with an ID and have all your style declarations use this ID in the selector.
#MyWidget p {
color: #ffcc00;
}
#MyWidget p a {
text-decoration: none;
}
The more specific your selectors are, the more priority they have.
when the wp_head() function is fired, use that to include a stylesheet to your css file..
function wp_mywidget_css() {
$siteurl = get_option('siteurl');
$url = $siteurl . '/wp-content/plugins/' . basename(dirname(__FILE__)) . '/styles.css';
echo "\n\n<!-- your plugin css styles -->\n";
echo "<link rel='stylesheet' type='text/css' href='$url'>\n";
echo "<!-- /your plugin css styles -->\n\n";
}
add_action('wp_head', 'wp_mywidget_css');
place a file called 'styles.css' your plugin folder, which would include the code from the post above, this should stop any theme messing with your styles, just name your widget styles something unique...