Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Clare 2 posts 73 karma points
    May 15, 2016 @ 20:06
    Clare
    0

    Images with centered overlay text

    Hi All,

    I'm new to Umbraco, so go easy on me. :)

    I am building a site that requires a centered text overlay on an image (similarly to what would appear on a fullscreen site banner with a bit of blurb).

    What would be the best way to do this, please? Also, since I couldn't choose a text colour in a Headline data type, I configured some extras into TinyMCE for text colour - is there any way just to pick a text colour in the headline editor?

    Many Thanks,

    Clare

  • Nathan Woulfe 447 posts 1665 karma points MVP 5x hq c-trib
    May 16, 2016 @ 06:19
    Nathan Woulfe
    0

    Hi Clare

    I'd break down the the image+text element into it's basic components:

    • image -> media picker
    • headline -> textstring/textbox multiple
    • text color -> color picker
    • header link -> content picker

    You could create a document type using those properties (which would allow you to create multiple headers so you could show a random one, or build a slideshow etc), and then render it in the appropriate page.

    I haven't used the colorpicker property editor, but can't imagine it would be difficult to get the data value for the front-end. It's a better approach than a style in the RTE as it gives you scope to use the same color in other parts of the page, not just RTE text.

  • Dennis Adolfi 1082 posts 6450 karma points MVP 6x c-trib
    May 16, 2016 @ 06:31
    Dennis Adolfi
    0

    Exacly, and the colorpicker is really easy to use, you just fetch the values like any other property like #@(CurrentPage.TextColor) and it will come out ´#00FF0´. However the built in colorpicker in Umbraco only alows you to select from a few pre-defined colors that you set up on the datatype (this could maybe be what you want since it gives you more power over the layout) but if you like the ability to have every possible color, i would recommend this package: https://our.umbraco.org/projects/backoffice-extensions/spectrum-colour-picker/

    Built in colorpicker:

    enter image description here

    Spectrum Colour Picker:

    enter image description here

    Best of luck to you!!

  • Nathan Woulfe 447 posts 1665 karma points MVP 5x hq c-trib
    May 16, 2016 @ 06:36
    Nathan Woulfe
    1

    The idea of giving content authors that much control scares me. I can only imagine the putrid rainbows I'd be dismantling...

  • Dennis Adolfi 1082 posts 6450 karma points MVP 6x c-trib
    May 16, 2016 @ 06:55
    Dennis Adolfi
    0

    Haha i know. We did this for a client who insited he wanted to select colors for him self, even though we said that we could set up a bunch of pre-defined colors that go well with the layout.

    As you could imagine, not many days later the website looked like a bowl of Skittles. :)

    As a developer i like the colorpicker better when i build sites, but i thought i present the spectrum colorpicker as well for Clare since im not sure if the website she is building have a client (could be a personalt website/blog).

  • Clare 2 posts 73 karma points
    May 18, 2016 @ 10:57
    Clare
    1

    Thank you all for your replies! Notifications were going to my junk folder, so I didn't realise.

    This is my first foray into CMSs and I'm completely lost, to be honest. I apologise if my questions seem silly. I am new-ish to web dev and my only experience is with MVC. Ordinarily, I'd just create a div to contain the image and then nest the text inside of that - I found this awkward to do with Umbraco, but I probably haven't given it enough of a try.

    Nathan, I really liked your suggestion. and yes, I agree that it would probably not end well, but the client wants full content management across their entire site, including the ability to make it look like a birthday cake.

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies