Jump to content


Photo
- - - - -

How to change MediaBox background color?

MediaBox colors

  • Please log in to reply
7 replies to this topic

#1 studio12

studio12

    Advanced Member

  • Members

  • 88 posts
  • Framework Version:DMS
  • Country: Country Flag

Posted 09 December 2013 - 04:23 PM

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/


Edited by studio12, 09 December 2013 - 04:27 PM.


#2 Martin Davies

Martin Davies

    Advocate

  • Moderators
  • 2454 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 09 December 2013 - 06:10 PM

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;
}


#3 studio12

studio12

    Advanced Member

  • Members

  • 88 posts
  • Framework Version:DMS
  • Country: Country Flag

Posted 09 December 2013 - 11:51 PM

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



#4 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 10 December 2013 - 08:12 AM

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;}



#5 KimAnn03

KimAnn03

    Super Member

  • Members

  • 132 posts
  • Framework Version:DMS
  • Country: Country Flag

Posted 14 January 2014 - 08:18 PM

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

 

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



#6 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 15 January 2014 - 12:31 AM

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.



#7 KimAnn03

KimAnn03

    Super Member

  • Members

  • 132 posts
  • Framework Version:DMS
  • Country: Country Flag

Posted 15 January 2014 - 06:07 PM

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.



#8 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 16 January 2014 - 01:48 AM

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.







Also tagged with one or more of these keywords: MediaBox, colors