• 0
Sign in to follow this  
Followers 0

how to add boxes below slider

Question

Posted · Report post

Hi, I recently upgraded to DMS but now I can't figure out how to add boxes below my slider on my homepage like in THIS example: http://newspring.cc/ 

Does anyone know how to do this?

Thanks!

Share this post


Link to post
Share on other sites

15 answers to this question

  • 0

Posted · Report post

HI,

 

The link you provided leads to a 404. 

However, if you have added a slider to your page/template, then all you need to do is go to the DMS Visual Editor and drag and drop the iBoxes section below your slider section.

Share this post


Link to post
Share on other sites
  • 0

Posted (edited) · Report post

Sorry, the link is www.newspring.cc - like at the link example, I'm wanting a square box that I can put an image in and link to a page. If that's an option with the iBox, I'm not seeing how to do that.  -thanks

Edited by studio12

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You can do that with the iBox section. But imo, the MediaBox would be better option.

 

Just use HTML to create an image link into the Text and Embed HTML field, for example:

 

<a href="Add your page URL here"><img src="add your image url here"></a>

 

and thats it.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

The code you entered is wrong, as was mine, sorry about that, I was missing < in front of the img.

 

I have corrected this now in my previous, so if you copy my code and add your URLs this should resolve you issue.

Share this post


Link to post
Share on other sites
  • 0

Posted (edited) · Report post

If possible, I'd rather use a square iBox that I can put an image in and link to a page as I need 4 per row. Rounded edges like this link example would be prefect (www.newspring.cc). Is that possible? **Really appreciate the help, thanks.

Edited by studio12

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hello @studio12 

 

Have a look at your site you now have rounded boxes with links http://d.pr/i/sIiw 

 

Is this now resolved? 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

1) My last question was is there a way to create a square iBox that I can put an image in and link to a page as I need 4 per rowRounded edges like this link example would be prefect (www.newspring.cc).

2) Link above did not work.

-Thanks

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there,

 

Using ibox to upload an image I get the normal rectangular image, then using the css below I can round off the edges to give this type of effect - http://screencast.com/t/Z8USsVsUZg

 

.ibox.top-aligned .ibox-media .media-type-image {
    border-radius: 20px !important;
}

 

To get the effect you're looking for you'd probably need to save the text in with the image in something like photoshop, as upload it all as one image so it avoids using the text area which goes underneath the box etc.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Where exactly do I copy/paste the css above? I could not figure that out.

Again, all I need is a several rows of 4 boxes (rounded edges if possible); that I will add an image to that I create that is linked to a page; below the slider like in this example (www.newspring.cc).  

I'm stuck, an really appreciate the help.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Imo, this is much easier with MediaBox as it displays your image exactly how it appears. With the iBox section it adds CSS round corners to image uploaded.

 

All you need to do is add a MediaBox section to your template and reduce its width. Lets say you want four MediaBox on one row, you will want to reduce the MediaBox section to 3/12, then simply clone the MediaBox, do this three more times and it will place 4 MediaBox sections in one row. Then simply use the HTML I provided above in the HTML text area option and thats it.

You will of course need to add your page(s) and image(s) URLs to the code, but this in my opinion is the simplest method.

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I think that will work. Is there a way to lessen the gap / distance between the bottom of the slider and the top of the 4 MediaBox's in the row? ( http://www.studiochurch.tv/home/ )

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

In the ibox settings - have you tried to remove the padding in the settings? 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I don't think there is any padding, I deleted the iBox's and am now using MediaBoxes. It still seem like too much room between slider and boxes. -thanks

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there, to remove the padding in the media box section you can use css. You'll need to use some form of browser inspection tools like firebug or chrome dev tools to find exactly where the padding you're trying to remove is being applied etc.

 

But once you have located where the padding is, you'll be able to remove in the following format depending on the classes which show up in the inspector. Example below.

 

.section-mediabox img, .section-mediabox iframe, .section-mediabox object, .section-mediabox embed {
    padding-top: 0;
}
 
More details on customization and css resources can be found at - http://docs.pagelines.com/customize/how-to-customize
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