Login
Back to all discussion topics

Mono Support Where to edit the homepage banner dimensions ? 

Viewed 37049 time(s), 19 post(s), 2/13/2013 9:34:58 PM - by super
super
super
2/13/2013 9:34:58 PM
6018 Reputation 709 Total posts

Where in css stylesheet I can change the dimensions of homepage banner images ? so whatever size is the image, the homepage slider will use that height and width automatically ?

1
mzilic
mzilic
2/14/2013 11:17:43 AM
2218 Reputation 300 Total posts

Hello super,

This is the related slideshow css, you can find it in default.css:

/**** Slideshow - START ****/
.slides
{
    width: 100%;
    height: 260px;
    z-index: 100;
}
.slides_container
{
    width: 100%;
    height: 260px;
    overflow: hidden;
    position: relative;
    display: block;
}
.slides .slide
{
    width: 570px;
    display: block;
}
.slides .slide H2
{
    font-size: 48px;
    line-height: 50px;
}
.slides .slide H2 SPAN
{
    color: #777;
}
.slides .slide H2,
.slides .slide P
{
    position: relative;
    z-index: 100;
    margin-right: 230px;
    text-shadow: 1px 1px #fff;
}
.slides .slide IMG
{
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.slides .title
{
    width: 100%;
    background: #2B2C31;
    font-family: 'BebasNeueRegular';
    color: #fff;
    font-size: 22px;
    text-shadow: 0px 0px #fff;
    text-align: center;
    filter: Alpha(opacity=85)!important;
    opacity: .85!important;
    padding: 10px;
    position: absolute;
    left: 0px;
    bottom: 0px;
    box-sizing: border-box; /* css3 rec */
    -moz-box-sizing: border-box; /* ff2 */
    -ms-box-sizing: border-box; /* ie8 */
    -webkit-box-sizing: border-box; /* safari3 */
    -khtml-box-sizing: border-box; /* konqueror */
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
    border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    border-bottom-right-radius: 5px;
    z-index: 100;
    box-sizing: border-box; /* css3 rec */
    -moz-box-sizing: border-box; /* ff2 */
    -ms-box-sizing: border-box; /* ie8 */
    -webkit-box-sizing: border-box; /* safari3 */
    -khtml-box-sizing: border-box; /* konqueror */
}
.slides .next-text
{
    background: url(img/bg.png) repeat;
    position: absolute;
    top: 50%;
    right: 0px;
    width: 45px;
    height: 40px;
    padding: 0px 10px;
    margin-top: -20px;
    line-height: 40px;
    display: block;
    z-index: 101;
    outline: none 0px;
    color: #999;
    text-decoration: none;
    text-align: right;
}
.slides .prev-text
{
    background: url(img/bg.png) repeat;
    position: absolute;
    top: 50%;
    left: 0px;
    width: 45px;
    height: 40px;
    padding: 0px 10px;
    margin-top: -20px;
    line-height: 40px;
    display: block;
    z-index: 101;
    outline: none 0px;
    color: #999;
    text-decoration: none;
}
.slides .next-text
{
    -moz-border-radius-topleft: 3px;
    -webkit-border-top-left-radius: 3px;
    border-top-left-radius: 3px;
    -moz-border-radius-bottomleft: 3px;
    -webkit-border-bottom-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
.slides .prev-text
{
    -moz-border-radius-topright: 3px;
    -webkit-border-top-right-radius: 3px;
    border-top-right-radius: 3px;
    -moz-border-radius-bottomright: 3px;
    -webkit-border-bottom-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
.slides .next-text:hover,
.slides .prev-text:hover
{
    color: #0180b3;
}
.slides .next-text IMG,
.slides .prev-text IMG
{
    border: none 0px;
}
/**** Slideshow - END ****/
Regards,
Mario

2
super
super
2/21/2013 7:10:20 PM
6018 Reputation 709 Total posts

I am using span 8 in my homepage for slides (from bootstrap.css).
So the width of my slides needs to be 620px according to bootstrap.css span 8 class

I have a slide jpg image for width 620px and height 250px

I did change the dimensions from this


.slides
{
    width: 100%;
    height: 260px;
    z-index: 100;
}
.slides_container
{
    width: 100%;
    height: 260px;
    overflow: hidden;
    position: relative;
    display: block;
}
.slides .slide
{
    width: 570px;
    display: block;
}


To this

.slides
{
    width: 100%;
    height: 250px;
    z-index: 100;
}
.slides_container
{
    width: 100%;
    height: 250px;
    overflow: hidden;
    position: relative;
    display: block;
}
.slides .slide
{
    width: 620px;
    display: block;
}

But the problem is my slide jpg image is being displayed zoomed / focused not full... its strange... please help ?



3
khorvat
khorvat
2/22/2013 8:48:20 AM
15993 Reputation 2214 Total posts

I'll see if design department can jump in and help you a bit, but please note that this isn't related to MonoX support, these are general design issues that are not part of our support.

Regards

4
Andrej
Andrej
2/22/2013 9:38:41 AM
284 Reputation 3 Total posts

 Could you provide us with the screenshot or a link so we can check it out?

5
super
super
2/22/2013 1:20:35 PM
6018 Reputation 709 Total posts

Hello Andrej,

Here is my code in default.aspx

<div class="span8 clearfix">
                      
                     
                    <div style="position: relative;">
                    <MonoX:SlideShow runat="server" ID="ctlSlideShow" Title='<%$ Code: PageResources.Title_RightSection %>'
                        NavigationNextCaption="<%$ Code: MonoSoftware.MonoX.Resources.DefaultResources.SlideShow_Next.ToUpper() %>"
                        NavigationPreviousCaption="<%$ Code: MonoSoftware.MonoX.Resources.DefaultResources.SlideShow_Prev.ToUpper() %>">
                        <SlideShowItems>
                             
                            <ModuleGallery:SlideShowItem runat="server" ImageUrl="/App_Themes/Default/img/Projects/HomeSlide22.jpg" Url="http://www.mydomain.com/page/" Title="Title"></ModuleGallery:SlideShowItem>
 
                             
                        </SlideShowItems>
                    </MonoX:SlideShow>
                        </div>
                                         
                        <br />
<portal:PortalWebPartZoneTableless HeaderText='<%$ Code: PageResources.Zone_LeftPartZone %>' ID="leftPartZone" runat="server" Width="100%" ChromeTemplateFile="Standard.htm">
            <ZoneTemplate>
                  
            <MonoX:BlogContainer ID="blogContainer" runat="server" UsePrettyPhoto="true" DateFormatString="d" RelatedContentVisible="true" EnableSyntaxHighlighter="true" GravatarRenderType="NotSet"  RewritePageTitle="false" />
            </ZoneTemplate>
        </portal:PortalWebPartZoneTableless>
  
             
                </div>


This is my default.css

/**** Slideshow - START ****/
.slides
{
    width: 100%;
    height: 260px;
    z-index: 100;
}
.slides_container
{
    width: 100%;
    height: 260px;
    overflow: hidden;
    position: relative;
    display: block;
}
.slides .slide
{
    width: 570px;
    display: block;
}
.slides .slide H2
{
    font-size: 48px;
    line-height: 50px;
}
.slides .slide H2 SPAN
{
    color: #777;
}
.slides .slide H2,
.slides .slide P
{
    position: relative;
    z-index: 100;
    margin-right: 230px;
    text-shadow: 1px 1px #fff;
}
.slides .slide IMG
{
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.slides .title
{
    width: 100%;
    background: #2B2C31;
    font-family: 'BebasNeueRegular';
    color: #fff;
    font-size: 22px;
    text-shadow: 0px 0px #fff;
    text-align: center;
    filter: Alpha(opacity=85)!important;
    opacity: .85!important;
    padding: 10px;
    position: absolute;
    left: 0px;
    bottom: 0px;
    box-sizing: border-box; /* css3 rec */
    -moz-box-sizing: border-box; /* ff2 */
    -ms-box-sizing: border-box; /* ie8 */
    -webkit-box-sizing: border-box; /* safari3 */
    -khtml-box-sizing: border-box; /* konqueror */
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
    border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    border-bottom-right-radius: 5px;
    z-index: 100;
    box-sizing: border-box; /* css3 rec */
    -moz-box-sizing: border-box; /* ff2 */
    -ms-box-sizing: border-box; /* ie8 */
    -webkit-box-sizing: border-box; /* safari3 */
    -khtml-box-sizing: border-box; /* konqueror */
}
.slides .next-text
{
    background: url(img/bg.png) repeat;
    position: absolute;
    top: 50%;
    right: 0px;
    width: 45px;
    height: 40px;
    padding: 0px 10px;
    margin-top: -20px;
    line-height: 40px;
    display: block;
    z-index: 101;
    outline: none 0px;
    color: #999;
    text-decoration: none;
    text-align: right;
}
.slides .prev-text
{
    background: url(img/bg.png) repeat;
    position: absolute;
    top: 50%;
    left: 0px;
    width: 45px;
    height: 40px;
    padding: 0px 10px;
    margin-top: -20px;
    line-height: 40px;
    display: block;
    z-index: 101;
    outline: none 0px;
    color: #999;
    text-decoration: none;
}
.slides .next-text
{
    -moz-border-radius-topleft: 3px;
    -webkit-border-top-left-radius: 3px;
    border-top-left-radius: 3px;
    -moz-border-radius-bottomleft: 3px;
    -webkit-border-bottom-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
.slides .prev-text
{
    -moz-border-radius-topright: 3px;
    -webkit-border-top-right-radius: 3px;
    border-top-right-radius: 3px;
    -moz-border-radius-bottomright: 3px;
    -webkit-border-bottom-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
.slides .next-text:hover,
.slides .prev-text:hover
{
    color: #0180b3;
}
.slides .next-text IMG,
.slides .prev-text IMG
{
    border: none 0px;
}
/**** Slideshow - END ****/
P.S Since my area on homepage that needs to be covered by slide is 770px (width) and 260px (height)..
I have designed the slide based on this dimensions...

Right now it seems fine on the computer ...

But when I try to view the website from a mobile phone, it looks like the attached screenshot (the strange blank space underneath the slide)

I have tried making width 770px in css but it doesn't help at all, why ? please help me - I need my desktop website to work good on mobile phones

Attached screenshot:
1) View from a pc / desktop in which slide looks fine
2) View from a mobile phone that I need help with as there is a blank space under the slide ?




6
ivanb
ivanb
2/22/2013 1:42:07 PM
459 Reputation 55 Total posts

Hi Super,
try set your image height to auto in css. That should solve your problem.

Regards.

7
super
super
2/22/2013 2:59:37 PM
6018 Reputation 709 Total posts

So I did this:

/**** Slideshow - START ****/
.slides
{
    width: 100%;
    height: auto;
    z-index: 100;
}
.slides_container
{
    width: 100%;
    height: 260px;
    overflow: hidden;
    position: relative;
    display: block;
}
.slides .slide
{
    width: 570px;
    display: block;
}
.slides .slide H2
{
    font-size: 48px;
    line-height: 50px;
}
But still I see blank space under the slide on a mobile phone device.

I even tried changing both height of slide and container to auto then I can't even see the slide...
plz help ?

8
ivanb
ivanb
2/22/2013 3:35:38 PM
459 Reputation 55 Total posts

Did you check heights of slider in your layout.css file? You should set those heights according to layout breaking points.
Before that, set height back to original value (in default.css).

Please reply when you try.

Regards

9
super
super
2/22/2013 3:53:13 PM
6018 Reputation 709 Total posts

Ivanb,
 
Sorry I am not sure what exactly you mean by "You should set those heights according to layout breaking points. "

The above code and css that I posted is exactly what I have on my website.

fyi...the dimensions of my slides is 770px width X 250px height...so based on that if you could advise how my css should look, that would be appreciated...

and also if you could check by looking at my default.aspx code above to see if my slideshow code inside the div is correct or not ? if no, how it should be ?

10
1 2
This is a demo site for MonoX. Please visit Mono Software for more info.