COMMUNITY FORUM

k2 background image

Moustakakis
Topic Author
Offline
Senior Member

11 years 3 months ago #123197 by Moustakakis

k2 background image was created by Moustakakis

Hi,

I would like to change the default background color in k2 article and I would like to replace it with an image and then write my article.

I attach to you an image to see how I would like to be. Is it possible something like this and how can I do it?

Best Regards.

Please Log in or Create an account to join the conversation.

Krikor Boghossian
Offline
Platinum Member

11 years 3 months ago #123198 by Krikor Boghossian

Replied by Krikor Boghossian on topic Re: k2 background image

You will a K2 plugin to do this if you want to upload the image from the editiing area.

Then in your templates you will need to output the value of the plugin (possibly the image url) and use a simple JS script to use this image as the background of the body element.

A good starting point is: getk2.org/extend/extensions/90-example-k2-plugin-for-developers

Alternatively you can use css to specify the background image.

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

Moustakakis
Topic Author
Offline
Senior Member

11 years 3 months ago #123199 by Moustakakis

Replied by Moustakakis on topic Re: k2 background image

Could you help me more with the code?

Regards.

Please Log in or Create an account to join the conversation.

Krikor Boghossian
Offline
Platinum Member

11 years 3 months ago #123200 by Krikor Boghossian

Replied by Krikor Boghossian on topic Re: k2 background image

Sure,

If my memory serves me right this plugin outputs code for a video gallery, right?
You need to look for the $output variable.

Possibly you also need to strip some excess code as well in your case.
Eg. That YouTube part has got to go.

Once you get a clean $output (only the image url) then you can use Joomla!'s API - docs.joomla.org/JDocument/addScriptDeclaration - to add a small jQuery script which alters the css of the body element and adds that image as background. - api.jquery.com/css/

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

Moustakakis
Topic Author
Offline
Senior Member

11 years 3 months ago #123201 by Moustakakis

Replied by Moustakakis on topic Re: k2 background image

Hello,

I have added the following javascript.

jQuery(document).ready(function(){

    var page = "about";
   
    var classSS ="regionover";
   
    var url = window.location.href;
   
    if(url.indexOf(page)>0)
    {
        jQuery("#region3wrap").addClass(classSS);
    }
});

and I add the following lines in my template.css

.regionover
{
    background: url("/images/about/about.jpg"); 
    background-repeat:no-repeat;
    background-size:100% 100%;
}

but it doesn't function.

Could you help me more?

Best Regards.

Please Log in or Create an account to join the conversation.

Yiota
Visitor

11 years 3 months ago #123202 by Yiota

Replied by Yiota on topic Re: k2 background image

Check that the container with the region3wrap id actually gets the class you assign from your javascript. Maybe you are getting a javascript error somewhere.

Please Log in or Create an account to join the conversation.

Moustakakis
Topic Author
Offline
Senior Member

11 years 3 months ago #123203 by Moustakakis

Replied by Moustakakis on topic Re: k2 background image

How can I check that?

Please Log in or Create an account to join the conversation.

Yiota
Visitor

11 years 3 months ago #123204 by Yiota

Replied by Yiota on topic Re: k2 background image

You can do this by using your browser's developer tools (or inspector depending on the browser).

Please Log in or Create an account to join the conversation.

Moustakakis
Topic Author
Offline
Senior Member

11 years 2 months ago #123205 by Moustakakis

Replied by Moustakakis on topic Re: k2 background image

ok,

I solve it.

I have only a problem with responsibility.

Thank you.

Please Log in or Create an account to join the conversation.

Yiota
Visitor

11 years 2 months ago #123206 by Yiota

Replied by Yiota on topic Re: k2 background image

I think you mean responsive, right?

Please Log in or Create an account to join the conversation.

Moustakakis
Topic Author
Offline
Senior Member

11 years 2 months ago #123207 by Moustakakis

Replied by Moustakakis on topic Re: k2 background image

yes, right!

Responsive design view.

Please Log in or Create an account to join the conversation.

Yiota
Visitor

11 years 2 months ago #123208 by Yiota

Replied by Yiota on topic Re: k2 background image

You can add this to your class as well

background-size:cover;

Please Log in or Create an account to join the conversation.

Moustakakis
Topic Author
Offline
Senior Member

11 years 2 months ago #123209 by Moustakakis

Replied by Moustakakis on topic Re: k2 background image

yes I know this parameter but it is more complicated.

Would you like to send you more information to take a look if you can help me?

Best Regards.

Please Log in or Create an account to join the conversation.

Yiota
Visitor

11 years 2 months ago #123210 by Yiota

Replied by Yiota on topic Re: k2 background image

If you like that would be helpful.

Thank you

Please Log in or Create an account to join the conversation.

Moustakakis
Topic Author
Offline
Senior Member

11 years 2 months ago #123211 by Moustakakis

Replied by Moustakakis on topic Re: k2 background image

Great!

Please take a look to the website iml.cmnet.gr/index.php/k2-media

I attach to you an image that describe in brief the problem.

I will appreciate if you can help.

Best Regards.

Please Log in or Create an account to join the conversation.

Yiota
Visitor

11 years 2 months ago #123212 by Yiota

Replied by Yiota on topic Re: k2 background image

Change your class with this one:

#region3wrap.regionover {
background: url("/images/about/about.jpg");
background-size: cover;
margin-top: -15px;
background-position: 50% 50%;
}

This will solve your issue in responsive states.

Please Log in or Create an account to join the conversation.

Moustakakis
Topic Author
Offline
Senior Member

11 years 2 months ago #123213 by Moustakakis

Replied by Moustakakis on topic Re: k2 background image

I try to send you an attachment but I cannot..

The main problem is the text that it is not responsive. This I try to send you with one screen.

please check it with fierox web developer --> responsive design view (ctrl+shift+M)

Thank you.

Please Log in or Create an account to join the conversation.

Yiota
Visitor

11 years 2 months ago #123214 by Yiota

Replied by Yiota on topic Re: k2 background image

You just have to change the #region3wrap.regionover #region3 #k2Container width from 30% to auto when you are viewing mobile devices.

Please Log in or Create an account to join the conversation.

Moustakakis
Topic Author
Offline
Senior Member

11 years 2 months ago #123215 by Moustakakis

Replied by Moustakakis on topic Re: k2 background image

I have done all of this and the problem remains.

Please Log in or Create an account to join the conversation.

Yiota
Visitor

11 years 2 months ago #123216 by Yiota

Replied by Yiota on topic Re: k2 background image

The width was not suppose to be removed for the desktop view, only for the mobile devices.
Then the text box is resizing properly when you see it in smaller screens.
What you should also remove is the margin-top:-15px from #region3wrap.regionover also for the mobile devices.

I think you need to ask your template developer to better help you with this one.

Please Log in or Create an account to join the conversation.