Jump to content

Archived

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

bjs198

Change parameters of a media box? DMS2

Recommended Posts

bjs198    7
bjs198

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
Aires+    258
Aires

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

  • Like 2

ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
bjs198    7
bjs198

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
bjs198    7
bjs198

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
Aires+    258
Aires

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

  • Like 1

ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
Aires+    258
Aires

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 


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
bjs198    7
bjs198

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
Aires+    258
Aires

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


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Is this issue now resolved ?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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

  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • Jared Smith
      By Jared Smith+
      I'm trying to make a visible border around the entirety of a client's site.  Example on some other site here:
      http://www.makeyourvisionreal.com/movement

      So it is around the Title, Menu, and Content Area.  I'm having a bit of difficulty with this on pagelines, using the Framework theme. It's slightly more complex because the site has a "landing page" that doesn't need the border. Much like this homepage
      http://www.makeyourvisionreal.com/
       
      Right now I'm using a content width of 80%, and fullscreen.  But maybe thats not the best way to do it.  
       
      So, with the #site id, I can hit the whole area on most of the site, but I'm not sure how I can remove it for just one page.
      #site { border:1px solid #ccc; margin: 100px 5% 5% 50px; } anyone have any suggestions?  Maybe I need to go make a child template, not sure?  Thanks!
    • David
      By David+
      We are building a long-page scrolling site with Pagelines 5. Our menu is made with # links that go to a container's unique ID, e.g. container_ux7al6g
      This works, but it doesn't look great in the menu. Is it possible to assign a 'nice' # link, e.g. /#solutions ? 
      We used to do this in the DMS2 platform through a workaround, but that doesn't seem to be possible now. 
      Any suggestions? 
    • Lisa Haran
      By Lisa Haran+
      Hi 
      I have a map here http://www.iloveoffset.com/maps/
      I want to add several pointer locations to the map, but when I do they do not appear.
      On this map there are 2 pointer locations and as you can there is only one visible.
      Earlier today I added 7 and could only see 4 so there is something odd going on.
      My theme is up to date
    • clj182
      By clj182+
      Hello,
      I've been having trouble unlocking the template section for past couple of weeks. When I try clicking nothing happens. 
      I've deleted my custom css and removed plugins. Im down to having only the following plugins:
      Akismet
      Contact Form 7
      DMS Professional Tools
      Pagelines Updater
      WooCommerce
      It was working fine before i have no idea what's going on with it.
    • flourishdesignstudio
      By flourishdesignstudio
      My DMS 2 site http://www.heart-stone.com/ will not save any new custom css... I can still edit templates and publish those but any custom css that I enter never saves.
      All WP files, themes, and plugins are up to date. 
      Any thought about what might be causing this?
×