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?
Jump to content
Posted 19 November 2013 - 11:48 AM
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.
Posted 19 November 2013 - 12:51 PM
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, 19 November 2013 - 12:55 PM.
Posted 19 November 2013 - 01:09 PM
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.
Posted 19 November 2013 - 05:07 PM
I must still have something wrong, here's what I entered into the media box's 'Text and Embed HTML' box: <a href="http://www.studiochurch.tv/kids/">img src="http://www.studiochurch.tv/wp-content/uploads/2013/11/StudioKids_blue_sm-5.jpg"></a>
( this is the page I'm working on: http://www.studiochurch.tv/home/ )
Posted 20 November 2013 - 10:48 AM
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.
Posted 21 November 2013 - 04:33 PM
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, 21 November 2013 - 04:45 PM.
Posted 21 November 2013 - 11:50 PM
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
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.
Posted 22 November 2013 - 12:59 PM
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.
Posted 22 November 2013 - 01:16 PM
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.
Posted 22 November 2013 - 08:54 PM
In the ibox settings - have you tried to remove the padding in the settings?
Posted 22 November 2013 - 11:32 PM
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
Posted 23 November 2013 - 12:39 AM
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.