Popup Pro

Advanced Search

How to change the background of the Simple Content Popup style

Permalink Browser Info Environment
In looking through the prettyPhoto.css file, I do not see a place to change the background color of the Simple Content style. My preference would be to have a background image.

Or do I need to use an iFrame and use a custom page?

Thank you for what appears to be a great product.

Here is the popup where I want to change the background:

http://www.toddcary.com/greaterbendrotary/...
Type: Discussion
Status: In Progress
rtcary
View Replies:
jb1 replied on at Permalink Reply
jb1
That should be possible I'll get back to you as soon as I am near my laptop
jb1 replied on at Permalink Reply
jb1
(duplicate removed)
jb1 replied on at Permalink Reply
jb1
Here's a copy of the revised content for prettyPhoto.css:
div.pp_default .pp_top,div.pp_default .pp_top .pp_middle,div.pp_default .pp_top .pp_left,div.pp_default .pp_top .pp_right,div.pp_default .pp_bottom,div.pp_default .pp_bottom .pp_left,div.pp_default .pp_bottom .pp_middle,div.pp_default .pp_bottom .pp_right{height:13px}
div.pp_default .pp_content .ppt{color:#f8f8f8}
div.pp_default .pp_next:hover{background:url(../images/prettyPhoto/default/sprite_next.png) center right no-repeat;cursor:pointer}
div.pp_default .pp_previous:hover{background:url(../images/prettyPhoto/default/sprite_prev.png) center left no-repeat;cursor:pointer}
div.pp_default .pp_expand{background:url(../images/prettyPhoto/default/sprite.png) 0 -29px no-repeat;cursor:pointer;height:28px;width:28px}
div.pp_default .pp_expand:hover{background:url(../images/prettyPhoto/default/sprite.png) 0 -56px no-repeat;cursor:pointer}
div.pp_default .pp_contract{background:url(../images/prettyPhoto/default/sprite.png) 0 -84px no-repeat;cursor:pointer;height:28px;width:28px}
div.pp_default .pp_contract:hover{background:url(../images/prettyPhoto/default/sprite.png) 0 -113px no-repeat;cursor:pointer}
div.pp_default .pp_close{background:url(../images/prettyPhoto/default/sprite.png) 2px 1px no-repeat;cursor:pointer;height:30px;width:30px}
div.pp_default .pp_gallery ul li a{background:url(../images/prettyPhoto/default/default_thumb.png) center center #f8f8f8;border:1px solid #aaa}
div.pp_default .pp_social{margin-top:7px}
div.pp_default .pp_gallery a.pp_arrow_previous,div.pp_default .pp_gallery a.pp_arrow_next{left:auto;position:static}
div.pp_default .pp_nav .pp_play,div.pp_default .pp_nav .pp_pause{background:url(../images/prettyPhoto/default/sprite.png) -51px 1px no-repeat;height:30px;width:30px}
div.pp_default .pp_nav .pp_pause{background-position:-51px -29px}
div.pp_default a.pp_arrow_previous,div.pp_default a.pp_arrow_next{background:url(../images/prettyPhoto/default/sprite.png) -31px -3px no-repeat;height:20px;margin:4px 0 0;width:20px}
Viewing 15 lines of 171 lines. View entire code block.


I've stripped out the lines which give the popup it's rounded borders (and also white margin).

After that, look for this line:
div.pp_default .pp_content, div.light_rounded .pp_content

and you can apply a background colour or background image using CSS.

Hope this helps.

JB
rtcary replied on at Permalink Reply
rtcary
Many thanks for the assistance, however I'm having some difficulty identifying the line you reference with "...After that, look for this line:...". Can you supply an approximate line number?

With appreciation...

RTC
jb1 replied on at Permalink Reply
jb1
If you've got the file open in a text editor (like Notepad) try using the edit-find tool to search for the specific snippet of code. I haven't got my laptop handy at the moment. Let me know how you go.
rtcary replied on at Permalink Reply
rtcary
I had tried that and there were not any matches. The closest I found is on line 141:

div.pp_default .pp_content,div.light_rounded .pp_content{background-color: red;}


Todd
jb1 replied on at Permalink Reply
jb1
That would probably be it. I might have forgotten to take out the "red",so you can replace that with any other colour or background image you wish. Hope this helps.
JB
rtcary replied on at Permalink Reply
rtcary
I have tried both the Default and the Rounded Corners with this line (2nd line) in the CSS and there is no color. I'm probably overlooking some dumb thing.

div.ppt{color:#fff;display:none;font-size:17px;margin:0 0 5px 15px;z-index:9999}
div.pp_default .pp_content{background-color: red;},div.light_rounded .pp_content{background-color: red;}
div.pp_default #pp_full_res .pp_inline,div.light_rounded .pp_content .ppt,div.light_rounded #pp_full_res .pp_inline,div.light_square .pp_content .ppt,div.light_square #pp_full_res .pp_inline,div.facebook .pp_content .ppt,div.facebook #pp_full_res .pp_inline{color:#000}


/rtc
rtcary replied on at Permalink Reply
rtcary
My apologies!!! I did not know that ALL CSS files are loaded SO prettyPhoto_old.css (the former one) was included that overwrote the changes.

Many thanks for the help...IT WORKS!

Todd
jb1 replied on at Permalink Reply
jb1
Aha! :-D
On 8 Jan 2016 10:50 am, "concrete5 Community" <discussions@concretecms.com>
wrote:

concrete5 Environment Information

LAMP environment.

Browser User-Agent String

Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.106 Safari/537.36

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.