Search in:

MonoX support board

Start the conversation, ask questions and share tips and solutions with fellow developers.

Non-registered users can only browse through our support boards. Please register now if you want to post your questions. It takes a second and it is completely free. Alternatively, you can log in without registration using your credentials at major sites such as Google, Microsoft Live, OpenId, Facebook, LinkedIn or Yahoo.
Back to all discussion topics

Where to edit the homepage banner dimensions ?  (Mono Support )

Viewed 34259 time(s), 19 post(s) 2/13/2013 9:34:58 PM,  by super
super

super

2/13/2013 9:34:58 PM
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 ?
This content has not been rated yet. 
6018 Reputation 709 Total posts
mzilic

mzilic

2/14/2013 11:17:43 AM
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
This content has not been rated yet. 
2218 Reputation 300 Total posts
super

super

2/21/2013 7:10:20 PM
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 ?



This content has not been rated yet. 
6018 Reputation 709 Total posts
khorvat

khorvat

2/22/2013 8:48:20 AM
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
This content has not been rated yet. 
15993 Reputation 2214 Total posts
Andrej

Andrej

2/22/2013 9:38:41 AM
 Could you provide us with the screenshot or a link so we can check it out?
This content has not been rated yet. 
284 Reputation 3 Total posts
super

super

2/22/2013 1:20:35 PM
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 ?




This content has not been rated yet. 
6018 Reputation 709 Total posts
ivanb

ivanb

2/22/2013 1:42:07 PM
Hi Super,
try set your image height to auto in css. That should solve your problem.

Regards.
This content has not been rated yet. 
459 Reputation 55 Total posts
super

super

2/22/2013 2:59:37 PM
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 ?
This content has not been rated yet. 
6018 Reputation 709 Total posts
ivanb

ivanb

2/22/2013 3:35:38 PM
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
This content has not been rated yet. 
459 Reputation 55 Total posts
super

super

2/22/2013 3:53:13 PM
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 ?
This content has not been rated yet. 
6018 Reputation 709 Total posts
1 2
MonoX Nightly Builds MonoX Gallery MonoX Roadmap Mono Software at GitHub
Additional Resources

  • Send us an e-mail

MonoX is a Mono product. mono