Pretražuju se:

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.
Vrati se nazad na sve teme

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

36971 put(a) pogledan, 19 odgovor(a) 13.2.2013. 21:34:58,  Kreirao(la) super
super

super

13.2.2013. 21:34:58
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 ?
Ovaj sadržaj još nije ocijenjen. 
6018 Reputacija 709 Ukupno objava
mzilic

mzilic

14.2.2013. 11:17:43
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
Ovaj sadržaj još nije ocijenjen. 
2218 Reputacija 300 Ukupno objava
super

super

21.2.2013. 19:10:20
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 ?



Ovaj sadržaj još nije ocijenjen. 
6018 Reputacija 709 Ukupno objava
khorvat

khorvat

22.2.2013. 8:48:20
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
Ovaj sadržaj još nije ocijenjen. 
15993 Reputacija 2214 Ukupno objava
Andrej

Andrej

22.2.2013. 9:38:41
 Could you provide us with the screenshot or a link so we can check it out?
Ovaj sadržaj još nije ocijenjen. 
284 Reputacija 3 Ukupno objava
super

super

22.2.2013. 13:20:35
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 ?




Ovaj sadržaj još nije ocijenjen. 
6018 Reputacija 709 Ukupno objava
ivanb

ivanb

22.2.2013. 13:42:07
Hi Super,
try set your image height to auto in css. That should solve your problem.

Regards.
Ovaj sadržaj još nije ocijenjen. 
459 Reputacija 55 Ukupno objava
super

super

22.2.2013. 14:59:37
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 ?
Ovaj sadržaj još nije ocijenjen. 
6018 Reputacija 709 Ukupno objava
ivanb

ivanb

22.2.2013. 15:35:38
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
Ovaj sadržaj još nije ocijenjen. 
459 Reputacija 55 Ukupno objava
super

super

22.2.2013. 15:53:13
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 ?
Ovaj sadržaj još nije ocijenjen. 
6018 Reputacija 709 Ukupno objava
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