Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Info Section > Info Section Styling
Mottie (SuperAdmin) 12/8/2010 9:40 AM EST : Info Section Styling
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Info Section Styling

This css styling is for the Info Sections widget popup.

Add the selected CSS to your custom CSS section (Control Panel > Custom HTML & Script > Custom CSS > CSS Additions to Standard - make sure you enable before saving)

Background (original post)

Choose one of the following styles based on how you want your popup background to appear:
  • Completely remove the background image
    body.ContentBoxBody { background: url(); }
  • Fill the page with your default site background image
    body.ContentBoxBody { background-repeat: repeat; }
    body.ContentBoxBody div.ContentBoxBody { background: transparent; }
  • Change the background color, no image (adjust color in blue)
    body.ContentBoxBody, body.ContentBoxBody div.ContentBoxBody { background: #000000 url(); }
Title and Content (original post)
#lbltitle { padding-left: 40px; color: #00b0f0; }
#lblDetails { display: block; padding: 10px 40px; color: #ffffff;}
  • Title:
    #lbltitle targets the title of the popup window... adjust the color (in blue) and padding value (in red) as desired - the "padding-left: 40px" matches the second number of the #lblDetails to keep the left side aligned.
  • Content:
    #lblDetails targets the info content inside the popup window. The display block is necessary to get the css padding to work properly. Adjust the color (in blue) or adjust the padding (in red) as desired - "10px 40px" is a CSS shortcut which means, set the top and bottom padding to 10px, then set the left and right padding to 40px. The long version would be this: "10px 40px 10px 40px" which gives the dimensions of the top, right, bottom & left sides in that order.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Nykeawyn (Applicant) 4/28/2013 4:25 PM EST : RE: Info Section Styling
Nykeawyn
Posts: 246

0
Like

0
Dislike

Hi Mottie,

I am having a problem with one of my widgets. 

Roxximanor.guildportal.com.  On the home page, there is a widget called Creedo, when you click the link in the box, it puts in the background color then as you scroll down, it adds the picture.  I tried option #1 but with that, it only adds the background color to half the page.  When I try Option #3 it adds the picture back in.  I need to add, it only does it in Firefox and Chrome.  Our IE users don't have that issue.  Can I get your help one more time?

As always, you're awesome

Nyke
TopBottom

Mottie (SuperAdmin) 4/29/2013 10:31 AM EST : RE: Info Section Styling
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi Nyke!

The problem is that the background color definition is incorrect, it's missing one "f" (in red below):
background: #ffffcc url();
And thanks for the compliments *blush*
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Nykeawyn (Applicant) 4/29/2013 6:32 PM EST : RE: Info Section Styling
Nykeawyn
Posts: 246

0
Like

0
Dislike

All I can say is DOH!!!  I spent hours trying to figure that one out and it was something so simple.  Thanks so much
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%