Jump to content


Photo
- - - - -

how to add boxes below slider


  • Please log in to reply
15 replies to this topic

#1 studio12

studio12

    Advanced Member

  • Members

  • 88 posts
  • Framework Version:DMS
  • Country: Country Flag

Posted 18 November 2013 - 11:43 PM

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!



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 16982 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 19 November 2013 - 11:48 AM

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.



#3 studio12

studio12

    Advanced Member

  • Members

  • 88 posts
  • Framework Version:DMS
  • Country: Country Flag

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.


#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 16982 posts
  • LocationManchester, UK
  • Country: Country Flag

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.



#5 studio12

studio12

    Advanced Member

  • Members

  • 88 posts
  • Framework Version:DMS
  • Country: Country Flag

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/ )



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 16982 posts
  • LocationManchester, UK
  • Country: Country Flag

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.



#7 studio12

studio12

    Advanced Member

  • Members

  • 88 posts
  • Framework Version:DMS
  • Country: Country Flag

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.


#8 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 21 November 2013 - 09:33 PM

Hello @studio12 

 

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

 

Is this now resolved? 



#9 studio12

studio12

    Advanced Member

  • Members

  • 88 posts
  • Framework Version:DMS
  • Country: Country Flag

Posted 21 November 2013 - 10:18 PM

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



#10 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 21 November 2013 - 11:50 PM

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.



#11 studio12

studio12

    Advanced Member

  • Members

  • 88 posts
  • Framework Version:DMS
  • Country: Country Flag

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.



#12 Danny

Danny

    Is Awesome!

  • Moderators
  • 16982 posts
  • LocationManchester, UK
  • Country: Country Flag

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.


  • studio12 likes this

#13 studio12

studio12

    Advanced Member

  • Members

  • 88 posts
  • Framework Version:DMS
  • Country: Country Flag

Posted 22 November 2013 - 07:26 PM

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/ )



#14 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 22 November 2013 - 08:54 PM

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



#15 studio12

studio12

    Advanced Member

  • Members

  • 88 posts
  • Framework Version:DMS
  • Country: Country Flag

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



#16 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

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.

 

.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.pageline...ow-to-customize

  • studio12 likes this