Joomla Templates Club 406,261 posts

[amir00251 Friend amir00251Join date: January 2011Posts: 113Downloads:38Uploads:13 Thanks: 13 Thanked: 11 times in 1 posts]

#190602

Hello,

I have before asked and resolved changing and adding more background images for the category blog backgrounds.

It looks very boring to have one single background image also repeating in different components such as kunena, projectforks, etc

So I have added below css for all pages of Kunena Forum (through advanced module manager)

body{
background: #fff url(“../../templates/ja_smashboard/images/body-bg-2.jpg”) repeat !important;

background-size: cover !important;

}

This works on all Kunena main pages and categories but when I go to add New Topic page, I get all white background. When I check the css on the page, it does include the above code but still it all white.

Should I make any change for the above css code?

Thank you.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#505902

So that I can take a look and try to assist, please provide the url of the site you’re working on

[amir00251 Friend amir00251Join date: January 2011Posts: 113Downloads:38Uploads:13 Thanks: 13 Thanked: 11 times in 1 posts]

#505983

Thanks, message sent.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#506125

<blockquote>So I have added below css for all pages of Kunena Forum (through advanced module manager)

body{
background: #fff url(“../../templates/ja_smashboard/images/body-bg-2.jpg”) repeat !important;

background-size: cover !important;

}</blockquote>

You need to find and change css style above.

From


body{
background: #fff url("../../templates/ja_smashboard/images/body-bg-2.jpg") repeat !important;
background-size: cover !important;
}


Change to


body{
background: #fff url("http://your_domain.com/templates/ja_smashboard/images/body-bg-2.jpg") repeat !important;
background-size: cover !important;
}


Let me know the result

[amir00251 Friend amir00251Join date: January 2011Posts: 113Downloads:38Uploads:13 Thanks: 13 Thanked: 11 times in 1 posts]

#506135

Hello, this seems to have solved the problem, what can I do to avoid using direct domain in here? Thank you.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#506182

<em>@amir00251 389966 wrote:</em><blockquote>Hello, this seems to have solved the problem, what can I do to avoid using direct domain in here? Thank you.</blockquote>

Yes, you can try to use another way

Open templates/ja_smashboard/css/custom.css file

Add new script


body{
background: #fff url("../images/body-bg-2.jpg") repeat !important;
background-size: cover !important;
}


With background path: templates/ja_smashboard/images/body-bg-2.jpg

[amir00251 Friend amir00251Join date: January 2011Posts: 113Downloads:38Uploads:13 Thanks: 13 Thanked: 11 times in 1 posts]

#506565

There are two possible issues and questions:

1- Is there any way of making above code specific for a component, If this was not possible then I cannot use this in custom.css

body{
background: #fff url(“../images/body-bg-2.jpg”) repeat !important;
background-size: cover !important;
}

for example add something that would only apply this code in Kunena Forum?

2- Even if I put the code suggested with full URL, when I get into add new topic page of Kunena, for 0.1 second I get the default body-bg.jpg background and then changes to body-bg-2.jpg.
Which is not nice because user can see the default template even for a very short time untill css override makes effect and changes to body-bg-2.jpg

A solution for this for the code to be implemented in first order would be good.

Thank you

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#506635

You are right in this case, you can try to use the first solution here but you need to change it

From

body{
background: #fff url("../../templates/ja_smashboard/images/body-bg-2.jpg") repeat !important;

background-size: cover !important;

}

Change to

body{
background: #fff url("/templates/ja_smashboard/images/body-bg-2.jpg") repeat !important;

background-size: cover !important;

}

[amir00251 Friend amir00251Join date: January 2011Posts: 113Downloads:38Uploads:13 Thanks: 13 Thanked: 11 times in 1 posts]

#506708

Thanks, I have now got some more info and can now say I am happy. Just as an example for Kunean, I put below in custom.css

.com_kunena body {
background: #fff url(“http://www.domain.com/images/background-images/body-bg-forum.jpg”) !important;
background-size: 100% !important;
background-attachment: fixed !important;
background-repeat: no-repeat !important;
}

you can use either full url or relative url, both will work.

[Author]

Posts