How to change MediaBox background color?

[studio12 0]

Can you please tell me how to change the background color of a MediaBox and TextBox? -thanks

FYI: This is the page I'm working on http://www.studiochurch.tv/home/ - 

[greenfly 230]

Hello studio12

 

You can assign a class to the media box, text box etc,  in local settings and then add some Custom CSS to control the style of the Mediabox in your Custom CSS area. 

 

for example 

.class {
  background-color:#ffffff;
}

[studio12 0]

Sorry, but I'm a regular guy and not a web guy so this is confusing to me. What would take you two minutes to do takes me an hour or more figure out, if I figure it out.  

1) what is a "class"?,

2) where are "local settings",

3) Where is the "Custom CSS area" of my MediaBox? I see where I could enter something in Styling Class, but not Custom CSS.

It might help me if you give me a path to the location, for example: Enter ____ into mediabox/edit/styling class. 

-thanks for the help

[James B 436]

Hi there,

 

A class is a selector, its a name you can give to specific elements that you can then target and apply css too.

 

So what Martins saying is when you click on the edit icon for the textbox and the options appear at the bottom of the page in the dms control panel, there's a field called 'styling classes'. http://screencast.com/t/BAg9q0X72 Enter a word in there and save/publish, you've now assigned your own class to the media box. For example you could call it 'mybox'.

 

Then in the custom tab, access the css/less editor, you can enter .mybox followed by your css to apply the color.

 

.mybox {background: #ffffff;}

[KimAnn03 2]

Is there a way to alter the size of the background image for my media box?

 

See: http://dev.thecosmicpath.com/

[James B 436]

Hi there, how are you trying to change the size? What effect are you looking to get? The image is applied to the container for the media box so you're limited a bit on what edits you can make. Easiest option would be to resize the image to the desired size and then upload again and apply to that section using css to position it in the right area in the layout.

[KimAnn03 2]

Thanks james I tried the resizing trick, but no matter what I upload it is making it that size. Any idea why? I cut the size in half and all it did was stretch it to the same size and make it blurry.

 

I am going for the exact effect of what is there just about 1/3 the size on the background image. I want the words to overlap the rays a little bit and I want the image to be right justified like that. It's just too big.

[James B 436]

Hi there, how did you create the original image? If it was me, and I wanted the sun to just move over like you said so the rays just covered the text etc. I'd open the original image (the one where the size was right the alignment was just slightly out) in photoshop or similar. Make sure the image of the sun is on a new layer so you can move it around and reposition whilst the background size stays the same. Move the layer with the sun image over by the desired position and save with the background. Then you'll have an image the same size but the sun in a different position within that image, you can then upload the new image with the sun in the new position.