Jump to content

Archived

This topic is now archived and is closed to further replies.

studio12

How to change MediaBox background color?

Recommended Posts

greenfly    230
greenfly

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

The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
studio12    0
studio12

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

Share this post


Link to post
Share on other sites
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
KimAnn03    2
KimAnn03

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.

Share this post


Link to post
Share on other sites
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

  • Similar Content

    • triggerfish
      By triggerfish+
      Media Box not taking Google Maps input
      I have the EMBED MAP code from Google (which I have done 100''s of times before),
      I input it into the TEXTBOX or MEDIABOX SAVE it, and as soon as I refresh the page the text is gone (and of course there is no map).
      I have rebooted, refresh cache, everything with no luck..it just will not take the google maps input...it will however take and save a simple text input.
      I am using WordPress 4.5.1
      DMSVersion: 2.2.1.1
      The google code is:
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2602.466376170749!2d-123.11645494869879!3d49.286507879230314!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x548671828dbf1c61%3A0x489cbb919c49d6e!2s325+Howe+St%2C+Vancouver%2C+BC+V6C+3N2!5e0!3m2!1sen!2sca!4v1461869255884" width="800" height="600" frameborder="0" style="border:0" allowfullscreen></iframe>
      The website and CONTACT PAGE ( the map is next to the CONTACT VALRI text, there is a textbox and media box there) are here:
      http://valufitness.com/contact-us/
      Your login is:
      http://valufitness.com/val-login/
      USer= ***
      pass= ****
       
    • amb62137
      By amb62137
      Hi there,
      I am trying to change an image on hover using either MediaBox or TextBox. The image is manually inserted using the HTML box. 
    • nandorj78
      By nandorj78+
      Hi!
      I'd like to reduce the space between the slider and the posts on my front page and I'd also like the 'heart' icon next to post names to be red once somebody clicks on it.
      I'd attach an image here for you to undertsna better what I said about the space that I want to reduce, but I've reached my file quota limit.
      By the way, how do I delete my old attachments in order to have space for new ones?
      Thanks!
    • pagelines_45
      By pagelines_45
      I am trying to remove the bottom padding from a media box.  When I inspect and change the value it works but I can not for the right css section names to change it in either the page css or custom code area.  I have even tried custom style for the page, but no luck.  Here is the site http://wordpress.howard-boats.com/  on the home page I am trying to get the wide sailboat image to touch the foot.  bottom-padding:0px  but I cant get it to work.  Thank you for your help I'm sure I am doing something stupid.
       
      David
       
    • ForumMemeber
      By ForumMemeber
      Hello guys, rookie here!
       
      Ive searched but theres not solution (well i havent watched all the 60+ tutorials). I want to change my menu colors in the nav bar - ive uploaded a red picture that made them almost seem opaque. How do i customize the color of the page names on the nav bar? 
×