I am trying to get my home page to display a random banner every time the site is loaded.
I used the following code in my functions.php file -
add_filter('body_class','random_background_images');
function random_background_images($classes) {
// Generate Random number from 1 to 10.
$background_class = 'background_' . rand(1,10);
$classes[] = $background_class;
return $classes;
}
and then this in my custom.css file -
body.background_1 {
background-image: url("images/home-bg/website-background1.jpg");
}
body.background_2 {
background-image: url("images/home-bg/website-background2.jpg");
}
body.background_3 {
background-image: url("images/home-bg/website-background3.jpg");
}
it seems to work, but puts the image as a background image, not a banner.
Can anyone please help me change this code so it will apply to the banner section?
(The current banner is set from the front end with an uploaded image in the 'home' page setup.
Website is - https://flowersforeveryone.feedmybeta.com/
Thanks! :)
So this would depend on the html for the banner. Assuming the banner has a class of .page-banner, you could change your CSS slightly thusly:
body.background_1 .page-banner {
background-image: url("images/home-bg/website-background1.jpg");
}
body.background_2 .page-banner {
background-image: url("images/home-bg/website-background2.jpg");
}
body.background_3 .page-banner {
background-image: url("images/home-bg/website-background3.jpg");
}
In CSS, the selector that comes after a space is a child of the previous selector.
Related
I am using react-simple-image slider and everything works smoothly but I dont get how to adjust the image to fit to the slider container. The documentation says this:
can customize by className with !important;
.your-app {
.rsis-container {
// do something
}
}
.your-app {
.rsis-image {
background-size: contain !important;
}
}
but I dont understand where to add it in my project (please see files)
files
I am using gutenberg with wordpress and the sidebar where I can edit the blocks is squeezed to the right, making it impossible for me to edit it:
As you can see in the image, the sidebar is shown partially on the screen and I can´t move to the right.
Here are some things I tried:
1 - Work with another browser (Chrome and Edge). It did not work.
2 - Edditing the code in the plugin (Twenty Twenty), stylesheet in Gutenberg and Stackable plugin:
'mode' => 'edit'
//------------------------------------------------
// Admin CSS
//------------------------------------------------
add_action('admin_head', 'my_custom_fonts');
function my_custom_fonts() {
echo
'<style>
.wp-block {max-width: 900px;}
</style>';
}
As explained in: https://support.advancedcustomfields.com/forums/topic/acf-blocks-cramped-in-right-sidebar-of-editor/
Nothing of these worked. Does anyone have a clue?
Tks
Try to overwrite the css box with this code:
.interface-complementary-area {
width: 380px !important;
}
Or in your theme functions.php add this:
// Wider sidebar on gutenberg backend
function my_wider_sidebar() {
echo
'<style>
.interface-complementary-area{ width: 450px !important; }
</style>';
}
add_action('admin_head', 'my_wider_sidebar');
Intended Results: Add a custom css to customize the Wordpress login page background.
Steps Taken:
Created a new folder in my theme folder called Login. In this, made a new custom css file called custom-login-style.css.
Added a code to the functions.php, that tells Wordpress to load the custom-login-style.css found in the Login folder.
function my_custom_login()
{
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/login/custom-login-style.css" />';
}
add_action('login_head', 'my_custom_login');
The CSS is working fine but has only customized the login form.
Issue: I am not able to customize the background of the login page.
For the page background I have added the following css
body.login {
background: linear-gradient(0deg, #0b4182 1%, #1e88e5 100%) fixed;
}
body, html {
background: linear-gradient(0deg, #0b4182 1%, #1e88e5 100%) fixed;
}
CSS for the background is not working but the css meant for the login form is working
Can you give the link to that page.
Most likely you have some CSS problems.
You can open Chrome inspector and watch what is the result css for your login page.
May be !important is used somewhere and your css is not working.
I would recommend to use inline style to make sure it will override the default style:
function my_custom_login() {
?>
<style>
/* Body style */
body {
background: linear-gradient(0deg, #0b4182 1%, #1e88e5 100%) fixed;
}
/* Logo style */
.login h1 a {
...
}
</style>
<?php
}
add_action('login_head', 'my_custom_login');
Well, there might have been an issue with the functions.php code, so I researced a bit and followed the customization as recommended by the Wordpress Codex https://codex.wordpress.org/Customizing_the_Login_Form
Changed
function my_custom_login()
{
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/login/custom-login-style.css" />';
}
add_action('login_head', 'my_custom_login');
to that found in codex:
function my_login_stylesheet() {
wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/login/custom-login-style.css' );
}
add_action( 'login_enqueue_scripts', 'my_login_stylesheet' );
and body .login css started working and the background got customised. I am unsure why and what exactly resolved the issue, it may be due to enqueing the stylesheet or may be something else. One thing, its always better to research and implement the Codex in case of Wordpress.
I'm using BeTheme for my wordpress site. Now I want to change one of may page's body background by setting a background image(only for that page).
I tried changing my style.css by adding this as I learnt this would do the job for me.
body.page-id-269 {
background-image: url("http://example.com/wp-content/uploads/2017/03/your-background-image.jpg")!important;
background-position: center center!important;
background-repeat: repeat!important;
}
How can I set the bg imge for that perticular page body?(I'm using BeTheme theme)
UPDATE
As Below answer mentioned I tried these changes, in my functions.php I added
add_filter('body_class', 'change_body_classes');
function change_body_classes($classes) {
if( is_page( 'page-id-269' ) ) {
$classes[] = 'my-background-class';
return $classes;
}
}
And in my style .css I added this,
.my-background-class{
background-image: url("http://example.com/wp-content/uploads/2017/03/your-background-image.jpg")!important;
background-position: center center!important;
background-repeat: repeat!important;
}
Use the body_class filter to add a class to that specific page with your css.
add_filter('body_class', 'change_body_classes');
function change_body_classes($classes) {
if( is_page( 'my-page' ) ) {
$classes[] = 'my-background-class';
return $classes;
}
}
The following is the screen shot of the project structure , please guide me how to specify the image path url
body {
background-image: url(../WebContent/css/Expenses2.jpg);
}
On giving the above path the jpg file does not come as the background colour.
Given that the css folder is in the same folder as your expenses.jsp file you should just be able to do
css/Expenses2.jpg
So
body {
background-image: url(css/Expenses2.jpg);
}
Simply remove the ... from the url, with ... you are switching to an parent folder
body {
background-image: url(/WebContent/css/Expenses2.jpg);
}
Or
body {
background-image: url(css/Expenses2.jpg);
}