Jump to content

Archived

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

studio12

how to add boxes below slider

Recommended Posts

studio12    0
studio12

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
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
studio12    0
studio12

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

Share this post


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

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.


Please search our forums, before posting!

Share this post


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

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
studio12    0
studio12

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.

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Hello @studio12 

 

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

 

Is this now resolved? 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
studio12    0
studio12

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
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
studio12    0
studio12

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
Danny    1,327
Danny

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.

  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

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


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
studio12    0
studio12

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
James B    436
James B

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
  • Like 1

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

×