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;
}
....
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() )
));
}
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'm a beginner of php, I found this custom style in Wordpress Redux framework but I don't understand how the code work.
I would like to know how this formula works:
<?php echo ($logo_h) ? (str_replace('px','',$logo_h) + 55) : 125; ?>px;
Can someone please explain. So much appreciated.
<?php
$logo_w=$sellegance_opt['logo_size']['width'];
$logo_h=$sellegance_opt['logo_size']['height'];
?>
#header .header_container {
height: <?php echo ($logo_h) ? (str_replace('px','',$logo_h) + 55) : 125; ?>px;
}
.header3 #header .header_container {
height: <?php echo ($logo_h) ? str_replace('px','',$logo_h) : 70; ?>px;
}
.header3 .desktop_nav {
left: <?php echo $logo_w; ?>;
margin-left: 10px;
}
.logo {
width: <?php echo ($logo_w) ? str_replace('px','',$logo_w) : 160; ?>px;
height: <?php echo ($logo_h) ? str_replace('px','',$logo_h) : 70; ?>px;
margin-left: -<?php echo ($logo_w) ? (str_replace('px','',$logo_w)/2) : 80; ?>px;
}
i haven't used that framework yet but looking at the code i can surely tell that this framework certainly offer you to set the height and width of the logo in your backend and gets those entered values as
$logo_w=$sellegance_opt['logo_size']['width'];
$logo_h=$sellegance_opt['logo_size']['height'];
and uses the $logo_w and $logo_h to create the design accordingly.
If you are planning to use just this part of the code from the framework without the framework then you can't. You must have the whole framework and set those values from the appropriate locations.
//add this in functions.php
function mytheme_custom_options(){
global $sellegance_opt;
$logo_w=$sellegance_opt['logo_size']['width'];
$logo_h=$sellegance_opt['logo_size']['height'];
<style>
/*use your style here */
</style>
}
add_action('wp_head','mytheme_custom_options');
Ok so I try to explain, but im not sooo good in explaining things :P
The PHP
The redux optionsname seems to be "sellegance_opt" see lines 12 & 13 in the sample-config.php shipped with redux.
logo_size seems to be a field with (at least) the values url, width and height.
the PHP string is dropped to the header.php just before the closing header tag I guess. So the variables are callable in a file.
THE CSS
the css styles the output of the php
He (or she) is calling the attribute and gets a result with the uploaded media sizes. He now do some math to get the image size needed to fit the template.
But without all the code, much of this is guessing.
All the best.
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...
Quick question. I want to change the color of an int based on the value being positive or negative, using CSS if possible.
Any ideas?
In PHP you could do this:
<span style="color: <?php echo ($var < 0 ? '#FF0000' : '#00FF00'); ?>">Some text</span>
This evaluates the variable $var, if less than zero, applies red to the style (FF0000) otherwise green (00FF00).
It depends on the language you are using. In just about any language you can set the class of the tags around the value using the dynamic part of the language. If the value doesn't have its own tags you can use <span></span> around the value to give it a class. then you just use the dynamic code to set the class.
If you are using a language like Ruby there are some CSS Selectors Gems you can use but I don't know much about them or if they will help.
I use wordpress and the table with newly posted posts and custom posts are on index.php, the code I am inserting between td tags
<td style="font-weight: <?php echo ($var <= 0 ? 'normal' : 'bold'); ?>"><?php echo get_portf_posts_count_from_last_24h(); ?></td>
I tried also this code and neither this works:
<?php
if ($output <= 0) {
$output = 'normal';
print $output;
}
else // +
{
$output = 'bold';
print $output;
}
?>