Message Boards

Back

Background image in Gentelella theme issue

Toggle
I am changing the _diffs/css/custom.css to add a background image as follows, and I cannot get it to work.  Is there an issue with the Gentelilla theme for LR 6.2?

body {
         @include background-image('./images/mybackgroundimage.jpg');
         background-repeat: no-repeat;
         height: 100%;
}

I compile the changed theme, deploy it, clear tomcat cache and browser cache, and I do not see the image.   Any suggestions?
0 (0 Votes)

RE: Background image in Gentelella theme issue
Answer
3/5/21, 3:17 AM as a reply to Phil Teagle.
Hello,

Can you use this CSS code : 
12345
body {
      background-image: url('../images/mybackgroundimage.jpg');
      background-repeat: no-repeat;
      height: 100%;
}

and you need to upload your backgroundimage under the images folder.

Regards,
Sabri BEN SALEM
0 (0 Votes)

RE: Background image in Gentelella theme issue
Answer
3/5/21, 8:53 AM as a reply to sabri ben salem.
I had the image in place, but made the suggested change, but no change.   See project setup and custom.css below.

0 (0 Votes)

RE: Background image in Gentelella theme issue
Answer
3/7/21, 8:54 PM as a reply to Phil Teagle.
Hello,

The correct CSS property is background-image, not  @include background-image.
But the background will not be visible because there is a background color to apply on the sidebar and on the other content of the theme.

Regards,
Sabri BEN SALEM 
0 (0 Votes)

RE: Background image in Gentelella theme issue
Answer
3/9/21, 8:09 AM as a reply to sabri ben salem.
Thank you for your correction, and apologize for the oversight. 

However, after making the change, and as you indicated, the background image is still not visible.

Is there anyway to use a background image in the Gentelella theme in the right column, main content well?

Thanks,
Philip
0 (0 Votes)

RE: Background image in Gentelella theme issue
Answer
3/10/21, 9:51 PM as a reply to Phil Teagle.
Hello,

If you need to set a background image for the sidebar, you need to edit the file style.css: 

123
.aui .left_col {
  background: #2a3f54;
}

and for the main content, in the same file (style.css):

123
.aui body .container.body .right_col {
  background: #f7f7f7;
}

Regards,
Sabri BEN SALEM
0 (0 Votes)

RE: Background image in Gentelella theme issue
Answer
3/11/21, 1:33 AM as a reply to sabri ben salem.
Thanks for the suggestion Ben, but this also does not generate any visible difference.  Cache is being cleared with every update.


.aui body .container.body .right_col {  /* background: #f7f7f7; */  background-image('../images/24699087.jpg');  background-repeat: no-repeat;  height: 100%;}Do you have an example of a gentelilla theme with a background image?Thanks,Philip
0 (0 Votes)

RE: Background image in Gentelella theme issue
Answer
3/11/21, 9:37 AM as a reply to Phil Teagle.
Hello,

Try this :
 
123456
.aui body .container.body .right_col { 
    /* background: #f7f7f7; */ 
    background-image: url('../images/24699087.jpg');
    background-repeat: no-repeat;
    height: 100%;
}
0 (0 Votes)

RE: Background image in Gentelella theme issue
Answer
3/12/21, 2:46 AM as a reply to sabri ben salem.
Tried that, and also ../.. based on this post:   https://stackoverflow.com/questions/20047364/how-to-give-the-background-image-path-in-css

However, when I review the style.css file in the exploded war file directory after deployment, it is still.

.aui body .container.body .right_col {
  background: #f7f7f7;
}

The theme does not appear to be updated either through auto-deploy or manual deploy.   Are you able to make an update to this theme locally?  I even tried just changing the color without any success.
0 (0 Votes)

RE: Background image in Gentelella theme issue
Answer
3/15/21, 8:49 PM as a reply to Phil Teagle.
Hello, 

These are the changes in the file style.css: 

12345678910111213
.aui .left_col {
  /*background: #2a3f54;*/
  background-image: url('../images/background.jpg'); 
  background-repeat: no-repeat; 
  height: 100%;
}

.aui body .container.body .right_col {
  background: #f7f7f7;
  background-image: url('../images/background.jpg'); 
  background-repeat: no-repeat; 
  height: 100%;
}

You need to:
- Remove the content of the temp folder except "liferay" folder.
- Remove the Theme from webapps folder
- Restart the server.
- Deploy the Theme again.

Regards,
Sabri BEN SALEM
0 (0 Votes)