• 0
Sign in to follow this  
Followers 0

Change parameters of a media box? DMS2


Question

Posted · Report post

Hey team,

 

Mucking about with a page layout (http://37.128.132.150/~istianji/our-promise/) and am wondering how I might go about doing the following:

 

1) Adding an html link to each media box

 

2) Adding a border to each media box

 

3) Reducing the gap between the 4 adjacent media boxes so they sit closer together

 

Not sure if this should be 3 topics or one, let me know and I can revise :)

 

Cheers

 

Barney

Share this post


Link to post
Share on other sites

10 answers to this question

  • 0

Posted (edited) · Report post

I was playing around and it might be best to get the measurements needed for the entire column area and media boxes and go into photoshop or what ever you prefer and cut the images out of the whole image with the gaps in mind

 

http://i.imgur.com/gcWeOgO.png 

 

then you could upload the whole image as the column background and take the pieces you cut out for the media boxes. Very tricky 

Edited by Aires

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi,

To add a link with your image you are going to have to use this bit of code

 

<a href="Where they go once they click - URL"><img src="LINK TO IMAGE URL"></a>

 

And for the border you could do something like this using custom styling more on that here http://docs.pagelines.com/tutorials/section-area-styling

 

.media-border {

  border:2px solid #1d1d1d;

  }

 

And add (media-border or what ever you call it) to the media boxes custom style box

 

More on borders here http://www.w3schools.com/css/css_border.asp

 

Hope this helps

2 people like this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Ahhhh that's how you use the custom style box :)

 

Well today has been a long day of learning for me lol!!

 

Thanks Aires, very much appreciated :)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Any idea's for number 3) closing the gap? I've tried playing around with padding for the individual media boxes but am not getting anywhere fast...

Share this post


Link to post
Share on other sites
  • 0

Posted (edited) · Report post

Hi,

here my attempt to recreate what you are trying to do http://mytestdesigns.pw/ .

 

First off it appears that you have 2 media boxes in one column and 2 in another might be best to have them all in one column.

 

Also I noticed that you images are not as big as your media boxes the images are 500x332px and the media box is 520x364px. Might be best to make the images the size of the box so that it fills out.

Now as for the space in between the media boxes in the past I have achieve the effect of 4 media boxes with no space between them by adding a background to the column. This is a lot easier if you are working with solid colors but can be tricky when working with images and getting them to align with the image in the media boxes but very doable.

 

CSS would be like this:

 

.my-back-area {

    background-image: url(image url here)

}

And add the my-back-area to the custom style of the column.

 

I would recommend you try this on a separate page there is no need to destroy what you have already done. and if it works then carry it over.

 

Hope this helps

 

there may be another way that I don't know of

Edited by Aires
1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

That's amazing Aires!!!! Thank you so much for taking the time out to help, what a great community here :) I'll let you know how I get on and which way I take it, I think you're right though, it's tricky!! The client is an ex-art teacher and wants it this way but I'm going to try to persuade them otherwise else I have 7 pages to create this way :S

 

I'm toying with the idea of loading the base image as a bg and then using text boxes to overlay the links... the only thing is keeping everything aligned when the browser changes size...

Share this post


Link to post
Share on other sites
  • 0

Posted (edited) · Report post

Np,  

just  upload the image without the text as the column bg and use transparent images with the text in the media boxes and it should work
Sent from my Lumia 900 using Tapatalk

Edited by Aires

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Is this issue now resolved ?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Yes very much so :) Couldn't see a way to mark it as solved though...

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No problem, I have marked it as resolved for you.

1 person likes this

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0