Hi everybody I have this Wordpress website that I want to transform into an AMP website, one of the challnging task is to rewrite the css in inline.
So in the wordpress framework we have this functions.php file and inside we have the wp_enqueue_style function.
/**
* Proper way to enqueue scripts and styles
*/
function wpdocs_mytheme_styles() {
wp_enqueue_style( 'style', get_stylesheet_uri() . '/css/style.css' );}
add_action( 'wp_enqueue_scripts', 'wpdocs_mytheme_styles' );
Basically Wordpress will give us this line on out front end pages
<link rel='stylesheet' id='style' href='Path_to/css/stle.css' type='text/css' media='all' />
Can I change this display mechanism to make Wordpress display the registered styles in **INLINE this way :**
<style amp-custom>
<!-- The content of the style.css -->
<!-- .... -->
</style>
Yeah basically i have a lot of these files and I don't want to make a static change by opening each one and copy/pasting content n the header any idea?
You could do like this:
<style amp-custom>
{% include "/assets/css/main.min.css" %}
</style>
OR,
<style amp-custom>
/* any custom styles go here. */
body {
background-color: white;
}
amp-img {
border: 5px solid black;
}
amp-img.grey-placeholder {
background-color: grey;
}
</style>
Reference : AMP-DEV
You need to add the styles directly to the page head using wp_head()
add_action('wp_head', 'my_custom_styles', 100);
function my_custom_styles()
{
echo "<style>*{color: red}</style>";
}
is there any specific reason why you want to make use of inline styling?
Related
I'm working on a wordpress theme, and i want to have a custom header background. I used to use add_theme_support('custom-header); function that wordpress offers, it works but not the way i want it to. I want to have a background-image instead of an img. I made a function called header_background_callout() and i added a section, setting and control. the function works and outputs the background url that the user chooses through the customize section in wordpress. Is there a way that i can do something like this in css? : background-image: url(<?php echo wp_get_attachment_url(<?php get_theme_mod()); ?>);
Thanks in advance.
try this. echo " backgroud-img = 'url('get_theme_mod()')' ";
You can add inline styles to your theme using wp_add_inline_style:
<?php wp_add_inline_style( $handle, $data ); ?>
where $data is the CSS you want to include in your theme. This way you can have your php variables loaded as CSS for your website.
Yes kind off.
I made my css file a php file and because of that I can do as you say
background-image: url(<?php echo get_theme_mod(); ?>); // I suppose you need to echo the mod?
In the HTML you use it like;
<Link rel="stylesheet" type="text/css" href="style.php">
Edit you may need to change the header of the php file to a css file by:
<?php header("content-type: text/css; charset: UTF-8"); ?>
I found this easy way and it works the best:
In your Index.php file add:
<?php
function bg_img_alt() {
if(get_theme_mod('vibe_hero_background_setting') > 0) {
return wp_get_attachment_url(get_theme_mod('vibe_hero_background_setting'));
}else{
return get_template_directory_uri() . '/img/bg.jpeg';
}
}
?>
<style type="text/css">
background: linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.3)), url(<?php echo bg_img_alt(); ?>);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
</style>
I'm making a webshop with the plugin Woocommerce.
What I'm doing now is styling the single product page for my site. I already changed the order of the hooks. So "related products" is now above the tab screens. But it's way too high. I tried to change it with a div around it. But that doesn't work.
Photo of my problem:
http://i.stack.imgur.com/EhVO0.jpg
The code:
<div class="related">
<?php
/**
* woocommerce_after_single_product_summary hook.
*
* #hooked woocommerce_output_product_data_tabs - 10
* #hooked woocommerce_upsell_display - 15
* #hooked woocommerce_output_related_products - 20
*/
do_action( 'woocommerce_after_single_product_summary' );
?>
</div>
<meta itemprop="url" content="<?php the_permalink(); ?>" />
CSS i already tried:
.related {
top: 40px;
margin-top: 40px;
padding-top: 40px;
}
All of this doesn't work. Anyone knows how to get related products lower?
You don't need to add <div class="related"> in content-single-product.php template. Please remove it as before.
Why? Because the class related is already used in single-product > related.php template with: <div class="related products"> html tag in it.
What you can do is to add some space after tabs withs this CSS rule:
div.woocommerce-tabs.wc-tabs-wrapper {
padding-bottom:40px;
}
When you want to overlap an existing defined CSS rule on wooCommerce pages, sometimes you need to add at the end of a CSS value attribute !important. The best thing is to test a CSS rule without first and if needed with it as this:
div.woocommerce-tabs.wc-tabs-wrapper {
padding-bottom:40px !important;
}
---- (Edit) ----
Here is the CSS rule you asked last (try also without !important first):
.woocommerce .products.related ul.products {
padding-top:40px !important;
}
you can try too:
.woocommerce .products.related ul.products {
margin-top:40px !important;
}
you need dot "." operator to specify the CSS class selector & hash "#" for id selector, try this code.
.related {
margin-top: 40px !important;
}
Cheers
I am working in a php language . In my database there are normal image and a hover image . I know how to call it from the database but i don't know how to make class so that if i have 2 entries in my database for each ie normal image and hover image and by calling it from the db it will act as a 2 button image with the hover image because I have 2 rows in my column
I have defined it in between head .
<style>
.n1{background:url(../images/no.png);
width:110px; height:29px;
float:left;
margin-top:6px
}
.n1:hover{
background:url(../images/no-h.png);
}
</style>
If you are using inline styles, then you can just use this:
<?php $var = 'no'; ?>
<style>
.n1{background:url(../images/<?php echo $var ?>.png);
width:110px; height:29px;
float:left;
margin-top:6px
}
.n1:hover{
background:url(../images/<?php echo $var ?>-h.png);
}
</style>
You can create dynamics CSS using the below
Define Content-Type on the top of your .css.php file:
<?
header('Content-Type: text/css');
// print out your php-driven css...
?>
and call the file like this ..
<link rel="stylesheet" type="text/css" media="screen" href="CSS_PATH/name-of-file.css.php">
I have built a Wordpress plugin that requires to me to add CSS styles through the plugin's PHP file.
Is there a better way of doing this? I can see this getting out of hand if not done properly.
function flags() {
<style type="text/css">
<?php if(get_option('display')=='Vertical') { ?>
<?php if (get_option('language_option')=='specific') { ?>
#flags {display:none !important; }
<?php } ?>
p.hello { font-size:12px; color:darkgray; }
<?php } ?>
</style>
<?php }
}
If there isn't much CSS, a better way is to add body classes that allow you to target your selectors only when they are present:
<body class="display-vertical">
...
And move the CSS from inline to the stylesheet:
.display-vertical #flags{
...
}
Ok, based on the answer here by traitadmin (scroll down) I am trying to display different CSS for my front page and one for all other pages.
Previously, my body tag looked like this:
<body <?php body_class() ?>>
Now, I have edited it to look like this:
<body <?php if (is_home()) { ?> id="home"<?php } else { ?> body_class()<?php } ?> >
Also I have put new stylesheets in my enqueue, and all styles for the homepage now have #home in front of them.
However, there is no style at all now and my site broke down entirely, for all pages.
I think I may need body_class() also for the homepage. But how I can edit this code so that it works?
Easiest would actually be this:
<link rel="stylesheet" href="main.css">
<?php if (is_home()) {
echo '<link rel="stylesheet" href="home.css">'
} ?>
Rules in home.css should have a high priority than main.css. So with this if main.css has this:
body { background-color: white; }
and home.css has this:
body { background-color: blue; }
Since home.css is linked after main.css the rule in home.css will take priority and the background will be blue. This way you can only overwrite the styles you need to and all the other styles will still apply.
In your case after your other wp_register_style() just add an if test and then register another style.
if (is_home()) {
wp_register_style('home-style',get_stylesheet_directory_uri().'/stylesheets/home.css');
}
Looks like a wordpress code so here goes:
In the head:
<?php if (is_home()) {
// loading the stylesheet if it is the homepage
echo '<link rel="stylesheet" href="home.css">'
} else {
// loading the other stylesheet if it is not the homepage
echo '<link rel="stylesheet" href="other.css">'
} ?>
By default, WordPress adds two classes to the body tag: on the front page (is_front_page()) the home class is added, and on the home page (is_home()) the blog class is added. So, in your main CSS file, you can use the body class as follows:
#mydiv {background:green;}
.home #mydiv {background:blue;}
.blog #mydiv {background:red;}