elemental image slider - line up
Permalink
I'm building a site with 5.7 using Elemental theme. I notice in the demo files the text in the image slider lines up with the site title above. However, when I add text in the image slider it ends up much more to the right (see attached)
I have looked at the C5.7 demo files and the size of the demo slider image is 1100 x 368, partly transparent. My image is 1200 x 200, and I even tried a larger size (1600 x 200) but it still comes out the same. So the size of the image can't be the cause of this.
I have tried all 4 page layouts (full, blank, right/left sidebar) but no difference.
Can anyone explain why the text is not positioned as it is in the demo and how to change this?
I have looked at the C5.7 demo files and the size of the demo slider image is 1100 x 368, partly transparent. My image is 1200 x 200, and I even tried a larger size (1600 x 200) but it still comes out the same. So the size of the image can't be the cause of this.
I have tried all 4 page layouts (full, blank, right/left sidebar) but no difference.
Can anyone explain why the text is not positioned as it is in the demo and how to change this?
Sorry, didn't give the link because it was in maintenance mode - but changed that nowhttp://rondomafscheid.nl/test/index.php...
The text is positioned on your site the same way it is in the Elemental demo content. You don't notice that the text is positioned all the way to the left because the slider images have transparent backgrounds.
This is the CSS that positions the text for your site and the demo.
- left: 0; positions the text all the way to the left
You can increase the left position to push it to the right.
- left: 25px; positions the text 25px away from the left side (pushes it to the right)
I have attached screenshots with backgrounds and outlines to explain.
This is the CSS that positions the text for your site and the demo.
.ccm-image-slider-text { position: absolute; width: 45%; left: 0; top: 10%; }
- left: 0; positions the text all the way to the left
You can increase the left position to push it to the right.
.ccm-image-slider-text { position: absolute; width: 45%; left: 25px; top: 10%; }
- left: 25px; positions the text 25px away from the left side (pushes it to the right)
I have attached screenshots with backgrounds and outlines to explain.
Thank you very much for the explanation, it's been a great help in that I understand a bit better now where and how these things are handled.
I know how I can move things to the right, would never have known where to look for this code. It is confusing to me that some css for the slider should be in the Concrete files (the block you quote I found in view.css of the image slider block) whereas other css that governs the slider is in the theme files. Why aren't these things together?
However, this does not solve my problem, for it is not that the text is too much to the left in the image, but rather that it does not line up with the site title above. In your screenshot it does, but in mine it does not (strange! !?!) Not with my own image and not with the demo image. See attached.
I have been studying a little more and I think it is because the image itself doesn't properly scale. I have very wide screen but the image behaves, I think, as if I was working on a smaller screen. As you can see in my screenshot the site title and the nav bar are for a wider screen than the image.
Ii have been looking at some media queries and also compared some files of the original Elemental theme and my copy but did not detect any differences and do not understand where else to look and for what exactly.
Even if I had no text in the slider I'd still like the image to scale properly. And I know there is a how-to about scaling the title text and paragraph, which I may do once I get the image to behave.
(I had other problems with responsiveness, when I added a text block without any lay-out it didn't scale, with lay-out it scales allright when I use bootstrap grid but not with a free grid. This is another issue, I only mention it in case there is a relation.)
I know how I can move things to the right, would never have known where to look for this code. It is confusing to me that some css for the slider should be in the Concrete files (the block you quote I found in view.css of the image slider block) whereas other css that governs the slider is in the theme files. Why aren't these things together?
However, this does not solve my problem, for it is not that the text is too much to the left in the image, but rather that it does not line up with the site title above. In your screenshot it does, but in mine it does not (strange! !?!) Not with my own image and not with the demo image. See attached.
I have been studying a little more and I think it is because the image itself doesn't properly scale. I have very wide screen but the image behaves, I think, as if I was working on a smaller screen. As you can see in my screenshot the site title and the nav bar are for a wider screen than the image.
Ii have been looking at some media queries and also compared some files of the original Elemental theme and my copy but did not detect any differences and do not understand where else to look and for what exactly.
Even if I had no text in the slider I'd still like the image to scale properly. And I know there is a how-to about scaling the title text and paragraph, which I may do once I get the image to behave.
(I had other problems with responsiveness, when I added a text block without any lay-out it didn't scale, with lay-out it scales allright when I use bootstrap grid but not with a free grid. This is another issue, I only mention it in case there is a relation.)
OK, I understand what you are asking now. I thought you were referring to the Image Slider title.
Regarding why some block CSS is in the theme and some is in the block itself. Core blocks are designed with minimal styling, providing just enough styling to provide basic structure. This allows for customizing the block further with your own CSS in your theme. If blocks were completely unstyled by default, they would just be lumps of vertical text and images. Completely styled blocks by default would require overriding CSS for anything you wanted to change. Both options would be time consuming and add complications.
The image scaling is responsive and controlled by these styles.
Did you modify the Image Slider CSS?
The width was changed from 100% to 83.33333333%
There is an additional style that adds margin-left
These two changes are what was changing the alignment. If the width is set to 100% and the margin-left is commented out/removed, then the image lines up.
I have included screenshots of your site after the original styles are restored.
Regarding why some block CSS is in the theme and some is in the block itself. Core blocks are designed with minimal styling, providing just enough styling to provide basic structure. This allows for customizing the block further with your own CSS in your theme. If blocks were completely unstyled by default, they would just be lumps of vertical text and images. Completely styled blocks by default would require overriding CSS for anything you wanted to change. Both options would be time consuming and add complications.
The image scaling is responsive and controlled by these styles.
div.ccm-page img { max-width: 100%; } .rslides img { display: block; height: auto; float: left; width: 100%; border: 0; }
Did you modify the Image Slider CSS?
The width was changed from 100% to 83.33333333%
@media (min-width: 1200px) { div.ccm-page .ccm-image-slider-container.ccm-block-image-slider-arrows .ccm-image-slider-inner { float: left; width: 83.33333333%; } }
There is an additional style that adds margin-left
@media (min-width: 1200px) { div.ccm-page .ccm-image-slider-container.ccm-block-image-slider-arrows .ccm-image-slider-inner { margin-left: 8.33333333%; } }
These two changes are what was changing the alignment. If the width is set to 100% and the margin-left is commented out/removed, then the image lines up.
I have included screenshots of your site after the original styles are restored.
MrKDilkington, thank you once again very much for the explanation. It is all quite clear and I see what you mean. I looked at the CSS in Firefox myself and I found the 83 and 8.3 percentages all right.
But I cannot for the life of me figure out where they come from. I have some trouble figuring out how the css is built up anyway, even with Firefox webdeveloper -but I understand css is imported into main from a whole list of other files. Including image-slider/view.css, but I never edited that at all and the percentages there are as they should be. The correct settings are imported but later the 83/8.3 settings are added, that I can see in main.css, where these percentages turn up at the end of the code relating to the slider.
I checked all the files I could think of and compared them to the original ones but could find no differences, except for a couple of small changes I made for padding/margin bottom or top (NOT left/right).
I am also pretty certain that I never added these percentages as such, it's the kind of thing I find quite tricky and I would have remembered typing 83.33333%.
As I do not know where these percentages come from I cannot correct them, so tried to overrule them by pasting in your code at the bottom of main.less but that didn't work.
Btw, is it normal that the location of main.css is a cache-folder? I figured that's probably how it works with .less files?
(I switched off caching and cleared them in browser and Concrete also manually several times)
I think I'd better think of another solution for what I wanted to do (image with text overlay).
Although of course it is extremely annoying not to understand where the error lies!
But I cannot for the life of me figure out where they come from. I have some trouble figuring out how the css is built up anyway, even with Firefox webdeveloper -but I understand css is imported into main from a whole list of other files. Including image-slider/view.css, but I never edited that at all and the percentages there are as they should be. The correct settings are imported but later the 83/8.3 settings are added, that I can see in main.css, where these percentages turn up at the end of the code relating to the slider.
I checked all the files I could think of and compared them to the original ones but could find no differences, except for a couple of small changes I made for padding/margin bottom or top (NOT left/right).
I am also pretty certain that I never added these percentages as such, it's the kind of thing I find quite tricky and I would have remembered typing 83.33333%.
As I do not know where these percentages come from I cannot correct them, so tried to overrule them by pasting in your code at the bottom of main.less but that didn't work.
Btw, is it normal that the location of main.css is a cache-folder? I figured that's probably how it works with .less files?
(I switched off caching and cleared them in browser and Concrete also manually several times)
I think I'd better think of another solution for what I wanted to do (image with text overlay).
Although of course it is extremely annoying not to understand where the error lies!
If you are interested in customizing themes based on Elemental, you will need to learn the basics of Less. If you understand CSS, then learning Less is fairly straight forward.
http://lesscss.org/features/
CSS written with Less is compiled. The .less files in the Elemental theme are all merged together into a single file called main.css. Any changes made to main.css will be lost when the cache is cleared or refreshed.
Any additional CSS or modifications need to be put in main.less.
I think I know what the problem may be. Did you place the Image Slider block in a custom layout? A margin-left: 8.33333333%; is used in the Bootstrap CSS for column offsets and width: 83.33333333%; is used in the Bootsrap CSS for grid columns of ten.
http://lesscss.org/features/
CSS written with Less is compiled. The .less files in the Elemental theme are all merged together into a single file called main.css. Any changes made to main.css will be lost when the cache is cleared or refreshed.
Any additional CSS or modifications need to be put in main.less.
I think I know what the problem may be. Did you place the Image Slider block in a custom layout? A margin-left: 8.33333333%; is used in the Bootstrap CSS for column offsets and width: 83.33333333%; is used in the Bootsrap CSS for grid columns of ten.
Yes I know one can't really get anywhere without some understanding of Less and Bootstrap. I've been using Concrete for a number of years, always for modest websites, managing quite well with some knowledge of html and CSS. When these Bootstrap-themes started to appear and CSS changed with LESS etc I got stuck and over the past months did indeed study a bit of Bootstrap and Less.
I understand why everything has become so much more complex but it is a headache for allrounders like me who build small simple sites. I am not a developer and I need a stable, up-to-date framework, web-based, which takes care of all the basics and provides templates or add-ons for forms, image galleries etc.
But then when I have to change something 'small' myself, like using italics for the site name or making sure it does not break and run over two lines, I need to look further and that has become a lot more difficult.
I'm not averse to learning new things it's just that at the moment the investment for me is huge compared to the advantages. And the documentation is pretty minimal.
So, in short: I'm very happy with this forum and grateful for the responses for I couldn't get anywhere without it.
I'm not sure about the 'solution' you suggest. I created a new empty page with a slider and the result was exactly the same. I was going to do a new install just for testing purposes but there's a problem with the webhoster so I haven't come round to that yet. Once I have that set up I will try the slider once more.
Thank you once again for all your help, although we haven't managed to sort it all out I've learned a lot!
I understand why everything has become so much more complex but it is a headache for allrounders like me who build small simple sites. I am not a developer and I need a stable, up-to-date framework, web-based, which takes care of all the basics and provides templates or add-ons for forms, image galleries etc.
But then when I have to change something 'small' myself, like using italics for the site name or making sure it does not break and run over two lines, I need to look further and that has become a lot more difficult.
I'm not averse to learning new things it's just that at the moment the investment for me is huge compared to the advantages. And the documentation is pretty minimal.
So, in short: I'm very happy with this forum and grateful for the responses for I couldn't get anywhere without it.
I'm not sure about the 'solution' you suggest. I created a new empty page with a slider and the result was exactly the same. I was going to do a new install just for testing purposes but there's a problem with the webhoster so I haven't come round to that yet. Once I have that set up I will try the slider once more.
Thank you once again for all your help, although we haven't managed to sort it all out I've learned a lot!
What is the link to your website?