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;
}
?>
Related
Is there a way to add a css class name to empty paragraphs in ckeditor so I can target them with css?
Empty paragraphs in ckeditor are not really empty because they contain a br tag so I can not use :empty to target them.
From what I can see, the good thing is that those <br> inside empty paragraphs have an attribute which makes them easy to target.
In the future, you might use a pure CSS solution like this one.
p:has(> br[data-cke-filler="true"]) {
/* styles here */
}
For now, you either have to style the directly.
Depending on what you're trying to accomplish, maybe applying css to the <br> would suffice.
br[data-cke-filler="true"] {
/* styles here */
}
And if you are able to run javascript in ckeditor. This can easely be done today.
Examples : with jQuery
$( "p:has(br[data-cke-filler="true"])" ).addClass( "MyEmptyParagraphsClass" );
or
$( "br[data-cke-filler="true"]" ).parent().addClass( "MyEmptyParagraphsClass" );
Example : with Native Javascript
var brs = Document.querySelectorAll("br[data-cke-filler="true"]");
brs.forEach(function(br) {
br.classList.add("MyEmptyParagraphsClass");
});
In CKEditor 4, you can have a configuration file.
And you can add the custom config with the options here.
In your case, you might need these options :
config.ignoreEmptyParagraph = false;
config.fillEmptyBlocks = false; // Prevent filler nodes in all empty blocks.
Meanwhile in CKEditor 5, you can try these documentations about Block Widget :
Adding a css class to block elements
Inline and block content
I have been trying to find out how to add PHP from ACF to style some text in CSS. Using: https://www.advancedcustomfields.com/resources/color-picker/
.special-color {
background-color: <?php the_field('color'); ?>;
}
To echo php into workable CSS, you'll have to include the CSS in the php sections of the site (or something more advanced, probably using functions.php). This will work if you simply add:
<style>
.special-color {
background-color: <?php the_field('color'); ?>;
}
</style>
..to (say) your single.php file within the loop.
As an aside, I don't think this would be a viable way to alter site colours (if that's what you are trying to do?), but more as a way of (say) specifying a particular color for a title of one post.
Then you might think of including the style INLINE (pseudo code):
<h1 style="color: <?php the_field('color'); ?>">Post title</h1>
Simply I get the "advanced custom field" value (which is custom_color for an element) of the current post, and then change the element's color using JQuery.
So I created a new js file (custom_css.js) in the child theme with the following code:
jQuery(document).ready(function($) {
console.log(css.custom_color);
// add dynamic css to the elements
});
Then here is the code in functions.php file:
add_action('wp_enqueue_scripts', 'custom_css');
/* Get position details */
function custom_css() {
wp_enqueue_script('custom_css', get_stylesheet_directory_uri() . '/js/custom_css.js', array('jquery'));
wp_localize_script('custom_css', 'css', array(
'admin_url' => admin_url(),
'custom_color' => get_field('custom_color', get_queried_object_id() )
));
}
How can I have different breadcrumbs background pictures, depending on visited page? Is this possible without using some additional modules?
You really don't need a module for this. What you can do is specify a div id on each page (in the content), and then, you will have a CSS that is something like the following:
#page-123 .breadcrumb{
background-color: #ff0000; /* background color is red */
}
I think the easiest way is to modify the index.php file of your template:
Something along the lines:
<head>...</head>
<?php
$params = &$app->getParams();
$pageclass = $params->get('page_title');
$pageclassname = str_replace(' ', '-' ,strtolower($pageclass));
?>
<body id="<?php echo $pageclassname; ?>"> ... </body>
That way you have a nice id that you can use for all your styling needs and your css code is more readable.
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;
}
I have styled my images on my Content Page Template to have borders, backgrounds and box-shadow. If I don't use the optional image field and leave it empty, it leaves the css styling with a small box. I have been trying to hide the entire .content-img class if there is no image present. The code below works fine for rendering the images if they are present. How to hide it if no image is present.
<?php the_field('top_headline'); ?></h1>
<div class="content-top"><?php the_field('content_top'); ?></div>
<div class="content-img"><?php
$image = get_field('content_image');
$size = 'medium'; // (thumbnail, medium, large, full or custom size)
if( $image ) {
echo wp_get_attachment_image( $image, $size );
} ?>
Thanks for your help in advance.
So I took care of it using CSS instead of in the array. instead of using the css class .content-img (which is my parent div), I added the image to the class .content-img img and if no image is present, the css wont show.