You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Ajayi Yinka <ia...@googlemail.com> on 2014/09/29 09:43:26 UTC
Add Background image to Modal Window
hi all,
I have been looking for means to customize modal window background.
How can this be achieved?
--
Ajayi S . Yinka
+2348022684477
Re: Add Background image to Modal Window
Posted by Martin Grigorov <mg...@apache.org>.
Hi,
Open the browser Dev Tools and play with the CSS rules until you make it as
you wish.
Then put the working CSS rules in your code.
Martin Grigorov
Wicket Training and Consulting
https://twitter.com/mtgrigorov
On Mon, Sep 29, 2014 at 4:24 PM, Ajayi Yinka <ia...@googlemail.com>
wrote:
> Thanks Martin,
>
> I added the following code to my Panel in the modalwindow;
>
> @Override
> public void renderHead(IHeaderResponse response) {
> super.renderHead(response);
> response.render(CssHeaderItem.forCSS(".myModal
> {background-image:'images/logo.png'; background-color:#A77771; }", null));
>
> }
>
> This seems to add the color 'A77771' to the border alone, but the content
> background is not transparent. The background is still raw white. The
> content background color is what I want to change to an image.
>
> I will appreciate your assistance.
>
>
>
>
>
>
> On 29 September 2014 10:13, Martin Grigorov <mg...@apache.org> wrote:
>
> > Hi,
> >
> >
> > modalWindow.setCssClassName("myModal");
> >
> > in some #renderHead(IHeaderResponse) in your page do:
> > response.render(CssHeaderItem.forCss(".myModal {background-image:
> > 'the/path/to/the/image.png'} "))
> >
> > Martin Grigorov
> > Wicket Training and Consulting
> > https://twitter.com/mtgrigorov
> >
> > On Mon, Sep 29, 2014 at 11:08 AM, Ajayi Yinka <
> iamstyajayi@googlemail.com>
> > wrote:
> >
> > > Thanks Martin,
> > >
> > > I am actually using Panel as content. I have added to the code
> > > modalWindow.setCssClassName("css/modal.css");
> > >
> > > But this seems to have no effect. Do I have to do any other thing?
> > >
> > > Appreciate a nice response from you.
> > >
> > >
> > > On 29 September 2014 09:09, Martin Grigorov <mg...@apache.org>
> > wrote:
> > >
> > > > Hi,
> > > >
> > > > ModalWindow sets CSS classes for its main panel, the title, the
> > content,
> > > > etc.
> > > > If you use a Panel as content then you will need to add custom CSS
> rule
> > > to
> > > > set the background image.
> > > > If you use a Page as content then set the background image in your
> > page's
> > > > CSS.
> > > >
> > > > Martin Grigorov
> > > > Wicket Training and Consulting
> > > > https://twitter.com/mtgrigorov
> > > >
> > > > On Mon, Sep 29, 2014 at 9:43 AM, Ajayi Yinka <
> > iamstyajayi@googlemail.com
> > > >
> > > > wrote:
> > > >
> > > > > hi all,
> > > > >
> > > > > I have been looking for means to customize modal window background.
> > > > >
> > > > > How can this be achieved?
> > > > >
> > > > > --
> > > > >
> > > > > Ajayi S . Yinka
> > > > > +2348022684477
> > > > >
> > > >
> > >
> > >
> > >
> > > --
> > >
> > > Ajayi S . Yinka
> > > +2348022684477
> > >
> >
>
>
>
> --
>
> Ajayi S . Yinka
> +2348022684477
>
Re: Add Background image to Modal Window
Posted by Ajayi Yinka <ia...@googlemail.com>.
Thanks Martin,
I added the following code to my Panel in the modalwindow;
@Override
public void renderHead(IHeaderResponse response) {
super.renderHead(response);
response.render(CssHeaderItem.forCSS(".myModal
{background-image:'images/logo.png'; background-color:#A77771; }", null));
}
This seems to add the color 'A77771' to the border alone, but the content
background is not transparent. The background is still raw white. The
content background color is what I want to change to an image.
I will appreciate your assistance.
On 29 September 2014 10:13, Martin Grigorov <mg...@apache.org> wrote:
> Hi,
>
>
> modalWindow.setCssClassName("myModal");
>
> in some #renderHead(IHeaderResponse) in your page do:
> response.render(CssHeaderItem.forCss(".myModal {background-image:
> 'the/path/to/the/image.png'} "))
>
> Martin Grigorov
> Wicket Training and Consulting
> https://twitter.com/mtgrigorov
>
> On Mon, Sep 29, 2014 at 11:08 AM, Ajayi Yinka <ia...@googlemail.com>
> wrote:
>
> > Thanks Martin,
> >
> > I am actually using Panel as content. I have added to the code
> > modalWindow.setCssClassName("css/modal.css");
> >
> > But this seems to have no effect. Do I have to do any other thing?
> >
> > Appreciate a nice response from you.
> >
> >
> > On 29 September 2014 09:09, Martin Grigorov <mg...@apache.org>
> wrote:
> >
> > > Hi,
> > >
> > > ModalWindow sets CSS classes for its main panel, the title, the
> content,
> > > etc.
> > > If you use a Panel as content then you will need to add custom CSS rule
> > to
> > > set the background image.
> > > If you use a Page as content then set the background image in your
> page's
> > > CSS.
> > >
> > > Martin Grigorov
> > > Wicket Training and Consulting
> > > https://twitter.com/mtgrigorov
> > >
> > > On Mon, Sep 29, 2014 at 9:43 AM, Ajayi Yinka <
> iamstyajayi@googlemail.com
> > >
> > > wrote:
> > >
> > > > hi all,
> > > >
> > > > I have been looking for means to customize modal window background.
> > > >
> > > > How can this be achieved?
> > > >
> > > > --
> > > >
> > > > Ajayi S . Yinka
> > > > +2348022684477
> > > >
> > >
> >
> >
> >
> > --
> >
> > Ajayi S . Yinka
> > +2348022684477
> >
>
--
Ajayi S . Yinka
+2348022684477
Re: Add Background image to Modal Window
Posted by Martin Grigorov <mg...@apache.org>.
Hi,
modalWindow.setCssClassName("myModal");
in some #renderHead(IHeaderResponse) in your page do:
response.render(CssHeaderItem.forCss(".myModal {background-image:
'the/path/to/the/image.png'} "))
Martin Grigorov
Wicket Training and Consulting
https://twitter.com/mtgrigorov
On Mon, Sep 29, 2014 at 11:08 AM, Ajayi Yinka <ia...@googlemail.com>
wrote:
> Thanks Martin,
>
> I am actually using Panel as content. I have added to the code
> modalWindow.setCssClassName("css/modal.css");
>
> But this seems to have no effect. Do I have to do any other thing?
>
> Appreciate a nice response from you.
>
>
> On 29 September 2014 09:09, Martin Grigorov <mg...@apache.org> wrote:
>
> > Hi,
> >
> > ModalWindow sets CSS classes for its main panel, the title, the content,
> > etc.
> > If you use a Panel as content then you will need to add custom CSS rule
> to
> > set the background image.
> > If you use a Page as content then set the background image in your page's
> > CSS.
> >
> > Martin Grigorov
> > Wicket Training and Consulting
> > https://twitter.com/mtgrigorov
> >
> > On Mon, Sep 29, 2014 at 9:43 AM, Ajayi Yinka <iamstyajayi@googlemail.com
> >
> > wrote:
> >
> > > hi all,
> > >
> > > I have been looking for means to customize modal window background.
> > >
> > > How can this be achieved?
> > >
> > > --
> > >
> > > Ajayi S . Yinka
> > > +2348022684477
> > >
> >
>
>
>
> --
>
> Ajayi S . Yinka
> +2348022684477
>
Re: Add Background image to Modal Window
Posted by Ajayi Yinka <ia...@googlemail.com>.
Thanks Martin,
I am actually using Panel as content. I have added to the code
modalWindow.setCssClassName("css/modal.css");
But this seems to have no effect. Do I have to do any other thing?
Appreciate a nice response from you.
On 29 September 2014 09:09, Martin Grigorov <mg...@apache.org> wrote:
> Hi,
>
> ModalWindow sets CSS classes for its main panel, the title, the content,
> etc.
> If you use a Panel as content then you will need to add custom CSS rule to
> set the background image.
> If you use a Page as content then set the background image in your page's
> CSS.
>
> Martin Grigorov
> Wicket Training and Consulting
> https://twitter.com/mtgrigorov
>
> On Mon, Sep 29, 2014 at 9:43 AM, Ajayi Yinka <ia...@googlemail.com>
> wrote:
>
> > hi all,
> >
> > I have been looking for means to customize modal window background.
> >
> > How can this be achieved?
> >
> > --
> >
> > Ajayi S . Yinka
> > +2348022684477
> >
>
--
Ajayi S . Yinka
+2348022684477
Re: Add Background image to Modal Window
Posted by Martin Grigorov <mg...@apache.org>.
Hi,
ModalWindow sets CSS classes for its main panel, the title, the content,
etc.
If you use a Panel as content then you will need to add custom CSS rule to
set the background image.
If you use a Page as content then set the background image in your page's
CSS.
Martin Grigorov
Wicket Training and Consulting
https://twitter.com/mtgrigorov
On Mon, Sep 29, 2014 at 9:43 AM, Ajayi Yinka <ia...@googlemail.com>
wrote:
> hi all,
>
> I have been looking for means to customize modal window background.
>
> How can this be achieved?
>
> --
>
> Ajayi S . Yinka
> +2348022684477
>