+1-888-365-2779
Try Now
More in this section

Forums / Designing with Sitefinity / Border style hardcoded into control

Border style hardcoded into control

9 posts, 0 answered
  1. Jon
    Jon avatar
    6 posts
    Registered:
    20 Nov 2007
    12 May 2009
    Link to this post
    I would like to put a my own border style on the thumbnails in the gallery component dropped into a sitefiniy page, yet the border of 0px is hardcoded into the img tag.  

    Where do I edit that so it isn't in the img tag.  
    How to I place a class on the image tag?
    Basically, how to I get a white border on the thumbnails in the gallery?

    I went into the advanced/appearance tab of the control and added a class of "gallery" and it didn't display in the html anywhere.  In fact, it didn't apply any of the settings I selected in this tab.   And this is a sample of the html output.

    <ol class="sf_photoListLightbox">
      <li>
        <dl>
          <dd class="sf_image"><a id="ctl00_Content_ImageGallery1_ctl00_ctl00_repeater_ctl01_DownloadLink" title="_MG_0118" rel="lightbox[images]" href="../Libraries/The_Bands/MG_0118.sflb.ashx"><img title="_MG_0118" src="/Libraries/The_Bands/MG_0118.tmb.ashx?width=150&amp;height=150&amp;decreaseOnly=true&amp;proportional=true" style="border-width:0px;" /></a></dd>
        </dl>
      </li>
    </ol>
  2. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    13 May 2009
    Link to this post
    Hello Jon,

    I suggest that you set border to lightbox thumbnails via CSS. So in your site theme CSS file (~/App_Themes/ Your-Site-Theme) add the CSS rules from below.

    ol.sf_photoListLightbox li 
        width: 152px !important; 
    ol.sf_photoListLightbox li dd.sf_image 
        width: 152px !important; 
        height: 152px !important; 
    ol.sf_photoListLightbox li dd.sf_image img 
        border: 1px solid #fff !important; 

    These rules will add border of 1px around all lightbox thumbnails. If you want greater border make sure you increase width and height properties that I have highlighted. For example, if you want 3px border, set width and height to 156px.

    Greetings,
    Katia
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. Jon
    Jon avatar
    6 posts
    Registered:
    20 Nov 2007
    13 May 2009
    Link to this post
    Border works perfect thank you.

    BUT, when I click on a photo it gets larger and the menu is showing ni the image/ontop of the image.  This is when I click a thumbnail and the lighbox image opens.  The main nav is over the image.

    http://sgr.lpstaging.net/Vapor-Nightclub/Photo-Gallery.aspx
  4. Coolhand
    Coolhand avatar
    12 posts
    Registered:
    13 Dec 2007
    13 May 2009
    Link to this post
    Change the z-index properties in the lightbox css file (/Sitefinity/ExternalLibraries/lightbox/css/lightbox.css) to something greater than that of the RadMenu. The default z-indexs for the Rad Controls can be found here.

    #lightbox { // Line 1
        ...
        z-index: 110 // Change to 7110
    }

    #overlay { // Line 73
        ...
        z-index: 100 // Change to 7100
    }

    Note: In 3.6 sp1 the #lightbox z-index has already been changed but not the #overlay z-index.
  5. Luc Baeten
    Luc Baeten avatar
    169 posts
    Registered:
    23 Sep 2005
    28 May 2009
    Link to this post
    Hello Katia

    I also try to make changes to the border of the uploaded images in the image gallery. Default each thumbnail image has a gray left and top border; the right and bottom borders are white.
    I added your suggestions to my stylesheet. Now I see my border around the image, but the gray left and top borders are still visible.
    It seems as if they are part of the generated thumbnail image itself. Is there a way to remove these top and left borders from the thumbnail image?

    Regards
    Luc
  6. Parvan
    Parvan avatar
    151 posts
    Registered:
    24 Sep 2012
    01 Jun 2009
    Link to this post
    Hi Luc Baeten,

    All images are displayed in their original form - without changes. The thumbnails are scaled to small size from the original. The problem with Image Gallery may be caused from the embedded css files. If you are using your own styles be sure to remove the embedded file references.

    Remove the embedded CSS files for ImageGallery
     
    You will need to disable the embedded css files. In order to do this you need to download the external templates and follow the instructions:
    1. Edit the ~/App_Data/Configuration/Telerik.Sitefinity.Configuration.ControlsConfig.xml :
    <?xml version="1.0" encoding="utf-8"?>  
    <controlsConfig>  
      <viewMap>  
          <viewSettings hostType="Telerik.Libraries.WebControls.ImageGallery"
          <additionalTemplates> 
            <add key="SimpleListTemplatePath" layoutTemplatePath="~/Sitefinity/ControlTemplates/Libraries/GallerySimpleList.ascx" /> 
            <add key="OnePerPageTemplatePath" layoutTemplatePath="~/Sitefinity/ControlTemplates/Libraries/GalleryOnePerPageList.ascx" /> 
            <add key="ListViewItemTemplatePath" layoutTemplatePath="~/Sitefinity/ControlTemplates/Libraries/GalleryListViewItem.ascx" /> 
            <add key="ListViewTemplatePath" layoutTemplatePath="~/Sitefinity/ControlTemplates/Libraries/GalleryListView.ascx" /> 
            <add key="LightBoxListTemplatePath" layoutTemplatePath="~/Sitefinity/ControlTemplates/Libraries/GalleryLightboxList.ascx" /> 
          </additionalTemplates> 
        </viewSettings>  
      </viewMap>  
    </controlsConfig>  
     
    2. Edit the template you are using for the Image Gallery - delete the references to embedded css files you do not want to use. Here is how to do that for the GalleryItemList.ascx (delete the highlighted-in-green line):
     
    <%@ Control Language="C#" %> 
     
    <telerik:CssFileLink ID="CssFileLink1" FileName="" 
     Media="screen" runat="server" EmbeddedFileName="Telerik.Libraries.Resources.ControlTemplates.Frontend.librariesCommonLayout.css"  /> 
     
    <asp:HyperLink ID="backLink" runat="server" Text="<%$Resources:Gallery_GoBack %>" /> 
     
    3. Restart IIS, so changes will take effect.

    I hope this information helps you.

    All the best,
    Parvan
    the Telerik team

    Instantly find answers to your questions on the newTelerik Support Portal.
    Check out the tipsfor optimizing your support resource searches.
  7. Luc Baeten
    Luc Baeten avatar
    169 posts
    Registered:
    23 Sep 2005
    05 Jun 2009
    Link to this post
    Hello Parvan

    I am using Sitefinity 3.5 in this project and was using GalleryListViewtemplate.aspx. In the top of this template the css file isreferenced

    <

     

    sfWeb:CssFileLink ID="CssFileLink1" FileName="~/Sitefinity/ControlTemplates/Libraries/librariesCommonLayout.css" Media="screen" runat="server" />

    In this file I tried to make changes to the border of the thumbnail but without success. It still seems to be part of the thumbnail itself.
    To make it look better I added a border at the bottom and right of the image within the css

     

    ol.sf_photoListLightbox

     

    li dd.sf_image img, ol.sf_listAndPage li dd.sf_image img
    {
    cursor:pointer;
    vertical-align: bottom;
    height: 64px;
    position: absolute;
    left: 0;
    bottom: 0;
    border-right: 1px solid #CACACA !important;
    border-bottom: 1px solid #CACACA !important;
    }

     

     

    But in fact I don't wanty to have a border at all. Hope you can help to solve this problem

    Regards
    Luc

  8. Parvan
    Parvan avatar
    151 posts
    Registered:
    24 Sep 2012
    11 Jun 2009
    Link to this post
    Hello Luc Baeten,

    The problem is related to resize algorithm of .NET class - Unwanted border appears in resulting image
    In next release of Sitefinity there will be option in web.config allowing you to change the resize algorithm parameters.

    Meanwhile we will look if there is a workaround will post it here.

    All the best,
    Parvan
    the Telerik team

    Instantly find answers to your questions on the newTelerik Support Portal.
    Check out the tipsfor optimizing your support resource searches.
  9. Luc Baeten
    Luc Baeten avatar
    169 posts
    Registered:
    23 Sep 2005
    11 Jun 2009
    Link to this post
    Hello Parvan

    Thank you for the information.
    As workaround I was able to hide the border by moving the div 1px upwards and to the left so that the border is not visible anymore

    regards
    Luc
Register for webinar
9 posts, 0 answered