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.
Related
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() )
));
}
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.
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;
}
?>
This would be particularly helpful when making a new "child stylesheet" which overwrites some parts of the "parent stylesheet".
For example, when making a RTL version of a WordPress theme, I would keep all horizontal positioning attributes and delete the rest.
Is there a way or a tool to achieve that?
I think the most viable solution would be to use php or the like to write in the css file directly. So in the css.php file:
<?php
header("Content-type: text/css; charset: UTF-8");
if($rtl){
$direction = "right";
}else{
$direction = "left";
}?>
.selector{
<?php echo $direction; ?>: 20px;
}
....
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...