Announcement

Collapse
No announcement yet.

New Slider....how do you configure it to show pictures

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Wayne Luke
    replied
    I'd have to look at the code by you may not be able to justify the text if it isn't in a block element.

    We're looking at controlling the text color and background color via Stylevars.

    Leave a comment:


  • jdj
    replied
    Originally posted by Wayne Luke View Post
    You can change it in additional CSS as well as add additional CSS code to get the look you want.
    I tried adding the .slideshow .caption etc. code together with either text-align: left; or text-align: justify; to css_additional, for my live template. I hit save and reload, cleared the cache. In both cases nothing changed. I used this:

    .slideshow .caption {
    color:#FFF;
    font-size:12px;
    height:50px;
    margin:0px 30px;
    text-align: left;
    }

    .slideshow .caption {
    color:#FFF;
    font-size:12px;
    height:50px;
    margin:0px 30px;
    text-align: justify;
    }

    where did I go wrong? And what code should I have used in css_additional?

    For the benefit of anybody else trying to use this what I've been trying to do is get the image to display in the sidebar without the image being truncated and without the slogan obscuring the image. Having tried and failed to do that I tried creating a separate PNG of precisely the same size and width of the default background png with the top half of that png black and the bottom white (the slogan text appears black and in the bottom half of the slider window) in the centre column of a 15/75/15 layout. That does actually work on a desktop (not tried on a handheld yet) but you've got to be careful with the height settings in the slider; you need to leave them set to 0.

    Leave a comment:


  • Wayne Luke
    replied
    You can change it in additional CSS as well as add additional CSS code to get the look you want.

    Leave a comment:


  • deve@speedprint.com
    replied
    text-align: left;

    personally, I like text-align: justify for most of my articles. Then it just wraps around the images and lines up on both sides nice and square. We need a button for that!

    Leave a comment:


  • jdj
    commented on 's reply
    The problem is that the image contains white writing in it. If I change the image so that the bottom third is white the caption block text appears as black and it stands out.

    PS: I can see that the code says color:#FFF but the text on my test site appears in black without changing the CSS
    Last edited by jdj; Fri 27th Feb '15, 7:15am.

  • jdj
    replied
    Originally posted by Wayne Luke View Post
    The caption text is currently hardcoded in vbulletin_global.css.

    Code:
    .slideshow .caption {
    color:#FFF;
    font-size:12px;
    height:50px;
    margin:15px 30px;
    }
    As it is white, it should show up on dark images. However there is no way to tell whether an image is dark or light or change the color of the caption text based on this. It really should have a defined background-color as well.

    http://tracker.vbulletin.com/browse/VBV-14372
    So presumably I can change this in css_additional then? What do I change to get the text to left align? Do I just stick in

    .slideshow .caption {
    color:#FFF;
    font-size:12px;
    height:50px;
    margin:0px 30px;
    }
    Last edited by jdj; Fri 27th Feb '15, 7:13am.

    Leave a comment:


  • deve@speedprint.com
    replied
    Makes sense that the sizing has to do with bootstrap compliance and cell phone compatibility. On all my websites I use 32% just to be sure.

    Leave a comment:


  • Wayne Luke
    replied
    The caption text is currently hardcoded in vbulletin_global.css.

    Code:
    .slideshow .caption {
        color:#FFF;
        font-size:12px;
        height:50px;
        margin:15px 30px;
    }
    As it is white, it should show up on dark images. However there is no way to tell whether an image is dark or light or change the color of the caption text based on this. It really should have a defined background-color as well.

    http://tracker.vbulletin.com/browse/VBV-14372

    Leave a comment:


  • jdj
    replied
    I'm trying to deploy the content slider on vB5.1.5.

    I've found by trial and error that if I make an attached image the first attachment in a post which I then feature, the image will display in the slider, but only if I choose the thumbnail option when I upload.

    What happens when I upload the image is that the text that appears from the post itself (the title and first few words of the post), that I believe are called the caption block, appear over the top of the image in the slider. But the text appears as black and there is nowhere that I can see in the stylevars to change the colour of the text so that it does not stand out against a dark image.

    I've got around that on my test site by creating a new gif with the bottom third of the first attached image blocked out by a white rectangle so that the text in the caption block stands out in the slider. Is there any other way to change the colour of the text in the caption block? You appear to be able to change the background colour of the caption block in the stylevars, but not the colour of the font.

    Also, when the text appears in the content slider it is not left aligned, so the slider chops off most of the text in both the title and the first few words of the post. Is there any way to set it so that it's left-aligned?

    Leave a comment:


  • Wayne Luke
    commented on 's reply
    The problem with the slider and responsive is that it escapes the bounds of its container if the container is resized, not the background image display. If you put the content slider in a 30% width column, it should work fine on most devices. If you put it in a 70% or 100% width column, it can break. Some devices will force a resize on it anyway though.

    The Caption Block is the text that contains the title of the featured topic.

  • jdj
    commented on 's reply
    Thanks. I've just noticed the new stylevars under Module Contentslider.

    - I can see that the height of the content slider is set under module_contentslider_height and that the default is set to 200px high. [I've just noted you can also change that from the default of 200px each time you deploy the module by editing the configuration for the content slider in site builder].

    - I can see that the background colour and image are set under module_contentslider_background: It looks as though you can set an image 1px wide then choose 'repeat' so I'm guessing if you set that it will then fill an appropriate proportion of the page filled by the module. Is responsive design more likely to work if you do this? Or does it matter?

    Also: the stylevar module_contentslider_caption_background tells me it controls the '...background for the Content Slider module caption block.' What is the 'Content Slider module caption block'?

  • Wayne Luke
    replied
    The slider will center and scale the image to fill the space. This gives the best results with moderately sized images. 1440 X 900 or larger.

    Leave a comment:


  • jdj
    replied
    Originally posted by Wayne Luke View Post
    Is the image inserted with the [IMG] bbcode? If so, it won't be used. It needs to be actually attached to the post. Attached images can still be inserted inline. There is no configuration. It will only use the first attached image on a post.
    OK, that works thank you. It doesn't pick up an image inserted into a post but it does pick up the first attachment if there's an attachment.

    It doesn't appear to resize the attachment. So with the test post I've done so far it appears to display part of the image. Can you give any more detail on the size of images it displays? E.g., if you wanted the slider to display the entire first attached image, what size would it have to be?

    Leave a comment:


  • jdj
    commented on 's reply
    I did that, it made no difference. I'm guessing it's something to do with Wayne's previous post.

  • jdj
    commented on 's reply
    OK...so it's attachments only. Thanks for the info.
widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
Working...
X